ai-ui-ux-motion-engine

AI UI/UX 动效引擎

基于证据打造项目专属体验。将参考资料视为结构、视觉和交互方面的输入，而非克隆品牌、文案、代码或受保护素材的许可。

不容妥协的规则

• 编辑前，阅读适用的 AGENTS.md、权威文档、设计系统和当前工作树中的变更。
• 明确定义目标范围、验收标准、依赖项、费用和验证计划。
• 采用能够达到准确性目标的最快路径。对于真实产品，如果存在权威来源，默认采用 evidence-accurate；绝不可为了视觉效果而暗中牺牲准确性。若需要 CAD、合成或真实素材，应尽早说明。
• 除非用户明确授权，否则保留现有技术栈。
• 标明观察结果、事实、提案、生成的可视化内容和未知信息。
• 确保内容和操作在没有动效、JavaScript 或不受限数据使用的情况下仍可用。
• 没有直接证据时，绝不可宣称达到电影级效果、产品准确、无障碍、性能达标或已可发布。
• 未经用户授权，绝不可配置付费服务、接受服务提供方条款或消耗额度。
• 绝不可将用户要求的全屏、主页或标志性电影级体验降格为辅助镜头。摄像机旋转、移动、缩放、视差或静态图像揭示效果，都不算标志性体验。

强制电影感意图门槛

只要请求或参考内容体现以下任一意图，就启用此门槛：

• 电影感、高级感或沉浸式滚动体验；
• 产品开启、组装、爆炸、迸散或变形；
• 镜头环绕、推轨、微距检查或精心设计的产品展示旅程；
• 由滚动控制的摄影动态；
• 效果依赖于视角或物体状态变化的参考内容。

用户无需使用触发词，也无需知道需要使用哪种工具。

编辑页面之前：

1. 将用户要求的结果复制到 intent.requestSummary；记录标志性时刻、进展、高潮、所需效果和不可接受的替代方案。不要围绕最容易获得的素材重写请求。
2. 判定真实度模式：
   • illustrative：允许虚构细节；
   • identity-locked：同一虚构产品或概念产品必须保持一致；
   • evidence-accurate：可见数量、几何形状、标签和运作机制必须符合权威产品证据。
3. 确认参考内容或目标场景、可用源图像或 CAD、标志性时刻和辅助时刻的数量与位置、目标设备、媒体服务商访问权限，以及获准的费用和尝试次数上限。 如果参考内容是视频，请检查关键帧，以及任何可用的文字稿、提示词包和说明链接；不要仅凭摘要或单张截图还原其工作流。
4. 明确说明依赖条件。摄影机位移动或物理变形需要合适的源素材，以及图像/视频生成、3D 或合成方案。CSS 无法凭空生成未展示的产品视角。
5. 如果所需服务商或源素材不可用，请停止制作电影感素材。诚实地提供静态布局/备用方案；绝不要用淡入淡出、缩放或库存背景视频冒充等效方案。
6. 根据 assets/cinematic-brief.example.json 创建电影感简报，使用 scripts/validate-cinematic-brief.mjs 验证，并在生成前取得费用/条款授权。验证失败后，不要上传或消费资源。
7. 在重新设计页面或生成完整素材库之前，先制作一个隔离的标志性时刻私有样片。
8. 使用自动化技术检查和总览联系表筛查偏差。仅对高风险转场进行密集抽样；只有检测到缺陷或涉及证据关键机制时，才检查每一帧。最多只进行获批次数的尝试；之后应简化动作、更改技术方案或报告阻碍因素。
9. 根据 assets/creative-acceptance.example.json 创建创意评审 JSON，并运行 scripts/validate-creative-acceptance.mjs。媒体通过技术验证并不能证明其叙事、效果或创意已获认可。
10. 只有在创意验证器通过 --stage integration 后，才可集成经负责人批准的素材。绝不要把质量不佳的样片放进正式页面的主视觉区域，再指望周边 UI 挽救它。

可执行的主视觉门槛

