design-prompt-generator-v2

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Prompt Generator v2

设计提示词生成器 v2

AI 웹 개발 도구(Lovable, Cursor, Bolt)를 위한 7단계 계층적 디자인 프롬프트 생성기입니다.

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

7-Step Framework

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

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

Step 1: 领域调研

업종별 UX 패턴과 경쟁사를 분석합니다.

탐색 질문:

이 도메인의 Top 3 앱/사이트는?
사용자가 기대하는 UX 패턴은? (예: 데이팅앱의 스와이프, 배달앱의 카드)
중요한 신뢰 신호는? (리뷰, 뱃지, 보증)
경쟁사가 해결하지 못한 페인포인트는?

도메인별 패턴:

도메인	예상 패턴	신뢰 신호	핵심 액션
Pet Services	프로필 카드, 예약 캘린더, 펫 타입 필터	인증 뱃지, 리뷰, 보험	검색 → 조회 → 예약 → 결제
SaaS	기능 비교, 요금제, 데모 CTA	로고, 후기, 보안 뱃지	학습 → 체험 → 구독
E-commerce	그리드 갤러리, 필터, 장바구니	리뷰, 반품정책, 보안결제	탐색 → 담기 → 결제
Education	강의 카드, 진도 추적, 강사 프로필	인증서, 수강생 수, 평점	탐색 → 등록 → 학습
Healthcare	의료진 검색, 예약 슬롯, 증상 체커	면허, 병원 소속	찾기 → 예약 → 상담
Fintech	대시보드, 거래 내역, 빠른 액션	암호화 뱃지, 규제 준수	연결 → 모니터링 → 실행
Food Delivery	레스토랑 카드, 실시간 추적, 재주문	평점, 배달 시간 예측	탐색 → 주문 → 추적
Marketplace	판매자 프로필, 리스팅 그리드, 메시징	인증, 거래 내역	검색 → 연락 → 거래

分析各行业的UX模式与竞品情况。

探索问题：

该领域的Top 3应用/网站是哪些？
用户预期的UX模式是什么？（例如：约会应用的滑动、外卖应用的卡片式布局）
重要的信任信号有哪些？（评价、徽章、保障）
竞品未解决的痛点是什么？

分领域模式：

领域	预期模式	信任信号	核心动作
宠物服务	资料卡片、预约日历、宠物类型筛选	认证徽章、评价、保险	搜索 → 查看 → 预约 → 支付
SaaS	功能对比、定价方案、演示CTA	品牌标识、客户案例、安全徽章	了解 → 体验 → 订阅
电商	网格图库、筛选器、购物车	评价、退换货政策、安全支付	浏览 → 加入购物车 → 支付
教育	课程卡片、进度追踪、讲师资料	证书、学员数量、评分	浏览 → 报名 → 学习
医疗健康	医护人员搜索、预约时段、症状自查	执业资质、医院归属	查找 → 预约 → 咨询
金融科技	仪表盘、交易记录、快捷操作	加密徽章、合规认证	关联账户 → 监控 → 执行操作
外卖配送	餐厅卡片、实时追踪、再次下单	评分、配送时间预估	浏览 → 下单 → 追踪
交易平台	卖家资料、列表网格、消息功能	认证、交易记录	搜索 → 联系 → 交易

Step 2: User Journey

Step 2: 用户旅程

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

프레임워크:

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

각 단계별 정의:

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

梳理核心用户流程与转化节点。

框架：

[进入] → [发现] → [评估] → [决策] → [行动] → [留存]

各阶段定义：

旅程阶段: [阶段名称]
├── 用户目标: 想要达成的结果
├── 关键信息: 所需信息
├── 阻碍点: 导致流失的因素
└── 解决方案: 设计应对方案

Step 3: Emotional Design

Step 3: 情感设计

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

감정 키워드 매트릭스:

감정	시각적 표현	컬러 방향	타이포	이미지
Trust	깔끔, 정돈, 일관성	블루, 그린	안정적 세리프/클린 산스	실제 사진, 뱃지
Warmth	부드러운 모서리, 유기적 형태	웜 옐로우, 오렌지	둥글고 친근함	일러스트, 미소
Energy	강한 대비, 다이나믹 앵글	비비드 레드, 오렌지	강렬, 임팩트	액션샷, 모션
Calm	여백, 미니멀	소프트 블루, 그린, 뉴트럴	가벼운 웨이트	자연, 미니멀
Luxury	다크 배경, 골드 액센트	블랙, 골드, 딥 퍼플	우아한 세리프	하이엔드 포토
Playful	비대칭, 애니메이션	밝고 다양한 팔레트	퀴키, 커스텀	일러스트, 아이콘
Professional	그리드 기반, 구조적	네이비, 그레이, 화이트	클래식 산스세리프	기업적, 클린

감정 비율 정의 예시: 60% Trust, 30% Warmth, 10% Energy

定义设计想要传递的情感。

情感关键词矩阵：

