AI 工程已完成

墨刀设计稿 → 前端：AI 读取设计源的 MCP 工具链

把设计稿分享链接变成结构化规格书，Agent 按规格实现页面而不是看图猜数值

角色: 工具链设计与实现（单人）
量级: 一条命令：链接 → 规格书
时间: 2026年10月 — 至今

Node.jsPlaywrightMCPTypeScriptMarkdown 规格生成

做了什么

从墨刀分享页的真实 DOM 读取每个控件的坐标、字号、色值、圆角与图片地址，而不是截图识别
产出可直接实现的 spec.md：色板、字号阶、圆角阶、分区、文本清单、素材映射与实现约束
封装为 MCP Server，Claude Code / Codex / Cursor / Trae 等客户端可自主调用
验收闭环：实现后重新提取截图做像素对比，偏差可量化

问题

让模型“看图还原设计稿”有三个硬伤：数值靠猜、素材拿不到、多页结构丢失。结果是第一版能看，改到第三版就和设计对不上了。

墨刀的分享页本身是富文本渲染——设计稿在 DOM 里是真实节点，坐标、字号、颜色、图片地址全都读得到。所以正确的做法不是让模型看图，而是先把设计稿变成结构化规格，再让模型按规格写代码。

做了什么

一条命令的提取器：输入分享链接，输出

manifest.json        画布清单（canvasId / 标题 / 尺寸 / 控件数）
spec.md              ★ 给 AI 读的规格书：色板、字号阶、圆角阶、分区、文本清单、实现约束
images/<canvas>.png  每页 3x 截图
widgets/<canvas>.json 控件树：type/x/y/w/h/fontSize/fontWeight/color/radius/img
assets/              原型引用的位图与内联 SVG 图标
design-tokens.json   令牌频次统计

一个规格生成器：把控件树聚合成人/机器都能读的规格书——出现频次最高的字号、色值、圆角自动成为令牌，同一水平线上的控件归为一个分区。

一个 MCP Server：把上面两步包成工具，Agent 可以自己决定“这一页去拉规格”。

踩过的坑

控件外层是 12px 的占位样式，真实字号在内部 .rich-text 节点里——取错层，令牌全错
部分图标是内联 data:image/svg+xml，不是文件，需要单独抽出来
分享链接必须是「标注」模式（view_mode=inspect）才有控件树；「演示」模式只有画布

结果

首页按设计稿重构的第一版就是照规格书写的，改版时改的是规格书里的令牌，页面自动跟着变。这条工具链后来也被我在别的项目里复用。