把 CoDesign 设计稿链接丢给 Claude Code 或 Cursor，AI 自己去看图、量间距、下切图、写 CSS——不用截图，不用手抄标注，不用对着预览图按包围盒裁切。这个能力背后是一条被打通的数据链路：登录态、内部接口、图层树重建、签名直链下载。本文拆这条链路的实现和 MCP 封装的三个关键设计。
问题的本质：AI 看不见
AI 写 CSS 本身不差，差在看不见。贴一张截图过去，它只能按画面猜：这里大概 16px 内边距、圆角差不多 8px——七成的准确度对设计稿还原就是不合格。12 和 14 差两像素，一个页面几十处，肉眼别扭却说不出哪里不对。
真正的数据全在设计稿工具里：每个图层的坐标、字号、行高、字重、色值、圆角、阴影参数、切图资源。但直接拿有三个拦路虎：网页需要登录、没有开放 API 只有内部接口、图层树是压缩过的散结构，切图直链带签名直接下载会被拒。这个 MCP 服务做的事就是把四道障碍逐一打通。
MCP 封装的三个关键设计
参数带 schema。模型知道 cssScale 是数字、regions 是对象数组、format 只接受三个枚举值——不会瞎传参数。这比裸脚本强在结构层面：脚本靠模型自觉，schema 靠协议约束。
工具描述即提示词。design_get 的描述里直接写给模型看的使用建议："默认只返回第一个画板，需要全部传 allScreens: true，整稿一次返回可能有几百 KB"。模型读到这句话就会在合适的时机带合适的参数。工具描述不是文档，是运行时提示词——这一认知决定工具设计的质量上限。
错误信息是给 AI 看的文档。普通脚本报错就是 403，模型只能干瞪眼。把上游错误翻译成可执行建议："账号未加入设计稿所在团队，解决办法：让设计同学把当前账号加入项目 / 开启可查看标注权限 / 换有权限的账号"。模型看到这个自己就知道下一步干什么，还能转告用户。错误翻译的成本极低，对自动化链路稳定性的提升极大。
图层树重建：散节点到结构化数据
原始接口返回的图层是压缩过的散结构，没有父子关系。重建的核心是按节点的层级索引还原树形：容器节点（分组、画板）挂叶子节点（文本、图形、切图），每个叶子带几何信息、样式参数和资源引用。重建后的树直接映射 DOM 结构——容器对容器、叶子对元素，CSS 换算按缩放系数统一处理，间距、字号、色值全部来自标注而非猜测。
验收与复用要点
验证这套链路的标准很简单：同一页面，AI 直连标注写的 CSS 和人工量的标注逐项对比，像素级误差为零才算通。复用到其他设计稿平台时，可迁移的是三个设计模式：内部接口逆向时先抓登录态请求链路、错误翻译表按上游错误码逐条建、工具描述写给模型看而不是写给文档看。
一个工程提醒：依赖内部接口的方案天然随上游改版而脆弱，接口地址、返回结构都要做版本检测——上游 404 或结构突变时给出明确报错，而不是让模型拿旧结构瞎猜。工具是眼睛，接口是视神经，视神经的健康检查要内置在工具里。
评论0