🏠 AI Tools Hub | 首页 | 文章 | 评测 | GitHub热门 | 排行榜

Dimensional Drawing教程：让Agent把你的组件画成苹果风规格图

📌 项目日期：2026年10月 | 数据来源：GitHub官方仓库 | 星数：1,637+

📋 项目简介

Apple 为每个设备发布 dimensional drawings（尺寸规格图），让配件商做出刚好贴合的保护壳——冷静、信息密集、漂亮：一张图纸、几个视图、小细节圆圈、到处是数字。这个仓库教会你的 Agent 用同样的方式画你的组件：一张卡片或对话框变成一页规格书，别人拿到就能重建它的架构——内边距、间距、圆角、层级、在视口中的位置。

刻意不画文案和内容，所以文字怎么改图都不过时。UI质量工具链的搭档：改AI味用 unslop，从设计稿到代码用 M3E Canvas。

🔧 五条家规

规则	含义
⚫️ 单色	只用灰阶；靠线重、虚线、填充纹理区分元素
🧱 画架构不画内容	`TITLE SLOT · FLEX`、`ACTION · HUG`、`CONTENT SLOT · FILL`
🔤 变量而非数字	`S1`、`R2`、`H1 = 2·S1 + H3`、`R2 = R1 − B − S6`
🏷️ 无品牌	中性命名如 `UI-CARD-001`
🙅 永不发明数值	未知的值保持 `[TBD]`

📦 安装

git clone https://github.com/enesozturk/dimensional-drawing
# skills/dimensional-drawing/      画图技能（含card+dialog示例单HTML）
# skills/dimensional-drawing-motion/  规格图转10秒短片
#   adapters/claude-motion.md       Claude Motion artifact（主）
#   adapters/headless/              Playwright+ffmpeg，无需Claude
# 复制到对应技能目录即可

✅ 使用建议

用途：设计系统交接、前后端对齐间距体系、组件库文档配图
"永不发明数值"是灵魂——它逼你先量好设计再出图，杜绝想当然
motion版生成的10秒短片适合放设计评审开场

📚 常见问题

Dimensional Drawing是什么？

一个Agent技能：学Apple给配件商出的dimensional drawings风格，把你的UI组件画成单色架构规格图——一张图、几个视图、细节圆圈、到处是标注，别人照着就能重建组件架构。

五条家规是什么？

纯灰度（靠线重/虚线/填充区分）、画架构不画内容（TITLE SLOT·FLEX这种）、用变量不用数字（S1/R2/H1=2·S1+H3）、中性命名（UI-CARD-001）、永不发明数值（未知就写[TBD]）。

动效版是什么？

dimensional-drawing-motion技能把规格图变成约10秒的短片，支持Claude的Motion artifact（主）或Playwright+ffmpeg无Claude方案。