做组件评审时最常卡住的不是颜色，而是「这个间距到底多少」。设计稿翻来覆去看，开发说按 8 的倍数，产品问为什么卡片比弹窗宽一截，最后谁也拿不出一张能对齐的说明。截图能看外观，却说不清结构；写文档又容易变成一堆散落的数值，改一处就全乱。
dimensional-drawing 仓库首页，说明页用动图演示图纸绘制过程
dimensional-drawing 是 10 月 23 日新建的开源仓库，到 11 月 7 日有 1917 颗星，采用 MIT 许可。它做的事挺特别：给一个界面组件，还你一页技术图纸，把内边距、间隙、圆角、图层和它在视口里的位置，按消费电子厂商公布配件尺寸图的那套办法标出来。仓库里放了两张示例图纸，一张画对话框，一张画卡片，都是单个网页文件。
它教的是一套规则，而不是一个按钮。规则写在技能说明里：只用单色线，画架构不画内容，标注用变量而不是写死的数字，图纸不带品牌。文案刻意留白，项目说明里讲得很清楚，复制与内容被排除在外，这样文字改了，图纸依旧成立。仓库还附了无头渲染脚本，用浏览器与视频工具就能把绘制过程录成动图，不依赖某个特定的智能体。
动图抽帧，对话框组件的平面尺寸标注
完整图纸，含分解视图、局部放大与间距变量表
第一，它量的是结构，不是外观。同一张纸上会同时出现平面图、分解视图、局部放大圆和一张变量表，S1 到 S11 对应十一处间距，H1 到 H5 对应高度，圆角与阴影另列。评审时争论的「这里该留多少」，第一次有了可以指着说的编号。
第二，变量优先这条约定比图本身值钱。数值写成 W、H、S 系列，改主题、换字号时不用重画整张；反过来说，如果你要的是一份能直接抄进样式表的像素值，它给不了，得自己把变量翻译成具体数字。
四条绘图规则与一页图纸的构成，数据来自项目说明页
第三，别把它当一键出图的成品。它是给智能体读的技能包，得有能跑命令行或智能体编辑器的环境；示例只有卡片与对话框两类，覆盖不了整页视觉稿，也不适合做带品牌配色的宣传图。项目 10 月 24 日之后没有再更新，当成一份思路清晰的模板来用更合适。
好看的图纸和好用的图纸是两回事。它选了后者：不描文案、不上颜色、连数字都先留成变量，只把「这个组件是怎么搭起来的」讲明白。
你交付组件时最常说不清的是间距、图层，还是它在页面里的位置？