React (Vite) で実装する

Claude DesignのアウトプットをReact (Vite) に持っていくとき、最初は「コピペすればいけるだろ」と思っていた。実際やってみると、そんな甘くなかった。

class → className の罠、毎回踏む

Claude Designが出力するHTMLはそのままでは動かない。Reactに貼り付けると即エラーになる。

// Claude Designの出力（HTML）
<div class="hero-section" style="background: #1a1a2e;">

// Reactに貼るとき（JSX）
<div className="hero-section" style={{ background: '#1a1a2e' }}>

class → className、style="..." → style={{ ... }}。この2つは毎回変換が必要になる。慣れても忘れる。

Claude Codeに「このHTMLをJSXに変換して」と投げるのが一番早い。「for → htmlFor」「onclick → onClick」も全部まとめてやってくれる。Claude DesignとClaude Codeをセットで使う前提にすると、この変換コストはほぼゼロになる。

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

スタイルの扱い方、3つの選択肢

Claude Designが出力したCSSをどこに置くか。実際に試した結果を正直に書く。

① インラインスタイル（style属性）

<button style={{
  backgroundColor: '#6c63ff',
  padding: '12px 24px',
  borderRadius: '8px',
  color: '#fff',
  border: 'none',
  cursor: 'pointer'
}}>
  送信する
</button>

手軽だが、ホバーやフォーカスが書けない。小さいコンポーネントならOK。

② CSS Modules（推奨）

HeroSection.module.css

.hero {
  background: #1a1a2e;
  padding: 80px 0;
}
.title {
  font-size: 3rem;
  color: #e0e0e0;
}

import styles from './HeroSection.module.css';

export function HeroSection() {
  return (
    <section className={styles.hero}>
      <h1 className={styles.title}>見出し</h1>
    </section>
  );
}

スコープが効くので他コンポーネントと干渉しない。Viteならゼロ設定で使えるのもいい。Claude DesignのCSSをそのままコピーして.module.cssに貼ると、8割方そのまま動く。

③ Tailwind CSS Claude Designはプロンプトで「Tailwindクラスで出力して」と伝えると対応してくれる。出力されたクラスをJSXに貼るだけなので変換コストが最小。ただし既存プロジェクトにTailwindが入っていることが前提。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

コンポーネント単位でもらうのが結局早い

最初は「ページ全体のデザインを出力してもらってコピペ」でやっていた。ところが<header>全体を1コンポーネントに入れようとすると、state管理やprops設計が面倒になってきた。

今はこうやってる：

Claude Designへのプロンプト：
「HeaderコンポーネントのJSXとCSS Modulesで使うCSSを分けて出力してください。
propsはlogoSrc・navItems（配列）・ctaTextの3つ。」

最初からコンポーネント設計を指示すれば、出力されたコードをそのままHeader.jsxとHeader.module.cssに貼り付けて完成になる。ページ全体より小さく区切った方が結果的に速い。

Vite特有の話：パスとアセット

Claude Designから画像をエクスポートして使うとき、Viteのパスルールに注意が必要。

// ❌ 絶対パスで書くとローカル動くが本番で死ぬ
<img src="/assets/hero.png" />

// ✅ importで取り込む
import heroImage from './assets/hero.png';
<img src={heroImage} alt="ヒーロー" />

// または public/ 配下に置く場合
<img src="/hero.png" alt="ヒーロー" />

Claude Designからエクスポートした画像はsrc/assets/に入れてimportする運用が一番トラブルが少なかった。

実際やってわかった落とし穴

• SVGの扱い: Claude Designが出力したSVGをJSXにインラインで貼るとxmlns属性の扱いでたまにエラーが出る。SVGfaileコンポーネントとして切り出すか、<img src>で呼ぶかのどちらかが安全。
• フォント: Google Fontsを使ったデザインをもらったとき、Viteプロジェクトのindex.htmlに<link>タグを忘れると全然違う見た目になる。index.htmlへの追記をClaude Codeに指示するといい。
• カスタムプロパティ: Claude Designがvar(--color-primary)を使った出力をくれることがある。:rootの変数定義をsrc/index.cssに入れ忘れると色が全部透明になる。

手数は多いが、慣れると「デザイン→実装」の流れが30分以内で回るようになってきた。