ux-brief

设计系统生成器

通过引导式探索，创建全面且适合初级开发者使用的设计系统文档。

设计目标

<design_target> $ARGUMENTS </design_target>

如果为空，请询问：“你想设计什么？请描述组件、页面或功能。”

阶段 0：访谈选项（可选）

对于需求不明确的复杂功能，可先提供深度访谈：

AskUserQuestion: "This design could benefit from a requirements interview to clarify goals and constraints. Would you like to explore it in depth first?"
Options:
- "Yes, interview me first" → Skill(skill: "majestic-tools:workflows:interview", args: "[design target]"), then use refined output
- "No, proceed to design discovery" → Continue to Phase 1

建议进行访谈的情况：

• 设计目标模糊（例如，“仪表盘”“管理面板”）
• 涉及多种用户类型或利益相关者
• 未明确说明业务目标
• 用户似乎不确定自己想要什么

以下情况可跳过访谈建议：

• 组件具体且范围明确（例如，“登录表单”“设置页面”）
• 用户已有规格说明或模型图
• 对现有设计进行迭代

阶段 1：收集背景信息

提问前，先了解项目：

1. 检查是否已有设计令牌（tailwind.config.js、CSS 变量）
2. 查看现有 UI 组件，了解其模式
3. 确认技术栈（React、Vue、Rails/Hotwire、原生）
4. 检查是否有风格指南或品牌文档

阶段 2：探索问题

每次只问一个问题。选项范围明确时，优先采用选择题。

问题类别

1. 用途与目标——此 UI 想实现什么？
2. 目标受众——谁会使用此界面？
3. 美学方向——选择一个：粗野主义、极简主义、极繁主义、奢华、趣味、复古未来主义
4. 字体排印——展示字体和正文字体偏好
5. 配色方案——品牌主色、浅色／深色主题、强调色策略
6. 动效与交互——动画强度（无、轻微、戏剧化）
7. 灵感与参考——他们欣赏的网站（Stripe、Linear、Vercel 等）
8. 技术限制——浏览器支持、性能、无障碍（WCAG 级别）
9. 框架（必需）——根据 tech_stack，建议：
   • rails → DaisyUI + Tailwind
   • react → Tailwind 或 styled-components
   • 默认 → 纯 Tailwind

视觉语言问题（需要完整设计系统时）

10. 摄影风格——“照片应该传达什么氛围？”

    • 选项：真实／抓拍、编辑／摆拍、抽象／艺术、以产品为主、以人物为主

11. 插画风格——“需要插画吗？如果需要，想要什么风格？”

    • 选项：不需要、几何／简洁、有机／手绘、等距／3D、扁平／极简

12. 图标风格——“哪种图标风格适合你的品牌？”

    • 选项：线框（Heroicons）、实心、双色调（Phosphor）、自定义／品牌风格

提问指南

• 每轮只问一个问题
• 优先采用选择题
• 跳过根据背景信息即可明确的问题
• 每 2–3 个问题做一次总结
• 研究参考对象——如果用户提到某个网站，请获取该网站内容

阶段 3：研究参考对象

用户提到参考网站时：

1. 使用 WebFetch 获取网站内容
2. 识别：字体排印、配色方案、布局模式、动画、独特细节
3. 展示研究结果，确认哪些元素符合用户偏好

常见参考对象

• Stripe：简洁的渐变、层次感、高级感、出色的文档
• Linear：深色主题、极简、专注、面向开发者
• Vercel：以字体排印为主、自信的留白
• Notion：友好、亲切、以插画为主
• Raycast：深色、以实用为主、键盘优先

阶段 4：生成设计系统

直接加载设计系统模板：

Read(file_path="references/design-system-template.md")

然后根据用户的具体选择进行自定义：

• 将所有 [placeholder] 值替换为实际的设计决策
• 根据调色板填写颜色的十六进制值
• 配置字体排版选项
• 自定义组件规范
• 添加项目专属的注意事项和禁忌

将完成的设计系统写入 docs/design/design-system.md。

生成过程中应用的设计原则：

• 适合初级开发人员：文档应足够完整，无需后续提问
• 可直接复制粘贴：所有类、值和配置均可直接使用
• 明确设计方向：避免摇摆不定、面面俱到的设计
• 避免 AI 垃圾设计：不用 Inter 字体，不用紫色渐变，不采用可预见的布局

阶段 5：保存并配置

步骤 1：确定输出路径

检查 .agents.yml 中的 design_system_path，默认使用 docs/design/design-system.md。

步骤 2：检查自动预览设置

AUTO_PREVIEW = config_read("auto_preview", "false")

如果 AUTO_PREVIEW 为 "true"：执行 open <design-system-path>

步骤 3：提供选项

使用 AskUserQuestion：

如果未自动预览：

• 在编辑器中预览
• 开始构建（推荐）- 调用 skill frontend-design
• 优化各个部分
• 进一步调研

如果已自动预览：

• 开始构建（推荐）
• 优化各个部分
• 进一步调研

与工作流的集成

完成设计系统后：

1. Skill("blueprint") - 自动检测 UI 功能并引用设计系统
2. Skill("build-task") - 加载设计系统作为上下文
3. visual-validator - 根据规范验证实现

核心原则

• 明确设计方向 - 避免摇摆不定的设计
• 避免 AI 垃圾设计 - 不用 Inter 字体，不用紫色渐变
• 调研参考案例 - 实际查看用户提及的网站
• 坚持专业判断 - 对泛泛的选择提出异议
• 适合初级开发人员 - 文档应足够完整，无需后续提问
• 可直接复制粘贴 - 所有类和配置均可直接使用