herxinsasa Design Maker — 设计执行
职责
基于 Design-Brief.md 中的设计规范，产出可视化的设计交付物：原型页面、设计稿、设计系统等。
此 skill 不负责需求收集。 设计规范的澄清和确认由 design-brief-builder 负责。如果 Design-Brief.md 不存在，引导用户先走设计规范流程。
前置条件
Design-Brief.md必须已存在且内容完整- 如果不存在，告知用户并建议先调用
design-brief-builder
触发场景
- Design-Brief.md 就绪，用户说"出原型"、"做设计稿"、"生成设计"
- design-brief-builder 完成后用户选择进入设计执行
工作流程
Step 0: 前置检查
- 检查
Design-Brief.md是否存在 - 如果不存在：
还没有设计规范文档。需要先通过 design-brief-builder 收集设计需求、确认配色方案和模块 UE。 要现在开始吗？
- 如果存在，读取
Design-Brief.md和Product-Spec.md，了解：- 产品对标和品牌调性
- 配色方案（色值、主题）
- 组件风格（按钮、圆角、阴影等）
- 模块 UE 设计（布局、交互、信息流）
- 产品名称
Step 1: 确定设计交付物类型
与用户确认需要产出什么：
基于设计规范，你想产出什么类型的交付物？
- A. 完整原型页面 — 所有 MVP 模块的可交互 HTML/CSS 页面
- B. 关键页面原型 — 只做最核心的 1-2 个页面
- C. 设计系统文件 — 配色 token、组件库、字体规范（可导入代码项目）
- D. 单个组件/模块 — 只看某个特定模块的设计效果
Step 2: 选择设计工具
根据交付物类型，提供工具选项给用户选择：
你希望通过什么方式产出设计？
专业设计工具（需要 MCP 连接）：
- A. Figma — 通过 MCP 直接操作 Figma 文件，适合需要交付给设计师的场景
- B. Pencil — 开源原型工具，通过 MCP 连接
代码原型（无需额外工具）：
- C. HTML/CSS 前端原型 — 直接在
<project-name>/下生成可交互的原型页面。使用 React/Vue 或纯 HTML，效果最佳- D. Canvas 设计稿 — 生成静态视觉设计稿 PNG/SVG
自定义：
- E. 其他工具 — 你指定工具或三方库，我来适配
Step 3: 工具就绪检查与引导
根据用户选择的工具执行对应逻辑：
A. Figma
- 检测 Figma MCP 服务是否已在
.mcp.json或 Claude Code 设置中配置 - 如果未配置：
需要先配置 Figma MCP 连接。步骤如下：
- 生成 Figma Personal Access Token（前往 Figma → Settings → Account → Personal Access Tokens）
- 运行：
claude mcp add figma --env FIGMA_TOKEN=<your-token> - 或者在
.mcp.json中添加 Figma 服务配置
配置完成后告诉我，我来继续。
或者你可以现在选其他工具（如 HTML/CSS 原型），不需要额外配置。
- 如果已配置 → 通过 MCP 创建/更新 Figma 文件，基于设计规范生成：
- 配色样式（Color Styles）
- 文字样式（Text Styles）
- 组件（按钮、输入框、卡片等）
- 各模块页面 Frame
- 产出存放：
- Figma 文件链接 → 记录到
design/figma/README.md（每行一个链接） - 导出关键页面 PNG →
design/figma/screenshots/作为降级参照 - 完成后回写 Design-Brief.md「设计交付物」表格
- Figma 文件链接 → 记录到
B. Pencil
- 检测 Pencil MCP 服务是否已配置
- 如果未配置：
Pencil 是一个开源原型工具（https://pencil.evolus.vn/）。 需要配置 MCP 连接后才能使用。配置方法：...
或者选 HTML/CSS 原型方案，无需额外工具。
- 如果已配置 → 通过 MCP 生成原型文件
- 产出存放：
.pen源文件 →design/pencil/- 导出关键页面 PNG →
design/pencil/screenshots/作为降级参照 - 完成后回写 Design-Brief.md「设计交付物」表格
C. HTML/CSS 前端原型（默认方案）
不需要任何外部工具。直接参考 Anthropic 官方 frontend-design skill 的方式：
- 在
design/prototypes/目录下创建原型文件 - 基于设计规范中的配色方案、组件风格、模块 UE 设计生成页面
- 包含可交互的演示（页面跳转、状态切换）
- 使用设计规范中定义的具体色值和参数
- 完成后回写 Design-Brief.md「设计交付物」表格
可用的设计资源（离线参考）：
- frontend-design — 前端设计实现参考
- canvas-design — 视觉设计输出参考
- ui-ux-pro-max-skill — 设计系统、品牌规范参考
D. Canvas 设计稿
使用 canvas-design 方式生成静态视觉设计稿。
- 产出 PNG/SVG →
design/目录 - 完成后回写 Design-Brief.md「设计交付物」表格
- 适合只需要看效果、不需要交互原型的场景
E. 自定义工具
如果用户指定了其他工具或三方库（如 React + Tailwind CSS、Framer、Sketch 等），根据实际情况适配。
Step 4: 执行设计生成
基于选定的工具和设计规范，产出设计交付物。
生成过程中必须严格依据 Design-Brief.md：
- 配色使用规范中定义的精确色值
- 组件风格（圆角、阴影、间距）严格匹配
- 模块布局按照 UE 设计中确认的骨架
- 信息流风格（气泡/纯文本流/紧凑列表）按模块执行
原型应覆盖的交互状态（参考 Design-Brief 各模块的状态处理定义）：
- 正常态
- 加载态（骨架屏 / 进度条 / 旋转动画）
- 空数据态（引导提示 / 示例数据）
- 错误态（错误提示 + 重试按钮）
Step 5: 展示与迭代
- 生成完成后，告知用户交付物位置
- 如果生成的是 HTML/CSS 原型，启动本地预览服务器，提供预览 URL
- 询问是否需要调整：
原型已生成在
<路径>。需要调整什么吗？
Step 5.5: 回写 Design-Brief.md 交付物表（强制）
设计产出确认后，必须更新 Design-Brief.md 的「设计交付物」章节：
| 模块 | 工具 | 源文件路径 | 降级参照 | 状态 |
|---|---|---|---|---|
| <模块名> | <工具名> | design/xxx/xxx.ext | design/xxx/screenshots/xxx.png | 已确认 |
- 源文件路径：MCP 可读的源文件（.pen / Figma 链接 / .html）。用户手动出图无源文件则填
— - 降级参照：PNG 截图。所有工具都应导出一份 PNG 作为 MCP 不可用时的兜底
- 状态：刚产出填「已确认」
Step 6: 记录变更
追加到 Product-Spec-CHANGELOG.md：
v<当前版本>→ 新增 →生成设计原型：工具 <工具名>，覆盖 <N> 个模块
输出
Design-Brief.md— 更新设计交付物章节，记录原型路径design/prototypes/— 原型文件（HTML/CSS 方案）design/pencil/— Pencil 源文件（.pen）及截图design/figma/— Figma 链接记录及截图Product-Spec-CHANGELOG.md— 追加设计变更记录- Figma/Pencil 文件（专业工具方案）
Product-Spec-CHANGELOG.md— 追加设计变更记录
注意事项
- 严格依据设计规范 — 不要自由发挥配色或布局，所有参数以 Design-Brief.md 为准
- 工具选择不给压力 — Figma/Pencil 需要额外配置，明确告知用户。HTML/CSS 方案开箱即用，作为默认推荐
- 可交互优先 — 对于原型，能点、能切换状态的页面比纯静态图片更有价值
- 状态覆盖 — 做好每个模块的加载态、空态、错误态，这些往往是设计规范中最容易遗漏的地方
- 如果设计规范中的某个参数缺失（如某个色值未定义），基于整体配色方案推理一个合理值并告知用户