用 Claude Code + Pencil MCP 做设计，设计稿第一次真正活在代码仓库里
"Pencil 是 Claude Code 的 Figma"——这是 Pencil 创始人自己给出的定位。他还有一句更具体的补充："MCP 驱动的画布，设计文件直接活在你的代码仓库和 IDE 中"。
这句话乍一听像营销话术。
拆开看：.pen 文件本质是纯 JSON，通过 MCP 协议，Claude Code 可以直接读写设计稿，不用像以前那样在 Figma 和代码编辑器之间来回切换、手动量取间距和颜色值。设计文件进了代码仓库，就能被版本控制、被 diff、被 agent 直接操作。
我的判断是，这才是那句"活在代码仓库中"真正落地的部分，不是修辞。
核心工具集
Pencil MCP 暴露出来的工具大致分三类：读取状态（get_editor_state、get_guidelines）、批量编辑（batch_design 一次最多 25 个操作）、验证输出（get_screenshot、snapshot_layout 检测重叠裁切、export_nodes 导出）。中间还有一组专门管设计变量的（get_variables/set_variables），对应的就是颜色、字体、间距这些 Design Token。
.pen 文件是加密的，只能靠这套 MCP 工具读写，用 Read/Grep 直接访问没有意义。这点跟普通的 Markdown/代码文件不一样，第一次接触容易踩坑。
五阶段法
来源是 TobyScr 的一套设计系统 Skill，从 0 到 1 走完一个产品的设计系统：
- 需求梳理：对话确定问题域、目标用户、核心流程，产出 5-7 个关键页面清单。
- 风格探索：
get_style_guide_tags()拿到所有可用风格标签，挑 5-10 个丢进get_style_guide()，生成一份视觉方向指南。 - 品牌方向板：在 Pencil 里做 2-3 个方向（安全/大胆/实验性），每个方向包含色板、字体、组件样本，人工选一个。
- 组件库构建：先导入 Token，再用
batch_design()逐个搭 Button/Input/Card/Nav 这类可复用组件，每搭一个用get_screenshot()看一眼。 - 关键页面原型：用第 4 步的组件拼装页面，
snapshot_layout(problemsOnly=true)专门筛布局问题，最后export_nodes()导出交付件。
我的判断是，这套流程本质上是把"设计系统先于页面"这个老生常谈的道理，用 MCP 工具链具体化了。组件库先搭好、Token 先定好，页面阶段才不会走回"每个页面单独调一遍间距"的老路。
竞品 Token 提取
这块用到的是 Dembrandt，一个开源 CLI，靠 Playwright 渲染真实网站后提取 W3C 标准格式（DTCG）的 Design Token，颜色体系、字体层级、间距、阴影、圆角都能拿到。完整流程是：提取竞品 Token → 截图关键页面 → Claude Code 对比分析（色板/字体层级/间距圆角三项分别对比）→ 输出差异报告 → 确认后写回 Pencil。
设计到代码的闭环
这是整套工作流里最值得记一笔的部分，来自 @tikeda 在 X 上的分享：用 Claude Code 读现有项目的 design-tokens.css/design-tokens.ts，在 Pencil 里重建出完整的 Token 和组件库，拿这些组件生成 UI，再转换回代码。设计和代码不再是"画完图交给前端"这种单向关系，而是能来回同步的闭环。
像素级还原那块，Saqoosha 在 Zenn 上分享的做法是开 4 个并行 Agent 同时实现同一个界面，再用 PIL 生成热力图对比截图差异，报出来的匹配度是 94.8%+。
这个数字本身不是重点。我更在意的是"截图对比是最终仲裁"这个原则——不靠主观判断"看起来差不多"，靠图像差异量化到底差多少。
响应式这块给的规范比较朴素：Mobile Frame 390px（iPhone 14 标准宽度），Desktop Frame 1440px，Setup → Generation → Responsive 三阶段法，先定画布和 Token，再生成组件页面，最后双 Frame 适配。
我的判断
这套工作流最大的价值，不是"AI 能画图"这件事本身——市面上能画图的工具已经不少了。真正值得关注的是 .pen 文件进代码仓库这个动作：设计稿第一次跟代码处在同一个版本控制体系里，能被 diff、能被 agent 直接读写，不再是一份躺在 Figma 云端、跟代码库物理隔离的静态资产。
长期来看，"设计到代码"会从一次性的交付动作，变成一个可以反复迭代的闭环：改了代码里的 Token，能同步回设计稿；改了设计稿，也能生成新一版组件代码。工具链会越来越完整，但最后决定这套闭环靠不靠谱的，还是那句老话：以截图对比为准，不是主观判断。