design-builder

Design Builder

适用于任何数字产品的全新设计流程：探索、提取内容、编写 DESIGN.md、定义布局或屏幕流程、预览、优化。

工作流

discovery --> copy --> inputs --> structure --> preview --> assets --> final
                                                  ^__|  (tune / comment / apply-across loop)

每个步骤彼此独立。可以单独运行，也可以串联运行（每次操作前都会预加载 discovery.md）。素材为可选项：预览获批后自动调用，也可以直接触发。design-builder 优先用于全新项目——inputs.md 中的代码库路径是改版或迁移的备选方案，并非主要流程。最终设计可以通过 HTML 提供，在匹配的 MCP 可用时推送到外部设计工具，或移交给实现阶段。

触发条件

• 提取文案（“提取文案”“从 URL 复制”“网页采集”“网站内容”“简报文档”） → copy.md
• 视觉识别（编写 DESIGN.md）（“提取设计令牌”“编写 DESIGN.md”“更新设计令牌”“从图像／代码库／设计工具提取设计”） → inputs.md
• 布局／屏幕流程（“创建线框图”“布局页面”“组织内容”“屏幕流程”“验证此线框图”） → structure.md
• 预览／变体（“预览设计”“视觉模型”“调整设计”“创意变体”“调整设计方向”“应用到各个变体”“推送到设计工具”） → preview.md
• 验证（“验证 DESIGN.md”“检查 DESIGN.md”“审查设计令牌”“检查设计系统”） → validate.md
• 改版（“重新设计此应用”“现代化此界面”“品牌焕新”“改变风格”） → redesign.md
• 生成素材（“生成主视觉横幅”“创建产品图像”“生成 OG 卡片”“图像提示词”） → assets.md

每次操作前都会自动加载 discovery.md，绝不跳过。

preview.md 会自动加载 aesthetics.md 和 web-standards.md。

validate.md 既可以直接调用，也会在 inputs.md 的第 5 步自动加载，作为宣布完成前的关卡。

assets.md 既可以直接调用，也可以作为可选子阶段，在变体获批后由 preview.md 自动调用。

指南

• 向用户收集上下文时，一次只问一个问题
• 将 .agents/design/DESIGN.md 视为视觉识别的事实来源
• 按章节修改 DESIGN.md，确保每个阶段都保留其他阶段的成果
• 根据项目类型（landing-page、website、web-app、mobile-app）选择预设和决策集
• 每次运行预览时都自动加载 aesthetics.md 和 web-standards.md
• 将外部设计工具文件视为用户所有——只有在用户提出要求且匹配的 MCP 可用时才读取或推送

反模式：编辑章节时重写整个文件

如果只更改了 ## Layout 或 ## Components，却重写整个 DESIGN.md，就会覆盖其他阶段负责的章节。应按章节修改：inputs.md 负责 frontmatter 和大部分正文，structure.md 负责 ## Layout 和 ## Screen Flow，copy.md 负责内容载荷（位于 copy.yaml 中）。

反模式：创建外部工具文件

外部设计工具文件（Pencil、Paper、Figma）归用户所有。此技能绝不创建这些文件——只有在文件已存在且匹配的 MCP 可用时才会拉取；只有在用户明确要求时才会推送。在他人的工具中创建文件会让对方感到意外，还可能导致命名冲突。

反模式：跳过探索

每次操作前都会加载探索内容，即使用户提供了图像、简报或代码库也不例外。缺少探索，技能就可能选错流程——例如对移动应用运行 landing-page 预设，或从用户不想改动的代码库中提取令牌。花 30 秒进行探索，可以避免重新执行整个流程。