| name | design-prompt-generator-v2 |
| description | Advanced 7-step hierarchical design prompt generator for AI web development tools (Lovable, Cursor, Bolt). Generates domain-aware, user-journey-based design prompts with emotional design considerations. Triggers on "๋์์ธ ํ๋กฌํํธ", "์น ๋์์ธ", "Lovable ํ๋กฌํํธ", "๋๋ฉํ์ด์ง ๋ง๋ค์ด์ค", or any AI web builder prompt requests. |
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 ํจํด๊ณผ ๊ฒฝ์์ฌ๋ฅผ ๋ถ์ํฉ๋๋ค.
ํ์ ์ง๋ฌธ:
- ์ด ๋๋ฉ์ธ์ Top 3 ์ฑ/์ฌ์ดํธ๋?
- ์ฌ์ฉ์๊ฐ ๊ธฐ๋ํ๋ UX ํจํด์? (์: ๋ฐ์ดํ
์ฑ์ ์ค์์ดํ, ๋ฐฐ๋ฌ์ฑ์ ์นด๋)
- ์ค์ํ ์ ๋ขฐ ์ ํธ๋? (๋ฆฌ๋ทฐ, ๋ฑ์ง, ๋ณด์ฆ)
- ๊ฒฝ์์ฌ๊ฐ ํด๊ฒฐํ์ง ๋ชปํ ํ์ธํฌ์ธํธ๋?
๋๋ฉ์ธ๋ณ ํจํด:
| ๋๋ฉ์ธ | ์์ ํจํด | ์ ๋ขฐ ์ ํธ | ํต์ฌ ์ก์
|
|---|
| Pet Services | ํ๋กํ ์นด๋, ์์ฝ ์บ๋ฆฐ๋, ํซ ํ์
ํํฐ | ์ธ์ฆ ๋ฑ์ง, ๋ฆฌ๋ทฐ, ๋ณดํ | ๊ฒ์ โ ์กฐํ โ ์์ฝ โ ๊ฒฐ์ |
| SaaS | ๊ธฐ๋ฅ ๋น๊ต, ์๊ธ์ , ๋ฐ๋ชจ CTA | ๋ก๊ณ , ํ๊ธฐ, ๋ณด์ ๋ฑ์ง | ํ์ต โ ์ฒดํ โ ๊ตฌ๋
|
| E-commerce | ๊ทธ๋ฆฌ๋ ๊ฐค๋ฌ๋ฆฌ, ํํฐ, ์ฅ๋ฐ๊ตฌ๋ | ๋ฆฌ๋ทฐ, ๋ฐํ์ ์ฑ
, ๋ณด์๊ฒฐ์ | ํ์ โ ๋ด๊ธฐ โ ๊ฒฐ์ |
| Education | ๊ฐ์ ์นด๋, ์ง๋ ์ถ์ , ๊ฐ์ฌ ํ๋กํ | ์ธ์ฆ์, ์๊ฐ์ ์, ํ์ | ํ์ โ ๋ฑ๋ก โ ํ์ต |
| Healthcare | ์๋ฃ์ง ๊ฒ์, ์์ฝ ์ฌ๋กฏ, ์ฆ์ ์ฒด์ปค | ๋ฉดํ, ๋ณ์ ์์ | ์ฐพ๊ธฐ โ ์์ฝ โ ์๋ด |
| Fintech | ๋์๋ณด๋, ๊ฑฐ๋ ๋ด์ญ, ๋น ๋ฅธ ์ก์
| ์ํธํ ๋ฑ์ง, ๊ท์ ์ค์ | ์ฐ๊ฒฐ โ ๋ชจ๋ํฐ๋ง โ ์คํ |
| Food Delivery | ๋ ์คํ ๋ ์นด๋, ์ค์๊ฐ ์ถ์ , ์ฌ์ฃผ๋ฌธ | ํ์ , ๋ฐฐ๋ฌ ์๊ฐ ์์ธก | ํ์ โ ์ฃผ๋ฌธ โ ์ถ์ |
| Marketplace | ํ๋งค์ ํ๋กํ, ๋ฆฌ์คํ
๊ทธ๋ฆฌ๋, ๋ฉ์์ง | ์ธ์ฆ, ๊ฑฐ๋ ๋ด์ญ | ๊ฒ์ โ ์ฐ๋ฝ โ ๊ฑฐ๋ |
Step 2: User Journey
ํต์ฌ ์ฌ์ฉ์ ํ๋ฆ๊ณผ ์ ํ ํฌ์ธํธ๋ฅผ ๋งคํํฉ๋๋ค.
ํ๋ ์์ํฌ:
[์ง์
] โ [๋ฐ๊ฒฌ] โ [ํ๊ฐ] โ [๊ฒฐ์ ] โ [ํ๋] โ [์ ์ง]
๊ฐ ๋จ๊ณ๋ณ ์ ์:
Journey Stage: [๋จ๊ณ๋ช
]
โโโ User Goal: ๋ฌ์ฑํ๊ณ ์ ํ๋ ๊ฒ
โโโ Key Info: ํ์ํ ์ ๋ณด
โโโ Friction: ์ดํ ์์ธ
โโโ Solution: ๋์์ธ ํด๊ฒฐ์ฑ
Step 3: Emotional Design
๋์์ธ์ด ๋ถ๋ฌ์ผ์ผํฌ ๊ฐ์ ์ ์ ์ํฉ๋๋ค.
๊ฐ์ ํค์๋ ๋งคํธ๋ฆญ์ค:
| ๊ฐ์ | ์๊ฐ์ ํํ | ์ปฌ๋ฌ ๋ฐฉํฅ | ํ์ดํฌ | ์ด๋ฏธ์ง |
|---|
| Trust | ๊น๋, ์ ๋, ์ผ๊ด์ฑ | ๋ธ๋ฃจ, ๊ทธ๋ฆฐ | ์์ ์ ์ธ๋ฆฌํ/ํด๋ฆฐ ์ฐ์ค | ์ค์ ์ฌ์ง, ๋ฑ์ง |
| Warmth | ๋ถ๋๋ฌ์ด ๋ชจ์๋ฆฌ, ์ ๊ธฐ์ ํํ | ์ ์๋ก์ฐ, ์ค๋ ์ง | ๋ฅ๊ธ๊ณ ์น๊ทผํจ | ์ผ๋ฌ์คํธ, ๋ฏธ์ |
| Energy | ๊ฐํ ๋๋น, ๋ค์ด๋๋ฏน ์ต๊ธ | ๋น๋น๋ ๋ ๋, ์ค๋ ์ง | ๊ฐ๋ ฌ, ์ํฉํธ | ์ก์
์ท, ๋ชจ์
|
| Calm | ์ฌ๋ฐฑ, ๋ฏธ๋๋ฉ | ์ํํธ ๋ธ๋ฃจ, ๊ทธ๋ฆฐ, ๋ดํธ๋ด | ๊ฐ๋ฒผ์ด ์จ์ดํธ | ์์ฐ, ๋ฏธ๋๋ฉ |
| Luxury | ๋คํฌ ๋ฐฐ๊ฒฝ, ๊ณจ๋ ์ก์ผํธ | ๋ธ๋, ๊ณจ๋, ๋ฅ ํผํ | ์ฐ์ํ ์ธ๋ฆฌํ | ํ์ด์๋ ํฌํ |
| Playful | ๋น๋์นญ, ์ ๋๋ฉ์ด์
| ๋ฐ๊ณ ๋ค์ํ ํ๋ ํธ | ํดํค, ์ปค์คํ
| ์ผ๋ฌ์คํธ, ์์ด์ฝ |
| Professional | ๊ทธ๋ฆฌ๋ ๊ธฐ๋ฐ, ๊ตฌ์กฐ์ | ๋ค์ด๋น, ๊ทธ๋ ์ด, ํ์ดํธ | ํด๋์ ์ฐ์ค์ธ๋ฆฌํ | ๊ธฐ์
์ , ํด๋ฆฐ |
๊ฐ์ ๋น์จ ์ ์ ์์: 60% Trust, 30% Warmth, 10% Energy
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: ๋ชจ๋ฐ์ผ ์ ์ ๋ฐฉ์
๊ณตํต ๋๋ฉ์ธ ์ปดํฌ๋ํธ:
- Profile/Card: ์ฌ์ฉ์ ๋๋ ์์ดํ
ํ์
- Search/Filter: ํ์ ๋ฉ์ปค๋์ฆ
- Booking/Action: ์ฃผ์ ์ ํ
- Review/Trust: ์์
ํ๋ฃจํ
- Status/Progress: ํผ๋๋ฐฑ ๋ฐ ์ถ์
Step 7: Micro-interactions
์ ๋๋ฉ์ด์
๊ณผ ์ธํฐ๋์
ํผ๋๋ฐฑ์ ์ ์ํฉ๋๋ค.
์นดํ
๊ณ ๋ฆฌ:
| ํ์
| ๋ชฉ์ | ์์ |
|---|
| Entrance | ์ ์ฝํ
์ธ ์ฃผ๋ชฉ | Fade in, Slide up, Scale in |
| Feedback | ์ฌ์ฉ์ ์ก์
ํ์ธ | ๋ฒํผ ๋๋ฆ, ์ฑ๊ณต ์ฒดํฌ๋งํฌ |
| State Change | ์ ํ ํ์ | ๋ก๋ฉ ์คํผ๋, ์ค์ผ๋ ํค |
| Navigation | ๋ทฐ ๊ฐ ๊ฐ์ด๋ | ํ์ด์ง ์ ํ, ๋๋ก์ด ์ฌ๋ผ์ด๋ |
| Delight | ๊ธฐ์ต์ ๋จ๋ ์๊ฐ | ์ปจํํฐ, ๋ฐ์ด์ค |
์คํ ํฌ๋งท:
Trigger: [ํธ๋ฆฌ๊ฑฐ]
Animation: [๋์]
Duration: [์๊ฐ ms]
Easing: [์ปค๋ธ]
Purpose: [๋ชฉ์ ]
๊ถ์ฅ ๊ธฐ๋ณธ๊ฐ:
- Micro-feedback: 150-200ms, ease-out
- Transitions: 250-350ms, ease-in-out
- Entrances: 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
ํ์:
- ์๋น์ค ์ฃผ์ /์
์ข
- ์๋น์ค ์ด๋ฆ (์์ผ๋ฉด ์ ์)
์ ํ (๋ ์ข์ ๊ฒฐ๊ณผ):
3. ํ๊ฒ ์ฌ์ฉ์
4. ๊ฒฝ์์ฌ ๋๋ ์ฐธ๊ณ ์๋น์ค
5. ์ํ๋ ๋ถ์๊ธฐ/๊ฐ์ฑ
6. ํ์ ๊ธฐ๋ฅ
7. ํ์ด์ง ์ข
๋ฅ (๋๋ฉ/์ฑUI/๋์๋ณด๋)
์ต์ ์
๋ ฅ ์ ๋๋ฉ์ธ ๊ธฐ๋ณธ๊ฐ์ ์ฌ์ฉํ๊ณ ๊ฐ์ ์ ๋ช
์ํฉ๋๋ค.
Quality Checklist