Back to Details

ui-ux-agent-skill

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI/UX Agent Skill — UI/UX Guide (Modern Minimal)

UI/UX Agent技能 — 现代极简UI/UX指南

A skill for AI coding assistants that turns abstract design feedback into code you can ship.
Two modes:
  • guide
    — compact principles and concrete do/don't rules for building modern, clean interfaces.
  • review
    — structured audit of existing UI (screenshot / mock / HTML / PR) with prioritized, implementable fixes.
Keep outputs concise. Bullets over paragraphs. Specific over generic.
这是一款为AI编码助手打造的技能，可将抽象的设计反馈转化为可上线的代码方案。
包含两种模式：
  • guide
    （指南模式）—— 提供简洁的设计原则与具体的现代简洁界面设计注意事项。
  • review
    （评审模式）—— 对现有UI（截图/原型/HTML/PR）进行结构化审计，并给出优先级明确、可落地的修复方案。
输出内容需简洁，优先使用项目符号而非段落，具体内容优于通用描述。

Workflow

工作流程

1) Guide workflow

1) 指南模式工作流程

  1. Identify the surface: marketing page / dashboard / settings / creation flow / list-detail / form / mobile screen.
  2. Identify the primary user task and primary CTA.
  3. Apply system-level guiding principles first — these are the mental model and interaction logic layer (
    references/system-principles.md
    ).
  4. Apply core principles below — start from UX, then refine with CRAP visual hierarchy.
  5. Apply domain-specific guidance as needed:
    • Icons: 
      references/icons.md
    • Accessibility: 
      references/accessibility.md
    • Responsive: 
      references/responsive-design.md
    • Typography: 
      references/typography.md
    • Color: 
      references/color-systems.md
    • Navigation: 
      references/navigation.md
    • Data visualization: 
      references/data-visualization.md
  1. 明确界面类型：营销页/仪表盘/设置页/创建流程/列表详情页/表单/移动端界面。
  2. 确定用户核心任务与主要CTA（行动召唤按钮）。
  3. 首先应用系统级指导原则——这些是交互逻辑与心智模型层面的规则（参考
    references/system-principles.md
    ）。
  4. 应用以下核心原则——先从UX入手，再结合CRAP视觉层级进行优化。
  5. 按需应用领域特定指导：
    • 图标：
      references/icons.md
    • 无障碍设计：
      references/accessibility.md
    • 响应式设计：
      references/responsive-design.md
    • 排版：
      references/typography.md
    • 色彩：
      references/color-systems.md
    • 导航：
      references/navigation.md
    • 数据可视化：
      references/data-visualization.md

2) Review workflow

2) 评审模式工作流程

  1. State assumptions (platform, target user, primary task).
  2. List findings as 
    P0 / P1 / P2
    (blocker / important / polish) with short evidence.
  3. For each major issue, label the diagnosis: execution vs evaluation gulf; slip vs mistake (see 
    references/design-psych.md
    ).
  4. Propose fixes that are implementable (layout, hierarchy, components, copy, states).
  5. Check accessibility compliance against 
    references/accessibility.md
    .
  6. End with a short checklist to verify changes.
Use 
references/review-template.md
for a stable output format.
  1. 说明假设前提（平台、目标用户、核心任务）。
  2. 按
    P0 / P1 / P2
    （阻塞级/重要级/优化级）列出问题发现，并附上简短依据。
  3. 针对每个主要问题，标注诊断类型：执行鸿沟vs评估鸿沟；失误vs错误（参考
    references/design-psych.md
    ）。
  4. 提出可落地的修复方案（布局、层级、组件、文案、状态）。
  5. 对照
    references/accessibility.md
    检查无障碍合规性。
  6. 最后附上简短的变更验证清单。
使用
references/review-template.md
确保输出格式统一。

Non-Negotiables (hard rules)

不可妥协规则

These are binary. No exceptions.
  • No emoji as icons — no emoji as UI decoration, status indicators, section markers, or button labels. Replace with a proper icon from a consistent set.
  • One icon family — use a single consistent icon set across the product. No mixing outlined/filled/3D/emoji styles.
  • Minimize copy by default — add explanatory text only when it prevents errors, reduces ambiguity, or builds trust. Text is the last resort, not the default.
  • Accessible by default — WCAG 2.1 AA is the floor, not an aspiration. Color contrast, keyboard navigation, screen reader support, and focus management are non-negotiable.
  • No decoration without purpose — every visual effect (gradient, shadow, blur, glow, animation) must answer: "what does this help the user understand?" No answer = remove it.
