【結論】UI Designを実装へ落とし込む
Claude Codeは既存デザインシステム、Figma仕様、画像、スクリーンショットを参照してReactやVueのUIコードを実装できます。
特定ブランドの外観を模倣するのではなく、余白、階層、状態、レスポンシブ、アクセシビリティを仕様化します。
実装前に既存コンポーネント、Design Token、依存関係を確認します。
# ターミナルで実行：既存UI環境を確認
cat package.json
# ターミナルで実行：Design Tokenを確認
find . -maxdepth 3 \( -name 'tailwind.config.*' -o -name 'tokens.*' \) -print
# ターミナルで実行：Planモードで起動
claude --permission-mode plan
# ターミナルで実行：既存テストを実行
npm test -- --runInBand具体的な手順・設定方法
Default、Hover、Focus、Disabled、Loading、Errorの状態を定義します。
スマホ、タブレット、デスクトップの受け入れ条件を決めます。
実装後にキーボード、コントラスト、Reduced Motion、画面幅を確認します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
既存のDesign Tokenだけを使い、料金カード3枚の実装計画を作成してください。
スマホ1列、デスクトップ3列、focus-visible、loading、error状態を含めてください。
外部ライブラリと画像URLは追加せず、承認まで編集しないでください。注意点・よくあるエラーと対処法
外部プレースホルダー画像はCSP違反、追跡、リンク切れの原因になります。
見た目だけでなくSemantic HTML、Label、Focus順序を確認してください。
Figmaの数値をそのまま固定せず、既存のレスポンシブ規則へ合わせます。