A 7-step hierarchical design prompt generator for AI web development tools (Lovable, Cursor, Bolt).
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
Analyze industry-specific UX patterns and competitors.
Exploration questions:
- What are the top 3 apps/sites in this domain?
- What UX patterns do users expect? (e.g., dating app swipes, delivery app cards)
- What are the important trust signals? (reviews, badges, guarantees)
- What pain points have competitors failed to solve?
Domain-specific patterns:
| Domain | Expected patterns | Trust signals | Core action |
|---|---|---|---|
| Pet Services | Profile cards, booking calendar, pet type filters | Verification badges, reviews, insurance | Search → view → book → pay |
| SaaS | Feature comparison, pricing plans, demo CTA | Logos, testimonials, security badges | Learn → try → subscribe |
| E-commerce | Grid gallery, filters, cart | Reviews, return policy, secure payment | Browse → add to cart → pay |
| Education | Course cards, progress tracking, instructor profiles | Certificates, student count, ratings | Browse → enroll → learn |
| Healthcare | Provider search, appointment slots, symptom checker | License, hospital affiliation | Find → book → consult |
| Fintech | Dashboard, transaction history, quick actions | Encryption badges, regulatory compliance | Connect → monitor → execute |
| Food Delivery | Restaurant cards, real-time tracking, reorder | Ratings, delivery time estimates | Browse → order → track |
| Marketplace | Seller profiles, listing grid, messaging | Verification, transaction history | Search → contact → transact |
Step 2: User Journey
Map core user flows and conversion points.
Framework:
[진입] → [발견] → [평가] → [결정] → [행동] → [유지]
Definitions for each step:
Journey Stage: [단계명]
├── User Goal: 달성하고자 하는 것
├── Key Info: 필요한 정보
├── Friction: 이탈 요인
└── Solution: 디자인 해결책
Step 3: Emotional Design
Define the emotions the design should evoke.
Emotion keyword matrix:
| Emotion | Visual expression | Color direction | Typography | Imagery |
|---|---|---|---|---|
| Trust | Clean, organized, consistent | Blue, green | Stable serif/clean sans | Real photos, badges |
| Warmth | Soft corners, organic shapes | Warm yellow, orange | Round and friendly | Illustrations, smiles |
| Energy | Strong contrast, dynamic angles | Vivid red, orange | Intense, impactful | Action shots, motion |
| Calm | Whitespace, minimal | Soft blue, green, neutral | Light weight | Nature, minimal |
| Luxury | Dark background, gold accents | Black, gold, deep purple | Elegant serif | High-end photo |
| Playful | Asymmetric, animated | Bright and diverse palette | Quirky, custom | Illustration, icon |
| Professional | Grid-based, structured | Navy, gray, white | Classic sans-serif | Corporate, clean |
Emotion ratio definition example: 60% Trust, 30% Warmth, 10% Energy
Step 4: Identity & Goal
Clearly define brand positioning.
Template:
Service Name: [이름]
One-liner: [10단어 이내 설명]
Category: [도메인 카테고리]
Positioning: [경쟁사와의 차별점]
Primary Goal: [주요 전환 액션]
Secondary Goal: [보조 액션]
Brand Personality: [형용사 3개]
Step 5: Design System
Define a comprehensive visual system.
Color system:
Primary: #[hex] - CTAs, 핵심 액션
Secondary: #[hex] - 보조 요소
Accent: #[hex] - 하이라이트, 뱃지
Background: #[hex] - 기본 캔버스
Surface: #[hex] - 카드, 상승 요소
Text Primary: #[hex] - 헤딩, 본문
Text Muted: #[hex] - 캡션, 힌트
Success: #[hex] - 확인
Warning: #[hex] - 경고
Error: #[hex] - 에러
Typography:
Headings: [폰트] - [웨이트] - [특성]
Body: [폰트] - [웨이트] - [행간]
Scale: [base]px, ratio [비율]
Spacing & layout:
Base unit: [4/8]px
Border radius: [size]px
Shadow: subtle/medium/strong
Grid: [columns]columns, [gap]px gap
Container: max-width [width]px
Component style:
Buttons: [shape], [padding], [hover]
Cards: [radius], [shadow], [padding]
Inputs: [border], [focus state]
Step 6: Component Specs
Define core components per domain.
Component template:
[Component Name]
├── Purpose: 존재 이유
├── Contents: 표시 정보
├── States: Default, Hover, Active, Disabled, Loading
├── Variants: 필요한 버전들
└── Responsive: 모바일 적응 방식
Common domain components:
- Profile/Card: Display user or item
- Search/Filter: Navigation mechanism
- Booking/Action: Primary conversion
- Review/Trust: Social proof
- Status/Progress: Feedback and tracking
Step 7: Micro-interactions
Define animation and interaction feedback.
Category:
| Type | Purpose | Example |
|---|---|---|
| Entrance | Draw attention to new content | Fade in, Slide up, Scale in |
| Feedback | Confirm user action | Button press, success checkmark |
| State Change | Indicate transition | Loading spinner, skeleton |
| Navigation | Guide between views | Page transition, drawer slide |
| Delight | Memorable moment | Confetti, bounce |
Spec format:
Trigger: [트리거]
Animation: [동작]
Duration: [시간 ms]
Easing: [커브]
Purpose: [목적]
Recommended defaults:
- Micro-feedback: 150-200ms, ease-out
- Transitions: 250-350ms, ease-in-out
- Entrances: 400-600ms, ease-out + stagger
Output Format
Final prompt structure:
# [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
Required:
- Service topic/industry
- Service name (suggest if none)
Optional (better results): 3. Target users 4. Competitors or reference services 5. Desired mood/emotion 6. Required features 7. Page type (landing/app UI/dashboard)
When input is minimal, use domain defaults and state assumptions.
Quality Checklist
- Reflect domain-specific UX patterns
- User journey stages reflected in structure
- Emotion keywords converted into visual specs
- Complete color system (including usage)
- Define core component states
- Specify micro-interactions
- Consider mobile responsiveness
- Implementation prompt copy-paste ready