以下规则为硬性要求，无例外情况。
  • 禁止将表情符号用作图标——不得将表情符号用作UI装饰、状态指示器、章节标记或按钮标签。需使用统一图标库中的规范图标替代。
  • 统一图标库——产品全程使用单一、统一的图标集。不得混合轮廓/填充/3D/表情符号等不同风格的图标。
  • 默认精简文案——仅在能避免错误、减少歧义或建立信任时才添加说明文字。文案是最后选择，而非默认选项。
  • 默认无障碍——WCAG 2.1 AA是最低标准，而非可选目标。色彩对比度、键盘导航、屏幕阅读器支持及焦点管理均为硬性要求。
  • 无目的装饰需移除——每一项视觉效果（渐变、阴影、模糊、发光、动画）都必须能回答：“这能帮助用户理解什么？” 无合理答案则需移除。

System-Level Guiding Principles

系统级指导原则

Apply these as first-order constraints before choosing components or page patterns. Full definitions and review questions: 
references/system-principles.md
.
Key principles: concept constancy / primary task focus / UI copy source discipline / state perceptibility / help text layering (L0-L3) / feedback loop closure / prevention + recoverability / progressive complexity / action perceptibility / cognitive load budget / evolution with semantic continuity.
在选择组件或页面模式前，需先遵循这些一级约束条件。 完整定义与评审问题：
references/system-principles.md
。
核心原则：概念一致性/核心任务聚焦/UI文案来源规范/状态可感知性/帮助文本分层（L0-L3）/反馈闭环/错误预防与恢复/渐进式复杂度/操作可感知性/认知负载预算/语义连续性演进。

Core Principles

核心设计原则

A) Task-First UX

A) 任务优先型UX

The thing about any interface is that it exists to serve a task. Not to look good. Not to impress stakeholders. To help someone do something.
  • Make the primary task obvious in <3 seconds.
  • Allow exactly one primary CTA per screen/section.
  • Optimize the happy path; hide advanced controls behind progressive disclosure.
  • Remove anything that doesn't serve the user's current goal.
Review question: If someone lands here cold, can they figure out what to do in 3 seconds?
任何界面存在的意义都是为了服务用户任务，而非美观或取悦利益相关者，是为了帮助用户完成某件事。
  • 核心任务需在3秒内清晰可见。
  • 每个屏幕/区域仅允许存在一个主要CTA。
  • 优化常用路径；高级控件需通过渐进式展示隐藏。
  • 移除所有与用户当前目标无关的元素。
评审问题：如果用户首次进入该界面，能否在3秒内明确知道该做什么？

B) Information Architecture (grouping + findability)

B) 信息架构（分组与可查找性）

  • Group by user mental model (goal / object / time / status), not by backend data structure.
  • Use clear section titles; keep navigation patterns stable across similar screens.
  • When item count grows: add search/filter/sort early, not late.
  • Card sort your IA against real user language, not your internal nomenclature.
Review question: Does the grouping match how users think about this, or how the database stores it?
  • 按用户心智模型（目标/对象/时间/状态）分组，而非后端数据结构。
  • 使用清晰的章节标题；相似屏幕的导航模式需保持一致。
  • 当条目数量增加时，尽早添加搜索/筛选/排序功能，而非滞后处理。
  • 结合真实用户的语言对信息架构进行卡片分类，而非使用内部术语。
评审问题：分组方式是否符合用户的思考逻辑，而非数据库的存储逻辑？

C) Feedback and System Status

C) 反馈与系统状态

  • Cover all states: loading, empty, error, success, permission. Full checklist in 
    references/checklists.md
    .
  • After any action, answer three questions: "Did it work?" + "What changed?" + "What can I do next?"
  • Prefer inline, contextual feedback over global toasts (except for cross-page actions).
  • Loading states must prevent layout jumps — use skeletons, not spinners that collapse content.
Review question: At any moment, can the user tell what the system is doing and what they should do next?
  • 覆盖所有状态：加载、空态、错误、成功、权限。完整清单见
    references/checklists.md
    。
  • 用户执行任何操作后，需回答三个问题：“操作成功了吗？”+“有什么变化？”+“接下来可以做什么？”
  • 优先使用内联上下文反馈，而非全局提示（跨页面操作除外）。
  • 加载状态需防止布局偏移——使用骨架屏，而非会导致内容塌陷的加载动画。
