当你需要稳定的输出格式时，请使用 references/review-template.md。

不可妥协项（硬性规则）

• 禁止 使用表情符号作为图标（或作为 UI 装饰）。如果出现表情符号，请用合适的图标替换。
• 图标必须直观且精致。产品应使用一套统一的图标集（避免混合多种风格）。
• 默认情况下最小化文案。仅当解释性文本能防止错误、减少歧义或增加信任时才添加。

系统级指导原则

在选择组件或页面模式之前，首先应用这些一级约束。完整定义和审查问题请见：references/system-principles.md。

关键原则：概念恒定性 · 主要任务聚焦 · UI 文案来源规范 · 状态可感知性 · 帮助文本分层（L0–L3）· 反馈闭环 · 预防 + 可恢复性 · 渐进式复杂度 · 操作可感知性 · 认知负荷预算 · 语义连续性演进。

核心原则（最小集合）

A) 任务优先的 UX

• 让主要任务在 <3 秒内显而易见。
• 每个屏幕/区域只允许有一个主要行动号召。
• 优化顺畅路径；将高级控件隐藏在渐进式披露之后。

B) 信息架构（分组与可发现性）

• 按用户心智模型（目标/对象/时间/状态）分组，而非按后端字段分组。
• 使用清晰的区块标题；在相似屏幕间保持导航模式稳定。
• 当项目数量增长时：尽早添加搜索/筛选/排序功能，不要等到最后。

C) 反馈与系统状态

• 覆盖所有状态：加载中、空状态、错误、成功、权限。详情见 references/checklists.md。
• 任何操作后，回答：“成功了吗？” + “发生了什么变化？” + “接下来我能做什么？”
• 优先使用内联、上下文反馈，而非全局提示（跨页面操作除外）。

D) 一致性与可预测性

• 相同的交互 = 相同的组件 + 相同的措辞 + 相同的位置。
• 使用少量、稳定的组件变体；避免一次性样式。

E) 可供性 + 示能符号（让操作显而易见）

• 可点击的元素必须看起来可点击（按钮/链接样式 + 悬停/焦点状态 + 光标）。在网页上，自定义可点击元素需要 cursor: pointer 和焦点样式。
• 主要操作需要有标签；仅图标形式仅适用于普遍认知的操作。
• 在提交前显示约束条件（格式、单位、必填项），而不仅仅在出错后。
• 关于更深层的理论（可供性、示能符号、映射、约束）：参见 references/design-psych.md。

F) 错误预防与恢复

• 通过约束、默认值和内联验证来预防错误。
• 尽可能使破坏性操作可逆；否则需要明确的确认。
• 错误信息必须具有可操作性（发生了什么 + 如何修复）。

G) 认知负荷控制

• 减少选择：提供合理的默认值、预设和渐进式披露。
• 仅当能减少思考负担时才将长任务分解为步骤（不仅仅是为了看起来“企业化”）。
• 保持视觉噪音低：更少的边框、更少的颜色、更少的竞争性高亮。

H) CRAP（视觉层次与布局）

• 对比：强调少数重要元素（行动号召、当前状态、关键数字）。
• 重复：设计令牌/组件/间距遵循一个比例；避免“几乎相同”的样式。
• 对齐：对齐到清晰的网格；修正 2px 的偏移；在文本重要时对齐基线。
• 亲密性：组内紧凑，组间宽松；间距是主要的分组工具。

间距与布局规范（紧凑规则集）

在实现或审查布局时使用此规则集。保持简短，但严格执行。

• 规则 1 - 一个间距比例尺：
  • 基础单位：4px。
  • 允许的间距集合（推荐）：4 / 8 / 12 / 16 / 24 / 32 / 40 / 48。
  • 新的间距/内边距应使用此集合；偏离比例尺的值需要有明确的理由。
• 规则 2 - 重复优先：
  • 相同组件类型保持相同的内部间距（卡片、列表行、表单组、区块）。
  • 具有相同视觉作用的组件不应有不同的间距模式。
• 规则 3 - 对齐 + 分组：
  • 对齐到一个网格并修正 1-2px 的偏移。
  • 组内间距紧凑，组间间距宽松。
• 规则 4 - 无装饰性嵌套：
  • 额外的包装器必须增加实际功能（分组、状态、滚动、可供性）。
  • 如果包装器仅添加边框/背景，则移除它，改用间距进行分组。
• 快速审查步骤：
  • 是否有偏离比例尺的间距值？
  • 是否有基线/边缘未对齐？
  • 是否有可以移除而不丢失意义的包装层？

现代极简风格指南（有规则的品味）

• 使用留白 + 排版来创建层次结构；避免装饰优先的设计。
• 偏好微妙的表面（轻度投影、低对比度边框）。避免厚重的阴影。
• 保持调色板小巧；使用一种强调色用于主要操作和关键状态。
• 文案：简短、直接的标签；仅当能减少错误或增加信任时才添加辅助文本。

