design-prompt-generator-v2

Design Prompt Generator v2

面向 AI Web 开发工具（Lovable、Cursor、Bolt）的 7 步分层设计提示词生成器。

7 步框架

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   → 애니메이션, 인터랙션 패턴

---

第 1 步：领域研究

分析各行业的 UX 模式和竞争对手。

探索问题：

• 该领域排名前 3 的应用／网站有哪些？
• 用户期待哪些 UX 模式？（例如：约会应用的滑动操作、外卖应用的卡片）
• 重要的信任信号有哪些？（评论、徽章、保障）
• 竞争对手未能解决哪些痛点？

各领域的模式：

领域	预期模式	信任信号	核心操作
Pet Services	个人资料卡片、预约日历、宠物类型筛选	认证徽章、评论、保险	搜索 → 查看 → 预约 → 付款
SaaS	功能对比、价格方案、演示 CTA	品牌标识、评价、安全徽章	了解 → 体验 → 订阅
E-commerce	网格画廊、筛选、购物车	评论、退货政策、安全支付	浏览 → 加入购物车 → 付款
Education	课程卡片、进度跟踪、讲师个人资料	证书、学员人数、评分	浏览 → 注册 → 学习
Healthcare	医疗人员搜索、预约时段、症状检查器	执照、医院所属信息	查找 → 预约 → 咨询
Fintech	仪表板、交易记录、快捷操作	加密徽章、合规信息	连接 → 监控 → 执行
Food Delivery	餐厅卡片、实时追踪、再次下单	评分、预计送达时间	浏览 → 下单 → 追踪
Marketplace	卖家个人资料、商品列表网格、消息功能	认证、交易记录	搜索 → 联系 → 交易

---

第 2 步：用户旅程

映射核心用户流程和转化节点。

框架：

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

各阶段定义：

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

---

第 3 步：情感化设计

定义设计应唤起的情感。

情感关键词矩阵：

情感	视觉呈现	色彩方向	字体	图像
Trust	简洁、整齐、一致	蓝色、绿色	稳重的衬线体／简洁的无衬线体	实拍照片、徽章
Warmth	柔和的圆角、有机形态	暖黄色、橙色	圆润、亲切	插画、笑容
Energy	强烈对比、动感角度	鲜红色、橙色	强烈、有冲击力	动作照片、动效
Calm	留白、极简	柔和的蓝色、绿色、中性色	细字重	自然、极简
Luxury	深色背景、金色点缀	黑色、金色、深紫色	优雅的衬线体	高端摄影
Playful	不对称、动画	明亮多样的调色板	古灵精怪、自定义	插画、图标
Professional	基于网格、结构化	藏青色、灰色、白色	经典无衬线体	企业风格、简洁

情感比例定义示例： 60% Trust、30% Warmth、10% Energy

---

第 4 步：品牌身份与目标

明确品牌定位。

模板：

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

---

第 5 步：设计系统

定义完整的视觉系统。

色彩系统：

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]

---

第 6 步：组件规格

定义各领域的核心组件。

组件模板：

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

通用领域组件：

• Profile/Card：展示用户或商品
• Search/Filter：浏览机制
• Booking/Action：主要转化操作
• Review/Trust：社会认同
• Status/Progress：反馈与跟踪

---

第 7 步：微交互

定义动画和交互反馈。

类别：

类型	目的	示例
Entrance	突出新内容	淡入、向上滑入、缩放进入
Feedback	确认用户操作	按钮按下、成功勾选标记
State Change	显示状态转换	加载指示器、骨架屏
Navigation	引导用户切换视图	页面切换、抽屉滑动
Delight	打造令人难忘的时刻	彩纸、弹跳

规格格式：

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

建议默认值：

• 微反馈：150-200ms，ease-out
• 过渡：250-350ms，ease-in-out
• 进入动画：400-600ms，ease-out + stagger

---

输出格式

最终提示词结构：

# [Service Name] Design Prompt

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

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

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

## Design Specifications

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

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

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

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

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

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

---

用户输入

必填：

1. 服务主题／行业
2. 服务名称（如无，请提出建议）

选填（有助于获得更好的结果）： 3. 目标用户 4. 竞争对手或参考服务 5. 期望的氛围／情感 6. 必需功能 7. 页面类型（落地页／应用 UI／仪表板）

输入信息较少时，使用领域默认值并明确说明假设。

---

质量检查清单

• 体现领域专属的 UX 模式
• 在结构中体现用户旅程阶段
• 将情感关键词转化为视觉规格
• 完成色彩系统定义（包括用途）
• 定义核心组件状态
• 明确说明微交互
• 考虑移动端响应式设计
• 实现提示词可直接复制粘贴