# Dimensional Drawing

Make an Apple-style monochrome dimensional drawing of a UI component or physical...

- Repository: https://github.com/enesozturk/dimensional-drawing (1717 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-24
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add enesozturk/dimensional-drawing --skill dimensional-drawing -g -a claude-code -y`
Codex: `npx skills add enesozturk/dimensional-drawing --skill dimensional-drawing -g -a codex -y`
Cursor: `npx skills add enesozturk/dimensional-drawing --skill dimensional-drawing -g -a cursor -y`
Gemini CLI: `npx skills add enesozturk/dimensional-drawing --skill dimensional-drawing -g -a gemini-cli -y`

## Description

Make an Apple-style monochrome dimensional drawing of a UI component or physical product, title-block summary plus one dense drawing sheet with variable-based dimensions. Use when asked for an anatomy, spec sheet, redline or dimensional drawing of a component.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Dimensional drawing

Draw one subject the way Apple's accessory dimensional drawings do (developer.apple.com/accessories/dimensional-drawings): everything on one sheet, notes top-left, views spread across the sheet with smaller detail views, tables beside the views that use them. Output is one self-contained HTML file (on claude.ai, publish it as an Artifact). Worked examples: `examples/dialog-sheet.html` and `examples/card-sheet.html` next to this file, copy their drawing kit instead of starting from zero.

## House rules

1. **Monochrome.** Black line on white paper, grays only. No accent color anywhere. Tell things apart by line weight, dash pattern, hatch and light gray fill. Single light theme by design (`color-scheme: light`, every color explicit).
2. **Architecture, not content.** For UI, draw slots, never real copy: lead box with an X, `TITLE SLOT · FLEX`, `TRAIL` / `ACTION` (hug), `CONTENT SLOT · FILL`, `META SLOT · FLEX · WRAPS`, `LABEL SLOT`, `VALUE SLOT`. No text-width dimensions. Size words: HUG (sized by content), FLEX (takes remaining space), FILL (parent width).
3. **Variables, not numbers.** Every dimension on the drawing is a code; tables give code, variable name, value. Derived values are formulas with the result: `H1 header-min = 2·S1+H3 = 64`, `R2 r-inner = R1−B−S6 = 11`, `E1 = BL+SP−Y`, `E2 = BL+SP`, `E3 = BL+SP+Y`.
4. **Unbranded.** No product or company names, logos or wordmarks in the drawing, title block or footer unless the user asks. Use neutral names (`UI-CARD-001`, "UI component reference").
5. **Never invent values.** Anything not in the source is `[TBD]` (e.g. viewport margin, overflow behavior, unpublished physical dims) and is drawn as a proportional schematic.

## Code system

The rest: https://github.com/enesozturk/dimensional-drawing/blob/HEAD/skills/dimensional-drawing/SKILL.md