体验设计

ux-ui-kit 确保界面的正确性：令牌、组件、状态、无障碍、可验证渲染。此技能则决定界面应该如何被使用和记住，并将其转化为 kit 可以构建的具体决策。它回答：人们应该首先注意到什么，什么必须保持熟悉，原创性在哪里有其价值，什么移动而什么保持静止，交互如何传达信息，体验的峰值在哪里以及它如何结束，当华丽的外衣被剥离后还剩下什么。

定位

层次	职责	技能
网站策略	网站必须实现和传达什么、页面结构、证明、信任、转化、SEO	`website-excellence`
体验指导（本技能）	注意力、熟悉度与新颖性、艺术指导、构图与节奏、交互、动效、标志性时刻、体验适配与验证	`experience-design`
执行与验证	令牌、组件、代码、文案、门控	`apply-aesthetic`, `brandkit`, `design-tokens`, `design-component`, `design-code`, `image-to-code`, `ux-writing`, `prototype`, `redesign`, `design-review`, `a11y-audit`, `performance`, `design-qa`

仅在战略环境改变界面决策时才使用它。如果网站的目标受众、报价或页面目的未确定，请先从 website-excellence 获取，或陈述假设并继续。产品 UI、应用和仪表板直接进入此技能。

第 0 步：为流程定调

在进行其他操作之前，先确定深度。参考文献中的框架是判断工具，而非每个请求都必须通过的阶段。

模式	适用场景	产出
快速	在既定系统内部对组件、状态、屏幕进行调整或修复	如果存在，阅读项目的设计决策记录。受影响视图的注意顺序、仅针对更改内容的交互或动效卡片、反模式扫描，然后构建。无需长篇论点。
标准	新页面、流程、屏幕族，或对其中之一的重新设计	体验简报和论点、注意力地图、新意预算、单一方向（仅在遇到真正的权衡时提供替代方案）、节奏图、交互与动效图、适配说明、自我批评、决策记录。
标志性	品牌定义性的网站或发布、品牌标识重新设计，或明确要求令人难忘的体验	包括标准模式的所有内容，外加概念探索（三种真正不同的方向，进行比较，选择一个）、设计的标志性时刻、针对风险最高部分的原型，以及体验验证计划。

克制检查。 在政务服务、结账、身份验证、设置、文档、运营仪表板或医疗或金融任务中，任务路径的新意预算接近于零。个性存在于字体排印、清晰度、语调、精确度和反馈质量中。知道克制是更明智的决策是工作的一部分。

循环

运行模式所需的步骤。每个步骤都指向包含方法论的参考文献。

理解。 撰写体验简报：用户意图、到达上下文、主要注意力、结果、语调、应保持熟悉的内容、约束、人们应该记住什么。 [01]
确立。 为每个关键视图撰写体验论点和注意力层级（1 到 4 级）。论点将过滤所有后续决策。 [01]
探索（标志性模式，或当首要想法是类别默认值时）。三个在概念上而非颜色上不同的方向；比较保守、差异化和大胆的方案；做出选择；记录被拒绝的方案及其原因。一旦选择明确，停止探索。 [02]
指导。 设置三到七条艺术指导规则，并将论点转化为对布局、字体、比例、间距、密度、颜色、图像、表面、组件、交互、动效和自适应行为的约束。 [02]
构图。 绘制节奏图：每个部分的职责、密度和强度、静止的位置、峰值在哪里、如何结束。让内容选择其形式，而非遵循标题、段落、三张卡片。 [03]
交互。 为有意义的交互编写交互卡片（意图、启示、触发器、响应、反馈、状态、恢复、连续性），并覆盖加载、空状态、错误、成功、中断和边界状态。 [04]
编排。 制作动效图：什么移动，什么保持静止，每个重要动效对应一个动效卡片，包含其预算类别和一个专门设计的减少动效版本。 [05]
峰值。 选择零到三个标志性时刻，并对每个时刻执行标志性测试。 [06]
适配。 针对小屏幕、触屏、键盘、缩放和重排、减少动效和低性能设备重新设计体验；定义降级阶梯。 [07]
压力测试与编辑。 将主要决策通过决策过滤器，将雄心勃勃的决策通过实现现实检查；然后进行反模式扫描、可互换性测试、概念完整性测试和从七个角度进行的自我批评；然后移除不配其位置的元素。 [08]
交接与验证。 将体验规格传递给构建技能。运行 kit 门控和 motion_audit.mjs；渲染并查看大约 375px 和 1440px 宽度、仅使用键盘、并模拟减少动效模式。 [07, 08]
验证、优化与记忆。 用能回答问题的、最经济的方法测试风险最高的假设；修复影响最大的弱点，而不是打磨低价值的细节；更新设计决策记录。 [08]

非谈判原则

