dimensional-drawing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

按照 Apple 配件尺寸图的方式绘制一个对象（developer.apple.com/accessories/dimensional-drawings）：所有内容放在同一张图纸上，说明位于左上角，各视图分布在图纸中，并配有较小的局部详图；变量表紧邻对应的视图。输出为一个自包含的 HTML 文件（在 claude.ai 上发布为 Artifact）。可直接参考本文件旁的完整示例：

examples/dialog-sheet.html

和

examples/card-sheet.html

——复制其中的绘图工具包，而不要从零开始。

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.

单色。 白纸黑线，仅使用灰阶。任何位置都不得使用强调色。通过线宽、虚线样式、剖面线和浅灰填充来区分元素。设计上仅采用浅色主题（
```
color-scheme: light
```
，每个颜色均明确指定）。
架构，而非内容。 对于 UI，只绘制占位槽，不绘制真实文案：前置框内加 X、
```
TITLE SLOT · FLEX
```
、
```
TRAIL
```
/
```
ACTION
```
（hug）、
```
CONTENT SLOT · FILL
```
、
```
META SLOT · FLEX · WRAPS
```
、
```
LABEL SLOT
```
、
```
VALUE SLOT
```
。不标注文字宽度尺寸。尺寸关键词：HUG（由内容决定尺寸）、FLEX（占用剩余空间）、FILL（父级宽度）。
使用变量，而非数字。 图纸上的每个尺寸均以代码表示；表格列出代码、变量名和值。派生值使用带结果的公式：
```
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
```
。
无品牌化。 除非用户另有要求，否则图纸、标题栏或页脚中不得出现产品名、公司名、Logo 或字标。使用中性名称（
```
UI-CARD-001
```
、"UI component reference"）。
绝不虚构数值。 原文中没有提供的内容一律标为
```
[TBD]
```
（例如视口边距、溢出行为、尚未公布的实物尺寸），并按比例绘制为示意图。

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

前缀	含义	示例
S#	间距	S1 container pad, S2 inner pad, S3 stack gap, S4 min gap flex↔hug, S5 lead gap, S6 inner inset
H# / Z# / I#	高度 / 方形尺寸 / 图标尺寸	H1 header-min, H2 footer-h, H3 action-h, H5 input-h, Z1 lead, I1 icon
B, W	边框、宽度（范围或固定值）	W = 420–680
R#	圆角	R1 container, R2 inner (derived), R3 control, R4 pill = h ÷ 2
Y, BL, SP, E#	阴影偏移/模糊/扩展，包络	E1 top, E2 side, E3 bottom
T1, V1, MH	最小触控尺寸、视口边距、最大高度	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
```
).

标题栏（HTML，置顶）。 样式应与图纸一致：1.2 px 黑色边框、圆角 16、0.8 px 黑色单元格分隔线、普通全大写字体（Arimo/Helvetica）、9.5 px 标签、大写值。单元格包括：大号标题（细体全大写、加大字距）和一行范围说明，以及 DWG NO.、REV、SHEETS、UNITS、SCALE、SOURCE。随后是
```
NOTES: (UNLESS OTHERWISE SPECIFIED)
```
，通用说明采用两列对齐布局（不得缩放；单位；占位槽仅为占位符；代码和公式；HUG/FLEX/FILL；[TBD]；灰度）。再设置一行 6–7 个关键变量（
```
W · card-w 420–680
```
、
```
H1 · header-min 2·S1 + H3
```
……），公式文字使用小写。
图纸（一个或多个）。 每张图纸使用一个 SVG，
```
viewBox="0 0 1700 1060"
```
，置于
```
overflow-x:auto
```
容器内，并设置
```
width:100%; min-width:1100px
```
。使用圆角边框。图纸上不放标题栏（会占用空间）；标识信息放在图纸下方的页脚行中：左侧为
```
DATE | UI COMPONENT REFERENCE
```
，右侧为
```
NAME, ARCHITECTURE | n
```
。
优先使用一张图纸。只有一张图纸无法清晰容纳全部内容时才增加图纸；每张新增图纸保持相同结构，并在注释中进行交叉引用（
```
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).

