【結論】解決策 / 実行コマンド
Claude Codeはスクリーンショット、UIデザイン、図などの画像を入力として利用できるため、テキスト仕様だけに限定する必要はありません。
画像、既存コンポーネント、デザイントークン、画面幅、アクセシビリティ要件を一緒に渡し、ブラウザまたはテストで差分を検証します。
「ピクセルパーフェクト」を一度で保証せず、実装と視覚確認を反復します。
# ターミナルで実行：デザイン実装用ブランチを作成
git switch -c feat/dashboard-ui
# ターミナルで実行：Claude Codeを起動
claude
# 起動後のセッション内で実行：画像をドラッグ＆ドロップまたは貼り付けて参照
# 起動後のセッション内で実行：計画を先に作成
/plan具体的な手順・設定方法
デザイン画像と共に、対象画面、ブレークポイント、フォント、色、余白、状態変化を指定します。
既存のトークンやStorybookを読み、独自の色や依存関係を増やさないよう制約します。
実装後はブラウザでPC・スマホ幅を確認し、スクリーンショット比較やアクセシビリティテストを実行します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
添付したダッシュボード画像を参考に、src/pages/Dashboard.tsxを実装してください。
既存のdesign-tokens.cssとsrc/components/uiだけを使用してください。
幅390px、768px、1440pxで崩れないこと、キーボード操作、フォーカス表示、十分なコントラストを満たしてください。
最初に差分計画を示し、承認後に実装してください。注意点・よくあるエラーと対処法
画像だけでは正確な寸法、フォント、非表示状態、エラー状態を判断できないため、仕様を補足してください。
Figma連携にMCPを使う場合は、提供元、読み取り範囲、アクセストークンの管理を確認してください。
既存デザインを完全維持する大規模変換は小さなコンポーネント単位で行い、視覚回帰テストを用意してください。