除非用户明确要求制作较小的辅助镜头，否则将用户要求的全屏、主页、主视觉、标志性、沉浸式、复杂、迸散、爆炸式或精心设计的滚动旅程视为 flagship。在任何付费生成运行之前：

node scripts/validate-cinematic-brief.mjs cinematic-brief.json --check-files
node scripts/render-cinematic-prompt.mjs cinematic-brief.json --mode flagship

验证器必须拒绝降低等级、仅靠摄影机移动的叙事、缺少开端/进展/高潮、源素材覆盖不足、缺少所需的变形，以及未经验证的服务商方案。不要通过手动编写提示词绕过验证器。

生成后，记录视觉证据并运行：

node scripts/validate-creative-acceptance.mjs creative-review.json --stage review

只有在负责人批准确切的私有样片后，才可使用 --stage integration。通过编解码器、关键帧、联系表或滚动交付检查，绝不能作为创意简报已通过的证据。

程序化提供方规则

优先使用结构化提供方访问，而不是浏览器控制。对于 Codex 中的 Higgsfield：

1. 优先使用已通过身份验证的 Higgsfield CLI；
2. 在原生提供连接器的客户端中使用 Higgsfield MCP；
3. 如果账户提供受支持的 API，则使用该 API；
4. 仅当所有程序化途径都无法提供所需控制时，才使用浏览器控制，并在简报中记录这一具体限制。

运行 scripts/higgsfield-preflight.mjs，然后再使用 Higgsfield 生成内容。它会检查 CLI 账户连接，不会消耗点数。开始使用提供方前，请完整阅读 tool-connections.md。

首次回复应简洁：确认准确性目标、素材准备情况、提供方／点数使用权限、所需展示位置以及交付／时间预算。不要要求用户选择技能本身可以确定的实现细节。

“首次尝试”意味着立即选择正确的专业路线，并进行范围明确的验证。它无法保证随机性提供方的首次渲染就能通过。

缺少必要信息时，首次回复应简短：

这种体验依赖电影感的素材动态，而不是普通 CSS。我可以使用获批的媒体提供方和合适的参考素材来制作，但首先需要明确准确性要求、关键场景／展示位置、源素材、提供方访问权限和点数上限。我会先制作一段私密的标志性序列进行验证，再修改页面，不会用基础的照片显现效果来代替。

此关卡启动时，请完整阅读 cinematic-intake.md、generated-product-scrubber.md 和 cinematic-prompts.md。

标准工作流

1. 明确需求并建立基线

记录目标、受众、路由、内容／证据规则、目标设备、框架、发布边界以及当前构建／测试状态。阅读 workflow.md。

2. 提取参考信息

梳理构图、字体、色彩、图像、入场效果、滚动、悬停、拖动、镜头运动、对象状态和时序。区分可复用的原则与特定于品牌形象的素材。要进行本地录制，请运行：

bash scripts/extract-reference-frames.sh <video> <output-directory>

阅读 media-pipeline.md。

3. 确定一个方向

写出 7 行可实现的说明，涵盖目标／受众、基调、构图、字体、色彩／媒体、动态效果／减少动态效果，以及一个标志性差异点。仅有“简洁现代”不足以继续推进。

4. 选择架构

选择能保留预期体验的最轻量机制：

• 使用 CSS 实现本地状态和入场变化；
• 对于简单显现效果，使用 Intersection Observer 或原生滚动动画；
• 使用现有动态效果库实现协调的组件动画；
• 使用 GSAP 实现有意设计的固定定位／时间线；
• 使用生成或拍摄的媒体实现摄影级镜头／对象变化；
• 使用全帧内编码视频或 canvas 帧实现精确的滚动控制；
• 使用 WebGL/3D 实现可自由操控的视角或可靠的精确机械效果。

对于电影感的产品动态，媒体本身就是体验。先验证媒体；不要指望 CSS 变换来生成缺失的影片内容。

采用精简且可扩展的默认方案：

• 每段主要用户旅程使用一个旗舰主素材；
• 在不失真的前提下，复用获批的章节、裁切版本和干净的反向播放版本；
• 仅当新增内容确实传达了新事实时，才添加 3–5 秒的辅助镜头；
• 其他所有位置都使用代码原生动态效果。

