【結論】UIデザインを実装へ落とし込む
Claude Codeは既存デザインシステム、Figma仕様、画像、スクリーンショットを参照し、ReactやVueのUIコードを生成できます。
特定ブランドを模倣するのではなく、余白、階層、色、状態、レスポンシブ、アクセシビリティを具体化します。
実装前にコンポーネント構成と受け入れ条件を確認します。
# ターミナルで実行：既存UI環境を確認
cat package.json
# ターミナルで実行：コンポーネントテストを実行
npm test -- --runInBand
# ターミナルで実行：アクセシビリティ検査を実行
npm run lint
# ターミナルで実行：Planモードで開始
claude --permission-mode plan具体的な手順・設定方法
既存のCSS、Design Token、Component Library、対応画面幅を確認します。
Default、Hover、Focus、Disabled、Loading、Errorの状態を設計します。
実装後にキーボード、スクリーンリーダー、ダークモード、縮小画面を確認します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
既存のdesign tokensだけを使い、料金カード3枚の実装計画を作成してください。
スマホ1列、デスクトップ3列、キーボード操作、focus-visible、loading状態を含めてください。
外部ライブラリと画像URLは追加せず、承認まで編集しないでください。注意点・よくあるエラーと対処法
有名企業の見た目をそのまま模倣しないでください。
アニメーションはprefers-reduced-motionを考慮します。
プレースホルダー外部URLは追跡、停止、CSP違反の原因になるため、ローカルAssetを優先します。