[デザイン] 2. SSOT → 静的UI骨格（見た目のみ）を生成

コマンド: /design-ui [$TARGET] [$PAGE_KEY]

設計JSON（tokens/components/design_context）を参照し、静的UI骨格のみ生成。ロジック/状態/データ取得は入れない。ターゲットは doc/input/rdd.md の技術スタックを既定とし、引数で上書きする場合は ADR-lite承認必須。

いつ使う？（位置づけ）

/design-ssot または /design-mock で SSOT（tokens/components/context） が揃ったあと
「実装スタック準拠のファイル配置」で 見た目だけの骨格を先に作りたいとき（後で分割・結合する前提）

次に何をする？

重複UIを減らして保守しやすくする → /design-components
variantsを型付きprops/属性に落として再利用UIにする → /design-assemble

見た目の基準（ビューポート）について

まず doc/input/rdd.md の「ターゲット表示環境（事実）」を参照し、プレビュー/Story等の確認は そのビューポートを基準に行う
未記入の場合は、以下を 推奨デフォルトとして仮置きする：
- desktop: 1440x900
- mobile: 390x844
- tablet: 834x1194

入力

$TARGET（任意）: react | vue | svelte | swiftui | flutter | web-components | plain-html など
$PAGE_KEY（任意）: 画面キー（doc/input/design/design_context.json の pages[].key）
- 省略時: 全ページを対象に生成する（複数ページ対応の既定）

出力（差分のみ）

スタック別の標準配置へ静的UIファイル一式
- 例: React → src/components/*, src/stories/*, tailwind.config.js(tokens反映)
- 例: Vue → src/components/*.vue, src/stories/*
- 例: SwiftUI → Sources/UI/*
Storybook/プレビュー（対応スタックのみ）

前提（入力ファイル）

doc/input/design/design-tokens.json
doc/input/design/components.json
doc/input/design/design_context.json
doc/input/design/copy.json（文言のSSOT。一字一句固定）
doc/input/design/assets/assets.json（任意。存在する場合は必ず参照して画像を配置する）（通常は /design-ssot の成果物）
art-direction を読み込む: SSOTの値を骨格に落とす際の描画判断（材質の陰影表現/引き算の禁止則/シグネチャ表現の実装位置）は同スキルの規律に従う。project-design-language にAD宣言済みの決定があればそちらを優先する
レイアウト・配置の判断は design-drafter サブエージェント（.claude/agents/design-drafter.md）に委譲する: 画面骨格の生成前にワイヤー宣言（グルーピング/優先度/視線の流れ/余白の設計）を出させ、それに従って骨格を組む（SSOTの design_context.json にレイアウトが確定している場合はそちらが優先。ワイヤー宣言は矛盾検査に使う）

参照（スキーマ）

constraints/resizing/autoLayout の解釈とレスポンシブ対応表は doc/input/design/ssot_schema.md を参照する

レスポンシブ適用規則（Figma→CSS/スタイル）

Auto Layout → flex 等 + tokens の gap/padding
constraints/resizing マッピング
- horizontal: SCALE → w-full / flex-grow 等
- vertical: TOP_BOTTOM → h-full（文脈でcol）
- resizing: FILL → flex-1 / w-full
- resizing: HUG → inline-size: max-content / inline-block
breakpoints → doc/input/design/design-tokens.json の primitives.breakpoints 準拠
tokens外の値禁止 / magic number禁止

禁止

状態/ロジック/フェッチの追加
RDD逸脱スタックの導入（$TARGET指定時はADR-lite要）
copy.json の文言を推測/言い換えして埋めること（不足は不足として止める）
div クリック等でボタン/リンク相当を作ること（セマンティック要素を優先し、必要最小限のWAI-ARIAに限定する）

文言（copy）の適用ルール

design_context.json の text ノードは copyKey を持つ前提で、対応する文言を doc/input/design/copy.json から参照して埋め込む
copyKey が未定義/不足している場合は、推測で生成しない。ユーザーに以下を依頼して停止する：
- FIGMA_REF を再提示して /design-ssot をやり直す
- または copy.json の差分（追加すべきキーと文言）を提供してもらう

画像アセット（assets.json）の適用ルール

doc/input/design/assets/assets.json が存在する場合は、baseDir 配下にある画像を参照してUI骨格に反映する
- 例: Next/Astro/React → public/design-assets/*
- 例: SvelteKit → static/design-assets/*
components.json の slots や usedBy 情報と照合し、画像が必要な箇所（ロゴ/アイコン/イラスト/写真）の取りこぼしを防ぐ
画像の最適化（次世代フォーマット変換/圧縮/レスポンシブ画像生成等）は、この工程では必須にしない（まず再現性を優先）
assets.json に status: "failed" がある場合は、必ずユーザーに不足（動画/画像等）を報告し、手元提供またはFigma Export設定の依頼をして停止する（推測で代替しない）

ゲート

見た目一致（主要variantsのプレビュー/Story）
tokens外の値0件 / Lint/Type green

Agent Browser利用可能時（自律確認）:

# Storybook または開発サーバーを起動後
agent-browser open http://localhost:6006  # Storybook
# または
agent-browser open http://localhost:3000/{対象パス}

# スナップショットで要素構造を確認
agent-browser snapshot -i

# 主要breakpointsでの表示確認（viewport変更）
# 問題発見時は修正後に再スナップショット

デザインとの差異（余白/色/タイポ）を目視確認
レスポンシブ崩れがないか確認
ここで停止

次に推奨

→ /design-components でLayout/Component抽出

design-ui

SKILL.md.claude/skills/design-ui