源素材／提供方已准备就绪时，私密验证目标为 15–30 分钟；获批旗舰素材加滚动交付目标为 30–60 分钟；衍生素材或辅助集成目标为 5–10 分钟。仅当需要处理全新或不一致的源素材包、证据关键的机械效果、CAD 或合成时，才安排 75–120 分钟。这些是目标，并非保证。如果超出时间限制，请报告证据，并在继续前获得批准。

5. 分阶段实施

构建语义内容、宏观布局、获批的标志性动效、微状态、响应式构图和编辑润色。将文本、标签和操作保留在 DOM 中，不要将其烘焙进生成的媒体。

防止流程臃肿：先验证媒体，再开始页面开发；每次运行只进行一次提供商和来源研究；验证通过前不要进行多轮重新设计或文档编写；先运行有针对性的组件测试，并在最终集成后运行一次完整回归测试；自动采集技术证据。

当客户端／模型支持子 Agent 时，只要存在两个或更多独立工作流，且委派可以节省时间，就默认并行执行。并行处理来源审查、提供商能力／当前成本、需求简报验证、媒体准备／质量检查、浏览器检查和文档编写。将视觉解读、真实性模式、创意方向、支出和验收交给高能力的多模态主模型；将范围明确的机械性工作交给速度更快且能力足够的模型。绝不能让无法检查媒体的模型负责视觉质量检查，也不能让多个 Agent 同时编辑相同文件，更不能并行执行付费生成、审批或有依赖关系的步骤。做出决策前先汇总各项结果。

6. 验证

每完成一个组件，都要测试指针、键盘、触控、减少动态效果、目标视口、控制台／运行时行为及针对性检查。对于电影级媒体，还要验证身份／数量／几何结构、起始／结束状态、正向／反向拖动、裁切和回退方案。然后运行：

node scripts/audit-motion-safety.mjs <project-directory>
node scripts/validate-scroll-media.mjs <shipping-scroll-master.mp4> \
  --poster <shipping-poster.jpg>
node scripts/validate-package.mjs

严格拦截：如果媒体验证器未通过、首帧解码后海报重新出现、跳转发生重叠、快速改变方向时显示过时或空白画面、海报的裁切或缩放与首个解码帧不一致，或影片仅由静态图像交叉淡入淡出组成，则不要发布拖动浏览器。在完整门槛通过前，请使用编号画布序列或静态回退方案。仅有六个稳定检查点并不足够。

交付前运行项目的完整回归基线。阅读 verification.md。

资源路由

• cinematic-intake.md：必问问题、反对意见、等级、支出和停止规则。
• cinematic-prompts.md：可复用的单动作、旗舰级和示例提示词的精确规范。
• generated-product-scrubber.md： 电影级制作和滚动交付的黄金路径。
• media-pipeline.md：参考资料、ffmpeg、 全帧内视频、帧、海报和交付。
• tool-connections.md：提供商预检和 外部工具边界。
• motion-patterns.md：代码原生动效。
• framework-recipes.md：特定技术栈的 实施方法。
• accessibility-performance.md： 动效安全性和性能。
• prompts.md：面向用户的请求模板。
• source-coverage.md：来源出处和已知 限制。

可复用资源和脚本：

• assets/cinematic-brief.example.json
• assets/creative-acceptance.example.json
• assets/cinematic-scroll-controller.js
• scripts/validate-cinematic-brief.mjs
• scripts/validate-creative-acceptance.mjs
• scripts/higgsfield-preflight.mjs
• scripts/test-cinematic-regressions.mjs
• scripts/render-cinematic-prompt.mjs
• scripts/prepare-scroll-media.sh
• scripts/validate-scroll-media.mjs

完成报告

报告选定方向、媒体等级和真实性模式；参考资料／提供商、模型／设置、尝试次数和积分；变更文件；质量检查和浏览器证据；回退方案；尚未解决的视觉推断；以及发布状态（私有、暂存或生产环境）。