dimensional-drawing

寸法図

Appleのアクセサリ寸法図（developer.apple.com/accessories/dimensional-drawings）のように、1つの対象を描画します。すべてを1枚のシートにまとめ、注記は左上に配置し、各ビューをシート全体に広げ、小さな詳細ビューを添えます。各ビューの横には、そのビューで使用する表を配置します。出力は自己完結型のHTMLファイル1つです（claude.aiでは、Artifactとして公開します）。作成例：このファイルの隣にあるexamples/dialog-sheet.htmlとexamples/card-sheet.html。ゼロから始めず、そこにある描画キットをコピーしてください。

基本ルール

1. モノクロ。 白い用紙に黒い線のみを使い、グレーも使用できます。アクセントカラーは一切使いません。線の太さ、破線のパターン、ハッチング、薄いグレーの塗りで区別します。設計上、明るいテーマのみを使用します（color-scheme: light、すべての色を明示）。
2. コンテンツではなく、構造を描画。 UIの場合、実際の文言ではなくスロットを描画します。リードボックスにはXを入れ、TITLE SLOT · FLEX、TRAIL / ACTION（内容に合わせた幅）、CONTENT SLOT · FILL、META SLOT · FLEX · WRAPS、LABEL SLOT、VALUE SLOTを使用します。テキスト幅の寸法は記載しません。サイズの用語：HUG（コンテンツに合わせたサイズ）、FLEX（残りのスペースを占める）、FILL（親要素の幅いっぱい）。
3. 数値ではなく、変数を使用。 図面上の寸法はすべてコードで表し、表にはコード、変数名、値を記載します。派生値は、結果を含めた式で表します：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. ブランド名を含めない。 ユーザーから求められない限り、図面、表題欄、フッターに製品名、会社名、ロゴ、ワードマークを入れません。中立的な名称を使用します（UI-CARD-001、「UI component reference」）。
5. 値を捏造しない。 ソースにないものはすべて[TBD]とします（例：ビューポートの余白、オーバーフローの動作、未公開の物理寸法）。比例関係を示す概略図として描画します。

コード体系

接頭辞	意味	例
S#	間隔	S1 コンテナ内余白、S2 内側余白、S3 積み重ね間隔、S4 FLEXとHUG間の最小間隔、S5 リード間隔、S6 内側インセット
H# / Z# / I#	高さ / 正方形サイズ / アイコンサイズ	H1 ヘッダー最小高、H2 フッター高、H3 アクション高、H5 入力欄高、Z1 リード、I1 アイコン
B、W	境界線、幅（範囲または固定値）	W = 420–680
R#	角丸	R1 コンテナ、R2 内側（派生値）、R3 コントロール、R4 ピル = h ÷ 2
Y、BL、SP、E#	影のオフセット / ぼかし / 広がり、範囲	E1 上、E2 側面、E3 下
T1、V1、MH	タッチ最小値、ビューポート余白、最大高さ	MH = 100vh − 2·V1

ページ構成

1. 表題欄（HTML、上部）。 図面に合わせてスタイルを設定します。1.2 pxの黒い枠、角丸16、0.8 pxの黒いセル罫線、通常の大文字（Arimo/Helvetica）、9.5 pxのラベル、大文字の値を使います。セル：大きなタイトル（細字の大文字、文字間隔を広げる）と1行の対象範囲、DWG NO.、REV、SHEETS、UNITS、SCALE、SOURCE。その下に、2列に揃えた一般注記NOTES: (UNLESS OTHERWISE SPECIFIED)を配置します（縮尺で測定しないこと、単位、スロットはプレースホルダーであること、コードと式、HUG/FLEX/FILL、[TBD]、グレースケール）。続けて、6～7個の主要変数の行を配置します（W · card-w 420–680、H1 · header-min 2·S1 + H3など）。式では変数名を小文字で記載します。
2. 図面シート。 各シートにつきSVGを1つ使用し、viewBox="0 0 1700 1060"、width:100%; min-width:1100pxを指定して、overflow-x:autoのフレーム内に配置します。シートの枠は角丸にします。シート上には表題欄を置きません（スペースを取るため）。識別情報はシート下のフッター行に配置します：左側にDATE | UI COMPONENT REFERENCE、右側にNAME, ARCHITECTURE | n。
3. できる限り1枚にまとめます。 1枚では読みやすく収まらない場合にのみシートを追加します。追加するシートもすべて同じ構成にし、注記で相互参照します（SEE SHEET 2）。

シートレイアウト（1シート）

