enesozturk/dimensional-drawing

维度绘图 QQ

给它一个UI组件,拿回一页的技术画. 平板,缺口,角光度,地层和取景口布置,被测量并贴上苹果的维图等标签.

安装… 用它来… 让它移动… 实例

– – . . .

苹果公司为每个设备发布维度图画,这样从属制作人就可以构建出适合的案例. 它们是冷静的,密集而美丽的:一张纸,几张视图,细小的细节圈子,到处都是数字.

这个Repo教你的代理 绘制你的组件 同样的方式。 一张卡片或一个对话框 变成了一张你可以交给任何人的图谱 他们将重建它的“建筑图谱 ” : 垫子、空隙、光度、层层、 如何在取景口坐落。 复制和内容被故意省去,所以当文本改变时图纸仍然真实.

□ 什么是内 □

房子规则

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? |-|-|-.

---

*** 建筑,不是内容**

• ***可变数,而非数字 *** [[T3]、[T4]、[T5]、[[T6]

dimensional-drawing ✏️📐

Give it a UI component, get back a one-page technical drawing of it. Paddings, gaps, corner radii, layers and viewport placement, measured and labeled like Apple’s dimensional drawings.

Install · Use it · Make it move · Examples

---

Apple publishes dimensional drawings for every device so accessory makers can build cases that fit. They are calm, dense and beautiful: one sheet, a few views, tiny detail circles, numbers everywhere.

This repo teaches your agent to draw your components the same way. A card or a dialog becomes a spec sheet you could hand to anyone and they would rebuild its architecture: paddings, gaps, radii, layers, how it sits in the viewport. Copy and content are left out on purpose, so the drawing stays true when the text changes.

What’s inside 🎁

skills/
├── dimensional-drawing/          the drawing skill
│   ├── SKILL.md
│   └── examples/                 card + dialog sheets (single HTML files)
└── dimensional-drawing-motion/   turns a sheet into a ~10 s film
    ├── SKILL.md
    ├── templates/                reference scene + stylesheet
    └── adapters/
        ├── claude-motion.md      Claude's Motion artifact (primary)
        └── headless/             Playwright + ffmpeg, no Claude needed

The house rules

Install

Claude Code

git clone https://github.com/enesozturk/dimensional-drawing
cp -r dimensional-drawing/skills/* ~/.claude/skills/

claude.ai / Claude desktop: zip a skill folder (for example skills/dimensional-drawing) and add it under Settings → Capabilities → Skills.

Any other agent (Codex, Cursor, Gemini CLI, …): use the skills CLI, or point your agent at the SKILL.md files.

npx skills add enesozturk/dimensional-drawing

Use it

Ask for a drawing and point at the source (a repo file, a Storybook story, a URL, a screenshot):

Make a dimensional drawing of the Card component in src/components/Card.tsx

Draw the anatomy of our settings dialog, same style as the examples