评审问题：无论何时，用户能否清楚知道系统当前状态及下一步操作？

D) Consistency and Predictability

D) 一致性与可预测性

  • Same interaction = same component + same wording + same placement.
  • Use a small, stable set of component variants; avoid one-off styles.
  • Consistency across screens matters more than pixel-perfection on any single screen.
Review question: If someone learns this pattern on page A, will it transfer to page B without relearning?
  • 相同交互操作需对应相同组件、相同文案及相同位置。
  • 使用少量、稳定的组件变体；避免一次性样式。
  • 跨屏幕的一致性比单个屏幕的像素完美更重要。
评审问题：如果用户在A页面学会了某一模式，能否无需重新学习直接应用到B页面？

E) Affordance + Signifiers (make actions obvious)

E) 功能可见性与标识（让操作一目了然）

  • Clickable things must look clickable: button/link styling + hover/focus + cursor change. On web, custom clickable elements need 
    cursor: pointer
    and visible focus styles.
  • Primary actions need a label; icon-only is reserved for universally-known actions (search, close, settings).
  • Show constraints before submit (format, units, required), not only after errors.
  • For deeper theory: 
    references/design-psych.md
    .
Review question: Without any help text or tooltips, can users predict what is actionable and what will happen?
  • 可点击元素需具备可点击的视觉特征：按钮/链接样式+ hover/聚焦状态+光标变化。在网页中，自定义可点击元素需添加
    cursor: pointer
    及可见的聚焦样式。
  • 主要操作需添加标签；仅图标操作仅限通用已知功能（搜索、关闭、设置）。
  • 在提交前展示约束条件（格式、单位、必填项），而非仅在出错后提示。
  • 深入理论参考：
    references/design-psych.md
    。
评审问题：无需任何帮助文本或提示，用户能否预测哪些元素可交互及交互结果？

F) Error Prevention and Recovery

F) 错误预防与恢复

  • Prevent errors with constraints, defaults, and inline validation.
  • Make destructive actions reversible when possible; otherwise require deliberate confirmation.
  • Error messages must be actionable: what happened + how to fix it. Never just "Something went wrong."
  • Frame destructive confirmations around what will be lost, not the action itself.
Review question: Is the path designed to be easy to do right and safe to recover when wrong?
  • 通过约束条件、默认值及内联验证预防错误。
  • 破坏性操作尽可能支持撤销；否则需用户确认操作。
  • 错误提示需具备可操作性：说明问题+修复方法。不得仅显示“发生错误”。
  • 破坏性操作的确认提示需围绕“将丢失什么”展开，而非操作本身。
评审问题：界面是否设计得易于正确操作，且出错后可安全恢复？

G) Cognitive Load Control

G) 认知负载控制

  • Reduce choices: sensible defaults, presets, and progressive disclosure.
  • Break long tasks into steps only when it genuinely reduces thinking (not just to look "enterprise").
  • Keep visual noise low: fewer borders, fewer colors, fewer competing highlights.
  • Don't force users to remember information across screens — carry context forward.
Review question: As information grows, does comprehension cost stay stable?
  • 减少选择：提供合理默认值、预设选项及渐进式展示。
  • 仅当能真正降低思考负担时，才将长任务拆分为步骤（而非仅为了显得“企业级”）。
  • 降低视觉噪音：减少边框、减少色彩、减少相互竞争的高亮元素。
  • 不得要求用户跨屏幕记忆信息——需保留上下文。
评审问题：当信息量增加时，用户的理解成本是否保持稳定？

H) CRAP (visual hierarchy + layout)

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

  • Contrast — emphasize the few things that matter (CTA, current state, key numbers). If everything is bold, nothing is.
  • Repetition — tokens, components, and spacing follow a scale. Avoid "almost the same" styles — they create cognitive noise.
  • Alignment — align to a clear grid. Fix 2px drift. Align baselines where text matters.
  • Proximity — tight within a group, loose between groups. Spacing is the primary grouping tool, not borders.
Review question: Close your eyes, open them — is the first thing you see the most important thing on the page?
  • Contrast（对比度）——突出少数关键元素（CTA、当前状态、核心数据）。如果所有内容都加粗，就没有重点了。
  • Repetition（重复性）——设计令牌、组件及间距需遵循统一规范。避免“几乎相同”的样式——这会造成认知噪音。
  • Alignment（对齐）——对齐到清晰的网格。修正2px的偏移。文本重要时需对齐基线。
  • Proximity（邻近性）——组内间距紧凑，组间间距宽松。间距是主要的分组工具，而非边框。
