1实现原理 · 为什么它能做到
SKILL.md 本身只是路由表/工作流骨架，创作知识全部下沉到 references/ 知识卡、palettes/ 与 frame-presets/ 资产里按需加载——agent 先读哪张卡由任务类型决定，避免一次读全。
skills/hyperframes-creative/SKILL.md
| Palette-specific color tokens | `palettes/*.md` |
Routing 表列出约 17 个主题（house-style/visual-styles/composition-patterns/video-composition/beat-direction/narration/typography/audio-reactive…），每个指向一个文件；Workflow 节规定 'read it first' 的对象。
对抗『网页感』是核心方法论：任何非平凡 composition 强制先读 house-style 与 video-composition 两张卡，前者定义『interpret the prompt, generate real content』与背景/前景层配方。
skills/hyperframes-creative/SKILL.md
Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.
这里在做什么：用『概念生成』替代『字面 restyle』——house-style.md 的说明文本（'This is what turns a literal restyle into a _concept_'）直接写进了 SKILL.md 引言。
design-spec 解析有明确规范：frame.md → design.md → DESIGN.md 优先级，frontmatter token 是规范性的『品牌真值』，prose 只作判断上下文。
skills/hyperframes-creative/SKILL.md
If a project has a design spec, **read it first** and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints).
配套 references/design-spec.md：'Prose is context — the `##` sections (Overview, The Frame, Composition Rules, …) carry intent, when-to-use, and constraints the tokens can't hold.'
提供『拿来即用』的品牌起点资产：12 个 frame-presets（每个 FRAME.md + caption-skin.html + frame-showcase.html）与 9 个 palettes，工作流可把 FRAME.md 整份 adopt 为 frame.md。
skills/hyperframes-creative/SKILL.md
- Ready-made frame-preset (optional) → `frame-presets/` (adopt a `FRAME.md` as `frame.md`; see `references/design-spec.md`)
manifest 实测 frame-presets 含 biennale-yellow/blockframe/blue-professional/bold-poster/broadside/capsule/cartesian/cobalt-grid/code-editorial（自带 woff2 字体与 OFL 许可）/coral/creative-mode/daisy-days/editorial-forest 等目录。
可验证产出由 3 个脚本支撑：contrast-report.mjs 对渲染帧跑对比度审查（bootstrap @hyperframes/producer + sharp，headless 捕获采样帧）；extract-audio-data.py 用 numpy/ffmpeg 预抽音频 band 供 audio-reactive 构图。
skills/hyperframes-creative/SKILL.md
- `scripts/contrast-report.mjs` — inspect contrast warnings from rendered frames. - `scripts/extract-audio-data.py` — pre-extract audio bands for audio-reactive compositions. - `scripts/package-loader.mjs` — support script for bundled creative tooling.
contrast-report.mjs 实测 importPackagesOrBootstrap([@hyperframes/producer, @hyperframes/core, @hyperframes/core/compiler, sharp]) 并 createCaptureSession/captureFrameToBuffer——即真的驱动渲染捕获管道读帧，非提示词检查。
边界纪律写死在 SKILL.md：本技能不做动画（转 hyperframes-animation）、不覆盖 hyperframes-core 技术规则、不为小改动加戏、不一次性读所有卡。
skills/hyperframes-creative/SKILL.md
Do not override `hyperframes-core` technical rules. Do not require a design system for a minimal technical composition. Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
『本 skill 是刻意 non-animation』——与 hyperframes-animation（rules/blueprints/transitions/adapters）形成互补分工，防止知识越界导致 motion 规则不一致。
2核心能力
01设计规范（frame.md/design.md/DESIGN.md）读取、优先级裁决与 frontmatter 解析
0212 套即用 frame-preset 与 9 组 palette 的选用/adopt（品牌落地）
03构图模式库：PiP、text-behind-subject、title card、slide show、data-in-motion 等
04叙事与节拍：story doctrine、narration 脚本节奏、per-beat 方向与转场时机
05音频响应视觉的数据准备：预抽取音频 band 供运动绑定
06渲染后对比度/设计一致性审查（contrast-report、design-adherence）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| package | @hyperframes/producer / @hyperframes/core / sharp（contrast-report.mjs 经 package-loader 按需 bootstrap） |
| cli | python3 + numpy + ffmpeg（extract-audio-data.py 解码与频段分析） |
| network | Google Fonts metadata API（找字体时 agent 被指引 curl 查询） |
| network | GSAP CDN（frame-showcase/design-picker 预览 HTML 引 jsdelivr gsap；属产物运行依赖而非 skill 自身外发） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: node skills/hyperframes-creative/scripts/contrast-report.mjs（本地捕获渲染帧分析；缺依赖时
- scripts/ 或 SKILL.md: 声明动态安装外部语言包依赖
- 网络端点: 声明外部网络访问: fonts.google.com/metadata/fonts（agent 被指引的可选 curl，保存到 /tmp 本地 json）
- 本地工作目录: 文件读写与工件输出: 创作产出：frame.md/design.md/DESIGN.md 与 composition HTML（agent 按工作流写项目文件）
审计说明： 。无凭证读取、无密钥接触，但存在两处公开网络外发：① typography.md 明确指引 agent `curl -s 'https://fonts.google.com/metadata/fonts'`（公开字体元数据，可选执行）；② contrast-report.mjs 缺依赖时经 package-loader 征求同意后从 npm 装 @hyperframes/producer/@hyperframes/core/sharp（官方/公开包，--ignore-scripts 抑制依赖生命周期脚本）。外发对象均可预期、不含 token，故未达 orange；按『有网络外发即按对象分级』取 yellow。脚本平时只读渲染帧/音频文件并本地输出。
5第二遍独立确认
- [ok] 『脚本目录无网络外发』 — 对 hyperframes-creative 全部 .mjs/.py/.md 做 http(s) 扫描：命中仅 design-picker/showcase 的 jsdelivr gsap、caption-skin 的 gsap、typography.md 的 fonts.google metadata、design-picker.md 的 localhost 提示——无脚本级外发。
- [ok] contrast-report.mjs 能力真实存在（非提示词） — 源码确认 bootstrap @hyperframes/producer/@hyperframes/core/[email protected] 并调用 createCaptureSession/captureFrameToBuffer/closeCaptureSession，输出 .hyperframes/contrast。
- [ok] frame-presets/palettes 资产计数 — find 实测：frame-presets 含 12+ preset（每套 FRAME.md/caption-skin/frame-showcase，code-editorial 附字体与 OFL）、palettes 9 个 md、references 17 个 md，与 SKILL.md 路由表指向一致。
- [discrepancy] 安全结论有无漏网（CDN 是否被误当无外发） — 第一遍初判『无网络』需修正：产物/预览 HTML 引用 jsdelivr gsap、字体检索指引 curl fonts.google.com——均非 skill 脚本自身外发而是 agent/运行时行为，已如实列入 external_deps 并据以定级 yellow（统一分档：存在公开网络外发即不低于 yellow）。
- [ok] 与动画技能分工声称 — SKILL.md 引言与 Boundaries 两处声明 non-animation 并指向 hyperframes-animation；animation SKILL.md 亦反向声明 creative 管非动画方向，双向一致。
6结论
适合： 适合 HyperFrames 任何非平凡 composition 的视觉/叙事/品牌阶段（multi-scene、有设计规范、有品牌要求）；是 hyperframes 路由下各创作工作流进入设计阶段时的必读知识层。
不适合： 不适合动画实现细节（转 hyperframes-animation）、HTML 技术契约（转 hyperframes-core）、素材获取（转 media-use）；不需要设计系统的最小技术 composition 也应跳过本技能直接写（SKILL.md 'Do not require a design system for a minimal technical composition'）。
Install Agent-Ready
① Verified Mirror 2026-09-09
Option A · Direct DownloadDownload hyperframes-creative.tar.gz
sha256:
Option B · Copy Guide for Agentc11a1f80c92e6741…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit b8328f9573.