AIを使ったフロントエンドデザイン：Cursorで美しいUIを作る
English · 繁中 · Español · 日本語 · Português (BR)
著者： Danko Peng（@dankopeng）
更新： 2026年3月
読了時間： 約10分
AIにデザインを任せる前に知っておくこと
「AIにデザインをやってもらいたいけど、何を伝えればいいかわからない」
これがVibe Coderの多くが最初に直面する問題だ。AIはコードを書けるが、「良いデザインを作って」という漠然した指示では期待通りの結果にならない。
AIに良いUIを作ってもらうには、どんなデザインを求めているかを具体的に伝えるプロンプトのスキルが必要だ。この記事ではそのコツを説明する。
デザインの指示は4つの層で考える
フロントエンドのデザイン指示を整理するフレームワーク：
- 全体スタイル：ブランドの雰囲気、ターゲットユーザーのイメージ
- カラーとフォント：主要な色のパレット、フォントの方向性
- レイアウトとコンポーネント：ページ構成、主要なUIコンポーネントの形
- インタラクションとディテール：ホバー効果、トランジション、細かい仕上げ
一度にすべてを完成させる必要はない。最初に全体スタイルを決めて、その後コンポーネントごとに詰めていく。
全体スタイルの指示例
まずAIに全体の方向性を伝える：
これからReact + Tailwind CSSでEコマースサイトのフロントエンドを作ります。
ブランド：天然手工芸品のオンラインショップ「SoapCo」
ターゲットユーザー：自然派・健康志向の30-45歳女性
全体の雰囲気：温かみのある、ナチュラル、手作り感、信頼感
コンポーネントを作り始める前に、まずデザインシステムの基本方針を提案してください：
- カラーパレット（Tailwindのクラス名で）
- フォントの方向性
- カードやボタンなどのコンポーネントの基本スタイルAIがデザインシステムの提案を出したら、気に入った部分は採用し、好みに合わない部分は修正を依頼する。
カラーパレットの指定
Tailwind CSSのカラークラスを具体的に指定するのが最も確実だ：
以下のカラーパレットでデザインしてください：
プライマリカラー：stone-50（背景）+ green-800（アクセント）
セカンダリ：amber-100（暖色アクセント）
テキスト：stone-900（見出し）、stone-600（本文）
ボーダー：stone-200
エラー：red-600
成功：green-600
ボタンはgreen-800の背景に白テキスト。
リンクはgreen-700でホバー時にunderline。具体的なTailwindクラス名を与えることで、AIが迷わずに一貫したカラーコードを生成できる。
ヒーローセクションを作る：実例
SoapCoのヒーローセクションをReact + Tailwind CSSで作ってください。
要件：
- 大きな背景画像（後で差し替えるのでプレースホルダーでOK）
- キャッチコピー：「自然が育んだ、手仕事の温かみ」
- サブテキスト：「化学成分不使用、ひとつひとつ手作りの天然ソープ」
- CTAボタン：「商品を見る」（green-800 背景）
- モバイルファーストのレスポンシブデザイン
- 全体的に白とベージュ系の清潔感のある雰囲気
Remixのルートコンポーネントとして書いてください。ナビゲーションバーの作り方
SoapCoのナビゲーションバーをReact + Tailwind CSSで作ってください。
要件：
- ロゴ（テキスト「SoapCo」でOK）
- ナビリンク：商品一覧、こだわり、お知らせ
- 右端にショッピングカートアイコン（数量バッジ付き）とログインボタン
- スクロール時に背景が白になってshadowが出る
- モバイルではハンバーガーメニュー
- Lucide Reactのアイコンを使用
現在のカラーパレットと一致するスタイルで。商品カードの作り方
ECサイトの核心となるコンポーネントだ：
商品カードコンポーネントを作ってください。
Props：
- product: { id, name, price, image_url, stock }
要件：
- 正方形の画像エリア（アスペクト比1:1を維持）
- 商品名（2行まで、それ以上は省略）
- 価格表示（¥ 記号付き、整数表示）
- 在庫切れの場合はグレーアウトして「在庫切れ」バッジを表示
- カートに追加ボタン（在庫切れ時はdisabled）
- カード全体のホバー時に軽いshadowが増す
Tailwind CSSのみを使用してください（CSS-in-JSは使わない）。スクリーンショットを参考にする
実際のデザインを参考にしたい場合、スクリーンショットをCursorに貼り付けることができる：
（スクリーンショットを添付）
このデザインを参考にして、同じレイアウト構成でSoapCo用のバージョンを作ってください。
カラーはSoapCoのパレット（stone + green）に変えてください。
Tailwind CSSで実装してください。Cursorはビジョン（画像認識）に対応しており、デザインの参考画像を理解してコードを生成できる。
既存のコンポーネントを改善するプロンプト
一度作ったコンポーネントをブラッシュアップするときの伝え方：
（既存のコードを貼り付け）
このコンポーネントを以下の点で改善してください：
1. モバイル表示でテキストが長すぎて崩れている → 適切に折り返すよう修正
2. ボタンのホバーエフェクトがない → green-700 でホバーエフェクトを追加
3. 画像の読み込み前にスケルトンローダーを表示したい
4. 全体的にもう少しpadding/marginに余白を持たせたい
修正点だけを変更してください。他の部分は変えないでください。「修正点だけを変更してください」という一文は重要だ。これがないとAIが関係ない部分まで書き換えることがある。
よくある失敗とその対処
AIのデザインがあまりにも無難すぎる
→ もっと具体的にリクエストする。「Bold、モダン、ミニマル」「洗練されたラグジュアリー感」「フレンドリーで親しみやすい」など形容詞を追加する。
生成されたコードにインラインスタイルが混じっている
→ 「Tailwind CSSのみを使用し、インラインスタイルは使わないでください」と明示する。
モバイルで崩れる
→ 「モバイルファーストで実装してください。sm:、md:、lg:ブレークポイントを適切に使用してください」と追加する。
全ページで見た目に一貫性がない
→ まず共通のデザインシステム（カラー、フォント、コンポーネントのスタイル）をAIと決めてから、各コンポーネントを作り始める。
Remixのloaderと組み合わせる
デザインだけでなく、データの取得も含めて依頼できる：
商品一覧ページ（/shop）を実装してください。
機能：
- Remix loaderでD1から商品一覧を取得
- 上部にカテゴリフィルター（全て、石鹸、シャンプー、ボディケア）
- 商品カードグリッド（PC:3列、タブレット:2列、モバイル:1列）
- 商品が0件の場合は「現在商品はありません」を表示
- ページネーション（1ページ12件）
前に作った商品カードコンポーネントを使用してください。Danko Peng
X · YouTube · Threads
完全なCloudflareフルスタックテンプレートを今すぐ使い始めたい方へ：
👉 vibefast.app — アーリーバード $99、2026年8月1日より $199 に値上がり。