design-prompt-generator-v2

Design Prompt Generator v2

AI ウェブ開発ツール（Lovable、Cursor、Bolt）向けの7段階階層型デザインプロンプト生成器です。

7-Step Framework

Step 1: Domain Research      → 업종 UX 패턴, 경쟁사 인사이트
Step 2: User Journey         → 핵심 사용자 흐름, 전환 포인트
Step 3: Emotional Design     → 감성 키워드, 무드 컨셉
Step 4: Identity & Goal      → 브랜드 정체성, 목표
Step 5: Design System        → 컬러, 타이포, 컴포넌트
Step 6: Component Specs      → 핵심 컴포넌트 상세 정의
Step 7: Micro-interactions   → 애니메이션, 인터랙션 패턴

---

Step 1: Domain Research

業種ごとの UX パターンと競合他社を分析します。

調査の質問：

• このドメインのトップ3のアプリ／サイトは？
• ユーザーが期待する UX パターンは？（例：デートアプリのスワイプ、配達アプリのカード）
• 重要な信頼シグナルは？（レビュー、バッジ、保証）
• 競合他社が解決できていないペインポイントは？

ドメイン別のパターン：

ドメイン	想定されるパターン	信頼シグナル	主要なアクション
ペットサービス	プロフィールカード、予約カレンダー、ペットの種類によるフィルター	認証バッジ、レビュー、保険	検索 → 閲覧 → 予約 → 決済
SaaS	機能比較、料金プラン、デモの CTA	ロゴ、利用者の声、セキュリティバッジ	学習 → 試用 → サブスクリプション
E コマース	グリッドギャラリー、フィルター、カート	レビュー、返品ポリシー、安全な決済	探索 → カートに追加 → 決済
教育	講座カード、進捗の追跡、講師プロフィール	認定証、受講者数、評価	探索 → 登録 → 学習
ヘルスケア	医療従事者の検索、予約枠、症状チェッカー	免許、病院への所属	検索 → 予約 → 相談
フィンテック	ダッシュボード、取引履歴、クイックアクション	暗号化バッジ、規制への準拠	接続 → モニタリング → 実行
フードデリバリー	レストランカード、リアルタイム追跡、再注文	評価、配達時間の予測	探索 → 注文 → 追跡
マーケットプレイス	販売者プロフィール、出品グリッド、メッセージ機能	認証、取引履歴	検索 → 問い合わせ → 取引

---

Step 2: User Journey

主要なユーザーフローとコンバージョンポイントをマッピングします。

フレームワーク：

[진입] → [발견] → [평가] → [결정] → [행동] → [유지]

各ステップの定義：

Journey Stage: [단계명]
├── User Goal: 달성하고자 하는 것
├── Key Info: 필요한 정보
├── Friction: 이탈 요인
└── Solution: 디자인 해결책

---

Step 3: Emotional Design

デザインによって呼び起こす感情を定義します。

感情キーワードのマトリックス：

感情	視覚的表現	カラーの方向性	タイポグラフィ	画像
信頼	すっきり、整然、一貫性	ブルー、グリーン	安定感のあるセリフ体／クリーンなサンセリフ体	実際の写真、バッジ
温かみ	柔らかな角、有機的な形	ウォームイエロー、オレンジ	丸みがあり親しみやすい	イラスト、笑顔
エネルギー	強いコントラスト、ダイナミックなアングル	ビビッドレッド、オレンジ	力強く、インパクトのある	アクションショット、モーション
穏やかさ	余白、ミニマル	ソフトブルー、グリーン、ニュートラル	軽めのウェイト	自然、ミニマル
高級感	ダークな背景、ゴールドのアクセント	ブラック、ゴールド、ディープパープル	エレガントなセリフ体	ハイエンドな写真
遊び心	非対称、アニメーション	明るく多彩なパレット	個性的でカスタムな	イラスト、アイコン
プロフェッショナル	グリッドベース、構造的	ネイビー、グレー、ホワイト	クラシックなサンセリフ体	企業的、クリーン

感情の割合の定義例： 信頼 60％、温かみ 30％、エネルギー 10％

---

Step 4: Identity & Goal

ブランドのポジショニングを明確に定義します。

テンプレート：

Service Name: [이름]
One-liner: [10단어 이내 설명]
Category: [도메인 카테고리]
Positioning: [경쟁사와의 차별점]
Primary Goal: [주요 전환 액션]
Secondary Goal: [보조 액션]
Brand Personality: [형용사 3개]