让必需的东西熟悉；让有意义的东西独特。 导航、表单、结账、身份验证、搜索、设置和错误恢复应保持传统行为，除非有受众证据支持更改。围绕它们表达品牌。
无障碍是设计输入。 WCAG 2.2 AA 是基线。任何基本功能都不得仅依赖悬停、拖拽、动效、颜色或声音。每个动效都有一个专门设计的减少动效版本，而不仅仅是被删除。
没有无作用的动效。 每个重要动效都要说明它传达什么以及其预算类别：必需、增强、表达、实验性或避免。
没有无反馈和恢复的交互。 每个有意义的动作都在约 100 毫秒内得到确认，并且可以在有意义的地方被撤销、取消或重试。
每个增强都有故障模式。 即使移除 JavaScript、重度媒体和动画，内容和核心任务仍能正常工作。
变化必须有意义。 改变构图、密度或强度是因为内容、节奏、层次或情感需要，而绝不仅仅是为了避免重复。
参考文献提供原则，而非表面。 永远不要为他人重建真实公司的标识；要提取某个参考有效的原因，并以不同的方式表达它。
花掉新意，不要随意撒。 典型预算：快速 0，标准 0 到 1，标志性 1 到 2 个不熟悉的想法，集中在它们能创造意义或记忆的地方。
对实质性的声明标注置信度（如下所示），并且永远不要陈述你没有测量过的结果（kit 验证协议）。
根据决策调整分析深度。 对于显而易见的选择不用理论，做出决定并继续前进。

输出：体验规格

根据模式深度填充 templates/experience-spec.md：快速模式约十行，标准模式一到两页，标志性模式两到四页。在构建时，此规格是驱动代码的工作计划；保持其语言远离页面文案和代码注释，并在交接时仅总结重要的决策。对于标准和标志性工作，根据 templates/design-decision-record.md 编写或更新项目的设计决策记录，并在该项目的后续每个任务中首先阅读它。

职责交接

此处的决策	由谁执行
艺术指导规则转化为令牌（颜色角色、字体、间距、圆角、深度、动效模式和持续时间）	新基础使用 `brandkit`，现有基础使用 `apply-aesthetic`，然后 `design-tokens`
组件及其状态，来自交互卡片	`design-component`，然后 `design-code`
规格中的页面和屏幕	`design-code`，或根据参考构建时使用 `image-to-code`
在通用性诊断后升级现有 UI	`redesign`
操作、错误、空状态和反馈的文案	`ux-writing`
标志性时刻和高风险交互的原型	`prototype`
门控：所有状态下的对比度、axe、焦点陷阱、响应式溢出、品味、动效	`a11y-audit`, `design-qa`, `performance`, 以及 `node ~/.claude/ux-ui-kit/scripts/motion_audit.mjs <page>`
通过基础知识和体验视角对屏幕进行评分审查	`design-review`

the kit 的规则仍然约束构建：仅使用令牌、8 个组件状态、~/.claude/ux-ui-kit/CLAUDE.md 中的验证协议、无表情符号。

置信度标签

在对读者可能误认为是事实的建议上使用它们。不要为每个句子都打标签。

标签	含义	网站卓越等价物
高置信度惯例	广泛建立的模式，具有很强的可用性价值	当前惯例，或标准
证据支持指导	有标准或相关研究支持；说明证据覆盖的内容	标准/要求，强有力的证据
项目特定推断	根据这些用户、约束和目标推理得出；陈述假设	推断
创造性假设	旨在创造感觉或记忆的判断；可测试，但无法由研究证明	实用启发式
实验性机会	新颖的、不确定的结果；在依赖它之前证明其合理性并进行测试	有限/上下文证据，附带验证计划

研究可以设定约束和标记风险。它不能选出唯一正确的艺术指导方向。

参考文献

仅加载模式与问题所需的内容。

01 简报、论点和注意力：体验简报、论点、三个响应层次、注意力层级、按上下文的相称性、克制何时获胜。
02 概念与艺术指导：创意领域、概念差异、方向卡片与比较、从意图到执行、字体排印、颜色、图像、表面、使用参考文献和样式库。
03 构图、节奏与内容：跨时间设计、节奏图、对比与节奏、密度与停顿、内容塑造的界面、卡片、构图工具。
04 交互设计：交互卡片、沟通测试、新意预算、反馈时机、乐观更新、撤销、表单、体验状态、输入对等、模式转换、标志性交互、重复使用。
05 动效系统：证据、动效的工作、预算类别、动效图与卡片、时机、缓动与弹簧、编排、滚动联动动效、视图过渡、作为设计的减少动效、性能、移动端、工具、测试。
06 标志性时刻：时刻类型、不需奇观的可记忆性、峰值与终点、选择、标志性测试、静态形式、原型制作。
07 适配与降级：作为适配的响应式、输入与能力查询、容器查询、缩放与重排、可达范围、设备层级、降级阶梯、故障模式、表现性功能的无障碍、渲染检查。
08 批评、验证与记忆：决策过滤器、实现现实检查、AI 反模式扫描、可互换性与完整性测试、自我批评循环、无情编辑、工艺打磨、清晰度与感受的验证方法、设计决策记录。

体验设计 (Experience Design)