UI交付别再甩截图：让AI把组件画成苹果式尺寸图纸

截图加几个红框，再在群里补一句「padding 是 16，圆角 12」，这套交付方式每个设计师都干过。开发照着做完，问的是另一件事：「这层阴影是压在容器上还是压在内容上？」

苹果给配件厂商画了几十年尺寸图纸：一张纸，几个视图，密密麻麻的小数字，谁拿到都能照着做出壳子。有位开发者把这套语言搬到了 UI 上，做成一个能塞给 AI 代理的技能包，叫 dimensional-drawing。

它到底产出什么

你告诉它一个组件，它给你一张单页技术图纸，输出是一个自包含的 HTML 文件。图纸上不画文案，只画架构：

• 槽位用虚线框加叉表示，标注写成 TITLE SLOT · FLEX、ACTION · HUG、CONTENT SLOT · FILL 这类词。HUG 表示宽度由内容撑开，FLEX 表示吃掉剩余空间，FILL 表示占满父级。
• 尺寸全部用代号：S1 是容器内边距，R1 是容器圆角，H1 是头部最小高度；表格里给出代号、变量名和取值。
• 派生值写成公式，比如 H1 = 2·S1 + H3 = 64、R2 = R1 − B − S6，看的人能自己验算。
• 单色，只有黑线和灰阶，靠线宽、虚线、斜线填充区分层次，一个彩色点缀都没有。
• 没有品牌字样，组件叫 UI-CARD-001 这种中性名。
• 拿不到的值不编，直接写 [TBD]，画成比例示意。

一张图里塞得下的东西不少：标题栏（DWG NO.、REV、UNITS、SCALE、SOURCE）、左上角的编号注释、中间的平面视图配链式标注、阴影包络、左下角的图层爆炸轴测图、下方的圆角嵌套细节，加右侧四五张变量表。

装起来只要两条命令

项目地址 github.com/enesozturk/dimensional-drawing，MIT 许可，十月下旬刚放出来，一周多涨到一千四百多星。

Claude Code 用户，克隆下来把技能目录拷过去：

git clone https://github.com/enesozturk/dimensional-drawing

cp -r dimensional-drawing/skills/* ~/.claude/skills/

claude.ai 或桌面版：把 skills/dimensional-drawing 这个文件夹压成 zip，在设置里的能力页面找到技能，上传即可。

其他代理（Codex、Cursor、Gemini CLI）：跑 npx skills add enesozturk/dimensional-drawing，或者直接把 SKILL.md 指给代理读。

装完不用记参数，用自然语言点名源文件就行：

• 「给 src/components/Card.tsx 里的 Card 画一张尺寸图纸」
• 「照示例的风格，画我们设置弹窗的解剖图」

它能画的东西比 UI 宽：物理产品也支持，第三角投影、毫米单位、只画公开参数，冲突的参数会被标出来。

关键在「先量后画」

这一条决定了图纸能不能用。技能要求代理去读真实源码——仓库文件、Storybook 故事、设计画布、线上页面——然后用 Playwright 渲染，等字体加载完，遍历盒模型取 getBoundingClientRect 和 getComputedStyle：padding、gap、圆角、边框、最小高度、flex-shrink、最小宽度。

还要用 grep 数一遍这个组件在项目里有多少个实例，让变量反映系统而不是某一个样例。这一步是做设计系统的人最该学的：图纸上的 S1 = 16 不是随手写的，是统计出来的。

一次完整的实操走一遍

以一张商品卡片为例，整个流程大概长这样：

1. 先把组件跑起来。本地 dev server 起好，或者直接给它一个线上页面地址，让它能渲染出真实状态。
2. 让它量。要求它遍历盒模型，把 padding、gap、圆角、边框、最小高度全部读出来，再 grep 一遍项目里这个组件的所有调用点，看哪几个值是全站统一的、哪几个是某个页面特调的。
3. 让它画。指定参考文档和输出位置，比如「照 examples 里的 card-sheet 风格，画成一张图纸，输出到 docs/ 下」。
4. 自己校验。它有一个自检清单：图上每个代号都要在表格里出现，每个公式要能闭合（头部高度等于两倍内边距加按钮高度，整体宽度等于各分区之和），不许出现品牌字样，不许出现灰度以外的色值。
5. 看截图。让它用 Playwright 按 1800 像素宽渲染一张，检查标签有没有重叠、图元有没有越出图纸边框，一轮改完就交付。

真正花时间的不是画，是第一步和第二步。组件跑不起来、量不到真实值，后面画出来的一定是编的。

三个容易踩的坑

第一个是颜色。图纸必须单色，如果源组件本身靠颜色区分状态，得先把状态拆成线型或填充差异，不然出图会一片黑。

第二个是内容宽度。规则里明确禁止按文案宽度标尺寸，因为文案一改，图就废了。所有跟文字有关的宽度都写成 HUG 或 FLEX，让开发自己撑。

第三个是自欺。有些值源码里根本没有，比如视口边距、溢出行为，这时候必须写 [TBD]，不能凭感觉填一个。填错了，这张图就从文档退化成了示意图。

让图动起来

同一套内容还有一个动效技能：一张画好的图，变成十来秒的钢笔绘制动画——先特写标题栏让线条画进来，镜头拉远到平面视图，图层从平面里升起变成爆炸图，最后退回整张纸。

不装 Claude 也能跑。进 skills/dimensional-drawing-motion/adapters/headless 目录，装好依赖，然后：

node render.mjs --scene ../../templates/scene-dialog.js --css ../../templates/base.css --out dialog.mp4

需要 Node 18 以上和 ffmpeg，渲染走 Playwright 的 Chromium。作者注明这套无头渲染只测过这一条链路，换成 Remotion、GSAP、Lottie 都没验证过。

什么时候别用它

• 营销页、活动页这类靠文案撑起来的界面，抽掉内容就什么都不剩，图纸没有意义。
• 交付给外部开发、需要逐像素还原设计的场景，还是标注工具更直接。
• 动效规范，这一套只管静态几何。

真正合适的场景是设计系统：按钮、输入框、卡片、弹窗这些会被复用几十次的组件，用一张图纸说清楚它的骨架，比十张截图管用。

一点看法

这类工具的价值不在「AI 会画图」，在于它把交付的标准写死了：不许有颜色、不许有文案、不许编数字、拿不到就写 [TBD]。规则越硬，产出越能当文档用。

反过来说，如果你的设计系统里间距本来就是拍脑袋定的，跑完这一遍会很难受——图纸要求每个值都能追到一个变量，追不到的地方会全部变成 [TBD]。那一刻你看到的是设计系统真实的完成度，而不是渲染图有多好看。