[デザイン] 3. 静的UI骨格 → Layout/Component を抽出して分離

コマンド: /design-components

いつ使う？（位置づけ）

• /design-ui

  で静的UI骨格（見た目のみ）を生成したあと
• 「ページ固有レイアウト」と「再利用コンポーネント」を分離して、後続の

  /design-assemble

  をやりやすくしたいとき

次に何をする？

• variants（size/tone/state等）を型付きprops/属性に落として結合 →

  /design-assemble

入力: $ARGUMENTS（任意）

• 対象ディレクトリ（例:

  src/

  や

  app/

  など）

---

🎯 目的

• /design-ui

  で生成した 静的UI骨格（見た目のみ） から、
  • Layout（ページ枠/セクション/グリッド）
  • Component（ボタン/カード/フォーム等の再利用部品） を抽出して分離し、保守しやすくする

---

共通前提（参照）

• 口調・出力規約は

  CLAUDE.md

  に従う。
• プロジェクト固有の事実は

  doc/input/rdd.md

  （先頭のAI用事実ブロック）を参照する。
• 判断軸は

  .claude/skills/*

  を適用する（例:

  ui-designer

  /

  tailwind

  /

  creative-coder

  /

  usability-psychologist

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

  doc/guide/ai_guidelines.md

  を参照。

---

抽出の判断基準（最小）

• Layout にする
  • ページ固有の枠組み（ヘッダー+本文+フッターなど）
  • セクションの並び（Hero/Features/Pricingなど）
  • グリッド/レイアウトの責務が主で、見た目の部品が複数集まっているもの
• Component にする
  • 同じ構造が3回以上出現する（同一の見た目/役割）
  • variants（size/tone/state）に落とせる
  • 画面を跨いで再利用したい意図がある
• まだ抽出しない
  • 1回しか出現しない、ページ固有の塊
  • 名前が付けられない（責務が曖昧）

---

ルール

• ロジック/状態/データ取得は入れない（見た目の責務分離のみ）
• 既存のディレクトリ規約・命名規約を尊重する（新規規約を持ち込まない）
• 変更は差分最小で、レビュー可能な単位に分割する

---

出力（差分のみ）

• スタック別の標準配置に合わせて、コンポーネント/レイアウトを分割して反映

---

ゲート

• 見た目が維持されている（主要ページ/主要コンポーネント）
• 重複UIが減っている（同じ構造が3回以上なら抽出を検討）
• ここで停止