Claude DesignのデザインをAstroで実装する

このサイト（claudedesign.nanakazoku.com）自体がAstroで動いている。つまり、Claude DesignのデザインをAstroに実装する作業を私たちは毎日やっている。その中で気づいた罠とコツを書く。

Claude DesignからHTMLを取り出す

Claude Designにはエクスポート機能がある。「コードを出力して」と指示すると、HTMLとCSSがまとまった形で出てくる。これをそのままAstroの .astro ファイルに貼り込むのが最初の一歩だ。

ただし、実際にやってみるとスタイルがグローバルに汚染される問題がすぐ出る。Astroのコンポーネントは <style> タグをスコープ化してくれるが、Claude Designが出力するCSSはクラス名が section, header, card のように汎用的なことが多い。他のページのスタイルと衝突する。

対策：Claude Designに「BEMっぽいクラス名でCSS出力して」と指示すると、.hero__title や .card--featured のような名前が出てくる。衝突が格段に減る。

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

Astroコンポーネントに分割するタイミング

最初は「ページ全体をHTMLで出力→1枚の .astro ファイルに貼る」でいい。でも2〜3ページ目あたりでヘッダーやフッターが重複し始める。

この段階でコンポーネント化するが、Claude Designに「ヘッダーだけを独立したコンポーネントとして出力して」と言えば、Props受け取りのサンプルも一緒に出してくれる。

src/components/SiteHeader.astro

---
interface Props {
  currentPath: string;
}
const { currentPath } = Astro.props;
---

<header class="site-header">
  <nav>
    <a href="/" class:list={['nav-link', { 'is-active': currentPath === '/' }]}>ホーム</a>
    <a href="/about" class:list={['nav-link', { 'is-active': currentPath === '/about' }]}>About</a>
  </nav>
</header>

<style>
  .site-header { /* Claude Designが生成したスタイル */ }
</style>

このコードはClaude Designが出してくれたものをほぼそのまま使っている。Astro特有の class:list ディレクティブまで理解しているのは正直驚いた。

罠1：画像パスがおかしくなる

Claude Designが出力するHTMLには <img src="./image.png"> のような相対パスが入ることがある。Astroでは src/assets/ に画像を置いて import するのが正しい。

「Astroの src/assets/ から import する形式で画像タグを出力して」と指示し直すとちゃんと変換してくれる。

---
import heroImage from '../assets/hero.png';
import { Image } from 'astro:assets';
---

<Image src={heroImage} alt="ヒーロー画像" width={1200} height={600} />

罠2：フォントの指定がWebフォントのURLになっている

Claude DesignはGoogle Fontsのリンクを直接貼ることがある。Astroプロジェクトならfontsourceを使った方がビルド時に最適化されるし、プライバシー的にも安心。

「Google Fontsの <link> タグではなく、fontsourceのnpmパッケージとして出力して」と指示すると @fontsource/noto-sans-jp のインポート方法まで教えてくれる。

Markdown/MDXコンテンツとの組み合わせ

Starlightのような静的サイトジェネレーターを使う場合、Claude Designが作ったレイアウトコンポーネントとMarkdownコンテンツを組み合わせる必要がある。

ここでよくやるのは「Starlightのカスタムコンポーネントとして組み込む形で出力して」という指示だ。Starlightの components オーバーライドの仕組みを理解した上でコードを出してくれる。実際にこのサイトのヘッダーもその方法で作っている。

結論：Astro相性はかなりいい

Claude DesignのHTML出力はAstroとの相性がよい。コンポーネントのスコープCSS、ページルーティング、Content Collectionsの使い方まで理解している。画像パスとフォントの2点だけ気をつければ、あとはほぼそのまま動く。

Next.jsより静的サイト寄りのプロジェクトが多い人には、Astroルートをまず試してほしい。