product-prototype-figma

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 后台标准八页」案例库。

启动必读（顺序固定）

1. 本文件 SKILL.md
2. frontend-design 源规则（来自宿主 Agent / Codex 环境）
3. DESIGN.md（路由 B/C 视觉轨）
4. 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-figma MCP 已 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，必填：

1. Subject（产品、受众、单屏任务）
2. Tone + surface: b_end | c_end（路由规则见 DESIGN.md）
3. Token（色/字/间距/圆角，从 DESIGN 对应轨复制，可微调须说明）
4. Layout（每页 ASCII 线框）
5. Signature（全项目 1 个记忆点，服务当前 brief）
6. 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.ui.template.yaml
• 校验：page.ui.schema.json
• 页型约束：page-templates.yaml

每页一文件，命名 {page-id}.page.ui.yaml。meta.surface 与 design-plan 一致；regions 与 plan ASCII 一一对应。

落盘：

• 项目明确 → 项目 assets/ 或用户指定目录
• 不明确 → 99-收件箱/待整理/产品原型/{项目名}/

---

Phase 4：Figma 执行

读 spec-to-figma-map.md。

1. 无 file_key → create_new_file（需 planKey）
2. 共享 shell（侧栏/顶栏/TabBar）先画一版，各页引用同一结构模式
3. 按 region 分批 use_figma，每批对照 yaml + plan
4. 颜色/字号/间距只来自 design-plan.md + DESIGN 对应轨
5. 字体：中文 PingFang SC 或 思源黑体，数据列 SF Mono；禁止 Inter
6. 有设计系统 → search_design_system 填 catalog_map；无则 primitive

---

Phase 5：视觉再审

每屏 get_screenshot：

1. 对照 design-plan.md 该页 ASCII
2. 香奈儿法则：删 1 个多余装饰
3. 仍像 AI 默认 dashboard/App → patch，不整页重 roll

---

Phase 6：交付

交给用户：

1. Figma 链接（主交付）
2. design-plan.md
3. ia-draft.md + *.page.ui.yaml
4. 页面清单表：帧名、职责、根 nodeId（便于 Phase 7）
5. Anti-Slop 结论摘要

---

Phase 7：增量修改

读 incremental-edit.md。

• 结构变更 → 改 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