开源 Skill dimensional-drawing 让 Agent 为 UI 组件绘制苹果配件风尺寸图

meng shao· @shao__meng · X·2026-10-25 19:58· 1 小时前AI 评分63

AI 导读

作者推荐 enesozturk 开源的 Skill dimensional-drawing，指向组件源码、Storybook、URL 或截图，可产出一页苹果配件尺寸图风格的单色技术图，画架构（间距、圆角、图层、视口落位）而非文案。

正文 · 原文

[开源 Skills 推荐] dimensional-drawing：给 UI 组件出一张苹果配件风尺寸图，Agent 可画、可动

指向组件源码 / Storybook / URL / 截图，产出一页苹果 配件尺寸图 风格的单色技术图，画的是 架构（间距、圆角、图层、视口落位），不是文案；另有 Motion skill 把成图做成约 10 秒「笔在画、镜头在动」的影片。
https://github.com/enesozturk/dimensional-drawing

这个 Skills 有什么用？
苹果给每款设备发尺寸图，配件商按图做壳：冷静、密、好看。本仓把同一套画法教给 Agent，让卡片、对话框变成可交给任何人重建布局的 spec sheet。故意不画真实文案，文案变了图仍成立。灵感致谢 Andreas Storm 的帖与苹果图纸。

五条「规则」
1. 单色：只用灰阶，靠线宽、虚线、剖面线区分
2. 画架构不画内容：TITLE SLOT · FLEX、ACTION · HUG、CONTENT SLOT · FILL
3. 变量不当死数：S1、R2、H1 = 2·S1 + H3；派生写公式
4. 去品牌：中性代号如 UI-CARD-001
5. 不编造：未知一律 [TBD]

怎么用
· Claude Code：clone 后把 skills/* 拷进 ~/.claude/skills/
claude. ai / Desktop：把 skill 文件夹打 zip，加到 Settings → Capabilities → Skills
· 其他 Agent：npx skills add enesozturk/dimensional-drawing，或直接指向 SKILL.md
· 示例提问：对 Card.tsx 做 dimensional drawing；或按示例风格画 settings dialog 解剖图
· 输出通常含：顶部标题栏（关键变量）+ 一页密图（notes、plan、exploded layers、细节圆、变量表）；物理物件也行（第三角投影、mm、仅用已发布规格）

让它动起来
成品图可动画：特写标题线描 → 拉远 plan 边画边出 → 图层抬起成爆炸图（先描边后填充防闪）→ 再拉远出全图。场景是时间的纯函数；主路径走 Claude Motion 导出 MP4；无 Claude 可用 headless（Node 18+、ffmpeg）。明确写：未测 Remotion / Motion Canvas / GSAP / Lottie。

Skill 工程细节
· 测 UI：读真实源、用 Playwright 渲染、走 box tree（getBoundingClientRect + getComputedStyle），并用 grep 统计实例，让变量反映系统而非单例
· 图纸：内联 SVG + dimH / dimV / callout / rad / table 等 drawing kit；一页优先 viewBox 1700×1060
· 发布前自检：图上每个代号进表、公式闭合、无品牌色、Playwright 截图查重叠

来源：meng shao · x.com