情感	视觉表现	色彩方向	字体	图片
信任	简洁、规整、一致性	蓝色、绿色	稳重的衬线字体/简洁无衬线字体	实景照片、徽章
温暖	圆角、有机形态	暖黄、橙色	圆润亲和	插画、笑脸
活力	强烈对比、动态角度	鲜艳红、橙色	醒目、有冲击力	动作抓拍、动态效果
平静	留白、极简	柔和蓝、绿色、中性色	轻量级字重	自然景观、极简风格
奢华	深色背景、金色点缀	黑色、金色、深紫	优雅衬线字体	高端照片
趣味	不对称、动画	明亮多样配色	俏皮、定制化	插画、图标
专业	网格布局、结构化	藏青、灰色、白色	经典无衬线/衬线字体	商务风、简洁

情感比例定义示例： 60% 信任, 30% 温暖, 10% 活力

Step 4: Identity & Goal

Step 4: 品牌定位与目标

브랜드 포지셔닝을 명확히 정의합니다.

템플릿:

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

明确品牌定位。

模板：

服务名称: [名称]
一句话介绍: [10字以内说明]
分类: [领域类别]
定位: [与竞品的差异化点]
核心目标: [主要转化动作]
次要目标: [辅助动作]
品牌个性: [3个形容词]

Step 5: Design System

Step 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]

定义完整的视觉系统。

色彩系统：

主色:      #[十六进制码] - 用于CTA、核心操作
辅助色:    #[十六进制码] - 用于辅助元素
强调色:    #[十六进制码] - 用于高亮、徽章
背景色:    #[十六进制码] - 基础画布
表层色:    #[十六进制码] - 卡片、悬浮元素
主文本色:  #[十六进制码] - 标题、正文
次要文本色: #[十六进制码] - 说明文字、提示
成功色:    #[十六进制码] - 确认状态
警告色:    #[十六进制码] - 警告状态
错误色:    #[十六进制码] - 错误状态

排版：

标题: [字体] - [字重] - [特性]
正文: [字体] - [字重] - [行高]
字号比例: 基础[数值]px, 比例[数值]

间距与布局：

基础单位: [4/8]px
圆角: [尺寸]px
阴影: 柔和/中等/强烈
网格: [列数]列, 间距[数值]px
容器最大宽度: [数值]px

组件样式：

按钮: [形状], [内边距], [悬停效果]
卡片: [圆角], [阴影], [内边距]
输入框: [边框], [聚焦状态]

Step 6: Component Specs

Step 6: 组件规范

도메인별 핵심 컴포넌트를 정의합니다.

컴포넌트 템플릿:

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

공통 도메인 컴포넌트:

Profile/Card: 사용자 또는 아이템 표시
Search/Filter: 탐색 메커니즘
Booking/Action: 주요 전환
Review/Trust: 소셜 프루프
Status/Progress: 피드백 및 추적

定义各领域的核心组件。

组件模板：

[组件名称]
├── 用途: 存在的意义
├── 内容: 展示的信息
├── 状态: 默认、悬停、激活、禁用、加载中
├── 变体: 所需的版本
└── 响应式: 移动端适配方式

通用领域组件：

Profile/Card: 用户或物品展示
Search/Filter: 导航机制
Booking/Action: 主要转化操作
Review/Trust: 社交证明
Status/Progress: 反馈与追踪

Step 7: Micro-interactions

Step 7: 微交互

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

카테고리:

타입	목적	예시
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

定义动画与交互反馈。

分类：

类型	目的	示例
入场	吸引对新内容的关注	淡入、上滑、缩放进入
反馈	确认用户操作	按钮按压效果、成功对勾
状态变化	展示状态切换	加载 spinner、骨架屏
导航	引导页面间切换	页面过渡、侧边栏滑动
愉悦感	创造记忆点	彩屑效果、弹跳动画

规范格式：

触发条件: [触发事件]
动画效果: [动作]
时长: [时间 ms]
缓动曲线: [曲线类型]
目的: [作用]

推荐默认值：

微反馈: 150-200ms, ease-out
过渡效果: 250-350ms, ease-in-out
入场动画: 400-600ms, ease-out + stagger

Output Format

输出格式

최종 프롬프트 구조:

markdown

undefined

最终提示词结构：

markdown

undefined

[Service Name] Design Prompt

[服务名称] 设计提示词

Domain Context

领域背景

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

[行业洞察、用户预期、竞争环境]

User Journey

用户旅程

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

[各阶段流程与设计启示]

Emotional Direction

情感导向

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

[核心情感、视觉解读]

Design Specifications

设计规范

Identity

品牌定位

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

[名称、定位、个性]

Design System

设计系统

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

[色彩、排版、间距完整规范]

Key Components

核心组件

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

[领域专属组件定义]

Interactions

交互规范

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

[动画、微交互细节]

Implementation Prompt

实现提示词

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

[可直接复制粘贴到AI工具的提示词]

Iterative Refinement Prompts

迭代优化提示词

[단계별 개선 프롬프트]

---

[分阶段优化的提示词]

---

User Input

用户输入

필수:

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

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

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

必填项：

服务主题/行业
服务名称（若无则提供建议）

选填项（可获得更优结果）： 3. 目标用户 4. 竞品或参考服务 5. 期望氛围/情感 6. 必备功能 7. 页面类型（着陆页/应用UI/仪表盘）

若仅提供最小输入量，将使用领域默认值并明确标注假设条件。