| name | ui-prototype |
| description | UI 原型产出技能,按项目设计方向生成静态 HTML 原型,作为 Builder 的设计契约 |
UI 原型产出技能
触发条件
- 用户说「画个原型」「做个 UI 草图」「先出个设计看看」
- 用户说「生成 preview」
- Designer Agent 在 Plan 阶段被要求产出原型时
工作流程
Step 1:确定设计方向
原型必须按项目已定的设计方向来画,不凭空发挥。按优先级取方向(见 .agents/rules/design.md 优先级链):
preview/design-direction.md(由 /taste 探索产出)——最高权威,直接读它的色板、字体、圆角、阴影
- 项目 spec.md 中声明的设计方向
- 都没有 →
.agents/rules/design.md 的白底简约默认
还没有设计方向? 先让用户走 /taste 定向(详见 .agents/commands/taste.md),再回来生成原型——避免做完才发现"不对味"返工。不强制,用户也可直接用 design.md 默认先跑。
Step 2:产出原型
根据用户描述的页面需求 + 上一步确定的设计方向,生成静态 HTML 原型:
技术要求:
- 单个 HTML 文件,内联 CSS(无外部依赖)
- 移动端视口:
<meta name="viewport" content="width=device-width, initial-scale=1">
- 把设计方向里的色板/圆角/阴影落成 CSS 变量
- 语义化 HTML 结构
- 包含 2-3 个典型页面状态(如列表页、详情页、空状态)
输出:
- 保存到
preview/[页面名].html
- 用户可在浏览器直接打开预览
Step 3:确认与迭代
- 向用户展示原型预览(可用 Playwright 截图回看)
- 用户确认后,原型成为 Builder 的设计契约
- 用户要求修改时,直接更新
preview/ 中的文件
注意事项
- 原型不是最终代码,是设计契约
- Builder 实现时应还原原型的视觉效果,而非复制原型代码
- 设计方向由
/taste 探索、preview/design-direction.md 固化;本技能只负责把方向渲染成 HTML,不自己定方向
- 缺设计方向时,按
.agents/rules/design.md 白底简约默认产出,并提示用户可用 /taste 定向