デザインシステム整備のロードマップ

課題 ①〜⑧ を着手順の 6 Phase に並べ替えた。日程は本文に無い。

Phase 0 ／前提確認

先方に聞くこと

Phase 1 ／整合性の修正

矛盾を消す

Phase 2 ／採用版の参照一覧

何を使うかを 1 箇所で

Phase 3 ／手本画面の整備

1 画面分だけ

Phase 4 ／検証

整備前後を比較

Phase 5 ／拡張と MCP 判断

原因に応じて広げる

やること

成果物

先方と決める

次へ進む条件

本番Storybook の部品は本番と同じコードか

管理本番部品の管理場所、Storybook の有無

手本標準的な一覧画面を先方と選定（Create でも可）

版旧版・新案・比較案の採用状態

矛盾トークン・説明・実装の不一致を洗い出す

説明説明だけ古い → コードに合わせる

実装承認済みルールと違う → 修正か例外か

例外理由・範囲・承認者・見直し時期を記録

未記録記録の無い差異は確認事項へ

一覧部品・画面ごとに状態・用途・参照先・置き換え先

Skill一覧から採用版を選ぶ手順だけ。一覧は重複させない

PoC参照ファイルを明示して範囲を絞る

新案・比較案は採用決定まで標準にしない

Usage用途・使わない場面・代替・組み合わせ・例（TextField・SelectField から）

共通エラー表示・必須は共通フォームルールに

雛形固定／変更可能／適用条件／対象外

状態0 件 2 種・読み込み中・失敗・長文と狭い画面。作成編集は二重操作・入力保持・未保存確認

比較同じ要件で整備前後を生成し 4 指標で評価

反復同条件で複数回。ずれが減り続けるか

応用項目を変えた画面にも効くか

経路Claude Code でリポジトリを直接参照し、情報不足か取得方法かを切り分け

MCP取得方法が原因のときだけ。矛盾や Usage 不足は解決しない

確認管理場所／アドオン対応版／取れる情報／Claude Code か claude.ai か／公開と認証

版ZIP は Storybook 8.6。更新要否

拡張ずれをもとに範囲を広げる

Phase 4 の結果しだいで実施

記録確認結果

決定手本にする画面

整合揃えたトークン・説明・実装

記録例外の記録

一覧確認事項

一覧AI 向け参照一覧

Skill採用版を選ぶ手順

PoC参照ファイルの指定

UsageUsage と共通フォームルール

雛形Page Template

仕様状態・操作仕様

評価前後比較の結果

ずれずれと反映先

判断MCP の要否

次次の対象範囲

正Props・挙動は本番コード基準。ただし既存実装＝正ではない

手本一覧か Create か

区別意図的な例外か、直す不整合か（記録の有無で）

状態採用済み／検討中／旧版

置換旧版の置き換え先

条件流用してよい条件と対象外

指標無い部品・Props／Token・Usage 違反／状態の抜け／修正回数

MCP要否と接続元

更新Storybook 更新の要否

正と手本が決まる GATE

本番との関係と、手本 1 画面

記録の無い差異が無い

直した／例外記録／確認事項のどれか

旧版が使われない

PoC の生成結果で確認

手本 1 画面分が揃う

Usage・雛形・状態・操作

ずれが減り続ける GATE

残る原因が情報不足か取得方法か

小さく検証 → 広げる

完了条件は本文に無い

ずれ → 反映先

1部品選択 → Usage（Phase 3）

4状態・操作の抜け → 状態・操作仕様（Phase 3）

2配置・構成 → Modules／Page Template（Phase 3）

5正しい情報を参照しない → AI 向け指示／Skill（Phase 2）

3色・文字・余白 → Token／実装との整合（Phase 1）

6取得できない・古い → 参照経路／MCP（Phase 5）

ずれを戻す