Dimensional Drawing
Condensed from: enesozturk/dimensional-drawing (https://github.com/enesozturk/dimensional-drawing)
What it is
A one-page, Apple-accessory-style technical drawing of a UI component (or physical product): paddings, gaps, radii, layers and viewport placement, labeled as variables. It documents architecture, not copy, so it stays true when text changes. Output: one self-contained HTML file (title block + one SVG sheet). Use for component specs, anatomy docs, handoff, or a "how it's built" portfolio visual.
How to ask
- "Make a dimensional drawing of
Cardinsrc/components/Card.tsx" or "Draw the anatomy of the settings dialog, same style as the examples." - Point at real source (file, Storybook story, URL, screenshot). Measure by rendering in Playwright, waiting for fonts, walking the box tree (
getBoundingClientRect+getComputedStyle: padding, gap, radius, border, min-height), and grepping every instance so values reflect the system. - Reply in one or two sentences: what was drawn, which
[TBD]values the team must define.
House rules
- Monochrome: black on white, grays only (
#111,#444,#7a7a7a,#d0d0d0,#e6e6e6,#f3f3f3). Distinguish by line weight, dash, hatch, light fill. - Slots, not content: lead box with an X,
TITLE SLOT · FLEX,ACTION · HUG,CONTENT SLOT · FILL. HUG = sized by content, FLEX = remaining space, FILL = parent width. - Variables, not numbers: every dimension is a code; tables give code, name, value; derived values show formula and result (
H1 header-min = 2·S1 + H3 = 64,R2 = R1 - B - S6 = 11). - Unbranded: neutral IDs like
UI-CARD-001. - Never invent: unknowns are
[TBD], drawn as proportional schematics.
Codes: S# spacing (S1 container pad, S2 inner pad, S3 stack gap, S6 inner inset) · H# heights · Z# squares · I# icon · B border · W width range · R# radii (R1 container, R2 inner, R3 control, R4 pill = h/2) · Y, BL, SP, E1-E3 shadow envelope · T1 touch min · V1 viewport margin.
Sheet layout
- Title block (HTML): 1.2px frame, radius 16, 0.8px cell rules, caps Arimo/Helvetica; cells for title, DWG NO., REV, UNITS, SCALE, SOURCE;
NOTES: (UNLESS OTHERWISE SPECIFIED); a row of 6-7 key variables. - SVG sheet:
viewBox="0 0 1700 1060",min-width: 1100pxinsideoverflow-x: auto. Notes top-left with boxed[1]numbers echoed on the drawing; plan view top-center at ~1:1 with chain dims on all sides, radius callouts, dash-dot centerlines, dashed detail circles; exploded axonometric layer stack bottom-left (canvas → scrim → shadow → container → slots); bottom row of details (nested corner, radius arcs at 2:1); variable tables in the right column. - Dialogs add viewport placement and scrim; buttons/inputs add 2-4:1 details, states, hit area vs drawn height.
Line and label spec
| Element | Spec |
|---|---|
| Object outline | 1.6px |
| Dimension line | 0.7px, 7px filled arrows |
| Extension line | 0.55px, 3px gap, 5px overshoot |
| Dim text | 11px, white paint-order: stroke knockout |
| Labels / view titles | 9px caps letter-spaced / 12px caps + 9.5px subtitle |
| Slot / envelope / keep-out | dashed 4 3 / dash-dot / 45° hatch |
Exploded projection: matrix(.94s, .17s, -.34s, .47s, tx, ty - z). Before delivering: every code is in a table, formulas sum, no non-gray hex, render at 1800px and fix overlaps.
Motion variant (~11 s film)
A pen draws the sheet while a camera moves; render(t) is a pure function of time, 1920×1080, 60fps.
- 0-2.3s: ~4.4× close-up on the header as it draws.
- 2.3-4.2s: log-zoom back to ~1.7× while the plan and dims draw.
- 4.2-7.2s: layers lift into the exploded view, strokes first, fills after (no white flash).
- 7.2-9.2s: out to the full sheet; notes, tables, details draw in 0.3-0.5s bursts.
- Hold with a slow push.
Strokes animate stroke-dashoffset 1 → 0 on pathLength=1; dashed lines and text fade. Ease-in-out for camera and strokes, ease-out for fades, no bounce, no color. Runs in Claude's Motion artifact or headless via Playwright + ffmpeg.
Read by your agent through get_guide("dimensional-drawing") in the taste MCP.