左上角为说明：带框编号
```
[1]
```
也应出现在图中相应特征旁；一般规则使用无编号条目。
平面视图位于上方中央，比例为 0.9–1.1:1：使用占位槽的线框图；顶部和底部标注坐标式/链式尺寸（尺寸代码、FLEX/HUG 字样、带范围标签的总宽 W），左侧标注区域尺寸链（H1 / HUG / H2、整体
```
(REF n)
```
），右侧标注内部尺寸链（S1 / H3 / S1 / S2 / S3……），另有圆角引出标注、点划线中心线、带框注释编号，以及指向其他位置放大绘制特征的虚线详图圆圈和标签（
```
DETAIL C
```
）。
说明下方为阴影包络：包含卡片轮廓、剖面线填充的占地范围、点划线包络和 E1/E2/E3。
左侧/左下角为图层堆叠的分解轴测图，左侧附标签和引线（画布 → [scrim 遮罩] → 阴影 → 容器 → 内嵌表面 → 占位槽与控件）。
底部一排包括嵌套圆角详图（共享中心、B 与 S6、
```
R2 = R1 − B − S6
```
）、圆角详图（每个圆角绘制一段四分之一圆弧，比例为 2–2.4:1）、比例约为 0.65:1 的内部/主体详图，以及组件专用详图。
右列为变量表，包括间距、尺寸、圆角和阴影；适用时还可加入视口/禁入区表格。

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.

卡片/列表行：主体内容区内缩、堆叠间距、采用 flex 与 hug 的页脚、触控区域。
对话框/sheet/弹出层：视口定位（水平和垂直方向均居中）、满屏 scrim 遮罩、MH 框、V1 [TBD]、视口内的包络范围、分解视图中的 scrim 层、标头控件（前导元素 R4；关闭控件 Z2，图标居中且
```
(Z2−I1)÷2
```
）、字段详情（标签 → S4 → 输入框 H5、内边距 S9、R3）、页脚操作（末端对齐、次要胶囊按钮、间距 S7、主要按钮 R3、每个按钮的内边距）。
按钮/chip/输入框：比例为 2–4:1 的详图、并排展示各状态、触控区域与绘制高度。
导航/页面布局：各断点下的平面视图、列网格、安全区域。
实物产品：采用第三角法的俯视、前视和右视图，以及 A–A 剖面（剖切实体使用剖面线）；设置位置/状态图区域（收纳、展开、部件移除）和按比例绘制的尺寸范围条；以 mm 为单位；仅使用已发布规格并列出信息来源，冲突标记为
```
CONFLICT
```
，其余内容全部标为 [TBD]；不得出现 Logo 或表面纹理。

Measuring a UI component

测量 UI 组件

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.

读取真实来源（仓库文件、Storybook story、设计画布文件、Artifact、URL）。排除缩放因素和模板孔位，使用 Playwright 渲染并等待字体加载，然后遍历盒模型树（

getBoundingClientRect

getComputedStyle

：内边距、间距、圆角、边框、最小高度、flex-shrink、最小宽度）。使用 grep 计数统计所有实例，确保变量反映整个系统，而不是单个示例。

Drawing kit (SVG, inline JS)

绘图工具包（SVG、内联 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)

每张图纸使用一次

begin(svgId)

，用于创建包含唯一箭头 marker 和 45° 剖面线 pattern id 的

<defs>

，并绘制图纸边框。以下辅助函数均使用图纸单位：

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

制图规范：对象轮廓 1.6 px；尺寸线 0.7 px；尺寸界线 0.55 px，距被测特征 3 px，并超出 5 px；7 px 实心箭头；尺寸文字 11 px，通过白色

paint-order: stroke

描边形成消隐效果；占位槽标签为 9 px 全大写并增加字距；视图标题为 12 px 全大写并增加字距，副标题为 9.5 px（

SCALE 0.9:1 · …

）。占位槽使用 4 3 虚线；hug 元素使用浅灰填充；内嵌表面使用更浅的灰色；幻影线/区域线采用长虚线；包络采用点划线；禁入区采用剖面线。

常见问题：CSS 类上的

fill

规则会覆盖

fill="url(#hatch)"

属性，因此使用剖面填充的形状必须使用不含

fill

的 class。在变换组内（分解视图）使用

vector-effect: non-scaling-stroke

，并通过

style

而不是属性设置 CSS 变量填充。紧密尺寸链中的标签使用

dx

dy

错开排列。分解投影：

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.

图纸中的每个代码都存在于表格中；每个公式都能闭合（header = 2·S1 + H3，overall = 各区域之和）。
无品牌文字；无颜色（使用 grep 检查灰阶 token 之外的十六进制颜色值）；不采用依赖文案内容的宽度。
以 1800 px 宽度使用 Playwright 渲染一次，检查截图中的标签重叠、元素越出图纸边框等问题，一次性修复，然后交付（在 claude.ai 上发布为 Artifact，或保存为 .html 文件）。

若要为完成的图纸添加动画，请使用

dimensional-drawing-motion

skill。

用一到两句话回复：说明绘制了什么，以及团队需要定义哪些 [TBD] 值。