ステージ 1：Claude Designでのデザイン探索
最初のステージは最終デザインを決定することではなく「可能性」を模索する段階でした。一つのデザインディレクションにコミットする前に、ビジュアルおよびUXの方向性を探索するようClaude Designに依頼し、範囲を絞り込む前に全体像をマッピングしました。

許容できるビジュアルスタイルの外枠を定義したブリーフをClaude Designに与え、その制限内でデザインイテレーションを行いました。これは非常にうまくいきました。意思決定に真に役立つほど多様なアウトプットが得られ、無関係な方向へ脱線することなくブリーフとの一貫性も保たれました。

うまくいった点： ワイヤーフレーム作成とビジュアルデザインの間でコンテキストを切り替えることなく、同じセッション内でUXとビジュアルの両方を検討できたことです。

デザインの方向性が決まった後、Claude Code向けのハンドオフパッケージを用意するようClaude Designに依頼しました。

何かを生成する前に、明確化のための質問が行われました。「既存のコードベースはあるか？」「どのIDEを使用するか？」「スタックの好みはあるか？」。これらの質問がアウトプットを大きく形作り、汎用的なものではなく最適化されたパッケージが生成されました。

選択（React, TypeScript, Vite）に基づき、Claude Designは以下を生成しました。

1. README.md —ビジュアルシステム、コンポーネント構造、実装上のメモ、デザインフェーズで行われた意思決定を網羅。
‍
2. Prototype HTML file — Claude Codeが読み込んで構築を開始できる、機能的なビジュアル参照用ファイル。

‍

このパッケージは、デザインの意図を明確に伝え、かつエンジニアが推測に頼らずに構築できる十分な機能的コンテキストを提供してくれました。

Claude Codeはハンドオフパッケージを読み込み、そこからアプリケーションを実装しました。その結果はプロトタイプの単なるコピーではなく、それを改良したプロダクションレベルのビルドとなりました。

HTMLプロトタイプにはなく、Reactビルドで追加された機能：

実際の開発においてモジュール性は重要です。音声、物理ロジック、個々のUIコンポーネントがそれぞれ独自のファイルに存在するため、片方を変更しても他方を壊すリスクがありません。これこそが、プロトタイプと「実際に運用・保守できるもの」との違いです。

Claude Design はデザイン検討のフェーズで、人間のデザイナー以上の働きをしました。定義された方向性の中でUXとビジュアルスタイルの両方をイテレーションし、一貫性を失うことなく有用なバリエーションを生み出しました。

ハンドオフパッケージ は適切に構成されていました。アウトプットを生成する前に適切な質問を投げかけ、結果として得られたREADMEとプロトタイプは、デザインの意図と機能仕様の両方を明確に伝えていました。

Claude Code はこのパッケージを活用し、デザインフェーズからの再現性を損なうことなく、プロトタイプよりも堅牢なプロダクトを実装しました。

全体的な所感： ツール間のハンドオフは、文脈の分断ということは特になく、連続したワークフローのように感じられました。デザインフェーズで伝えた内容が、そのまま欠けることなく実装フェーズへと届いていました。