はじめに
「AIでデザインするなら、きれいなモダンUI」——そんなイメージ、ありませんか？
整ったカード、ミニマルなレイアウト、フラットなアイコン。AIデザインツールで生成されるものって、なんとなくそういう方向性に偏りがちな気がしていました。
そんな先入観を試してみたくて、Claude Designでちょっと変わったデザインを作ってみた話を紹介します。テーマはWindows 98風のレトロUI。そのままClaudeCodeでコーディングしてゲーム風に仕上げるところまでやってみました。
Claude Designって何？
Claude Designは、Anthropicが提供するAIデザインツールです。テキストで指示を出すと、UIデザインをビジュアルとして生成してくれます。
「こんな画面を作って」と伝えるだけで、レイアウトやカラーリング、コンポーネントなどを提案してくれるので、デザインの専門知識がなくても試しやすいのが特徴です。
Windows 98風UIを作ってみる
Claude Designは、ClaudeのWebアプリから使用することができます。
メニューからDesignを選び、今回はデザインシステムを作りたいので、「Create new design system」を選びました。
すでに作成済のアプリがある場合は素材やコードなどを渡すと、より実態に沿ったデザインシステムを構築してくれるようですが、今回はゼロから作ってもらいたいので、アプリの概要と指示文だけを入力しました。
5分ほど待つと、アイコン、カラーパレット、ボタンなどのコンポーネント、全体のUIイメージなどが生成されました。
青いグラデーションのタイトルバー、グレーの立体的なボタン、ちゃんとダブルクリックしたくなるような古き良きUIが完成しています。
「整ったモダンデザインしか出てこないんじゃ」という予想は外れました。
ClaudeCodeでコーディングして仕上げる
デザインができたら、次はClaudeCodeで実際のコードに落とし込みます。
「Share」ボタンから、ClaudeCode宛の指示文をコピーすることができます。
URL経由でClaudeCodeにデザイン関連のファイルを取得させて、プロジェクトに対してデザインシステムを適用できるようになっています。
表示された指示文をそのままコピペしてもいいのですが、今回は作成済のアプリケーションも特にない状態だったので、先にアプリケーションの基盤だけClaudeCodeで作らせて、ClaudeDesignのURLを与えつつ「このURLからデザインデータを取得して、デザイントークンや基本のUIコンポーネントとして取り込んでください」と指示をしました。
ClaudeCodeはデザインの意図をわりとちゃんと読み取ってくれて、CSSでカラーパレットを定義して使用したり、アイコン画像をダウンロードして使用したり、各UIもレトロなPC風のデザインを反映してくれるようになりました。
というわけで、実際に作ったものがこちらです。
（ゲーム性やクオリティには目をつぶってください）
どうでしょう、レトロなPCのデスクトップのようなUIがいい感じに表現できているのではないでしょうか？
やってみて気づいたこと
指示文は数行だけ、スタイルの細かい指定は一切しませんでした。それでも「Windows 98っぽさ」をちゃんと解釈して、カラーパレットからボタンの立体感まで再現してくれました。イメージをそのまま言葉にして投げるだけで形になるのは、思っていた以上に楽でした。
また、アイコン画像のクオリティが意外と高かったです。ClaudeってSVGでアイコンを作るのが苦手なイメージだったので、フォルダ・ゴミ箱・コンソールといったアイコンがそれらしく生成されてきたのは素直に驚きました。
デザインからコーディングまで一気通貫でできるのも、体験としてスムーズでした。「デザインをコードに起こす」という地味に面倒な作業を、ほぼ自動でやってもらえるのは助かります。
気になった方は、ぜひ試してみてください。ただし、生成には時間とトークンをそれなりに食うので、そこだけはご注意を。