Motion Lexicon
Motion Lexicon 是一个面向产品动效的设计系统。它连接了两个同等的集合：Motion Primitives 描述精确的行为；Components 将一个或多个行为转化为完整、可复制的产品交互。Page Composition 将这些交互放置在一个连贯的产品表面中。
从用户的产品事件开始设计。只有当支持清晰的状态变化、聚焦的角色和可访问的交接时，才生成代码。
选择模式
| 请求中的信号 | 模式 | 交付物 |
|---|---|---|
| 完整的页面、屏幕、落地页、仪表盘或设置界面 | 构建页面 | 页面计划、精确的 Registry 组合、可运行的页面和验收证据 |
| 一种感觉、术语或“哪个动效”问题 | 推荐 | 排序后的候选方案和一个推荐 |
| 工作流、过渡或多步骤场景 | 组合 | 动效蓝图和节拍计划 |
| 请求生产代码或框架适配 | 实现 | 可移植的 HTML、CSS、JS 或所请求框架的代码 |
| 现有代码、录制内容或卡顿报告 | 审查 | 按优先级排序的诊断和具体修复 |
| 新模式、示例或提议的库增加 | 贡献 | 准备供维护者审查的候选记录 |
确定性应用模式优先级：完整的页面或多区域界面使用构建页面；对代码或框架实现的明确请求使用实现；仅请求设计计划、节拍计划或蓝图时使用组合。实现可以内部创建蓝图，但仍需交付用户请求的可运行格式。审查请求可以在当前交互需要较大更改时返回修订后的蓝图。
每次请求开始
- 保留用户的语言。中文请求使用中文，英文请求使用英文。
- 识别产品任务、主要操作、操作前后的用户可见状态、主要参与者和预期感觉。
- 使用下面的模式×参考表。仅加载当前任务选择的文件。
- 当请求需要材质深度、物理感或 Interior 视觉风格时，加载 interior-principles.md。
- 当请求未明确产品上下文时，简要说明假设。仅当缺失的约束会影响设计时，提出一个聚焦的问题。
- 在一个节拍中保持一个主要视觉参与者和最多两个辅助参与者。为每个参与者分配一个语义类型：触发器、主角、状态、记录或环境。为每个节拍分配一个产品目的：定位、确认、保持连续性、揭示或恢复。
- 在每个已组合、实现或审查的交互中包含减少动动效方案和键盘/焦点行为。
- 对于页面请求，在选择技术栈之前检查目标项目。保留其路由、组件系统、设计令牌和内容语言。对于全新页面，除非用户请求其他技术栈，否则使用 React 和 TypeScript。
模式×参考路由
| 模式或任务 | 读取 | 仅当相关时添加 |
|---|---|---|
| 构建页面 | page-composition.md、page-system.md 和 components.md | 当宿主没有建立的视觉系统时，使用 motion-lexicon-page.css；针对页面主要状态变化的一个节拍或原始参考 |
| 推荐已发布的组件 | components.md | 当用户询问动效如何工作时，使用下方的一个原始系列 |
| 推荐一个行为 | motion-language.md | entrances、feedback、transitions 或 sequencing |
| 组合产品时刻 | composition.md 和 contract.md | feedback moment、choice moment、change moment 或 workflow moment |
| 实现 | implementation-css.md | 当消费或生成蓝图时使用 contract.md；针对精确的已发布组件使用 components.md |
| 审查 | review-rubric.md | 与观察到的行为匹配的一个原始或节拍参考 |
| 贡献 | contribution.md 和 candidate-template.md | 所需蓝图使用 contract.md；排除现有组件使用 components.md |
动效语言
在整个技能中使用 Interior 风格的配置文件：
- 当材质深度有助于定位时，使用边框、凸起面板和凹陷井模型来表示真实的产品状态。
- 从事件启动动效：点击、选择、路由更改、状态更新或直接操作。
- 为状态变化预留空间，使标签、按钮和记录保持其几何形状。
- 入场动效用于新上下文：
cubic-bezier(.23, 1, .32, 1)，大约 200-280 毫秒。离场动效用于移除的上下文：cubic-bezier(.23, 1, .32, 1)，大约 110-180 毫秒。 - 使用
transform和opacity进行动效工作。当反馈需要立即响应时，使用短的颜色或焦点过渡。 - 允许第二个用户操作中断、反转或建立第一个操作。
- 在减少动动效模式下，通过静态状态或短不透明度交叉淡入淡出保留状态、层次结构、焦点和反馈。
阅读 interior-principles.md 中的详细规则。
构建页面
在用户项目中构建完整、可运行的产品界面。在规划页面之前，阅读 page-composition.md、page-system.md 和 components.md。
- 检查目标仓库、框架、路由、现有令牌和已安装的依赖项。在宿主系统连贯的地方重用它们。
- 在编辑任何文件之前，输出下面显示的宿主检查表和紧凑型页面计划。包括页面任务和原型、每个主要区域、精确的已发布组件 ID 或
none、主要状态边界以及响应式和主题决策。每个宿主检查值都引用检查过的文件路径。散文式的实现意图不满足此条件。 - 对于已发布的组件，使用
https://motion-lexicon.pages.dev/r/<id>.json的源。在编辑前读取其files、dependencies和运行时。安装交付的源和依赖项；仅调整其属性、标签、数据、回调和宿主放置。不要重新生成该组件的近似版本。 - 在选择 ID 之前完成 Registry 集成检查：所有当前 Registry 源都使用 Tailwind 工具类。确认宿主已经编译了 Tailwind，或者当更改宿主工具链在范围内时，添加其支持的 Tailwind 设置。如果无法添加该设置，则为该区域选择
none并构建纯语义 UI；切勿静默粘贴 Registry 组件的 CSS 重新实现。在页面计划中记录 JSON URL、目标文件、依赖项列表和任何所需的运行时。 - 集成后审核渲染的交互式节点。页面标准至少为 44×44 CSS 像素，即使 Registry 组件的默认视觉高度更小。通过文档化的
className属性传递宿主类，并在该节点上设置min-width和min-height。如果源没有提供安全的样式挂钩，选择一个合适的提供该挂钩的组件，或者保持该区域为纯语义。 - 为页面提供一个主要的工作区域、一个主要的动效节拍和最多两个辅助动效节拍。保持静态内容简洁。
- 使用宿主设计系统。对于全新的界面，复制并调整 motion-lexicon-page.css，然后应用 page-system.md 中的精确层次结构和响应式规则。
- 交付整个路由或页面，包括属于其任务的实际内容、加载、空、成功、失败和恢复状态。
- 验证 320、390、768 和 1440 px 布局；浅色和深色主题；键盘顺序和焦点；减少动动效；44 px 交互式目标；溢出；以及控制台或水合错误。仅成功构建不满足页面验收条件。启动本地应用程序或生产预览，并使用可用的浏览器自动化来执行主要操作并在每个所需的视口检查渲染的几何形状。缺少项目浏览器测试脚本不是障碍：对本地预览使用可用的浏览器工具。在每个视口，枚举所有可见的
button、链接、输入、选择、文本区域和自定义交互式节点；记录最小渲染宽度和高度，以及低于 44 px 的节点的offenders列表。修复每个违规项，并在报告验收之前重新运行所有四个视口审核。报告命令、交互、测量和可观察结果。
保持页面计划简洁：
## 宿主检查
| 关注点 | 观察到的宿主证据 |
| --- | --- |
| 框架 | 名称/版本 — `package.json` |
| 路由 | 当前路由和目标文件 — `src/router.tsx` |
| 组件系统 | 重用的组件或无 — `src/components/...` |
| 令牌/主题 | 令牌和主题机制 — `src/styles.css` |
| Tailwind | 已安装/编译或缺失 — `package.json`、`vite.config.ts` |
| 依赖项 | 重用的包和版本 — `package.json` |
## 页面计划
任务：…
原型：…
主要操作：…
主要状态：空闲 → 进行中 → 成功/错误
| 区域 | 产品目的 | 已发布组件 | 状态或动效 |
| --- | --- | --- | --- |
| … | … | `component-id` 或 `none` | … |
Registry：
- `component-id` — https://motion-lexicon.pages.dev/r/component-id.json — `target/file.tsx` — 依赖项：`package` / 无
响应式：320/390 …；768 …；1440 …
主题：浅色 …；深色 …；减少动动效 …
在计划中的每一行都具体之前，不要开始实现。
最终交付物在中间消息折叠后必须保持独立可审计。重复完整的宿主检查表和页面计划，包括区域表和 Registry 行，然后添加一个验收表，其中包含下面每一项的一个观察行：
| 检查项 | 观察到的证据 |
| --- | --- |
| 构建 | 命令和退出结果 |
| 320 | 视口/文档宽度、最小目标宽度/高度、违规数量 |
| 390 | 视口/文档宽度、最小目标宽度/高度、违规数量 |
| 768 | 视口/文档宽度、最小目标宽度/高度、违规数量 |
| 1440 | 视口/文档宽度、最小目标宽度/高度、违规数量 |
| 浅色/深色 | 每个主题如何激活和检查 |
| 键盘/焦点 | 精确的按键路径、焦点进入和焦点返回 |
| 减少动动效 | 模拟偏好和观察到的静态或交叉淡入淡出结果 |
| 目标 | 可见交互式节点的最小测量宽度和高度 |
| 主要状态 | 执行适用的待定、成功、错误/重试和中断状态 |
| 运行时 | 控制台、页面、请求和水合错误计数 |
命名已安装的组件 ID 和更改的文件。将未观察的行标记为 未完成 并说明缺失的能力。不要描述未检查的检查项为支持或通过。
当用户请求 Motion Lexicon 外观时，保留视觉风格和交互质量，同时调整内容和信息架构以适应实际产品。避免用库演示填充页面。
推荐
返回一个用户可以立即应用的紧凑决策。
- 将请求映射到 components.md 中的最多三个已发布候选方案，或上面选择的一个相关原始参考方案。每个候选单元格以其精确的已发布组件或原始 ID（包含反引号）开头，必要时跟上一个人工标签。仅有人工标签是不完整的。切勿将未知或发明的 ID 呈现为已发布。
- 以产品术语解释视觉差异：空间连续性、重量、节奏、注意力或状态置信度。
- 选择一个候选方案，在“选择”行中重复其精确的已发布 ID，并说明默认时序、缓动、触发和减少动动效处理。
- 当请求描述多个状态时，提供动效蓝图。
使用以下格式：
## 建议 / Recommendation
| 候选 / Candidate | 适合场景 / Fit | 区别 / Difference |
| --- | --- | --- |
| `published-id` / … | … | … |
**推荐 / Pick:** `published-id` / …
- 触发 / Trigger: …
- 节奏 / Timing: …
- 无障碍 / Accessibility: …
组合
在展开实现细节之前创建动效蓝图。使用 assets/motion-blueprint.schema.json 作为契约。每个组合响应都包含一个符合模式的围栏 JSON 对象；不要用散文式表格或文本图替换蓝图。在聊天中保持字符串值紧凑，然后当用户要求可重用工件时，将相同的 JSON 写入文件。
每个 beats[].primitive 和每个 provenance.foundations[] 值必须是来自所选参考的精确已发布原始 ID。人工标签和未发布的伪 ID 不满足蓝图契约。
在回复之前，将最终的 JSON 写入临时文件并运行：
node "$CODEX_HOME/skills/motion-lexicon/scripts/validate-motion-blueprint.mjs" /tmp/blueprint.json
修复每个验证失败，并重新运行直到命令退出码为 0。将围栏 JSON 字节复制…
[…已截断…]