Claude DesignとTailwind CSSの組み合わせ方

Claude DesignとTailwind CSSの相性は、正直に言うと「良くも悪くも」だ。うまくはまると爆速でUIが仕上がるが、無策に突っ込むと「なんか違う」を延々と修正する羽目になる。NANAKAZOKUで実際にやってみた流れをそのまま書く。

Claude DesignのCSS出力をそのまま使うのは危険

最初にやりがちなミス：Claude Designが吐き出すコードをそのままコピーしてTailwindプロジェクトに貼ること。

Claude Designは基本的にインラインスタイルかカスタムCSSで出力する。Tailwindのユーティリティクラスとは別物なので、そのまま貼ると次の問題が起きる。

• font-size: 1.125rem → Tailwindなら text-lg だが自動変換されない
• color: #3B82F6 → text-blue-500 と対応しているが、カラースケールを把握していないと気づかない
• padding: 12px 24px → px-6 py-3 に置き換えるべきだが見落とす

結果として「Tailwindプロジェクトなのにインラインスタイルだらけ」という状況になる。これは後のメンテが地獄になる。

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

実践：変換ワークフロー

NANAKAZOKUでは以下の手順で進めている。

① Claude Designで「Tailwindで実装する前提」と伝える

プロンプトにこの一文を入れるだけで出力の質が変わる。

このデザインはTailwind CSSで実装します。
カラーはTailwindのデフォルトパレット（blue-500等）を使い、
スペーシングもTailwindのスケール（4の倍数）に合わせてください。

これで生成されるデザインのカラーや余白がTailwindのスケールに寄ってくる。完璧ではないが、後の変換作業が30〜40%減る体感だ。

② カラーパレットを先に固定する

デザイン前に tailwind.config.js でブランドカラーを定義しておき、そのキー名をClaudeに伝える。

tailwind.config.js

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#1E40AF',
        accent:  '#F59E0B',
        bg:      '#F8FAFC',
      }
    }
  }
}

ブランドカラーは brand-primary（ネイビー）、brand-accent（アンバー）、
brand-bg（オフホワイト）を使ってください。

こうするとClaude Designが色を使う際の指針ができる。後から text-[#1E40AF] という任意値だらけになるのを防げる。

③ 生成されたデザインをClaude Codeで変換する

Claude Designのビジュアルが固まったら、Claude Codeに以下のプロンプトで変換を依頼する。

このデザインをReact + Tailwind CSSのコンポーネントに実装してください。
- Tailwindのデフォルトユーティリティを最大限使う
- インラインスタイルは使わない
- レスポンシブはmd:ブレークポイントを基準に

DesignとCodeを連携させるこのワークフローが今のところベストプラクティスだと思っている。

※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

ハマった罠：フォントウェイトの扱い

Tailwindは font-bold（700）、font-semibold（600）などが定義されているが、Claude Designが指定してくるのは font-weight: 550 とか中途半端な値のことがある。

そのまま変換しようとすると font-[550] という任意値になり、変な見た目になる。

対処法：デザイン指示の時点で「フォントウェイトはRegular・Medium・Semibold・Boldの4段階のみ使ってください」と明示する。これだけで任意値が激減した。

レスポンシブ対応の指示はデザインと同時に

「あとでレスポンシブ対応すればいい」と後回しにすると、モバイルとデスクトップでまったく違うデザインになりがちだ。

Claude Designに最初から「モバイルファーストで、640px以上はsm:、768px以上はmd:ブレークポイントを想定してください」と伝えておくと、レイアウトの構造がレスポンシブを前提にした形で生成される。後付けで直すより作り直す方が早いケースが何度もあった。

結論：プロンプトで「実装環境」を宣言する

Claude DesignとTailwindを組み合わせる一番のコツは、デザイン生成の段階から「Tailwindで実装する」という前提をプロンプトに組み込むことだ。ビジュアル生成と実装変換を別の工程として切り離して考えると、無駄な修正が増える。

Designの段階でTailwindのルールを意識させ、Codeの段階でそれをコンポーネントに落とす——この2ステップが今のところ一番スムーズに動いている。