Motion Frames Skill 用于生成一个全出血的单帧动态构图。它只使用内联 CSS 动画，页面本身就是循环。可以把它看作一张海报帧，供导出器（HyperFrames、Lottie 等）捕获成视频。
用途
该技能面向动态设计场景，产出 16:9 的 hero 构图，适合作为视频导出的源帧或动态海报。
工作流程
首先读取当前生效的 DESIGN.md（在上下文中注入）。动态设计成败取决于字体对比度——标题选用设计系统中最具表现力的衬线/展示字体 token，其余内容用正文/等宽 token 标注。
画布按 16:9 hero 构图，从后到前包含以下图层：
- 舞台（Stage）：全出血 <main>，米白或设计系统画布背景，带非常细微的点状网格纹理（CSS background，radial-gradient 圆点，间隔 22–32px）。
- 同心圆环：2–3 个 SVG 圆从焦点向外辐射，超细描边（0.5–1px），使用设计系统前景色低透明度，以不同速度旋转（60s、90s、180s）。
- 焦点标记：线框地球、风格化物体或排版字母组合，以内联 SVG 绘制，约占画布宽度 28%。
- 圆环标签：短词或语音 token 环绕在某个圆环上（如 "Hola · Bonjour · 你好 · नमस्ते"），随圆环共同旋转，<text> 路径反向旋转使文字保持直立。
- 标题：位于左下或底部居中，展示衬线字体，某个词用斜体强调，带细微 letterSpacing + opacity 显现动画（@keyframes type-in）。
- 边框装饰：角落印记（左上实验室标签、右上品牌或期号）和一条细基线，静态。
动画仅用 @keyframes，不使用 JS：
- rotate-slow、rotate-med、rotate-fast 用于圆环。
- globe-spin 用于焦点标记。
- pulse 用于焦点圆点，约 2s，带缓动。
- marquee-fade 在加载时显现标题一次。
输出为单个 HTML 文档：
- 从 <!doctype html> 到 </html>，CSS 内联。
- 所有动态使用 CSS，无脚本，使 HyperFrames 或任何帧捕获器能确定性地捕获。
- 在 stage、focal、ring、headline、chrome 上添加 data-od-id。
自检
- 构图在暂停于第 0 帧时仍能作为海报阅读。
- 至少 3 个图层以不同速度移动（深度来自速度差，而非视差技巧）。
- 强调色只出现一次——通常是标题中的斜体词。
输出契约
在 <artifact> 标签之间输出：
<artifact identifier="motion-slug" type="text/html" title="Motion — Title"> <!doctype html> <html>...</html> </artifact>
artifact 之前一句话，之后不加任何内容。