评审问题：闭上眼睛再睁开，第一眼看到的是否是页面上最重要的内容？

I) Accessibility

I) 无障碍设计

Accessibility is not a feature. It's a quality standard. Like structural integrity in a building — you don't "add" it later.
  • WCAG 2.1 AA is the minimum. Test against it.
  • Color must never be the only way to convey information.
  • All interactive elements must be keyboard accessible with visible focus indicators.
  • Screen reader users must get equivalent information and functionality.
  • Full guidance: 
    references/accessibility.md
    .
Review question: Can a user who can't see color, can't use a mouse, or can't see at all still complete the primary task?
无障碍不是一项功能，而是质量标准。就像建筑的结构完整性——不能“后期添加”。
  • WCAG 2.1 AA是最低标准，需严格测试。
  • 绝不能仅通过颜色传达信息。
  • 所有交互元素都必须支持键盘导航，并具备可见的聚焦指示器。
  • 屏幕阅读器用户必须能获取等效的信息与功能。
  • 完整指导：
    references/accessibility.md
    。
评审问题：无法分辨颜色、无法使用鼠标或完全失明的用户能否完成核心任务？

J) Responsive Design

J) 响应式设计

  • Design for the smallest screen first, then enhance for larger ones.
  • Content hierarchy should be preserved across breakpoints, not just reflowed.
  • Touch targets: minimum 44x44 CSS px (web) / 48x48 dp (mobile).
  • Full guidance: 
    references/responsive-design.md
    .
Review question: Does the interface work on a phone held in one hand, a tablet in landscape, and a wide desktop monitor?
  • 先为最小屏幕设计，再为更大屏幕优化。
  • 内容层级需在所有断点下保持一致，而非仅重新排列。
  • 触摸目标：最小尺寸为44x44 CSS像素（网页）/48x48 dp（移动端）。
  • 完整指导：
    references/responsive-design.md
    。
评审问题：界面能否在单手握持的手机、横屏平板及宽屏显示器上正常使用？

K) Typography

K) 排版

Typography is the backbone of visual hierarchy. Get it right and everything else falls into place.
  • Use a type scale — not arbitrary font sizes.
  • Limit to 2 typefaces maximum (one for headings, one for body — or one for everything).
  • Line length: 45-75 characters for body text. Wider than that and reading comprehension drops.
  • Full guidance: 
    references/typography.md
    .
Review question: Can you identify the hierarchy (title > subtitle > body > caption) just from the typography?
排版是视觉层级的核心。排版正确，其他问题都会迎刃而解。
  • 使用统一的字体比例——而非任意字体大小。
  • 最多使用2种字体（一种用于标题，一种用于正文——或全局使用一种字体）。
  • 正文行长度：45-75个字符。超过此范围会降低阅读理解度。
  • 完整指导：
    references/typography.md
    。
评审问题：仅通过排版能否区分层级（标题>副标题>正文>说明文字）？

L) Color Systems

L) 色彩系统

  • Keep the palette small and intentional. One accent color for primary actions and key states.
  • Use semantic color tokens, not raw hex values — this makes theming and dark mode possible.
  • Test all color combinations for WCAG AA contrast (4.5:1 for text, 3:1 for large text and UI components).
  • Full guidance: 
    references/color-systems.md
    .
Review question: If you printed this screen in grayscale, would the hierarchy still be clear?
  • 保持调色板精简且有目的性。使用一种强调色用于主要操作及关键状态。
  • 使用语义化颜色令牌，而非原始十六进制值——这是实现主题切换与深色模式的基础。
  • 测试所有色彩组合的WCAG AA对比度（正文文本4.5:1，大文本与UI组件3:1）。
  • 完整指导：
    references/color-systems.md
    。
评审问题：如果将该界面打印为灰度，层级是否依然清晰？

Spacing and Layout Discipline

间距与布局规范

Use this when implementing or reviewing layouts. Short set of rules, strictly enforced.
  • Rule 1 — One spacing scale:
    • Base unit: 4px.
    • Allowed set: 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80.
    • Off-scale values need a clear, documented reason.
  • Rule 2 — Repetition first:
    • Same component type keeps the same internal spacing (cards, list rows, form groups, section blocks).
    • Components with the same visual role must not have different spacing patterns.
  • Rule 3 — Alignment + grouping:
    • Align to one grid and fix 1-2px drift.
    • Tight spacing within a group, looser spacing between groups.
    • Spacing is the primary grouping tool. If you need a border to show grouping, your spacing is wrong.
  • Rule 4 — No decorative nesting:
    • Extra wrappers must add real function (grouping, state, scroll, affordance).
    • If a wrapper only adds border/background, remove it and group with spacing instead.
  • Quick review pass:
    • Any off-scale spacing values?
    • Any baseline/edge misalignment?
    • Any wrapper layer removable without losing meaning?
