UI 设计提示词大全：从界面设计到设计系统

概述

本文精选 20+ 个 UI 设计场景的优质提示词，帮助设计师和开发者快速完成界面设计工作。

---

1. 界面设计

1.1 首页设计

请为 [产品名称] 设计首页：

产品定位：[描述]
目标用户：[描述]
核心功能：[功能列表]

请输出：
1. 信息架构
2. 核心区域划分
3. 首屏内容建议
4. 用户流程引导
5. 设计风格建议

1.2 列表页面设计

请设计 [类型] 列表页面：

列表内容：[内容类型]
用户目标：[目标]
过滤/排序需求：[需求]

请包含：
1. 页面结构
2. 列表项设计
3. 筛选/排序区域
4. 空状态设计
5. 加载状态

1.3 表单页面设计

请设计 [类型] 表单页面：

表单字段：
- 字段1：[类型][验证规则]
- 字段2：[类型][验证规则]
- ...

请输出：
1. 字段排列顺序
2. 字段排版布局
3. 验证规则说明
4. 错误提示设计
5. 提交按钮设计

1.4 详情页面设计

请设计 [内容类型] 详情页面：

内容信息：[信息列表]
用户操作需求：[操作]

请包含：
1. 信息层级结构
2. 内容排版布局
3. 相关推荐区域
4. 评论区设计（如果适用）
5. 移动端适配要点

---

2. 组件设计

2.1 按钮设计

请设计 [类型] 按钮：

使用场景：
- 主要操作
- 次要操作
- 危险操作

请输出：
1. 颜色规范
2. 尺寸规格
3. 状态样式（默认/悬停/按下/禁用）
4. 图标使用建议
5. 文案规范

2.2 卡片组件设计

请设计 [内容类型] 卡片组件：

包含内容：
- 标题
- 描述
- 图片
- 操作按钮

请输出：
1. 尺寸规格
2. 内边距规范
3. 圆角/阴影
4. 悬停效果
5. 响应式行为

2.3 导航组件设计

请设计 [类型] 导航：

导航内容：
- 项目1
- 项目2
- 项目3

请输出：
1. 导航结构
2. 激活状态设计
3. 移动端响应方案
4. 面包屑设计（如果适用）
5. 搜索入口设计

2.4 弹窗/对话框设计

请设计 [类型] 弹窗：

功能目的：[描述]
包含内容：[内容]

请输出：
1. 尺寸规格
2. 头部设计
3. 内容区域布局
4. 底部按钮设计
5. 关闭方式（ESC/点击遮罩/关闭按钮）
6. 动画效果建议

---

3. 设计系统

3.1 色彩系统

请帮我建立 [产品] 的色彩系统：

品牌色：[颜色]
产品类型：[类型]

请输出：
1. 主色板（5个色阶）
2. 功能色（成功/警告/错误/信息）
3. 中性色板（灰度）
4. 使用场景规范
5. 色彩对比度检查

3.2 字体系统

请帮我建立 [产品] 的字体系统：

产品类型：[类型]
目标平台：[平台]

请输出：
1. 字体家族选择
2. 字号层级（至少5级）
3. 行高规范
4. 字重规范
5. 移动端适配

3.3 间距系统

请帮我建立间距系统：

设计工具：[工具]
基础网格：[数值]px

请输出：
1. 间距数值序列（4/8/16/24/32/48/64）
2. 组件内间距规范
3. 组件间距规范
4. 页面边距规范
5. 响应式调整建议

3.4 组件库设计

请帮我设计 [类型] 组件库：

包含组件：
- 按钮
- 输入框
- 选择器
- 表格
- ...

请输出：
1. 组件命名规范
2. 基础样式规范
3. 状态定义
4. 变体设计
5. 使用示例

---

4. 响应式设计

4.1 断点设计

请为 [产品] 设计响应式断点：

支持的设备：
- 桌面端
- 平板
- 手机

请输出：
1. 断点数值
2. 各断点布局策略
3. 栅格系统设计
4. 字体缩放方案
5. 图片响应式方案

4.2 移动端适配

请设计 [页面/组件] 的移动端适配：

桌面端设计：[描述]
移动端特殊需求：[需求]

请输出：
1. 布局调整方案
2. 手势交互设计
3. 输入方式适配
4. 性能优化建议
5. 与桌面端的一致性策略

---

5. 交互设计

5.1 交互动效设计

请为 [组件/页面] 设计交互动效：

交互类型：
- 悬停
- 点击
- 页面切换
- 数据更新

请输出：
1. 动画类型建议
2. 时长规范
3. 缓动函数建议
4. 性能注意事项
5. 实现代码示例（CSS/JS）

5.2 加载状态设计

请设计 [类型] 的加载状态：

场景：[场景描述]

请输出：
1. 骨架屏设计
2. 加载指示器设计
3. 加载文案建议
4. 渐进式加载方案
5. 错误状态设计

5.3 空状态设计

请设计 [类型] 空状态：

业务场景：[描述]
用户目标：[目标]

请输出：
1. 空状态插图建议
2. 引导文案设计
3. 操作入口设计
4. 情感化设计
5. 后续引导建议

5.4 错误状态设计

请设计 [类型] 错误状态：

错误类型：
- 网络错误
- 权限错误
- 业务错误
- 验证错误

请输出：
1. 错误提示样式
2. 错误文案规范
3. 错误处理流程
4. 重试机制设计
5. 用户引导方案

---

6. 特定场景

6.1 仪表盘设计

请设计 [类型] 仪表盘：

核心指标：
- 指标1
- 指标2
- 指标3

用户角色：[角色]

请输出：
1. 指标卡片设计
2. 图表类型选择
3. 布局分区
4. 数据刷新策略
5. 权限控制视觉

6.2 个人中心设计

请设计 [类型] 个人中心：

包含模块：
- 个人信息
- 账户设置
- 订单/记录
- 帮助与反馈

请输出：
1. 信息层级
2. 入口设计
3. 设置项分类
4. 账户安全设计
5. 移动端适配

6.3 登录/注册流程

请设计 [类型] 登录/注册流程：

支持的登录方式：
- 账号密码
- 手机号
- 第三方登录

请输出：
1. 流程设计
2. 页面设计
3. 验证规则
4. 安全性设计
5. 找回密码流程

6.4 搜索功能设计

请设计 [类型] 搜索功能：

搜索内容：[内容]
筛选需求：[需求]

请输出：
1. 搜索入口设计
2. 搜索建议
3. 搜索结果展示
4. 筛选/排序设计
5. 空结果处理

---

7. 设计评审

7.1 设计评审检查

请对 [设计稿] 进行设计评审：

设计稿链接：[链接]
评审维度：
- 一致性
- 可用性
- 视觉层次
- 响应式
- 性能

请输出：
1. 问题列表（按严重程度）
2. 改进建议
3. 优点总结

7.2 设计交接规范

请生成设计交接清单：

项目名称：[名称]
设计范围：[范围]

请输出：
1. 设计文件列表
2. 标注规范
3. 切图规范
4. 交互说明
5. 注意事项

---

8. 总结

场景	提示词数量
界面设计	4
组件设计	4
设计系统	4
响应式设计	2
交互设计	4
特定场景	4
设计评审	2
总计	24

建议收藏本文，根据实际场景修改方括号内的内容即可使用。