Open-source Skill dimensional-drawing: Letting Agents Draw Apple Accessory-Style Dimensional Diagrams for UI Components
The open-source Skill dimensional-drawing can turn component source code, Storybook, a URL, or a screenshot into a single-page monochrome technical diagram in the style of Apple accessory dimensional drawings. It depicts architectural information such as spacing, corner radii, layers, and viewport placement rather than copy. A companion Motion skill can turn the resulting image into a roughly 10-second drawing animation; the main path uses Claude Motion to export an MP4, and when Claude is unavailable, a headless approach with Node 18+ and ffmpeg can be used. Installation options include copying skills/* into ~/.claude/skills/, uploading a zip via Settings → Capabilities → Skills on claude.ai, or running npx skills add enesozturk/dimensional-drawing.
Why read this
AI score 55
The original article lays out a complete, reusable set of Skill rules, installation paths, and self-check workflows, so readers can follow along directly and adapt them to their own components.
Topics
View original postMade a skill for dimensional drawings of UI components. Inspired by Apple's accessory drawings, it documents a component's architecture into a spec sheet. https://t.co/KKb9sOgTN8 https://t.co/0Z0Kpjk6bD
View original
Made a skill for dimensional drawings of UI components. Inspired by Apple's accessory drawings, it documents a component's architecture into a spec sheet. https://t.co/KKb9sOgTN8 https://t.co/0Z0Kpjk6bD
Body · AI translation
[Open-source Skills recommendation] dimensional-drawing: produce an Apple-accessory-style dimensional drawing for a UI component — the Agent can draw it and animate it
Point it at component source code / Storybook / URL / screenshot, and it produces a one-page monochrome technical drawing in the style of an Apple accessory dimensional drawing. What it draws is the architecture (spacing, corner radii, layers, viewport placement), not the copy; a separate Motion skill turns the finished drawing into a roughly 10-second film in which "the pen is drawing and the camera is moving." https://t.co/DuMEtOXA95
What is this Skills for? Apple publishes a dimensional drawing for every device, and accessory makers build cases from those drawings: calm, dense, good-looking. This repo teaches the same drawing method to an Agent, so that cards and dialogs become spec sheets that anyone can use to rebuild the layout. It deliberately does not draw the real copy, so the drawing still holds when the copy changes. Inspiration credit to Andreas Storm's post and Apple's drawings.
Five "rules" 1. Monochrome: grayscale only, distinguished by line weight, dashed lines, and hatching 2. Draw the architecture, not the content: TITLE SLOT · FLEX, ACTION · HUG, CONTENT SLOT · FILL 3. Variables are not hard-coded numbers: S1, R2, H1 = 2·S1 + H3; derived values are written as formulas 4. Remove branding: neutral codes such as UI-CARD-001 5. Do not fabricate: anything unknown is always [TBD]
How to use it · Claude Code: after cloning, copy skills/* into ~/.claude/skills/ claude.ai / Desktop: zip the skill folder and add it under Settings → Capabilities → Skills · Other Agents: npx skills add enesozturk/dimensional-drawing, or point directly at SKILL.md · Example prompts: make a dimensional drawing of Card.tsx; or draw an anatomy diagram of the settings dialog in the style of the example · Output usually includes: a top title bar (key variables) + a dense one-page drawing (notes, plan, exploded layers, detail circles, variable table); physical objects are also fine (third-angle projection, mm, published specs only)
Make it move The finished drawing can be animated: a close-up line drawing of the title → pull back as the plan is drawn in stroke by stroke → layers lift into an exploded view (outline first, then fill, to prevent flicker) → pull back again to reveal the full drawing. The scene is a pure function of time; the main path uses Claude Motion to export an MP4; without Claude, a headless setup can be used (Node 18+, ffmpeg). It states explicitly: Remotion / Motion Canvas / GSAP / Lottie were not tested.
Skill engineering details · Measuring the UI: read the real source, render with Playwright, walk the box tree (getBoundingClientRect + getComputedStyle), and use grep to count instances so that variables reflect the system rather than a single instance · Drawing: inline SVG plus a drawing kit such as dimH / dimV / callout / rad / table; one page prefers a viewBox of 1700×1060 · Self-check before publishing: every code on the drawing appears in the table, formulas close, no brand colors, and Playwright screenshots are used to check for overlaps