在实现或评审布局时需遵循以下规则，严格执行。
  • 规则1 — 统一间距比例：
    • 基础单位：4px。
    • 允许使用的间距值：4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80。
    • 非标准间距值需有明确的文档说明原因。
  • 规则2 — 优先一致性：
    • 同一类型的组件需保持相同的内部间距（卡片、列表行、表单组、章节块）。
    • 相同视觉角色的组件不得使用不同的间距模式。
  • 规则3 — 对齐与分组：
    • 对齐到单一网格，修正1-2px的偏移。
    • 组内间距紧凑，组间间距宽松。
    • 间距是主要的分组工具。如果需要通过边框来展示分组，说明你的间距设计存在问题。
  • 规则4 — 禁止无意义嵌套：
    • 额外的容器必须具备实际功能（分组、状态、滚动、功能可见性）。
    • 如果容器仅用于添加边框/背景，需移除并通过间距实现分组。
  • 快速评审检查项：
    • 是否存在非标准间距值？
    • 是否存在基线/边缘对齐偏移？
    • 是否存在可移除且不影响含义的容器层？

Modern Minimal Style Guidance

现代极简风格指导

This is about taste, not trends. Modern minimal is not "flat and boring." It's using restraint as a design tool.
  • Use whitespace + typography to create hierarchy. Avoid decoration-first design.
  • Prefer subtle surfaces (light elevation, low-contrast borders). Avoid heavy shadows.
  • Keep color palette small; use one accent color for primary actions and key states.
  • Copy: short, direct labels. Add helper text only when it reduces mistakes or increases trust.
  • Let content breathe. Dense information is not the same as useful information.
这关乎品味，而非潮流。现代极简不是“平淡无聊”，而是将克制作为设计工具。
  • 使用留白与排版构建层级。避免装饰优先的设计。
  • 偏好柔和的界面（轻微悬浮、低对比度边框）。避免厚重阴影。
  • 保持调色板精简；使用一种强调色用于主要操作及关键状态。
  • 文案：简短、直接的标签。仅在能减少错误或提升信任时才添加辅助文本。
  • 让内容呼吸。信息密集不等于有用。

Motion and Animation Guidance

动效与动画指导

  • Motion explains hierarchy (what is a layer/panel) and state change (what just happened). Not decoration.
  • Default motion vocabulary: fade > small translate+fade > tiny scale+fade for overlays. Avoid bouncy, elastic, or "showy" motion.
  • Keep the canvas/content area stable. Panels and overlays can move; the work surface must not float.
  • Same component type uses the same motion pattern. Consistency over creativity.
  • Avoid layout jumps. Use placeholders/skeletons to keep layout stable while loading.
  • Interaction feedback (hover/pressed) must feel immediate. Never make users wait for an animation to complete before they can proceed.
Red flags:
  • Continuous decorative motion (breathing backgrounds, floating cards)
  • Large bouncy/elastic overshoot that steals attention
  • Big page-level transitions for routine navigation
  • Multiple simultaneous animations competing for attention
  • 动效应用于解释层级（何为图层/面板）与状态变化（刚刚发生了什么），而非装饰。
  • 默认动效规范：淡入>小幅平移+淡入>覆盖层的微小缩放+淡入。避免弹跳、弹性或“花哨”的动效。
  • 保持画布/内容区域稳定。面板与覆盖层可移动；工作区域不得浮动。
  • 同一类型的组件使用相同的动效模式。一致性优先于创意。
  • 避免布局偏移。加载时使用占位符/骨架屏保持布局稳定。
  • 交互反馈（hover/按下）需即时响应。绝不能让用户等待动画完成后才能继续操作。
红色预警：
  • 持续的装饰性动效（呼吸背景、浮动卡片）
  • 会分散注意力的大幅弹跳/弹性动效
  • 常规导航使用的大页面级过渡动效
  • 多个同时播放的动效相互竞争注意力

Anti-AI Self-Check (run after generating any UI)

AI生成UI自检（生成UI后执行）

