Claude DesignとClaude Codeを組み合わせたら仕事が変わった

正直に言う。Claude Designだけを使っていた頃と、Claude Codeも並走させるようになった今では、仕事のやり方がかなり変わった。

変わったのはスピードだけじゃない。考え方のクセが変わった。「まずデザインを確定してからコードを書く」という順番を信じなくなった。

何が変わったか

以前は「デザイン → レビュー → 修正 → コーダーへ渡す」だった。このフローで一番時間を食っていたのは、デザインとコードの間にある翻訳作業だった。デザイナーが作ったものをエンジニアが読み解いて、「これどうやって実装するんですか」という往復。

Claude Designで叩き台を作り、Claude Codeに「これをReactコンポーネントに」と投げると、この翻訳コストがほぼ消えた。完璧ではないが、「だいたい合ってる」状態のコードが数分で出てくる。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。

具体的なフロー

うちが今やっているのはこういう感じ：

1. Claude DesignでLP全体のデザインを作る（1〜2往復で8割完成）
2. セクションごとにスクリーンショットを撮る
3. Claude Codeに「このデザインをNext.js + Tailwindで実装して」と画像ごと渡す
4. 出てきたコードをローカルで確認し、細部をClaude Codeと一緒に詰める
5. デザインに戻って「実装してみたらこのレイアウトはちょっと無理だった」という発見を反映

ステップ5が地味に重要。実装してみて初めて気づく設計上の問題がある。それをDesignに戻せるのが、両方使う最大のメリットだと思っている。

※LP: ランディングページの略。特定のCTAに向けて設計されたWebページ。

落とし穴：コンテキストが引き継がれない

最初にハマったのがこれだった。

Claude Designで丁寧に作り込んだカラーパレット（プライマリ #1A2744、アクセント #E8A020 など）を、Claude Codeのほうは何も知らない。別のセッションだから当然なんだが、最初は「なんでDesignと違う色が出てくるんだ」と混乱した。

対策として今やっているのは、デザイントークンのテキストを別ファイルに書き出すこと。Claude Designのチャットから色・フォント・スペーシングをまとめて抜き出して、design-tokens.txt に置いておく。Claude Codeにはそれを毎回渡す。手間だが、これをやるとブレがほぼなくなる。

もう一個の落とし穴：Designを信用しすぎる

Claude Designが出してくるUIは見た目がきれいなのに、実装コストが高いものが混じっている。

たとえば、グラデーションマスクがかかったカード一覧とか、スクロール連動のアニメーションとか。デザインレベルでは「いい感じ」だが、コードにすると「これ実際に動かすの結構大変ですよ」という状態になる。

今はClaude Codeと並行させながらDesignのレビューをする癖がついた。「このデザイン、実装難易度はどうか」をClaude Codeに聞きながらDesignを調整する。逆転しているように見えて、これが一番早い。

結局、どっちが主役か

どっちも主役、と言いたいところだが、正直なことを書く。Claude Codeのほうが最終的な成果物に近い。

Claude Designは「ビジョンを作る場所」で、Claude Codeは「それを動くものにする場所」。ビジョンが先にないとコードの方向性が決まらないし、コードを意識しないビジョンは現実離れする。

この両方が手の届く場所にある状況は、2年前には想像できなかった。今でも毎週「こんな使い方があったか」という発見がある。

まだ手探りだが、手探りのまま使い続けるだけで仕事になっている。それが今の状態。