---
name: tvu-design-mockup
description: 在 TVU 产品 Figma 文件画 mockup 时消费 TVU UX Design System library。唤醒词：@TVU mockup / 用 TVU 设计系统画 mockup / 用 TVU 库画 mockup。真源 conventions 在 tvu-design-system repo 内。
---

# 在 TVU 设计系统消费侧画 Figma mockup

本 skill 只做 **trigger + 指路**。真源在仓库内：

- 项目入口 — `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/AGENTS.md`
- 团队导览 — `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/docs/internal/CONVENTIONS-OVERVIEW.md`（推荐**先读这个**了解整体）
- 硬规则 — `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/docs/internal/mockup-conventions.md`（含 M0/M1 + umbrella `M-COLOR` / `M-INTEGRITY` + M23/M23.6/M24/M29/M31/M32/M33/M35 + legacy M10/M25/M26/M27/M28/M30/M34 anchor stubs；具体编号见 OVERVIEW Quick Reference）
- 已知库组件目录 — `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/docs/internal/figma-component-catalog.md`
- 自动 audit 脚本（CI 候选） — `scripts/audit-mockup-integrity.mjs`（M-INTEGRITY 三件套）+ `scripts/audit-mockup-colors.mjs`（M-COLOR 三件套）

任何细节冲突以上述真源为准；本 skill 不复述规则内容。

## 适用场景

在 TVU 产品 Figma 文件（如 `Micro-Apps-20250923` 等）画产品页面 mockup。

**不**适用：
- 写代码消费 TVU 库 → 真源 `code-conventions.md`，由 `tvu-design-code` skill 触发
- 设计系统库本体迭代 → 那是 maintainer scope，不是 consumer

## 起手协议（按序，不可省略）

0. **Disambiguate deliverable**（条件触发）— 若用户表达只说 "设计 / 做 X 产品" 而未指明 deliverable type → **先 ask**：
   - (a) Figma mockup / frame → 继续本 skill
   - (b) 网站代码 / HTML demo → 切到 `tvu-design-code` skill
   - (c) 先 mockup 后 code → 继续本 skill，wrap up 时提示切到 code skill
   - (d) 仅 UX 思路讨论 → 切到 `role-ux`

   用户已明确说 "@TVU mockup" / "画 mockup" / "画 frame" / "Figma" 时跳过此步。

1. **cwd 检查 + 路径策略**：
   - 若 cwd 在 `tvu-design-system/` 内 → 告警停下（污染源）
   - 若 cwd 已有项目文件（`package.json` / `src/` / `docs/` / `.git/` / `index.html` 等任一）→ 视为 **Existing product**，**在当前 cwd 工作**
   - 若 cwd 是空 / 临时 (`/tmp/*`) / 不在 `~/Documents/AICoding/VS_Code/` 下 → 视为 **Greenfield**，**强制建议** 建到 `~/Documents/AICoding/VS_Code/<product-name>/`（与 tvu-design-system sibling），问用户确认产品名后 cd 过去
   - 用户显式说 "在 X 路径下做" → 按用户说的路径，跳过上述判断
1.5. **环境健康检查** — 任一 fail 时告警停下：
   - `test -d /Users/nancy/Documents/AICoding/VS_Code/tvu-design-system` → TVU repo 路径在
   - `git -C /Users/nancy/Documents/AICoding/VS_Code/tvu-design-system fetch && git -C /Users/nancy/Documents/AICoding/VS_Code/tvu-design-system status -sb` → 若本地落后 origin，**告警停下提示 `git pull`**（保证规则真源是最新）
   - figma MCP `whoami` → MCP 连通
   - `cat /Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/docs/site-review-manifest.json | jq .figmaFileKey` → fileKey 拿得到
2. **Read 真源** — `AGENTS.md` + `mockup-conventions.md` 全文
3. **拿真源 library fileKey**

   ```sh
   cat /Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/docs/site-review-manifest.json | jq .figmaFileKey
   ```

   不要靠扫产品文件 instance 反推库归属（§"库归属验证机制"）
