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