以 skill 自身的术语
用于 HyperFrames 视频的非动画类创意指导，在 hyperframes-core 建立技术契约之后使用。负责设计规范解析（以带 frontmatter 的 frame.md / design.md 作为品牌真相）、调色板、排版、旁白、节拍规划、音频驱动的视觉效果、构图模式以及品牌决策。
对于非琐碎的工作，有两份参考文档会覆盖常见的 web 直觉：house-style.md 说明如何解读 prompt 并通过背景/前景图层方案生成真实内容，而 video-composition.md 定义了视频媒介的尺度、深度和前景细节，以避免出现空洞的网页式布局。若需原子级动作模式、场景 blueprint、transition 和 CSS 标记效果，请改用 hyperframes-animation。
它产出什么
- 使用视频媒介尺度、深度模式以及与品牌一致的色彩与排版进行 HTML composition
- 由 contrast-report.mjs 检查渲染帧无障碍性生成的对比度报告
- 由 extract-audio-data.py 生成的用于音频驱动 composition 的音频频段数据文件
工作方式
- 01先阅读设计规范
如果项目中有 frame.md、design.md 或 DESIGN.md，请先阅读它，并将 frontmatter 中的 token 作为颜色、字体、间距、语气与约束方面的品牌真相。
- 02选择一条视觉方向路线
如果不存在设计规范，可采用 frame-presets/ 中的现成 frame-preset，从 visual-styles.md 中选择一个命名样式，使用 house-style.md 中的快速默认值，或通过 design-picker.md 运行交互式选择。
- 03在编写 HTML 之前先规划节拍
对于多场景作品，在编写 HTML 之前先查阅 beat-direction.md 以规划节奏和时间安排。对于场景转场，请跳转到 hyperframes-animation/transitions/。
- 04应用运动护栏规则
对于以运动为主的作品，先阅读 motion-principles.md 了解高层护栏规则，然后转到 hyperframes-animation 查看原子级运动规则。