---
user-invocable: true
description: "[デザイン] 3. 静的UI骨格 → Layout/Component を抽出して分離"
---

# [デザイン] 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回以上なら抽出を検討）
- ここで停止