• 注記 左上：図面上の各形状の横にも表示される、枠で囲んだ番号 [1]。一般規則は番号なしの行に記載します。
• 平面図 上部中央、0.9–1.1:1：スロット付きワイヤーフレーム。上部と下部に座標寸法／連鎖寸法（コード、FLEX/HUG の表記、範囲ラベル付きの全幅 W）、左側に領域の連鎖寸法（H1 / HUG / H2、全体は (REF n)）、右側に内側の連鎖寸法（S1 / H3 / S1 / S2 / S3 …）、半径の引き出し線、長鎖線の中心線、枠で囲んだ注記番号、別の場所に拡大して描いた形状を指す、ラベル付きの破線詳細円（DETAIL C）を含みます。
• 注記の下： 影の包絡線（カードの輪郭、ハッチング付きフットプリント、長鎖線の包絡線、E1/E2/E3）。
• 左側／左下： 層構成の分解斜視図。左側にラベルと引き出し線を付けます（キャンバス → [スクリーン] → 影 → コンテナー → インセット面 → スロットとコントロール）。
• 最下段： 入れ子状のコーナー詳細図（共通中心、B と S6、R2 = R1 − B − S6）、半径詳細図（半径ごとに1つの四分円弧、2–2.4:1）、内側／本体の詳細図（約0.65:1）、およびコンポーネント固有の詳細図。
• 右側の列： 変数テーブル（間隔、サイズ、半径、影。必要に応じてビューポート／キープアウトも含む）。

コンポーネント固有の図（該当するものを選択）

• カード／リスト行：本体のウェルのインセット、スタック間隔、フレックス対ハグのフッター、タッチターゲット。
• ダイアログ／シート／ポップオーバー：ビューポート上の配置（両軸で中央、全面スクリーン、MH ボックス、V1 [TBD]、ビューポート内の包絡線）、分解図のスクリーンレイヤー、ヘッダーコントロール（先頭 R4、閉じる Z2 と中央揃えアイコン (Z2−I1)÷2）、フィールド詳細（ラベル → S4 → 入力 H5、パディング S9、R3）、フッターアクション（末尾揃え、セカンダリのピル、間隔 S7、プライマリ R3、ボタンごとのパディング）。
• ボタン／チップ／入力：2–4:1 の詳細図、状態を横並びで表示、ヒット領域と描画上の高さの比較。
• ナビゲーション／ページレイアウト：ブレークポイントごとの平面図、カラムグリッド、セーフエリア。
• 物理製品： 第三角法による上面図／正面図／右側面図と断面 A–A（切断された立体をハッチング）、配置状態を示すシート領域（収納時、展開時、部品を取り外した状態）、および縮尺付きのサイズ範囲ストリップ。単位は mm。公開済みの仕様のみを記載し、出典を列挙し、矛盾には CONFLICT のフラグを付け、それ以外はすべて [TBD] とします。ロゴや表面テクスチャは使用しません。

UI コンポーネントの測定

実際のソース（リポジトリのファイル、Storybook のストーリー、デザインキャンバスのファイル、アーティファクト、URL）を確認します。ズームとテンプレートの穴を取り除き、Playwright でレンダリングしてフォントの読み込みを待ち、ボックスツリーを調べます（getBoundingClientRect + getComputedStyle：パディング、間隔、半径、ボーダー、min-height、flex-shrink、min-width）。grep の件数で全インスタンスを調査し、変数が1つの例ではなくシステム全体を反映するようにします。

作図キット（SVG、インライン JS）

各シートで begin(svgId) を1回使用します。これにより、一意の矢印マーカーと45°ハッチングパターン 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、寸法テキストは白い paint-order: stroke のノックアウト付きで 11 px、スロットラベルは 9 px の大文字で文字間隔を広げ、ビュータイトルは 12 px の大文字で文字間隔を広げ、その下に 9.5 px のサブタイトル（SCALE 0.9:1 · …）を付けます。スロットは破線 4 3、ハグ要素は薄いグレーで塗りつぶし、インセット面はさらに薄いグレー、ファントム／領域線は長鎖線、包絡線は長鎖一点鎖線、キープアウトはハッチングを使用します。

注意点：クラスの CSS fill ルールは fill="url(#hatch)" 属性より優先されるため、ハッチングする図形には fill のないクラスを使用します。変換グループ（分解図）の内部では vector-effect: non-scaling-stroke を使用し、CSS 変数による塗りつぶしは属性ではなく style で設定します。狭い連鎖寸法では dx／dy を使ってラベルをずらします。分解投影：matrix(.94s, .17s, −.34s, .47s, tx, ty−z)。

公開前

• 図面上のすべてのコードが表に記載されており、すべての数式が完結していること（ヘッダー = 2·S1 + H3、全体 = 領域の合計）。
• ブランド名のテキストがないこと。色を使っていないこと（グレーのトークン以外に16進数値がないか grep で確認）。内容に依存する幅がないこと。
• Playwright で幅1800 pxの状態で一度レンダリングし、スクリーンショットでラベルの重なりやシートの境界を越える要素がないか確認して、一度の修正で仕上げてから納品します（claude.ai で Artifact として公開するか、.html を保存します）。

完成したシートにアニメーションを付けるには、dimensional-drawing-motion スキルを使用してください。

何を描いたか、チームが定義する必要のある [TBD] の値があればそれを、1〜2文で返信してください。