做独特且无障碍的 UI/UX 设计时，如何避免通用 AI…

在构建网页组件、页面或应用时，提供从配色、字体、布局到动效、交互与无障碍的系统化 UI/UX 设计指导

适用场景

解决思路

1. 任何设计决策（颜色、字体、尺寸、布局）之前必须先询问用户，未获明确指示前不要实施设计变更；向用户呈现 2-3 个备选方案及各自取舍，而不是单一"正确"答案
2. 避免通用训练数据集风格：不要默认"Claude 风格"（过度包豪斯、液态玻璃、苹果式），不要用机器生成的通用 SaaS 美学，不要只用纯色，应引入摄影、图案、纹理
3. 从现代落地页（Perplexity、Comet Browser、Dia Browser）、Framer 模板、领先品牌设计工作室、历史设计运动（Bauhaus、Otl Aicher、Braun，作为灵感而非模仿）以及缓慢循环的微妙背景动画（CSS、SVG）中汲取灵感
4. 用独特配色对、新鲜动画效果、增加深度但不分散注意力的背景图案、制造对比的字体组合、能讲故事的视觉素材来制造视觉趣味
5. 遵循六大设计哲学：通过削减实现简洁（从复杂开始，刻意删减到最简有效方案，每个元素都必须证明其存在价值）；材质诚实（按钮用颜色/间距/字体传达可点击性而非阴影，卡片用边框和背景区分而非深度效果）；功能性分层而非视觉深度（用字体层级、颜色对比、空间关系建立层次，拒绝拟物阴影/渐变）；对细节偏执（每个像素、交互、过渡都经过考量，细节与清晰冲突时清晰优先）；一致的设计语言（每个元素视觉上传达其功能，不显任意）；技术的隐形（用户专注于内容和目标而非理解界面）
6. 配色系统：基础/中性色板 4-5 色（背景最浅、表面色、边框分隔线、文字最深，使用略微去饱和的暖灰或冷灰），强调色板 1-3 色（主 CTA、状态指示、焦点/悬停态，使用饱和色与中性色形成清晰对比）；示例：中性 slate-50/100/300/700/900，强调 teal-500/amber-500/red-500
7. 颜色应用规则：背景用最浅中性色，主文字用最深中性色、次要文字用中间色，主按钮用强调色配白字，次按钮用中性色配边框和深色文字，状态指示用特定强调色（绿=成功、红=错误、琥珀=警告、蓝=信息）；悬停加深 10-15% 或轻微偏移色相，焦点用强调色 ring/outline，禁用降低不透明度至 40-50% 并移除悬停效果
8. 根据品牌意图刻意选择暖灰（米色/棕色底调：有机、亲和、可信）或冷灰（蓝色底调：现代、科技、专业）；每个颜色必须服务于目的（层次、功能、状态或动作），避免无意义的装饰色，同一颜色在全站保持同一含义
9. 无障碍配色：为色盲用户确保足够对比度，遵循 WCAG 2.1 AA（正文最小 4.5:1，大号文字 3:1），不要仅靠颜色传达信息（添加图标或标签）
10. 独特配色策略：除非符合品牌否则避免默认 SaaS 蓝 #3B82F6，考虑意外中性色（暖灰、柔和米白、深炭灰），搭配独特强调色（赤陶+炭灰、鼠尾草绿+藏青、珊瑚+石板灰），用"这看起来像 AI 生成的吗？"过滤测试
11. 字体选择：最多 2-3 个字型，每个字型限 3 个字重（如 Regular 400、Medium 500、Bold 700），优先可变字体；标题/展示字体优先情感和个性（可读性次要），正文优先可读性和阅读舒适度，UI/标签优先清晰和一致；展示版仅用于标题和主视觉文字，文本版用于段落和长文，Caption/Micro 用于小号 UI 标签
12. 字体来源：Web 用 Google Fonts（免费、优化好、可靠），性能关键应用用系统字体（-apple-system、BlinkMacSystemFont、Segoe UI），选择服务品牌目的的字型而非"流行"榜单
13. 排版比例：用数学关系建立尺寸层级，比例用大三度（1.25x）制造中等对比或纯四度（1.333x）制造戏剧性；正文基准 16px（1rem）；示例 1.25x 比例：xs 0.64rem/10px、sm 0.8rem/13px、base 1rem/16px、lg 1.25rem/20px、xl 1.563rem/25px、2xl 1.953rem/31px、3xl 2.441rem/39px、4xl 3.052rem/49px、5xl 3.815rem/61px
14. 排版可读性：正文行高 1.5 倍字号（16px 文字=24px 行高），行宽 45-75 字符（60-70 最佳），段落间距 1-1.5em；字距：大号文字（标题）收紧 -0.02em 到 -0.05em，正文默认 0，小号文字（Caption）放宽 +0.01em 到 +0.03em，通用规则是字号增大则收紧字距、字号减小则放宽字距
15. 字体配对逻辑：通过类别对比（衬线+无衬线）、字重对比（细+粗）、个性对比（几何+人文）制造对比；示例：衬线标题+无衬线正文（编辑感、可信）、展示标题+系统正文（独特+高效）、粗体无衬线标题+细体无衬线正文（现代、干净）
16. UI 排版：按钮文字 Semi-Bold 600、14-16px、统一大小写（全大写或标题式）；表单标签 Regular 400、14px、置于输入框上方；表单输入文字 Regular 400、最小 16px（防止 iOS 聚焦缩放）；占位符文字 Light 300 或去饱和色、与输入同尺寸；错误信息 Regular 400、12-14px、红色系
17. 响应式排版：跨断点缩放字号（如 Tailwind 的 text-3xl md:text-4xl lg:text-5xl，或 CSS clamp(2rem, 5vw, 4rem)），移动端字号比桌面小 20-30%，小屏减少层级数
18. 布局：每个屏幕都应视觉平衡，关注视觉重量和负空间，用充足负空间聚焦注意力，添加足够边距和内边距营造专业宽敞感；保持一致的底层网格系统，用 grid/flex 包裹容器加 gap 控制间距，优先用包裹容器而非直接在子元素上加 margin/padding
19. 通过邻近性、对齐和共享属性分组相关元素，用尺寸、颜色和间距突出重要元素，引导用户注意力，避免元素互相竞争造成杂乱界面
20. 动效必须有功能目的：定位用户（导航变化时的平滑过渡）、建立关系（元素如何连接，从源展开、状态间滑动）、提供反馈（确认交互，按钮按下、表单提交）、引导注意力（新消息、错误）；用格式塔原则强化视觉关系（邻近元素一起动、相似元素动效一致、运动沿自然路径、重要元素动而背景稳定）
21. 自然物理：入场用 ease-out（快起慢停），退场用 ease-in（慢起快停），过渡用 ease-in-out（两端平滑），避免线性缓动（除连续循环外感觉机械），应用合适的质量/动量（轻量 UI vs 重量级模态）
22. 动效克制：动效应被感受而非被看到，交互反馈保持 300ms 以内，绝不用装饰性动画阻塞关键操作，尊重 prefers-reduced-motion 媒体查询
23. 时长指南：微交互（按钮按下、复选框切换）100-150ms，状态变化（手风琴展开、标签切换）200-300ms，页面过渡（路由变化、模态开关）300-500ms，注意力引导（通知出现、错误高亮）200-400ms；物理配置：轻量（图标、小 UI）150ms，标准（卡片、面板）300ms，重量级（模态、页面过渡）500ms
24. 性能优化：只动画 transform 和 opacity（GPU 加速、流畅 60fps），避免动画 width/height/top/left/margin（引起重排重绘），谨慎使用 will-change 为复杂动画预分配 GPU 资源，在低端设备上测试；优先 CSS 动画而非 JavaScript，简单悬停/焦点态用 CSS 过渡，实现 @media (prefers-reduced-motion: reduce) 禁用/减少动画
25. UX 核心原则：直接操作（用户直接与内容交互而非抽象控件：拖放排序而非上下按钮、内联编辑而非独立表单、滑块而非数字输入、移动端捏合缩放而非 +/- 按钮）；即时反馈（每次交互 100ms 内提供视觉反馈，类型包括视觉、触觉、音频、加载骨架屏/旋转器用于 >300ms 操作、成功勾选/绿色高亮/toast、错误红色高亮/内联错误/抖动动画）；一致行为（相似元素行为相似：所有主按钮同色同尺寸同悬停态、所有模态都可通过 X 按钮/ESC 键/点击外部关闭、所有拖放目标同悬停态和放置反馈、所有表单在失焦和提交时验证）；宽容性（让错误难以发生但易于恢复：禁用无效操作、内联验证、确认破坏性操作、后台自动保存；撤销/重做、软删除、清晰可操作的错误信息、错误时保留用户输入）；渐进披露（默认显示摘要，展开显示详情，高级选项藏在"高级设置"后；手风琴默认折叠、搜索过滤器显示 3-5 个常用其余藏在"更多过滤器"后）
26. 现代 UX 模式：对话式界面（纯聊天、命令面板 Cmd+K、智能搜索、表单替代；适用于多变量复杂搜索、任务引导、上下文帮助、快捷操作；不适用于简单表单、精确控制界面、高频重复任务）；自适应布局（基于时间自动深色/浅色模式、基于设备简化移动端 UI、基于连接降低图片视频质量、基于使用频率优先常用操作）；极简扁平设计（无投影、无渐变制造深度、无玻璃拟态，用字体/颜色/间距建立层次，功能性深度用定位而非视觉深度）
27. 导航：清晰结构和直观菜单，超过 2 层用面包屑，用标准 UI 模式降低学习曲线（汉堡菜单、标签栏），确保可预测行为（后退按钮有效、链接看起来可点击），保持导航上下文（高亮当前页、保留滚动位置）
28. 组件库：强烈优先使用 shadcn 组件（v4，预装在 @/components/ui），单独导入如 import { Button } from "@/components/ui/button"，优先用组件而非原生 HTML 元素，避免创建与 shadcn 命名冲突的自定义组件
29. 样式引擎：独占使用 Tailwind 工具类，通过 CSS 自定义属性遵循 index.css 中的主题变量，在 @theme 中映射变量（见 tailwind.config.js），仅在绝对必要时用内联样式或 CSS 模块
30. 图标用 @phosphor-icons/react（如 import { Plus } from "@phosphor-icons/react"; <Plus />），纯图标按钮用颜色区分，除非要求否则不覆盖默认 size 或 weight；通知用 sonner（import { toast } from 'sonner'）；始终添加加载状态、旋转器、占位动画，内容渲染前用骨架屏
31. 条件样式用三元运算符或 clsx/classnames 工具（如 className={clsx('base-class', { 'active-class': isActive })}）
32. 响应式：用相对单位（%、em、rem）而非固定像素，用 CSS Grid 和 Flexbox 实现灵活布局，移动优先再向上扩展；媒体查询基于内容需求而非特定设备，跨设备范围和方向测试；触摸目标最小 44x44 像素，提供足够间距，桌面考虑悬停态、触摸/键盘考虑焦点态；优化移动网络资源，用 CSS 动画而非 JavaScript，图片视频懒加载
33. 无障碍：遵循 WCAG 2.1 AA，所有交互元素可键盘导航，最小触摸目标 44×44px，用语义 HTML 兼容屏幕阅读器，为图片和非文字内容提供替代文本；事件函数以 "handle" 前缀命名（handleClick、handleKeyDown），为自定义交互元素加 tabindex="0"，为无文字按钮加 aria-label，语义 HTML 不足时加 role 属性，确保逻辑 Tab 顺序，提供可见焦点态
34. 设计工作流：理解上下文（解决什么问题、用户是谁何时使用、成功标准是什么）；探索选项（呈现 2-3 个备选方案、解释各自取舍、询问哪个方向引起共鸣）；迭代实施（从结构和层次开始、逐步添加视觉打磨、每个阶段测试）；验证（用 playwright MCP 测试视觉变化、检查不同屏幕尺寸、验证无障碍）
35. 测试清单：视觉测试用 playwright MCP 自动化测试、检查常见断点的响应式行为、验证移动端触摸目标、用不同内容长度（短、长、边界情况）测试；无障碍测试键盘导航、屏幕阅读器兼容性、颜色对比度、焦点态可见性；跨设备测试用真实设备而非仅模拟器、检查不同浏览器（Chrome、Firefox、Safari）、验证移动端触摸交互、测试横竖屏方向
36. 避免：无考虑就用通用 SaaS 蓝 #3B82F6、默认用阴影和渐变制造深度、复制苹果设计语言、用玻璃拟态效果、不询问就做设计决策、不考虑字体版本就实施排版、用延迟用户操作的动画、创建元素竞争的杂乱界面
37. 应该：做设计决策前先询问、建议独特且符合上下文的配色对、用扁平极简设计、考虑非传统字体选择、为交互提供即时反馈、创造充足留白、用真实设备测试、验证无障碍

适用边界 · 注意事项

• 简单表单或精确控制界面（设计工具、仪表盘）或高频重复任务时，不要用对话式界面
• 不要用装饰性动画阻塞关键操作或延迟用户交互
• 不要仅靠颜色传达信息，也不要使用无意义的装饰色