Claude Designの出力をNext.jsで実装する

Claude DesignとClaude Codeを組み合わせると「デザイン→実装」の流れが劇的に変わる。ただし、ただコピペすれば動くほど甘くはなかった。実際にNANAKAZOKUがNext.jsプロジェクトでやってみた話を書く。

まずClaude Designに「Next.js向け」を明示する

ここを最初にサボると後で手戻りが増える。プロンプトに以下を入れるだけで出力が変わる。

このUIをNext.js + TypeScript + App Router向けに作ってください。
スタイルはTailwind CSSを使い、'use client'が必要なコンポーネントには明記してください。

この一文を入れないと、素のHTMLが出てきたり、クラス名がBEM記法になったり、微妙にApp RouterじゃなくてPages Router想定のコードが混じったりする。最初にやらかした。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

Claude Codeに渡す橋渡しプロンプト

Claude Designで出てきたデザイン仕様（色・フォント・レイアウト構造）をそのままClaude Codeに投げても精度が出ない。一度「設計メモ」に変換するのがコツ。

Claude Designに出力させる設計メモのフォーマット:

コンポーネント名: HeroSection
役割: トップページのファーストビュー
props:
  - title: string
  - subtitle: string
  - ctaText: string
  - ctaHref: string
使用カラー:
  - 背景: #0F172A（slate-900）
  - テキスト: #F8FAFC（slate-50）
  - CTA: #6366F1（indigo-500）
レスポンシブ: sp=縦並び / pc=左テキスト・右画像

このメモをClaude Codeに渡すと、Tailwindクラスまで含めたコンポーネントが一発で出てくる。

※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。※CTA: Call To Action（行動喚起）。ボタンやリンクでユーザーに次の行動を促す要素。

App Routerで詰まったポイント

• Server ComponentとClient Componentの混在: Claude Designは「インタラクション」を意識しない。useState・useEffectを使う部分を自分で判断して'use client'を付ける必要がある。Claude Designに「インタラクティブな要素はどこか」を聞いてリストアップさせると楽。

• 画像のalt属性: 生成されたHTMLのimgタグにはaltが空か省略されがち。Next.jsの<Image>コンポーネントに置き換えるときに必ず補完する。

• フォントの読み込み: Claude Designが指定するGoogle Fontsはnext/font/google経由で読み込まないと本番でパフォーマンスが落ちる。デザイン仕様からフォント名だけ拾ってlayout.tsxに追加する。

実際の作業フロー（今はこれに落ち着いた）

1. Claude Designでビジュアルを確定させる
2. 「このデザインのコンポーネント構成と設計メモを出して」と依頼
3. 設計メモをClaude Codeのプロジェクト知識（CLAUDE.md）に貼る
4. 「HeroSectionコンポーネントを作って」と個別に依頼
5. npm run buildでエラーを確認→修正

ステップ2と3を省いて一気に「このデザインをNext.jsで実装して」とやると、Claude Codeが「どんなデザイン？」状態になって精度が下がる。設計メモが橋渡しの核心。

正直なところ

完全自動化は無理だった。特に「アニメーションの実装」と「レスポンシブの細かい調整」は手が入る。ただ、Claude Designなしでゼロからコーディングするより初期実装の速度は体感3〜4倍は上がっている。デザインの意思決定と実装の両方でAIを使う、この二刀流がNANAKAZOKUの今のスタンダードになっている。