| name | product-prototype-figma |
|---|---|
| description | 用 Figma MCP 生成 B/C 端可编辑 UI 原型。用户说画原型、线框图、Figma 稿、后台页面、App 页面时使用。 强制嵌入 frontend-design 全流程(design-plan → Anti-Slop → page.ui.yaml → Figma → 截图自审 → 增量 patch), 配合 DESIGN.md 双轨视觉,避免 AI 默认审美与抽卡式重生成。无 spec 不生成;无 Anti-Slop PASS 不调用 use_figma。 |
| inherits | ["frontend-design"] |
| version | 1.0 |
| updated | 2026-07-08 |
产品原型生成(Figma)
结构靠
page.ui.yaml,视觉靠DESIGN.md(B/C 双轨),去 AI 味靠 frontend-design 流程。
IA 从 brief 推导,禁止套用任何「XX 后台标准八页」案例库。
启动必读(顺序固定)
- 本文件
SKILL.md frontend-design源规则(来自宿主 Agent / Codex 环境)- DESIGN.md(路由 B/C 视觉轨)
- frontend-design-gates.md(闸门表)
按需再读:references/ia-derivation.md、references/design-plan-template.md、references/anti-slop-checklist.md、references/spec-to-figma-map.md、references/incremental-edit.md、references/page-templates.yaml。
触发条件
- 「画原型」「出线框」「Figma 稿」「UI 图」「页面原型」
- 「做个 XX 后台 / App / 小程序 原型」
- 明确
@产品原型生成或指向本目录
前置环境
- Cursor 已装 Figma 插件,
plugin-figma-figmaMCP 已 OAuth - 生成前调用
whoami取planKey(create_new_file需要) - 执行 Figma 写入前加载
figma-use;整页/多区块组装加载figma-generate-design
流水线总览
| Phase | 名称 | 产出 | 闸门 |
|---|---|---|---|
| 0 | IA 推导 | ia-draft.md | 禁止套模板 IA;须写推导依据 |
| 1 | Design Plan | design-plan.md | frontend-design 第一遍 |
| 2 | Anti-Slop | checklist PASS | FAIL 禁止 yaml 与 Figma |
| 3 | 结构 Spec | *.page.ui.yaml | anti_slop: pass + schema 校验 |
| 4 | Figma 执行 | 云文件 Frames | 按 region 分批 use_figma |
| 5 | 视觉再审 | screenshot 对照 | 每屏删 1 多余装饰 |
| 6 | 交付 | 链接 + plan + yaml | — |
| 7 | 增量修改 | patch | 禁止整页重 roll |
全程:Phase 0→6 可连跑;Phase 2 FAIL 只回 Phase 1 改 plan,不画 Figma。
Phase 0:IA 推导
读 ia-derivation.md。从 brief 推实体 → 角色 → 任务链 → 页面,输出 ia-draft.template.md 格式。
禁止:
- 读取或引用任何「标准后台页面清单」固定案例
- 用「一般都有工作台/列表/详情」凑页数
用户未反对 IA 草案即可进入 Phase 1;有异议则修订后重进 Phase 1。
Phase 1:Design Plan(frontend-design)
按 design-plan-template.md 写 design-plan.md,必填:
- Subject(产品、受众、单屏任务)
- Tone +
surface: b_end | c_end(路由规则见 DESIGN.md) - Token(色/字/间距/圆角,从 DESIGN 对应轨复制,可微调须说明)
- Layout(每页 ASCII 线框)
- Signature(全项目 1 个记忆点,服务当前 brief)
- Differentiation(相对 AI 默认模板差在哪,一句话)
b_end 禁止选 frontend-design 的 extreme 美学;c_end 用 refined-consumer,仍禁 landing 炫技。
Phase 2:Anti-Slop(frontend-design 第二遍)
逐项勾选 anti-slop-checklist.md。在 design-plan.md 末尾写:
## Anti-Slop Review
- surface: b_end | c_end
- 命中项: ...
- 修订: ...
- 结论: PASS | FAIL
仅 PASS 可进入 Phase 3。把 anti_slop: pass 写入各 page.ui.yaml 的 meta。
Phase 3:page.ui.yaml
每页一文件,命名 {page-id}.page.ui.yaml。meta.surface 与 design-plan 一致;regions 与 plan ASCII 一一对应。
落盘:
- 项目明确 → 项目
assets/或用户指定目录 - 不明确 →
99-收件箱/待整理/产品原型/{项目名}/
Phase 4:Figma 执行
- 无
file_key→create_new_file(需planKey) - 共享 shell(侧栏/顶栏/TabBar)先画一版,各页引用同一结构模式
- 按 region 分批
use_figma,每批对照 yaml + plan - 颜色/字号/间距只来自
design-plan.md+ DESIGN 对应轨 - 字体:中文
PingFang SC或思源黑体,数据列SF Mono;禁止 Inter - 有设计系统 →
search_design_system填catalog_map;无则 primitive
Phase 5:视觉再审
每屏 get_screenshot:
- 对照
design-plan.md该页 ASCII - 香奈儿法则:删 1 个多余装饰
- 仍像 AI 默认 dashboard/App → patch,不整页重 roll
Phase 6:交付
交给用户:
- Figma 链接(主交付)
design-plan.mdia-draft.md+*.page.ui.yaml- 页面清单表:帧名、职责、根 nodeId(便于 Phase 7)
- Anti-Slop 结论摘要
Phase 7:增量修改
- 结构变更 → 改 yaml + patch 对应 node
- 视觉变更 → 先改 design-plan 相关 token → 视情况重跑 Anti-Slop → patch
- 禁止收到修改意见后无 plan/yaml 更新直接整文件重生成
红线
- 无
design-plan.md→ 禁止 Figma - Anti-Slop 非 PASS → 禁止 Figma
meta.anti_slop非pass→ 禁止 Figma- 产品复盘 Skill 所需 UI 截图须用户提供,本 Skill 不冒充真机截图
- 不
git push、不公开发布
与其他 Skill
| Skill | 关系 |
|---|---|
frontend-design | 继承流程与 Nevers |
figma-use / figma-generate-design | Figma 执行层 |
| 产品复盘文档生成 | 复盘截图不由本 Skill 伪造 |
文件索引
| 文件 | 用途 |
|---|---|
| DESIGN.md | B/C 路由 + 摘要 |
| design-shared.md | 共用 nevers、a11y |
| design-b-end.md | B 端 token |
| design-c-end.md | C 端 token |
