设计提示生成器 v2（Design Prompt Generator v2）
面向 AI 网页开发工具（Lovable、Cursor、Bolt）的 7 步分层设计提示（Prompt）生成器。
7 步框架
步骤 1：领域研究 -> 行业 UX 模式、竞品洞察
步骤 2：用户旅程 -> 核心用户流程、转化触点
步骤 3：情感设计 -> 情感关键词、氛围概念
步骤 4：身份与目标 -> 品牌定位、目标
步骤 5：设计系统 -> 色彩、排版、组件
步骤 6：组件规格 -> 核心组件详细定义
步骤 7：微交互 -> 动画、交互模式
---|----------|----------|----------| | 宠物服务 | 资料卡片、预约日历、宠物类型筛选 | 认证徽章、评价、保险 | 搜索 -> 查看 -> 预约 -> 付款 | | SaaS | 功能对比、定价方案、演示 CTA | Logo、推荐语、安全徽章 | 了解 -> 体验 -> 订阅 | | 电商 | 网格画廊、筛选器、购物车 | 评价、退货政策、安全支付 | 浏览 -> 加入购物车 -> 结账 | | 教育 | 课程卡片、进度追踪、讲师资料 | 证书、学员数、评分 | 浏览 -> 注册 -> 学习 | | 医疗 | 医生搜索、预约时段、症状检查 | 执照、医院归属 | 查找 -> 预约 -> 咨询 | | 金融科技 | 仪表盘、交易记录、快捷操作 | 加密徽章、合规标识 | 连接 -> 监控 -> 执行 | | 外卖 | 餐厅卡片、实时追踪、重新下单 | 评分、预估送达时间 | 浏览 -> 下单 -> 追踪 | | 交易市场 | 卖家资料、商品列表、即时通讯 | 认证、交易记录 | 搜索 -> 联系 -> 交易 |
步骤 2：用户旅程
映射核心用户流程和转化触点。
框架：
[进入] -> [发现] -> [评估] -> [决策] -> [行动] -> [留存]
每阶段定义：
旅程阶段：[阶段名]
├── 用户目标：想要达成的事情
├── 关键信息：需要的信息
├── 摩擦点：流失原因
└── 解决方案：设计解决方案
步骤 3：情感设计
定义设计要唤起的情感。
情感关键词矩阵：
| 情感 | 视觉表现 | 色彩方向 | 排版 | 图片 |
|---|---|---|---|---|
| 信任 | 干净、有序、一致性 | 蓝、绿 | 稳重衬线/干净无衬线 | 真实照片、徽章 |
| 温暖 | 柔和圆角、有机形态 | 暖黄、橙 | 圆润亲切 | 插画、微笑 |
| 活力 | 强对比、动态角度 | 鲜艳红、橙 | 强烈、有冲击力 | 动态照片、动效 |
| 平静 | 留白、极简 | 柔和蓝绿、中性色 | 轻字重 | 自然、极简 |
| 奢华 | 深色背景、金色点缀 | 黑、金、深紫 | 优雅衬线 | 高端摄影 |
| 趣味 | 不对称、动画 | 明亮多彩色板 | 古灵精怪、定制 | 插画、图标 |
| 专业 | 网格基础、结构化 | 海军蓝、灰、白 | 经典无衬线 | 企业风、干净 |
情感比例定义示例： 60% 信任、30% 温暖、10% 活力
步骤 4：身份与目标
明确品牌定位。
模板：
服务名称：[名称]
一句话描述：[10 字以内]
类别：[领域类别]
差异化定位：[与竞品的区别]
主要目标：[核心转化动作]
次要目标：[辅助动作]
品牌个性：[3 个形容词]
步骤 5：设计系统
定义综合视觉系统。
色彩系统：
主色： #[hex] - CTA、核心动作
辅色： #[hex] - 辅助元素
强调色： #[hex] - 高亮、徽章
背景色： #[hex] - 基础画布
表面色： #[hex] - 卡片、浮起元素
主文字色： #[hex] - 标题、正文
弱文字色： #[hex] - 说明、提示
成功色： #[hex] - 确认
警告色： #[hex] - 警告
错误色： #[hex] - 错误
排版：
标题：[字体] - [字重] - [特性]
正文：[字体] - [字重] - [行高]
比例：[base]px，比率 [ratio]
间距与布局：
基础单位：[4/8]px
圆角：[size]px
阴影：subtle/medium/strong
网格：[columns]列，[gap]px 间距
容器：最大宽度 [width]px
组件样式：
按钮：[形状]、[内边距]、[悬停效果]
卡片：[圆角]、[阴影]、[内边距]
输入框：[边框]、[聚焦状态]
步骤 6：组件规格
定义各领域核心组件。
组件模板：
[组件名称]
├── 用途：存在的理由
├── 内容：显示的信息
├── 状态：Default、Hover、Active、Disabled、Loading
├── 变体：需要的版本
└── 响应式：移动端适配方式
通用领域组件：
- 资料/卡片：用户或项目展示
- 搜索/筛选：探索机制
- 预约/动作：核心转化
- 评价/信任：社会证明
- 状态/进度：反馈和追踪
步骤 7：微交互
定义动画和交互反馈。
类别：
| 类型 | 目的 | 示例 |
|---|---|---|
| 入场（Entrance） | 引起对新内容的注意 | 渐入、上滑、缩放进入 |
| 反馈（Feedback） | 确认用户动作 | 按钮按下、成功对勾 |
| 状态变化（State Change） | 表示转换 | 加载旋转、骨架屏 |
| 导航（Navigation） | 视图间引导 | 页面过渡、抽屉滑出 |
| 愉悦（Delight） | 创造记忆时刻 | 彩纸、弹跳效果 |
规格格式：
触发器：[触发条件]
动画：[动作]
持续时间：[时间 ms]
缓动：[缓动曲线]
目的：[目的]
推荐默认值：
- 微反馈：150-200ms，ease-out
- 过渡：250-350ms，ease-in-out
- 入场：400-600ms，ease-out + 错位
输出格式
最终提示结构：
# [服务名称] 设计提示
## 领域上下文
[行业洞察、用户期望、竞争环境]
## 用户旅程
[分阶段流程和设计启示]
## 情感方向
[主要情感、视觉解读]
## 设计规格
### 身份
[名称、定位、个性]
### 设计系统
[色彩、排版、间距完整规格]
### 核心组件
[领域特化组件定义]
### 交互
[动画、微交互规格]
## 实施提示
[供 AI 工具复制粘贴的提示词]
## 迭代优化提示
[分步改进提示词]
用户输入
必需：
- 服务主题/行业
- 服务名称（没有则建议）
可选（效果更好）： 3. 目标用户 4. 竞品或参考服务 5. 期望的氛围/情感 6. 必需功能 7. 页面类型（落地页/应用UI/仪表盘）
最少输入时使用领域默认值，并明确标注假设。
质量检查清单
- 反映了领域特化 UX 模式
- 用户旅程阶段体现在结构中
- 情感关键词已转化为视觉规格
- 色彩系统完整（含用途说明）
- 核心组件状态已定义
- 微交互已明确
- 已考虑移动端响应式
- 实施提示可直接复制粘贴