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 패턴은? (예: 데이팅앱의 스와이프, 배달앱의 카드)
• 중요한 신뢰 신호는? (리뷰, 뱃지, 보증)
• 경쟁사가 해결하지 못한 페인포인트는?

도메인별 패턴:

Step 2: User Journey

핵심 사용자 흐름과 전환 포인트를 매핑합니다.

프레임워크:

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

각 단계별 정의:

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

Step 3: Emotional Design

디자인이 불러일으킬 감정을 정의합니다.

감정 키워드 매트릭스:

감정 비율 정의 예시: 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

애니메이션과 인터랙션 피드백을 정의합니다.

카테고리:

스펙 포맷:

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