What is the dimensional-drawing skill?

It's an open-source agent skill by Enes Ozturk that takes a UI component — a repo file, a Storybook story, a live URL, or a screenshot — and returns a one-page technical drawing of it in the style of Apple's accessory dimensional drawings. The output is a dense, monochrome spec sheet: a plan view, exploded layers, detail circles, and tables of measurements expressed as variables (S1, R2, H1 = 2·S1 + H3) rather than raw pixel numbers.

How do I install dimensional-drawing?

For Claude Code, clone the repo and copy the skill folders into ~/.claude/skills/. For claude.ai or Claude desktop, zip the skills/dimensional-drawing folder and add it under Settings → Capabilities → Skills. For any other agent (Codex, Cursor, Gemini CLI), use the skills CLI with 'npx skills add enesozturk/dimensional-drawing' or point the agent directly at the SKILL.md files.

Why draw UI components as variables instead of fixed pixel values?

Because the drawing is meant to capture a component's architecture, not its content. Expressing dimensions as related variables (R2 = R1 − B − S6) documents the relationships that stay true even when copy, data, or exact sizes change. Apple's own dimensional drawings do the same thing for physical devices so accessory makers can build cases that fit regardless of color or finish.

What does the companion motion skill do?

The dimensional-drawing-motion skill animates a finished sheet into roughly a 10-second film — the lines draw themselves while a camera pans over the paper: a close-up on the header, a pull-back to the plan view, layers lifting into an exploded view, then a final pull-back to the whole sheet. It's tuned for Claude's Motion artifact (export to MP4) and also runs headless via Playwright and ffmpeg with no Claude required.

dimensional-drawing: A Skill That Turns Any UI Component Into an Apple-Style Technical Drawing

By Prahlad Menon Published 2026-10-26 4 min read

Most design-to-code tooling runs one direction: turn a picture into a component. Enes Ozturk’s dimensional-drawing runs the other way, and it’s more interesting for it. Point it at a Card component and you get back a one-page technical drawing of that card — the kind of calm, dense, monochrome spec sheet Apple publishes for every device so case makers can build accessories that fit.

It’s an agent skill, not an app. And the idea underneath it is sharper than the pretty output suggests.

What it actually produces

Give it a source — a repo file, a Storybook story, a live URL, or just a screenshot — and ask for a drawing:

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

What comes back is a single dense sheet: a title block with the key variables up top, then a plan view, exploded layers, nested detail circles (corner, radii, body), and tables of measurements. It reads like something an engineer would hand to a machine shop — except the “part” is a dialog box.

The house rules are where the thinking lives:

Monochrome. Grays only. Elements are told apart by line weight, dashes, and hatches — not color. This forces the drawing to describe structure.
Architecture, not content. Slots are labeled by role and behavior: TITLE SLOT · FLEX, ACTION · HUG, CONTENT SLOT · FILL. The actual words and data are deliberately left out.
Variables, not numbers. Dimensions are expressed as related variables — S1, R2, H1 = 2·S1 + H3, R2 = R1 − B − S6 — so the sheet documents relationships, not a frozen pixel snapshot.
Unbranded. Neutral part names like UI-CARD-001.
Never invent values. Unknowns stay [TBD] rather than being guessed.

That third rule is the clever one. By describing a component as R2 = R1 − B − S6 instead of “radius: 6px,” the drawing stays true when the content, data, or exact sizing changes. You’re documenting the component’s grammar, the same way Apple’s device drawings stay useful across colorways and finishes.

Make it move

There’s a companion skill, dimensional-drawing-motion, that turns a finished sheet into roughly a ten-second film — the pen draws the lines in while a camera moves over the paper: close-up on the header, pull back to the plan view, layers lifting off into the exploded view (strokes first, fills after, so nothing flashes), then a final pull-back to the full sheet.

Because the scene is written as a pure function of time, it runs in two places: inside Claude’s Motion artifact (the primary target, where the timing was tuned, export to MP4), or headless via Playwright + ffmpeg with no Claude in the loop. The author is honest that only the Claude-Motion and Playwright paths are tested — Remotion, GSAP, Lottie and friends are explicitly untested.

Why this is worth noticing

We’ve written a lot lately about skills that generate things — Scrollcraft building cinematic scroll sites, Pixel Path rendering pixel-art fly-throughs, SolidCraft driving a CAD kernel. dimensional-drawing is a quieter kind of skill: it produces documentation, and it does so by imposing a strong, opinionated abstraction.

That abstraction — “a UI component is an architecture of slots, gaps, radii, and layers, expressed as variables” — is the actual product. The pretty Apple-style sheet is just the renderer. It rhymes with SketchVLM’s idea that drawing is a form of reasoning: forcing a component into a measured, variable-based diagram makes its structure legible in a way a screenshot never does. Hand the sheet to a new engineer and they could rebuild the component’s bones without ever seeing your code.

It’s also a small, well-made example of what a good skill looks like: narrow scope, firm rules, honest about what’s tested, and portable across agents via the skills CLI rather than locked to one tool. MIT licensed.

Try it

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

# Any other agent
npx skills add enesozturk/dimensional-drawing

Then point it at a component and ask for the anatomy. It works on physical objects too — the README suggests drawing a thermos — using third-angle views and published specs. Calm, dense, and beautiful, numbers everywhere.