TokenToSea提示词广场
English 控制台

生成 UI/UX 构建计划

编程开发·任务模板

在聊天中使用

为新的响应式 Web 应用生成开发计划，涵盖断点策略、性能、可访问性等要求。

你是一位拥有 10 年以上经验的资深全栈工程师兼 UX/UI 架构师，专注于构建生产级 Web 应用程序。你在响应式设计系统、现代 UI/UX 模式以及跨设备性能优化方面具有专长。

---

## 任务

为构建一个满足以下标准的响应式 Web 应用程序，生成一份**全面且可执行的开发计划**：

### 1. 响应性与跨设备兼容性
- 无缝适配：移动端（320px+）、平板端（768px+）、桌面端（1024px+）、大屏设备（1440px+）
- 定义清晰的**断点策略**并说明理由
- 明确采用**移动优先还是桌面优先**的方法，并提供依据
- 处理：触控目标、点击手势、悬停状态、键盘导航
- 解决：刘海屏、安全区域、动态视口单位（dvh/svh/lvh）
- 覆盖：字体缩放、图像优化（srcset、艺术方向）、流体排版

### 2. 性能与流畅度
- 目标：60fps 动画、<2.5s LCP、<100ms INP、<0.1 CLS（核心网页指标）
- 制定策略：懒加载、代码分割、资源优化
- 实现方法：CSS containment、will-change、GPU 合成动画
- 规划：离线支持或优雅降级方案

### 3. 现代且优雅的设计系统
- 定义**设计令牌架构**：颜色、间距、字体、层次、动效
- 明确：配色方案策略（支持亮/暗模式）、字体搭配逻辑
- 包含：间距比例、圆角哲学、阴影体系
- 覆盖：图标使用方式、插图/图像风格指导
- 详细说明：组件级别的视觉一致性规则

### 4. 现代 UX/UI 最佳实践
应用并规划以下 UX/UI 原则：
- **层级与可扫视性**：F/Z 型布局、视觉权重、留白策略
- **反馈与可操作性**：加载状态、骨架屏、微交互、错误状态
- **导航模式**：响应式导航（汉堡菜单、底部导航、侧边栏）、面包屑、路径指引
- **无障碍访问（至少符合 WCAG 2.1 AA）**：对比度、ARIA 角色、焦点管理、屏幕阅读器支持
- **表单与输入**：验证体验、内联错误提示、自动填充、按设备类型选择输入框类型
- **动效设计**：有明确目的的动画（缓动曲线、持续时间令牌）、支持减少动画
- **空状态与边界情况**：无数据、错误、超时、权限拒绝

### 5. 技术架构计划
- 推荐**技术栈**并说明理由（框架、CSS 方案、状态管理）
- 定义：组件架构（原子设计或其他）、目录结构
- 明确：主题系统实现方式、CSS 策略（模块化、工具类优先、CSS-in-JS）
- 包括：响应式测试策略（工具、需测试的断点、设备）

---

## 输出格式

将你的计划按以下章节组织：

1. **执行摘要** – 一段话概述整体方法
2. **响应式策略** – 断点设置、布局系统、流体缩放方案
3. **性能蓝图** – 目标值、技术手段、工具链
4. **设计系统规范** – 设计令牌、配色、排版、组件
5. **UX/UI 模式库计划** – 关键模式、交互设计、无障碍检查清单
6. **技术架构** – 技术栈、项目结构、实施顺序
7. **分阶段上线计划** – 优先级里程碑（MVP → 精修 → 优化）
8. **质量检查清单** – 上线前在所有设备和标准下的验证项

---

## 约束与风格要求

- 必须**具体且可执行**——避免模糊建议
- 在适用处提供**具体数值**（例如：“8px 基础间距比例”、“模态框使用 400ms ease-out 缓动”）
- 标注**常见陷阱**及其规避方式
- 当存在多种方案时，**推荐一种并说明理由**，而非罗列所有选项
- 假设目标是 **[INSERT APP TYPE: e.g., SaaS dashboard / e-commerce / portfolio / social app]**
- 目标用户为 **[INSERT: e.g., non-technical consumers / enterprise professionals / mobile-first users]** 

---

从“执行摘要”开始，然后逐节推进。

相关推荐

更多