← ClaudeAtlas

figma-to-pagelisted

按 Figma 设计稿还原页面代码,拉结构化设计数据 + design token,写完用像素 diff 自校验迭代到还原。当用��给出 figma.com 链接要实现页面、或说「照设计稿写���个页面 / 还原设计图 / 这个页面和设计稿对不上 / 按 Figma 做 UI / 设计稿还原度不够」时触发。
YuAICode/ai-skills · ★ 1 · AI & Automation · score 65
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`