---

Step 5: Design System

包括的なビジュアルシステムを定義します。

カラーシステム：

Primary:      #[hex] - CTAs, 핵심 액션
Secondary:    #[hex] - 보조 요소
Accent:       #[hex] - 하이라이트, 뱃지
Background:   #[hex] - 기본 캔버스
Surface:      #[hex] - 카드, 상승 요소
Text Primary: #[hex] - 헤딩, 본문
Text Muted:   #[hex] - 캡션, 힌트
Success:      #[hex] - 확인
Warning:      #[hex] - 경고
Error:        #[hex] - 에러

タイポグラフィ：

Headings: [폰트] - [웨이트] - [특성]
Body: [폰트] - [웨이트] - [행간]
Scale: [base]px, ratio [비율]

スペーシングとレイアウト：

Base unit: [4/8]px
Border radius: [size]px
Shadow: subtle/medium/strong
Grid: [columns]columns, [gap]px gap
Container: max-width [width]px

コンポーネントのスタイル：

Buttons: [shape], [padding], [hover]
Cards: [radius], [shadow], [padding]
Inputs: [border], [focus state]

---

Step 6: Component Specs

ドメインごとの主要なコンポーネントを定義します。

コンポーネントのテンプレート：

[Component Name]
├── Purpose: 존재 이유
├── Contents: 표시 정보
├── States: Default, Hover, Active, Disabled, Loading
├── Variants: 필요한 버전들
└── Responsive: 모바일 적응 방식

共通のドメインコンポーネント：

• プロフィール／カード：ユーザーまたはアイテムを表示
• 検索／フィルター：探索の仕組み
• 予約／アクション：主要なコンバージョン
• レビュー／信頼：ソーシャルプルーフ
• ステータス／進捗：フィードバックと追跡

---

Step 7: Micro-interactions

アニメーションとインタラクションのフィードバックを定義します。

カテゴリー：

タイプ	目的	例
登場	新しいコンテンツに注目を集める	フェードイン、スライドアップ、スケールイン
フィードバック	ユーザーの操作を確認する	ボタンの押下、成功のチェックマーク
状態変化	切り替わりを示す	ローディングスピナー、スケルトン
ナビゲーション	ビュー間の移動を案内する	ページ遷移、ドロワーのスライド
喜び	記憶に残る瞬間を作る	紙吹雪、バウンス

仕様の形式：

Trigger: [트리거]
Animation: [동작]
Duration: [시간 ms]
Easing: [커브]
Purpose: [목적]

推奨デフォルト値：

• マイクロフィードバック：150～200ms、ease-out
• トランジション：250～350ms、ease-in-out
• 登場：400～600ms、ease-out + stagger

---

Output Format

最終的なプロンプトの構造：

# [Service Name] Design Prompt

## Domain Context
[업계 인사이트, 사용자 기대, 경쟁 환경]

## User Journey
[단계별 흐름과 디자인 시사점]

## Emotional Direction
[주요 감정, 시각적 해석]

## Design Specifications

### Identity
[이름, 포지셔닝, 개성]

### Design System
[컬러, 타이포, 스페이싱 전체 스펙]

### Key Components
[도메인 특화 컴포넌트 정의]

### Interactions
[애니메이션, 마이크로 인터랙션 스펙]

## Implementation Prompt
[AI 도구용 복사-붙여넣기 프롬프트]

## Iterative Refinement Prompts
[단계별 개선 프롬프트]

---

User Input

必須：

1. サービスのテーマ／業種
2. サービス名（なければ提案）

任意（より良い結果を得るため）： 3. ターゲットユーザー 4. 競合他社または参考にするサービス 5. 希望する雰囲気／感情 6. 必須機能 7. ページの種類（ランディングページ／アプリ UI／ダッシュボード）

入力が最小限の場合は、ドメインのデフォルト値を使用し、前提を明記します。

---

Quality Checklist

• ドメインに特化した UX パターンを反映
• ユーザージャーニーの各ステップを構造に反映
• 感情のキーワードをビジュアル仕様に変換
• カラーシステムを完成（用途を含む）
• 主要コンポーネントの状態を定義
• マイクロインタラクションを明記
• モバイル対応を考慮
• 実装プロンプトをコピー＆ペースト可能