はじめに
最近、AIを使ったUI設計・プロトタイピングツールとして Claude Design が注目されています。本記事では、Claude Designを使って実際にデザインシステムを構築した事例を紹介します。フロントエンドエンジニアの方が「明日から使える」レベルの話をまとめました。
Claude Designとは
Claude Designは、Anthropicが提供するAIアシスタント「Claude」を核にした、HTMLベースのデザイン制作環境です。テキストで指示するだけで、インタラクティブなプロトタイプ・スライドデッキ・デザインシステムをHTMLとして出力してくれます。
- コード不要でUIコンポーネントを生成
- Tweaksパネルでリアルタイムに調整可能
- GitHubリポジトリと連携してコードベースを読み込める
- PPTX・PDF・スタンドアロンHTMLへのエクスポート対応
デザインシステム構築の流れ
今回は COBO STONE というプロジェクトのデザインシステムを Claude Design で作成しました。大まかな手順は以下のとおりです。
- プロジェクトのブランドカラー・フォントを言葉で伝える
- カラーパレット・タイポグラフィ・スペーシングのトークンを生成
- ボタン・カード・バッジなどのコンポーネントをHTMLで出力
- Tweaksパネルで色・角丸・フォントサイズを微調整
実際のプロンプト例
# こんな感じで指示するだけ
「落ち着いたアースカラーをベースに、
ボタン・カード・バッジ・インプットを含む
デザインシステムを作ってください。
Tweaksでテーマ色を切り替えられるようにしてください。」
これだけで、カラートークン定義からコンポーネントカタログまで一気に生成されます。生成されたHTMLはそのままフロントエンドのスタイルガイドとして使えます。
良かった点・注意点
✅ デザインとコードの往復が激減した。「見た目を確認しながら」指示できる体験が新しい。
⚠️ 既存のデザインシステム（Figma等）との同期は手動が必要。あくまでHTMLが成果物なので、React/Vueへの移植は別途必要。
まとめ
Claude Designは「デザインとコードの間にいる」フロントエンドエンジニアにとって、特に相性の良いツールだと感じました。ゼロからデザインシステムを立ち上げるフェーズや、社内向けUIカタログの作成に活用できます。まずは気軽に試してみてください。
本記事のデザインシステムはClaude Designで生成しました。