[デザイン] （任意）SSOT → 静的HTML を生成し、

doc/input/design/html/

に保存

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

設計JSON（SSOT）から静的HTMLを生成し、

doc/input/design/html/

に保存する。

いつ使う？（位置づけ）

• ドキュメント共有/レビュー用に「ブラウザで見られる見た目」が欲しいとき
• 実装スタックに依存しない形で、UIの骨格・トークン反映を目視確認したいとき

• /design-ssot

  または

  /design-mock

  で SSOT が揃っている前提（このコマンドはSSOTを作らない）

次に何をする？

• 見た目の調整が必要なら、HTMLの差分/変更点を根拠に SSOT（tokens/components/context）へ反映する
• 実装に進むなら

  /design-ui

  →

  /design-components

  →

  /design-assemble

  （READMEのフローに合流）

共通前提（参照）

• 口調・出力規約・差分出力の方針は

  CLAUDE.md

  に従う。

• doc/input/rdd.md

  を読み、該当する

  .claude/skills/*

  を適用して判断軸を揃える（例:

  ui-designer

  /

  usability-psychologist

  /

  tailwind

  ）。
• 詳細運用（ADR-lite/差分/サンプル運用等）は

  doc/guide/ai_guidelines.md

  を参照。

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

• まず

  doc/input/rdd.md

  の「ターゲット表示環境（事実）」を参照し、生成HTMLの確認は そのビューポートを基準に行う
• 未記入の場合は、以下を 推奨デフォルトとして仮置きする：
  • desktop: 1440x900
  • mobile: 390x844
  • tablet: 834x1194

入力

• $PAGE_KEY（任意）: 画面キー（

  doc/input/design/design_context.json

  の

  pages[].key

  ）
  • 省略時: 全ページを生成する（複数ページ対応の既定）

出力（差分のみ）

• doc/input/design/html/{page}.html

  （tokens/variants/copy反映、外部依存なしで再現）

仕様

• 入力となるJSON（

  doc/input/design/design-tokens.json

  ,

  doc/input/design/components.json

  ,

  doc/input/design/design_context.json

  ）が存在する前提（通常は

  /design-ssot

  の成果物）

• doc/input/design/copy.json

  （文言のSSOT。一字一句固定）が存在する前提（不足時は推測で補わず停止）

• doc/input/design/assets/assets.json

  が存在する場合は必ず参照し、画像アセットを反映する（baseDir配下の相対パス）

  • assets.json

    に

    status: "failed"

    がある場合は、必ずユーザーに不足（動画/画像等）を報告し、手元提供またはFigma Export設定の依頼をして停止する（推測で代替しない）
• React/Vue 等の実装に依存しない生成
• 画像は相対またはデータURIで完結
• RDD準拠のスタイルのみ（tokens必須）
• ここで停止

ゲート

• 主要ブレイクポイントでレイアウト崩れなし（簡易スナップ）
• tokens外の値（magic number）が混入していない

• copyKey

  の不足0件（

  design_context.json

  の参照が

  copy.json

  で解決できる）