Claude Codeフェーズに入る際の私の計画はシンプルでした。Claude Designでデザインハンドオフを準備して、それをClaude Codeに引き渡して実装する。一般的に言う、デザイナーからエンジニアへのハンドオフ（引き継ぎ）と同じやり方です。

しかし、実際には想定したようにスムーズにはいきませんでした。

前回の記事で説明したように、Claude Designは現在Figma MCPをサポートしていません。つまり、私が時間をかけて指定したモックアップ、デザインシステム、コンポーネント、VariablesといったFigmaファイルを直接読み取ることができなかったのです。Claude Designにそれらのデザインの正確な実装を生成させるには、予想以上に多くの試行錯誤が必要でした。

そこで私が気づいたのは次の点です。Claude ChatはFigma MCPをサポートしているということです。ここが鍵でした。

FigmaファイルをClaude Designに通そうとするのではなく、Claude Chatに持ち込みました。デザインモックアップとデザインシステムのVariablesをJSONファイルとしてエクスポートし、Claude Chatに直接読み込ませました。そして、Claude Chatに次の2つを依頼しました。

Claude Chatが生成したのは「ハンドオフパッケージ」でした。画面を表すプロトタイプHTML、プロジェクトのコンテキストを提供する CLAUDE.md ファイル、そしてデザイン上の決定事項・コンポーネントの挙動・意図を記録した HANDOFF.md ドキュメントです。

このパッケージが、Claude Codeが構築を行うための基盤となりました。

このワークフローは、ツールとその役割に対する私の考え方を変えました。

Claude Designはクリエイティブな作業向けに作られています。コンセプトから始めるとき、つまりアイデアはあるけれど最終決定に至っていないときや、ビジュアルの方向性を探る必要があるとき、クリエイティブな作業がまだこれからという段階で非常に優秀です。そのコンテキストにおいて、配慮の行き届いた人間のデザイナーのように機能し、選択肢を生成し、選択を行い、ビジュアル言語を構築します。

しかし、すでにそのクリエイティブな作業を終えている場合 — 最終的なFigmaモックアップ、定義されたデザインシステム、明確な仕様がある場合 — ボトルネックは創造性ではなく「翻訳」です。そしてFigma MCPを備えたClaude Chatは、その翻訳を処理できます。

最終デザインがあるなら、Claude Designをスキップして、Claude Chat経由でFigmaからClaude Codeへ直接進む方が効率でしょう。

これはClaude Designに対する批判ではありません。各ツールがどこで役立つかを考察した結果です。プロセスごとに適切なツールを使うことが重要だということです。

Claude Codeでの実際の開発体験について少し触れておきます。人々の予想とは異なる現実があると思うからです。

Claude Codeはハンドオフパッケージを受け取って完成品を即座に生成するわけではありません。ステップバイステップであなたと一緒に作業します。これから実装する内容を提案し、それを構築し、継続する前にあなたがレビューして確認するのを待ちます。複雑な機能の場合、このサイクル（提案 ➔ 構築 ➔ 確認 ➔ 次のステップ）が繰り返されます。

最初はこれが煩わしく遅く感じられるかもしれません。しかし、そうではありません。

実際に行われているのは、すべての段階であなたに意思決定を持たせることです。ブラックボックスの中で何が起こっているのかわからないまま、実装が進むのではく、プロダクトが実装されていく過程を確認しながら、その都度、意思決定を行うことができます。

プロダクトを個人で構築するソロデザイナーにとって、これは適切なアプローチです。誤解を早い段階でキャッチでき、問題が複雑化する前に軌道修正できました。次のステップに進む前に、リリースされるものに対する確信をステップバイステップで深めることができました。

このワークフローを試みる人に最もおすすめしたいのは、Claude Codeがプロダクションコードを書く前に、ハンドオフパッケージを準備することです。
‍
Claude Chat（Figma MCP接続済み）に以下の準備を依頼してください。
‍
プロトタイプHTML
主要画面の動作するHTML化。これらはClaude Codeに単なる説明ではなく、デザインの意図を実際にレンダリングした具象的な参照先を与えます
‍
CLAUDE.md
プロジェクトのコンテキスト。これは何か？技術スタックは何か？制約やゴールは何か？これはClaude Codeが開発全体を通して方向性を見失わないために参照するドキュメントです。
‍
HANDOFF.md
デザインの決定事項とコンポーネントの挙動。画面を見ただけではわからないこと（インタラクションがなぜそのように動くのか、エッジケースでコンポーネントがどう動作すべきか、デザインシステムの原則など）をキャッチする場所です。実際のハンドオフミーティングでエンジニアがデザイナーに質問するような内容です。
‍
このパッケージが整っていれば、Claude Codeには必要なものが揃います。構築はスムーズになり、説明し直すことが減り、デザインしたものと実際に作られるもののギャップが小さくなります。

このプロセスの成果が Lull です。カスタマイズ可能なサウンドスケープを通じて、リスナーをリラックスさせるアンビエントミュージックアプリです。

エンジニアリングチームなし、デザイナーだけで構築しました。Claude Chatがデザインの翻訳とハンドオフを担当し、Claude Codeがプロダクションビルドを担当しました。私は常に意思決定のループの中にいて、次のステップが実装する前に各ステップを確認しながら一歩、一歩、着実に実装をしていきました。

このやり方は完璧でしょうか？そうとも言い切れません。次回は違ったやり方を試したい部分もあります。しかし、このアプローチで、私のデザインを完璧に反映させた、実際に動くプロダクトを実装することができました。これは私にとっては大きなステップとなりました。