dimensional-drawing Skill：UI 组件苹果风尺寸图并可动起来
开源 Skill 让 Claude Code 等智能体把组件源码或截图画成苹果配件风单色尺寸图，另有 Motion skill 用 Claude Motion 导出约 10 秒「笔在画、镜头在动」的 MP4。
[开源 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 截图查重叠
这条是引用着另一条写的：x.com/enesozturkdev/status/2114035471953326126