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 패턴과 경쟁사를 분석합니다.

탐색 질문:

• 이 도메인의 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

필수:

1. 서비스 주제/업종
2. 서비스 이름 (없으면 제안)

선택 (더 좋은 결과): 3. 타겟 사용자 4. 경쟁사 또는 참고 서비스 5. 원하는 분위기/감성 6. 필수 기능 7. 페이지 종류 (랜딩/앱UI/대시보드)

최소 입력 시 도메인 기본값을 사용하고 가정을 명시합니다.

---

Quality Checklist

• 도메인 특화 UX 패턴 반영
• 사용자 여정 단계가 구조에 반영
• 감정 키워드가 시각 스펙으로 변환
• 컬러 시스템 완성 (용도 포함)
• 핵심 컴포넌트 상태 정의
• 마이크로 인터랙션 명시
• 모바일 반응형 고려
• 구현 프롬프트 복사-붙여넣기 가능