用途
ui-design 用于生成 HTML UI 原型稿（mockup），并将设计稿作为规划产物存放在 ideas/[project]/docs/ui-designs/ 目录中，而非作为代码。它支持在收敛前先并行探索多个设计变体，并在用户明确批准后，将设计稿交接给实现环节。
主要能力
- 生成 HTML UI 原型稿，输出到 ideas/[project]/docs/ui-designs/。
- 支持并行变体探索：通过 --variants 指定变体数量，由并行的 ui-ux-designer 智能体生成多个方案。
- 支持指定技术栈：--tech vanilla（默认，纯 HTML/CSS/JS）、--tech shadcn（按 shadcn/ui 风格并附实现提示）、--tech chakra（按 Chakra UI 风格）。
- 支持列出已有设计：/ui-design yourbench list。
- 支持迭代修改与批准：用户可要求调整（如移动 OAuth 按钮位置、尝试更深色系），并可用 approve 标记某个变体为 APPROVED。
- 与实现集成：/implement 可识别已批准的设计稿并按其实现，TASK.md 中可引用设计稿路径作为验收标准。
使用方式
命令示例：
- /ui-design yourbench "login screen"
- /ui-design yourbench "dashboard" --variants 3
- /ui-design coordinatr "project list" --tech shadcn
- /ui-design yourbench list
执行流程：
- 解析请求：项目、设计名称、变体数量（--variants）、技术（--tech）。
- 加载上下文：Glob 匹配 ideas/[project]/docs/ui-designs/*.html；读取 shared/docs/style-guide.md；读取 ideas/[project]/project-brief.md。
- 生成设计：单稿输出为 login-screen-v1.html；多变体（并行 ui-ux-designer 智能体）输出为 login-screen-v1a.html、login-screen-v1b.html、login-screen-v1c.html 等。
- 呈现选项：列出各变体及其风格描述，并询问方向（a/b/c/iterate/combine）。
- 迭代：根据用户反馈修改。
- 批准：用户 approve v1b 后，标记 login-screen-v1b.html 为 APPROVED，并可在 TASK.md 中引用，例如“Implement login per docs/ui-designs/login-screen-v1b.html”。
目录结构示例：
ideas/yourbench/docs/ui-designs/ ├── login-screen-v1.html ├── login-screen-v2a.html # Variant A ├── login-screen-v2b.html # Variant B (approved) ├── dashboard-v1.html └── components/ └── button-variants.html
列出设计示例：
/ui-design yourbench list
UI Designs for yourbench: ├── login-screen-v1b.html [APPROVED] ├── dashboard-v1.html [DRAFT] └── settings-v1a.html [DRAFT]
与实现集成示例：
/implement yourbench 001 1.3 # "Implement login UI"
AI: Found approved design: login-screen-v1b.html Implementing to match design...
TASK.md 引用示例：
Acceptance Criteria
- [ ] Matches docs/ui-designs/login-screen-v1b.html
- [ ] Responsive at 320px, 768px, 1280px
HTML 结构
生成的 HTML 为自包含文件，内嵌 CSS/JS，包含：来自 style-guide.md 的 CSS 变量、响应式断点、交互行为，以及文件末尾的元数据块（状态、决策、相关规格）。
适用场景
- 在正式实现前探索 UI 方向，先做多变体再收敛。
- 需要将设计稿作为规划产物与实现任务（TASK.md、/implement）衔接的工作流。
- 需要按指定前端技术栈（vanilla、shadcn、chakra）产出风格化原型稿。
限制
- 设计稿存放于 ideas/ 下，属于规划产物而非代码。
- 批准需用户显式执行（如 approve v1b），以便清晰交接给实现。
- 建议检查 320px、768px、1280px 响应式表现，并记录设计决策原因。
- 关于收费、价格、平台支持范围等信息，资料暂未提供。