动效（动画）指南（内容/创作者友好型，非炫技型）

• 动效用于解释层次结构（什么是图层/面板）和状态变化（刚刚发生了什么）。避免将动效用做装饰。
• 默认动效词汇表：淡入淡出；然后是微小的平移+淡入淡出；允许叠加层使用微小的缩放+淡入淡出。避免大幅度的弹跳动效。
• 保持画布/内容区域稳定。面板/叠加层可以移动；工作表面不应“浮动”。
• 偏好一致性而非多样性：相同组件类型使用相同的动效模式。
• 避免布局跳动。使用占位符/骨架屏在加载时保持布局稳定。

反 AI 默认项（强制约束）

AI 生成 UI 时有固定倾向。以下是反模式清单，违反必须修复。

字体

• ❌ 禁止 : Inter, Roboto, Arial, Open Sans, system-ui
• ✅ 推荐 : Plus Jakarta Sans, Outfit, Manrope, DM Sans, Geist

颜色

• ❌ 禁止 :
  • 纯黑 #000, 纯白 #fff, 纯灰 #888
  • 在有色背景上使用灰色文字
  • purple-to-blue 渐变, cyan-on-dark
  • #6366f1 (generic indigo)
• ✅ 推荐 :
  • Tinted neutrals : 给所有灰色添加品牌色调 (例: 品牌色 #0066cc → 灰色用 #1a2a3a 而非 #333)
  • OKLCH 色彩空间 : 替代 HSL，感知均匀，调整明度/彩度时更自然
  • 深色模式需要更高的对比度和彩度，不是简单反转

布局

• ❌ 禁止 :
  • 所有内容包在卡片里
  • 卡片嵌套卡片
  • 相同的 3 列卡片网格
  • 圆角过大 (>12px) 的 "pill" 风格
• ✅ 推荐 :
  • 用留白和排版建立层次，而非边框/卡片
  • 卡片只用于真正需要分组的内容
  • 网格布局使用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))

动效

• ❌ 禁止 : bounce/easing, 入场动画过多, 装饰性持续动画
• ✅ 推荐 : fade → translate+fade → scale+fade (仅 overlay)

图标

• ❌ 禁止 : emoji 作为图标, 混合多种图标风格
• ✅ 推荐 : Lucide, Phosphor, Heroicons 等现代图标库

大胆排版

AI 生成的 UI 倾向于“安全”的布局——居中对齐、均匀网格、可预测的层次。鼓励探索更有个性的排版方向。

原则

• 排版即装饰 : 用字体大小/粗细/位置的对比代替边框/阴影/卡片
• 留白是设计元素 : 大面积留白本身就是视觉语言
• 不对称可以创造动态感 : 保持视觉重量平衡的前提下
• 一个焦点就够了 : 让关键元素突出，其他自然退后
• 网格是工具不是规则 : 必要时打破，但要有意图

何时大胆

营销页面、产品介绍、落地页、英雄区域、作品展示——需要吸引注意力、传递品牌个性的场景。

何时克制

表单填写、数据录入、复杂操作流程、需要快速扫描的列表——效率和清晰度优先的场景。

反 AI 自检清单（生成后必查）

• Gradient restraint — 装饰性渐变每页最多 1 个。背景、按钮、边框同时用渐变 = 过度。
• No emoji as UI — 检查区块图标、状态指示、按钮标签是否混入 emoji。
• Copy necessity — 删除这段文字后，用户能通过布局/图标/位置理解吗？能 → 删除。
• Decoration justification — 每个视觉特效 (blur/glow/动画) 必须回答：“帮助用户理解什么？” 无答案 → 删除。
• Font check — 是否使用了 Inter/Roboto？替换为 Plus Jakarta Sans/Outfit/Manrope。
• Color check — 是否有纯黑纯白纯灰？是否在彩色背景上用灰色文字？添加色调。

参考资料

• 系统级指导原则（概念恒定性、文案规范、状态可感知性等）：references/system-principles.md
• 交互心理学（费茨/希克/米勒定律、认知偏差、心流、注意力）：references/interaction-psychology.md
• 设计心理学（可供性、示能符号、映射、约束、鸿沟、失误 vs 错误）：references/design-psych.md
• 图标规则和“直观精致”指南：references/icons.md
• 审查输出模板和评分：references/review-template.md
• 扩展检查清单（状态、可供性、列表、表单、设置、动效、仪表盘、文案）：references/checklists.md

Weekly Installs

161

Repository

oil-oil/oiloil-…ux-guide

GitHub Stars

44

First Seen

Feb 13, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

claude-code122

codex107

cursor90

opencode85

gemini-cli84

github-copilot83