figma-to-pagelisted
Install: claude install-skill YuAICode/ai-skills
# figma-to-page — 设计稿一次还原
> **核心判断:还原度差不是「模型不会写样式」,而是「输入信息量不足 + 没有闭环校验」。**
> 本 skill 只做静态视觉还原,不做交互与动效。
## 何时触发
用户说:
- 「照这个 Figma 稿把页面写出来」/ 给出 `figma.com/design/...?node-id=...` 链接
- 「还原一下这个设计图」/「按设计稿做这个页面」
- 「做出来跟设计稿对不上 / 还原度不够 / 差挺多」
## 四条铁律
1. **不看截图猜数值。** 间距、字号、行高、色值一律从 `get_design_context` / `get_variable_defs` 取真值。截图只用于最后对答案。
2. **不硬编码样式值。** 所有色值 / 字号 / 间距必须走项目的 token / theme 层;项目没有就先建一个(阶段 2)。
3. **不靠肉眼说「差不多」收工。** 必须跑 `bin/pixdiff.py` 拿到量化偏差,收敛到阈值或如实报告残留。
4. **取数策略要匹配实际配额,不要凭空节省。** 配额充裕就走完整模��(更准),配额紧张才省调用 —— 由 `bin/quota-mode.sh` 决定,见下。
## MCP 取数策略
Figma 读取类工具的配额按 plan + seat 计,**上下限差 100 倍**:
| Seat | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View / Collab | 20 **/月** | 6 /月 | 6 /月 | 6 /月 |
| Dev / Full | 20 /月 | 200 /天 | 200 /天 | 600 /天 |
豁免(不计配额):`whoami`、`generate_figma_design`、`add_code_connect_map`。
**所以不存在一个「对所有人都对」的默认值。** 省调用模式牺牲还原精度换配额(跳过 `get_metadata`、不分区块拉 context,大 frame 会糊);配额够的人走它纯属白亏。用脚本决定:
```bash
bash <skill>/bin/quota-mode.sh # 输出 MODE / REPORT_QUOTA / SOURCE
```
| 配置值 | 行为 |
|---|---|
| `unlimited` | 走**完整模式**,且**不必**向用户播报预计调用次数 |
| `thrifty` | 走**省调用模式** |
| `auto`(默认) | 输出 `MODE=auto` → 调 `whoami`(免费)拿 seat/tier,再跑 `quota-mode.sh resolve <seat> <tier>` 得到终态 |
优先级:环境变量 `FIGMA_QUOTA_MODE` > `~/.config/figma-to-page/quota.conf` > `auto`。
用户说自己不受配额约束时,给他:`bash <skill>/bin/quota-mode.sh set unlimited`(写一次,以后所有会话生效)。
无论哪种模式都成立的两条:
- **文件级数据必须缓存复用** —— `get_variable_defs`、`get_code_connect_map`