乐于分享
好东西不私藏

设计稿自动出文档

设计稿自动出文档

你有没有算过这笔账:设计师把图给你,你得对着屏幕一个个量尺寸、抄颜色、写标注,还要说明按钮有几种状态。一页移动端首页,手工整理成交付文档,平均 90 到 120 分钟。客户轻飘飘一句"顺便把标注文档补一下",你一下午就没了。

我做一人公司时,这种活最坑。它通常不算在报价里,却最吃时间;你不做显得不专业,做了又纯体力,关键是改一版设计,前面的文档基本作废一大半,又得重写。

后来我换了个思路:设计稿不是图片,是结构化数据。

很多人以为 AI 看设计稿是"识图",其实最高效的做法根本不是视觉识别。MasterGo、Figma 里的每个元素,都是结构化节点,自带名字、坐标、尺寸、颜色、字体、图层关系。这些东西机器读起来,比人眼快一百倍,而且不会看错一个像素。

所以我用 WorkBuddy 接 MasterGo,让 AI 直接读设计稿的图层数据,自动生成交付文档。一页从 2 小时压到 5 到 8 分钟,而且不会漏标尺寸、不会写错色值。

具体怎么做?四步就够:

第一步,准备设计稿。 顶层 Frame 按页面命名,比如"首页""订单列表-空态";按钮、卡片尽量用组件;颜色、字体用 Style 变量。这一步做完,AI 读起来的准确率直接上一个台阶。

第二步,读取数据。 用 mastergo-vibe-mcp 连接器把目标页的节点树导出来,存成 JSON 文件。

第三步,清洗。 这是质量的分水岭。默认 Agent 把杂乱的图层树压成"页面→模块→元素"三级,提取每个元素的尺寸、颜色、字体、间距,再把重复出现三次以上的值聚成全局 token。原始数据很脏,图层名全是"矩形 1""文本 7",不清洗直接生成,AI 会输出一堆没意义的东西。

第四步,生成。 把清洗后的数据交给 AI,按模板吐出完整交付文档:页面概述、全局样式 token、模块清单、元素标注表、组件清单、交互说明、切图清单,一次出齐。最后用「资料库」技能把文档建成在线文档,把链接发给团队或客户就行。要通知相关人,还能用网易邮箱直接发。

我给你看个真实的小例子。一个"顶部导航"模块,里有"返回按钮"和"页面标题"两个元素。AI 读出来就是:返回按钮,24×24,引用 icon-back 组件,左边距 16;页面标题,120×24,颜色 #333333,18px / 600 字重 / 24px 行高,文案"商品详情"。人工抄这几个数可能要五分钟,还容易抄错;AI 一秒出,零误差。

这里最值钱的就是"清洗"那一步的提示词。我在「一人公司日记」付费版里把完整的三套提示词模板都写好了——数据清洗怎么写、生成文档怎么写、自检怎么写,连组件变体遗漏、颜色格式不一致这些坑怎么绕,都列了解决方案。

还有两个进阶玩法值得说:一个是多页面批量,一个项目十几页,给页面 Frame 带上序号命名,建个定时任务循环读取,一次性出完整个文档;另一个是设计稿直出前端代码,在交付文档基础上加一套提示词,直接输出 Vue3 + Tailwind 组件骨架。这一招能把"标注服务"升级成"直出组件",接前端外包时报价能抬高一截。

一人公司最贵的从来不是工具,是你的时间。把这种重复劳动交给 WorkBuddy,你才有空去谈下一个客户、接更高价值的活。

下篇预告

下一篇讲财务多表对账——几张表丢进去,异常数据自己跳出来,月底对账从熬夜变喝茶。

星球引导

本篇完整 SOP(含三套提示词模板、五个踩坑方案、两个进阶变体)已发布在付费星球「一人公司日记.付费版」。68 元/年早鸟价,扫码加入,把重复劳动彻底外包给 AI。

互动提问

你平时做交付文档,最烦的是量尺寸还是写标注?或者你压根就不写?评论区聊聊。