AngularでClaude Design生成コードを実装する方法

最初にぶつかった壁：JSXがそのまま使えない

Claude Designが出力するコードは、ほとんどの場合ReactのJSXかプレーンHTMLだ。Angularプロジェクトにそのままペーストしようとすると即座に詰まる。AngularはJSXの概念がなく、テンプレートファイルと.tsを分ける設計だ。

最初に試したのは、受け取った生成コードをClaude Codeにそのまま渡して変換させることだった。

このReactコンポーネントをAngular 17のstandaloneコンポーネントに変換してください。
Tailwind CSSを使い、スタイルはカスタムCSSを使わずTailwindクラスで完結させてください。

変換自体は30秒で終わる。問題はその後の細かいズレにあった。

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

ハマりポイント3つと対処法

イベントバインディングの書き換え

ReactのonClick={handleClick}はAngularでは(click)=“handleClick()“になる。変換プロンプトに「React形式のイベントをAngularのテンプレート構文に変換して」と明示するだけで大半は解決する。これを書き忘れると手動修正が増えて地味に時間を食う。

ViewEncapsulationとCSSスコープ

AngularのデフォルトはViewEncapsulationが有効なので、外から渡すCSSクラスが効かないケースがある。Claude Designの出力にカスタムCSSが混入しているとここで詰まる。対策は最初から「スタイルはTailwindのユーティリティクラスのみで書いてください」と指定しておくこと。一度やり方を決めたらプロンプトテンプレートに入れてしまうのが楽だ。

静的コンポーネントへの動的データの接続

Claude Designが出力するコードはたいてい静的なモックデータ入りだ。実際のAPIデータを流すには@Input()プロパティを追加して、サービス経由でデータを受け取る構造に変える必要がある。Claude Codeに「このコンポーネントにAngularのサービスを追加して、APIからデータを取得してリストに表示する形に改修して」と頼めばほぼ解決する。

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

今のワークフロー

試行錯誤の末、今はこの流れで安定している。

1. Claude Designでビジュアルとレイアウトを確定する
2. Claude Codeに「Angular 17 standalone + Tailwindで実装して」と依頼
3. 生成コードをAngularプロジェクトの適切なディレクトリに配置
4. ng serveで確認して、ズレた部分をClaude Codeと一緒に直す

Design→Code→微調整の全工程で1〜2時間かかるが、最初は半日かかっていた作業だ。ReactやNext.jsと比べるとAngularは変換コストが少し高いが、Claude DesignとClaude Codeを組み合わせれば十分実用になる。Angularプロジェクトだからといって諦める必要はない。