SvelteKitで実装する——Claude Designの出力をSvelteコンポーネントに変換する

なぜSvelteKitで実装することになったか

うちのチームはNext.jsがメインだけど、クライアントがSvelteKitで構築中のサービスにClaude Designで作ったUIを組み込んでほしいという依頼が来た。「Claude Codeに頼めば一発だろ」と軽く考えてやってみたら、思った以上に詰まる箇所があった。その経験を正直に残しておく。

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

変換の基本手順

Claude Designでデザインを完成させたら、Claude Codeにこう頼む：

このデザインをSvelteKitのコンポーネントとして実装してください。
- Svelte 5のrunesを使う（$state、$derivedなど）
- TypeScript対応
- スタイルはscoped <style>タグで書く
- 外部UIライブラリなし

ここで「runesを使う」と明示するのが大事。指定しないとSvelte 4の古い$: reactive記法で出力されてしまう。プロジェクトのバージョンに合わせて必ず指定すること。

ハマった罠：スコープドCSSと子コンポーネント

Claude Designが出力するCSSはグローバルな前提で書かれている。SvelteのScopedスタイルに変換するとき、:global()が必要な箇所を見落としがちだ。

スロットに挿入した子コンポーネントのスタイルが効かないケースが何度も起きた：

<style>
  /* これは子コンポーネントに効かない */
  .card p { color: #666; }

  /* :globalをつけると効く */
  .card :global(p) { color: #666; }
</style>

Claude Codeに「子要素へのスタイルは:global()で書いて」と最初から頼んでおくと、この手戻りが減る。

うまくいった技：デザイントークンを$libへ統合

カラーパレットやスペーシングのトークン抽出はSvelteKitとの相性が良かった。Claude Codeに「TypeScriptの定数ファイルとしてsrc/lib/tokens.tsに出力して」と頼むと、そのまま$libエイリアスで使えるファイルを吐いてくれる：

src/lib/tokens.ts

export const colors = {
  primary: '#1A73E8',
  secondary: '#F4B400',
  surface: '#FFFFFF',
} as const;

export const spacing = {
  sm: '0.5rem',
  md: '1rem',
  lg: '2rem',
} as const;

各コンポーネントでimport { colors } from '$lib/tokens'と書くだけ。デザイン変更があってもここを直せば全体に反映される。これはNext.jsで使ったときより気持ちよく機能した。

まとめ

SvelteKitへの変換はNext.jsより若干手間がかかる印象。特にScopedCSSと子要素へのスタイル適用は毎回確認が必要になる。ただ、デザイントークンを$libへ統合する流れは非常にスムーズで、「Claude Designを使ってよかった」と思えるポイントだった。指示のコツさえ押さえれば、SvelteKitとの組み合わせは十分実用的だ。