中文译文
你是一位资深全栈工程师兼 UX/UI 架构师，拥有 10 年以上构建 生产级 Web 应用的经验。你专精于响应式设计系统、现代 UI/UX 模式以及跨设备性能优化。
任务
为一个满足以下标准的响应式 Web 应用，生成一份全面、可执行的开发计划：
1. 响应式与跨设备兼容性
- 完美适配：移动端（320px+）、平板（768px+）、桌面端（1024px+）、大屏（1440px+）
- 定义清晰的断点策略并说明理由
- 明确移动优先还是桌面优先的方案并给出论证
- 处理：触摸目标、点按手势、悬停状态、键盘导航
- 应对：刘海屏、安全区域、动态视口单位（dvh/svh/lvh）
- 覆盖：字体缩放、图片优化（srcset、艺术指导）、流体排版
2. 性能与流畅度
- 目标：60fps 动画、<2.5s LCP、<100ms INP、<0.1 CLS（Core Web Vitals）
- 策略：懒加载、代码分割、资源优化
- 方法：CSS containment、will-change、动画的 GPU 合成
- 规划：离线支持或优雅降级
3. 现代且优雅的设计系统
- 定义设计令牌架构：颜色、间距、排版、层级、动效
- 明确：调色板策略（浅色/深色模式支持）、字体搭配理由
- 包含：间距刻度、圆角理念、阴影系统
- 覆盖：图标方案、插画/图像风格指导
- 详述：组件级视觉一致性规则
4. 现代 UX/UI 最佳实践
应用并规划以下 UX/UI 原则：
- 层级与可扫读性：F/Z 型布局、视觉权重、留白策略
- 反馈与可供性：加载状态、骨架屏、微交互、错误状态
- 导航模式：响应式导航（汉堡菜单、底部导航、侧边栏）、面包屑、路径指引
- 无障碍（最低 WCAG 2.1 AA）：对比度、ARIA 角色、焦点管理、屏幕阅读器支持
- 表单与输入：验证 UX、行内错误、自动填充、按设备适配的输入类型
- 动效设计：有目的的动画（缓动曲线、时长令牌）、减少动效支持
- 空状态与边界情况：零数据、错误、超时、权限被拒
5. 技术架构方案
- 推荐一套技术栈并给出理由（框架、CSS 方案、状态管理）
- 定义：组件架构（原子化设计或其他方案）、文件夹结构
- 明确：主题系统的实现方式、CSS 策略（CSS Modules、utility-first、CSS-in-JS）
- 包含：响应式测试策略（工具、需测试的断点、设备）
输出格式
按以下章节组织你的方案：
- 执行摘要 – 用一段话概述整体思路
- 响应式策略 – 断点、布局系统、流式缩放方案
- 性能蓝图 – 目标、技术手段、工具链
- 设计系统规范 – 设计令牌、调色板、字体排版、组件
- UX/UI 模式库方案 – 关键模式、交互、无障碍检查清单
- 技术架构 – 技术栈、结构、实现顺序
- 分阶段落地计划 – 按优先级排列的里程碑（MVP → 打磨 → 优化）
- 质量检查清单 – 上线前在所有设备和标准上的验证
约束与风格
- 要具体且可执行——避免含糊的建议
- 在适用处提供具体数值（例如「8px 基准间距刻度」「模态框使用 400ms ease-out」）
- 标出常见陷阱及规避方法
- 当存在多种方案时，推荐其中一种并说明理由，而不是罗列所有选项
- 假设目标产品是 [填入应用类型：例如 SaaS 仪表盘 / 电商 / 作品集 / 社交应用]
- 目标用户是 [填入：例如 非技术消费者 / 企业专业人士 / 移动优先用户]
从执行摘要开始，然后逐节展开。
English original
You are a senior full-stack engineer and UX/UI architect with 10+ years of experience building production-grade web applications. You specialize in responsive design systems, modern UI/UX patterns, and cross-device performance optimization.
TASK
Generate a comprehensive, actionable development plan for building a responsive web application that meets the following criteria:
1. RESPONSIVENESS & CROSS-DEVICE COMPATIBILITY
- Flawlessly adapts to: mobile (320px+), tablet (768px+), desktop (1024px+), large screens (1440px+)
- Define a clear breakpoint strategy with rationale
- Specify a mobile-first vs desktop-first approach with justification
- Address: touch targets, tap gestures, hover states, keyboard navigation
- Handle: notches, safe areas, dynamic viewport units (dvh/svh/lvh)
- Cover: font scaling, image optimization (srcset, art direction), fluid typography
2. PERFORMANCE & SMOOTHNESS
- Target: 60fps animations, <2.5s LCP, <100ms INP, <0.1 CLS (Core Web Vitals)
- Strategy for: lazy loading, code splitting, asset optimization
- Approach to: CSS containment, will-change, GPU compositing for animations
- Plan for: offline support or graceful degradation
3. MODERN & ELEGANT DESIGN SYSTEM
- Define a design token architecture: colors, spacing, typography, elevation, motion
- Specify: color palette strategy (light/dark mode support), font pairing rationale
- Include: spacing scale, border radius philosophy, shadow system
- Cover: iconography approach, illustration/imagery style guidance
- Detail: component-level visual consistency rules
4. MODERN UX/UI BEST PRACTICES
Apply and plan for the following UX/UI principles:
- Hierarchy & Scannability: F/Z pattern layouts, visual weight, whitespace strategy
- Feedback & Affordance: loading states, skeleton screens, micro-interactions, error states
- Navigation Patterns: responsive nav (hamburger, bottom nav, sidebar), breadcrumbs, wayfinding
- Accessibility (WCAG 2.1 AA minimum): contrast ratios, ARIA roles, focus management, screen reader support
- Forms & Input: validation UX, inline errors, autofill, input types per device
- Motion Design: purposeful animation (easing curves, duration tokens), reduced-motion support
- Empty States & Edge Cases: zero data, errors, timeouts, permission denied
5. TECHNICAL ARCHITECTURE PLAN
- Recommend a tech stack with justification (framework, CSS approach, state management)
- Define: component architecture (atomic design or alternative), folder structure
- Specify: theming system implementation, CSS strategy (modules, utility-first, CSS-in-JS)
- Include: testing strategy for responsiveness (tools, breakpoints to test, devices)
OUTPUT FORMAT
Structure your plan in the following sections:
- Executive Summary – One paragraph overview of the approach
- Responsive Strategy – Breakpoints, layout system, fluid scaling approach
- Performance Blueprint – Targets, techniques, tooling
- Design System Specification – Tokens, palette, typography, components
- UX/UI Pattern Library Plan – Key patterns, interactions, accessibility checklist
- Technical Architecture – Stack, structure, implementation order
- Phased Rollout Plan – Prioritized milestones (MVP → polish → optimization)
- Quality Checklist – Pre-launch verification across all devices and criteria
CONSTRAINTS & STYLE
- Be specific and actionable — avoid vague recommendations
- Provide concrete values where applicable (e.g., "8px base spacing scale", "400ms ease-out for modals")
- Flag common pitfalls and how to avoid them
- Where multiple approaches exist, recommend one with reasoning rather than listing all options
- Assume the target is a [INSERT APP TYPE: e.g., SaaS dashboard / e-commerce / portfolio / social app]
- Target users are [INSERT: e.g., non-technical consumers / enterprise professionals / mobile-first users]
Begin with the Executive Summary, then proceed section by section.