Back to Details

ui-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/ui-design

/ui-design

Generate HTML UI mockups with optional parallel variant exploration.
生成HTML UI原型，支持可选的并行变体探索。

Usage

使用方法

bash
/ui-design yourbench "login screen"
/ui-design yourbench "dashboard" --variants 3
/ui-design coordinatr "project list" --tech shadcn
/ui-design yourbench list                    # Show existing designs
bash
/ui-design yourbench "login screen"
/ui-design yourbench "dashboard" --variants 3
/ui-design coordinatr "project list" --tech shadcn
/ui-design yourbench list                    # 查看已有原型

Where Designs Live

原型存储位置

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
Why in ideas/? Designs are planning artifacts, not code.
ideas/yourbench/docs/ui-designs/
├── login-screen-v1.html
├── login-screen-v2a.html      # 变体A
├── login-screen-v2b.html      # 变体B（已批准）
├── dashboard-v1.html
└── components/
    └── button-variants.html
为什么存放在ideas目录下？ 原型属于规划产物，而非正式代码。

Execution Flow

执行流程

1. Parse Request

1. 解析请求

  • Project (yourbench)
  • Design name (login screen)
  • Variant count (--variants 3)
  • Technology (--tech shadcn)
  • 项目名称（yourbench）
  • 原型名称（登录界面）
  • 变体数量（--variants 3）
  • 技术栈（--tech shadcn）

2. Load Context

2. 加载上下文

bash
Glob: ideas/[project]/docs/ui-designs/*.html
Read: shared/docs/style-guide.md
Read: ideas/[project]/project-brief.md
bash
Glob: ideas/[project]/docs/ui-designs/*.html
Read: shared/docs/style-guide.md
Read: ideas/[project]/project-brief.md

3. Generate Design(s)

3. 生成原型

Single design:
→ ideas/yourbench/docs/ui-designs/login-screen-v1.html
Multiple variants (parallel ui-ux-designer agents):
→ login-screen-v1a.html
→ login-screen-v1b.html
→ login-screen-v1c.html
单个原型：
→ ideas/yourbench/docs/ui-designs/login-screen-v1.html
多个变体（由ui-ux-designer并行生成）：
→ login-screen-v1a.html
→ login-screen-v1b.html
→ login-screen-v1c.html

4. Present Options

4. 展示选项

Created 3 login screen variants:

1. v1a.html - Minimal, centered form
2. v1b.html - Split screen with illustration
3. v1c.html - Card-based with social logins

View: open ideas/yourbench/docs/ui-designs/login-screen-v1a.html

Which direction? (a/b/c/iterate/combine)
已创建3个登录界面变体：

1. v1a.html - 极简居中表单样式
2. v1b.html - 带插画的分屏样式
3. v1c.html - 带社交登录选项的卡片样式

查看：open ideas/yourbench/docs/ui-designs/login-screen-v1a.html

选择哪个方向？(a/b/c/迭代/组合)

5. Iterate

5. 迭代优化

User requests changes:
  • "Move OAuth buttons below the form"
  • "Try a darker color scheme"
用户提出修改需求：
  • "将OAuth按钮移到表单下方"
  • "尝试深色配色方案"

6. Approve

6. 批准原型

User: approve v1b

AI: ✓ Marked login-screen-v1b.html as APPROVED

    Reference in TASK.md:
    "Implement login per docs/ui-designs/login-screen-v1b.html"
用户：approve v1b

AI：✓ 已标记login-screen-v1b.html为【已批准】

    在TASK.md中添加引用：
    "根据docs/ui-designs/login-screen-v1b.html实现登录功能"

Technology Options

技术选项

OptionDescription
--tech vanilla
Plain HTML/CSS/JS (default)
--tech shadcn
Styled for shadcn/ui with implementation hints
--tech chakra
Styled for Chakra UI
选项描述
--tech vanilla
纯HTML/CSS/JS（默认选项）
--tech shadcn
适配shadcn/ui的样式，并提供实现提示
--tech chakra
适配Chakra UI的样式

HTML Structure

HTML结构

Self-contained with embedded CSS/JS:
  • CSS variables from style-guide.md
  • Responsive breakpoints
  • Interactive behaviors
  • Metadata block at end (status, decisions, related specs)
自包含式结构，内嵌CSS/JS：
  • 从style-guide.md引入CSS变量
  • 响应式断点
  • 交互行为
  • 末尾的元数据块（状态、决策记录、相关规范）

Listing Designs

查看已有原型

bash
/ui-design yourbench list

UI Designs for yourbench:
├── login-screen-v1b.html [APPROVED]
├── dashboard-v1.html [DRAFT]
└── settings-v1a.html [DRAFT]
bash
/ui-design yourbench list

yourbench项目的UI原型：
├── login-screen-v1b.html [已批准]
├── dashboard-v1.html [草稿]
└── settings-v1a.html [草稿]

Integration with Implementation

与开发实现的集成

bash
/implement yourbench 001 1.3  # "Implement login UI"

AI: Found approved design: login-screen-v1b.html
    Implementing to match design...
Reference in TASK.md:
markdown
undefined
bash
/implement yourbench 001 1.3  # "实现登录UI"

AI：找到已批准的原型：login-screen-v1b.html
    正在根据原型实现功能...
在TASK.md中添加验收标准：
markdown
undefined

Acceptance Criteria

验收标准

  • Matches docs/ui-designs/login-screen-v1b.html
  • Responsive at 320px, 768px, 1280px
undefined
  • 与docs/ui-designs/login-screen-v1b.html的样式一致
  • 在320px、768px、1280px分辨率下均支持响应式
undefined

Best Practices

最佳实践

  1. Start with variants - Explore before converging
  2. Approve explicitly - Clear handoff to implementation
  3. Include metadata - Future you will thank you
  4. Test responsiveness - Check 320px, 768px, 1280px
  5. Document decisions - Why this approach?
  1. 从变体探索开始 - 先探索多种方案再收敛
  2. 明确批准原型 - 为开发交接提供清晰的依据
  3. 包含元数据 - 未来的你会为此感谢现在的自己
  4. 测试响应式 - 检查320px、768px、1280px分辨率下的表现
  5. 记录决策原因 - 说明选择该方案的理由