4. **catalog 轻索引** — `head -60 figma-component-catalog.md` 拿 ### component 标题列表（按 Lazy Reference Discipline，不全 Read 404 行）；Phase 0 时 per-element `grep -A 10 "^### <name>"` 取具体 entry
5. **扫 ledger** — Read `tvu-design-system/docs/internal/_metrics/phase0-ledger.md` 末 5 行；按 ledger 文件内"异常启发式"表检查，命中时**主动提醒一句**
6. **Task classify** — 按 conventions 的 Task Entry Modes 表把任务归到 US-1..6，不确定则问用户：
   - **US-1/2/3** → Pre-Phase 0（Step A Intake Gate 收 3 输入 → Step B PRD 起草 + 写入 Figma → Step C 原 5 步 2 gate；详见 `design-process.md § Pre-Phase 0`）→ Phase 0 (M0) → import + 画
   - **US-4** Figma → code（不归本 skill，路由到 `tvu-design-code`）
   - **US-5** 小调整 → 跳 Pre-Phase 0 + M0 → 直接改
   - **US-6** Review/Audit → 跳 Pre-Phase 0 + M0 → 对照所有 active M-rules + Convention Priority 审 → 跑 `audit-mockup-integrity.mjs` + `audit-mockup-colors.mjs` → 产 audit report
7. **加载 figma-use skill** — 调用 `use_figma` MCP 工具前必须先 load（其他 figma-* skill 按需）
8. **wrap up**:
   - 若 cwd 是 sibling 消费产品则写 handoff（沿用 code-conventions R5 五段模板）+ append ledger 到 `_metrics/phase0-ledger.md`
   - **更新 `tvu-design-system/docs/STATUS.md`**（必：Last updated 改今天 / 按段移动完成项 / 刷新 Active 余量）
   - 触发 retrospect 条件检查（阶段性 release / 反模式 / 新工程经验 → 写 `docs/internal/retrospection/<YYYY-MM-DD>-<topic>.md`）

## 工作期间约束摘要（按类别查真源）

mockup-conventions.md 当前 active rules 按主题分组（详见 [CONVENTIONS-OVERVIEW.md](../../../docs/internal/CONVENTIONS-OVERVIEW.md) Quick Reference）：

- **流程 / Phase 0 类**：M0（element-to-component mapping）+ M24（code→token mapping，"已有 code 还原效果图" 场景）
- **视觉 / scope 硬规则**：M1（Top bar 必 instance）+ `M-COLOR` umbrella（C1 icon fill / C2 state color / C3 bg-vs-text grey）
- **结构完整性**：`M-INTEGRITY` umbrella（I1 sibling layout / I2 sibling overlap / I3 children wrap） + M29（table cell pattern）
- **库优先 + 思考产物外化**：M32（library-first 所有 UI 元素，原 M30 absorbed）+ M35（affordance category trace 3 行强制）
- **UX 交付注释**：M23 + M23.6（连线 + frame 内容避让）+ M33（注释 vs 产品 UI 语言隔离）
- **布局决策**：M31（Auto Layout 默认 / absolute 必备理由）

迁出（不在本文件）：M2-M9/M11-M22 → `design-process.md` + `domain-tvu.md`（详见 `mockup-conventions.md §Migrated Rules`）。

Legacy ID stubs（M10/M25/M26/M27/M28/M30/M34）保留 anchor 兼容，内容已并入对应 umbrella。

逐条内容查真源；skill 不复述。

## 回流入口（生成翻车 → 新规则）

发现新失败模式时**不写进 skill、不写进 memory**，全部追加到 `mockup-conventions.md`：

1. 用户拍板"这是规则级问题，不是一次性失误"
2. 优先尝试**并入既有 umbrella**（M-COLOR / M-INTEGRITY / M32 / M35 等）作为 sub-clause；只在没有合适 umbrella 时才续 M36 / M37 等新编号
3. 段落结构对齐既有规则（含 Why / 反例 / Acceptance / 实证 / Legacy ID 映射 必要时）
4. commit 到 tvu-design-system repo

**skill 自身改动同步**：仅当回流后的新规则改变了起手协议（如新增起手步骤）才回头改 skill；否则 skill 不动。