Agent Skills
返回列表
SaaS 页面生成器

SaaS 页面生成器

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_61f43cdd/saas-ui-builder。

技能介绍

解决的问题

SaaS 后台页面容易在 Logo、导航、面包屑、表单、列表、仪表盘之间出现风格漂移：同一产品里的不同页面可能颜色、间距、组件状态不一致，导致后续维护时反复对齐。该技能面向 Next.js 的 SaaS 页面生成，把布局、菜单、内容区和图片资源约束在一套模板里，让页面输出更接近既定视觉规范。

工作方式

核心是将页面拆成三步：

  • 理解需求：确认页面类型、业务字段、左侧导航菜单项和默认文案。
  • 应用布局模板：复制 assets/layout-template.tsx、assets/layout-template.module.css，并将 assets/*.png 放入目标项目 public/ 目录。
  • 实现内容区：表单、列表、详情、仪表盘按 references/components.md 的组件规范落地，同时严格使用 references/design-tokens.md 的颜色、字体、间距。

布局采用 Flex 方案，侧边栏菜单有明确高度、图标尺寸、选中态和单选规则；page.tsx 与 page.module.css 放在 app/ 目录下，图片使用 public/ 绝对路径引用。它把视觉一致性从口头约定变成可复用文件，减少每次生成页面时的偏差。

适用边界

该技能默认服务“碳擎 SaaS”风格页面，页眉右上角默认文字为指定公司名。它不负责业务接口、权限体系、数据库设计或后端流程；若更换 Logo、头像、品牌资源，需要把图片文件一起分发到 public/，否则页面静态资源会缺失。

使用场景

  • 前端要在项目中新增表单页，并要求复用统一 Header、Sidebar 和表单组件规范。
  • 需要把列表页表格、筛选字段和空状态按同一套设计令牌与组件规范输出，避免样式漂移。
  • 做仪表盘时要把卡片、指标和布局放进固定 Header/Sidebar 结构，并检查颜色间距符合令牌。
  • 生成详情或聊天页时需要同步左侧菜单、面包屑、默认 Logo 和 public 图片资源。

适合人员

  • 负责维护 Next.js SaaS 后台的前端工程师，希望新页面快速套上统一布局与组件。
  • 需要交付“碳擎”风格 SaaS 页面的前端开发，要求颜色、间距和菜单状态不跑偏。
  • 把现有原型转成 Next.js 页面的全栈工程师，要固定 Header、Sidebar、表单和列表规范。
  • 需要分享可运行项目的前端工程师，确保 public 图片资源与页面模板一起分发。