Before finalizing generated UI, verify these items. Violating any one is a mandatory fix.
  • Gradient restraint — gradients must convey meaning (progress, depth, state distinction). Purely decorative gradients: at most one per page. If background, buttons, and borders all use gradients simultaneously, that is overuse. Pick one and flatten the rest.
  • No emoji as UI — re-check: no emoji slipped in as section icons, status indicators, or button labels. This is already a non-negotiable. Double-check.
  • Copy necessity — for every piece of text, ask: if I remove this, can the user still understand through layout, icons, and position alone? If yes, remove it.
  • Decoration justification — every purely visual effect (blur, glow, animated entrance, layered shadows) must answer: "what does this help the user understand?" No answer = remove.
  • Contrast check — run a quick contrast check on all text/background combinations. WCAG AA minimum.
  • Touch target check — all interactive elements meet minimum 44x44 CSS px.
  • Keyboard test — tab through the entire interface. Can you reach and activate every interactive element? Is focus visible?
在最终确定生成的UI前，需验证以下项目。违反任意一项都必须修复。
  • 渐变克制——渐变必须传递明确含义（进度、深度、状态区分）。纯装饰性渐变：每页最多使用一个。如果背景、按钮及边框同时使用渐变，属于过度使用。需选择一处使用，其余改为扁平化。
  • 禁止表情符号UI——再次检查：是否有表情符号被用作章节图标、状态指示器或按钮标签。这已是不可妥协规则，需再次确认。
  • 文案必要性——针对每一段文案，提问：如果移除这段文案，用户能否仅通过布局、图标及位置理解内容？如果可以，需移除。
  • 装饰合理性——每一项纯视觉效果（模糊、发光、入场动画、多层阴影）都必须能回答：“这能帮助用户理解什么？” 无合理答案则需移除。
  • 对比度检查——快速检查所有文本/背景组合的对比度。需满足WCAG AA最低标准。
  • 触摸目标检查——所有交互元素需满足最小44x44 CSS像素的要求。
  • 键盘测试——通过Tab键遍历整个界面。能否到达并激活所有交互元素？焦点是否可见？

References

参考文档

  • System-level guiding principles: 
    references/system-principles.md
  • Interaction psychology (Fitts/Hick/Miller, cognitive biases, flow, attention): 
    references/interaction-psychology.md
  • Design psychology (affordances, signifiers, mapping, constraints, gulfs, slips vs mistakes): 
    references/design-psych.md
  • Accessibility (WCAG, keyboard, screen readers, color, forms, media): 
    references/accessibility.md
  • Responsive design (breakpoints, mobile-first, touch, fluid layouts): 
    references/responsive-design.md
  • Typography (type scale, pairing, line height, measure, hierarchy): 
    references/typography.md
  • Color systems (palettes, semantic tokens, contrast, dark mode): 
    references/color-systems.md
  • Navigation patterns (nav structures, wayfinding, mobile nav): 
    references/navigation.md
  • Data visualization (chart selection, data-ink ratio, dashboard design): 
    references/data-visualization.md
  • Icon rules and "intuitive refined" guidance: 
    references/icons.md
  • Review output template and scoring: 
    references/review-template.md
  • Expanded checklists (states, affordance, lists, forms, settings, motion, dashboards, copy): 
    references/checklists.md
  • 系统级指导原则：
    references/system-principles.md
  • 交互心理学（菲茨定律/希克定律/米勒定律、认知偏差、心流、注意力）：
    references/interaction-psychology.md
  • 设计心理学（功能可见性、标识、映射、约束、鸿沟、失误vs错误）：
    references/design-psych.md
  • 无障碍设计（WCAG、键盘、屏幕阅读器、色彩、表单、媒体）：
    references/accessibility.md
  • 响应式设计（断点、移动端优先、触摸、流式布局）：
    references/responsive-design.md
  • 排版（字体比例、字体搭配、行高、行长度、层级）：
    references/typography.md
  • 色彩系统（调色板、语义化令牌、对比度、深色模式）：
    references/color-systems.md
  • 导航模式（导航结构、路径识别、移动端导航）：
    references/navigation.md
  • 数据可视化（图表选择、数据墨水比、仪表盘设计）：
    references/data-visualization.md
  • 图标规则与“直观优化”指导：
    references/icons.md
  • 评审输出模板与评分：
    references/review-template.md
  • 扩展检查清单（状态、功能可见性、列表、表单、设置、动效、仪表盘、文案）：
    references/checklists.md