agentSkill
Dimensional Drawing — 애플식 치수 도면으로 UI 고정하기
출처: https://github.com/enesozturk/dimensional-drawing/blob/main/skills/dimensional-drawing/SKILL.md
| name | dimensional-drawing |
| 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. |
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:1100pxinside anoverflow-x:autoframe. Rounded sheet border. No title block on the sheet (it costs space); identity goes in a footer line under the sheet:DATE | UI COMPONENT REFERENCEleft,NAME, ARCHITECTURE | nright.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).
(이하 생략 — 전체 SKILL.md는 원본 저장소에서 확인하세요: https://github.com/enesozturk/dimensional-drawing/blob/main/skills/dimensional-drawing/SKILL.md)
원본: https://github.com/enesozturk/dimensional-drawing/blob/main/skills/dimensional-drawing/SKILL.md · 라이선스: MIT — 원문 그대로 옮겼으며, 자세한 조건은 저장소의 LICENSE를 따릅니다.
※ 화면 표시를 위해 꺾쇠괄호(< >)를 전각 문자(＜ ＞)로 바꿨습니다. 그대로 복사해 쓰실 때는 위 원본 저장소의 SKILL.md를 받아 주세요.