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

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).
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).
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
```
.
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").
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

Prefix	Meaning	Examples
S#	spacing	S1 container pad, S2 inner pad, S3 stack gap, S4 min gap flex↔hug, S5 lead gap, S6 inner inset
H# / Z# / I#	heights / square sizes / icon size	H1 header-min, H2 footer-h, H3 action-h, H5 input-h, Z1 lead, I1 icon
B, W	border, width (range or fixed)	W = 420–680
R#	radius	R1 container, R2 inner (derived), R3 control, R4 pill = h ÷ 2
Y, BL, SP, E#	shadow offset/blur/spread, envelope	E1 top, E2 side, E3 bottom
T1, V1, MH	touch min, viewport margin, max height	MH = 100vh − 2·V1

Page structure

Title block (HTML, top). Styled like the drawing: 1.2 px black frame, radius 16, 0.8 px black cell rules, plain caps lettering (Arimo/Helvetica), 9.5 px labels, caps values. Cells: big title (light caps, letter-spaced) + one-line scope, DWG NO., REV, SHEETS, UNITS, SCALE, SOURCE. Then
```
NOTES: (UNLESS OTHERWISE SPECIFIED)
```
general notes in two aligned columns (do not scale; units; slots are placeholders; codes and formulas; HUG/FLEX/FILL; [TBD]; grayscale). Then a row of 6–7 key variables (
```
W · card-w 420–680
```
,
```
H1 · header-min 2·S1 + H3
```
…), formulas in lowercase.
Drawing sheet(s). One SVG per sheet,
```
viewBox="0 0 1700 1060"
```
,
```
width:100%; min-width:1100px
```
inside an
```
overflow-x:auto
```
frame. Rounded sheet border. No title block on the sheet (it costs space); identity goes in a footer line under the sheet:
```
DATE | UI COMPONENT REFERENCE
```
left,
```
NAME, ARCHITECTURE | n
```
right.
Prefer one sheet. Add a sheet only when one can't hold it legibly; every extra sheet keeps the identical structure, and notes cross-reference (
```
SEE SHEET 2
```
).

Sheet layout (one sheet)

Notes top-left: boxed numbers
```
[1]
```
that also appear on the drawing next to the feature; un-numbered lines for general rules.
Plan view top-center at 0.9–1.1:1: wireframe with slots; ordinate/chain dims top and bottom (codes, FLEX/HUG words, overall W with range label), region chain left (H1 / HUG / H2, overall
```
(REF n)
```
), inner chain right (S1 / H3 / S1 / S2 / S3 …), radius callouts, dash-dot centerlines, boxed note numbers, and dashed detail circles with labels (
```
DETAIL C
```
) pointing at features drawn larger elsewhere.
Under the notes: shadow envelope (card outline, hatched footprint, dash-dot envelope, E1/E2/E3).
Left/bottom-left: exploded axonometric of the layer stack with labels and leaders on the left (canvas → [scrim] → shadow → container → inset surfaces → slots & controls).
Bottom row: nested-corner detail (shared center, B and S6,
```
R2 = R1 − B − S6
```
), radius details (one quarter-arc per radius, 2–2.4:1), inner/body detail at ~0.65:1, plus component-specific details.
Right column: variable tables (Spacing, Size, Radius, Shadow, plus Viewport / Keep-out when relevant).

Component-specific views (pick what applies)

Card / list row: body well insets, stack gap, flex vs hug footer, touch target.
Dialog / sheet / popover: viewport placement (centered on both axes, full-bleed scrim, MH box, V1 [TBD], envelope inside the viewport), scrim layer in the exploded view, header controls (lead R4, close Z2 with centered icon
```
(Z2−I1)÷2
```
), field detail (label → S4 → input H5, pad S9, R3), footer actions (end-aligned, secondary pill, gap S7, primary R3, per-button pad).
Button / chip / input: detail at 2–4:1, states side by side, hit area vs drawn height.
Navigation / page layout: plan per breakpoint, column grid, safe areas.
Physical products: third-angle top / front / right views + section A–A (hatched cut solids), a positions sheet area (packed, deployed, parts removed) and a size-range strip to scale; units mm; published specs only, sources listed, conflicts flagged
```
CONFLICT
```
, everything else [TBD]; no logos or surface textures.

Measuring a UI component

Read the real source (repo file, Storybook story, design-canvas file, artifact, URL). Strip zoom and template holes, render in Playwright, wait for fonts, walk the box tree (

getBoundingClientRect

getComputedStyle

: padding, gap, radius, border, min-height, flex-shrink, min-width). Survey every instance with grep counts so the variables reflect the system, not one example.

Drawing kit (SVG, inline JS)

Use one

begin(svgId)

per sheet that creates a

<defs>

with a unique arrow marker and a 45° hatch pattern id, and draws the sheet border. Helpers, all in sheet units:

dimH(x1,x2,y,ext1Y,ext2Y,label,{below,dx,dy,c})   // horizontal dim; <28px span → arrows outside
dimV(y1,y2,x,ext1X,ext2X,label,{side:'l'|'r'})    // vertical dim; no side → rotated label
callout(px,py,ex,ey,label,dir)                    // dot + leader + shoulder + text
rad(cornerX,cornerY,r,'tl'|'tr'|'bl'|'br',label,len)
nb(x,y,n)                                          // boxed note number
detailRef(cx,cy,r,label,lx,ly)                     // dashed circle + leader
table(x,y,title,[[code,variable,value]…])          // widths 40/88/96, returns next y
notes([[n,text]…])                                 // n=0 → unnumbered

Conventions: object outline 1.6 px; dim lines 0.7 px; extension lines 0.55 px, 3 px off the feature, 5 px overshoot; 7 px filled arrows; dim text 11 px with a white

paint-order: stroke

knockout; slot labels 9 px caps letter-spaced; view titles 12 px caps letter-spaced with a 9.5 px subtitle (

SCALE 0.9:1 · …

). Slots dashed 4 3; hug elements light gray fill; inset surfaces lighter gray; phantom/region lines long-dash; envelopes dash-dot; keep-outs hatched.

Pitfalls: a CSS

fill

rule on a class overrides a

fill="url(#hatch)"

attribute, so hatched shapes need a class without

fill

. Inside transformed groups (exploded view) use

vector-effect: non-scaling-stroke

, and set CSS-variable fills via

style

, not attributes. Stagger labels in tight chains with

dx

dy

. Exploded projection:

matrix(.94s, .17s, −.34s, .47s, tx, ty−z)

Before publishing

Every code on the drawing exists in a table; every formula closes (header = 2·S1 + H3, overall = sum of regions).
No brand text; no color (grep for hex values outside the gray tokens); no content-dependent widths.
Render once with Playwright at 1800 px wide, look at the screenshot for overlapping labels and elements crossing the sheet border, fix in one pass, then deliver (publish as an Artifact on claude.ai, or save the .html).

To animate the finished sheet, use the

dimensional-drawing-motion

skill.

Reply in one or two sentences: what was drawn, and any [TBD] values the team should define.

dimensional-drawing

NPX Install

Tags

SKILL.md Content