1实现原理 · 为什么它能做到
SKILL.md 本身只是路由表/工作流骨架,创作知识全部下沉到 references/ 知识卡、palettes/ 与 frame-presets/ 资产里按需加载——agent 先读哪张卡由任务类型决定,避免一次读全。
| Palette-specific color tokens | `palettes/*.md` |
对抗『网页感』是核心方法论:任何非平凡 composition 强制先读 house-style 与 video-composition 两张卡,前者定义『interpret the prompt, generate real content』与背景/前景层配方。
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.
design-spec 解析有明确规范:frame.md → design.md → DESIGN.md 优先级,frontmatter token 是规范性的『品牌真值』,prose 只作判断上下文。
If a project has a design spec, **read it first** and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints).
提供『拿来即用』的品牌起点资产:12 个 frame-presets(每个 FRAME.md + caption-skin.html + frame-showcase.html)与 9 个 palettes,工作流可把 FRAME.md 整份 adopt 为 frame.md。
- Ready-made frame-preset (optional) → `frame-presets/` (adopt a `FRAME.md` as `frame.md`; see `references/design-spec.md`)
可验证产出由 3 个脚本支撑:contrast-report.mjs 对渲染帧跑对比度审查(bootstrap @hyperframes/producer + sharp,headless 捕获采样帧);extract-audio-data.py 用 numpy/ffmpeg 预抽音频 band 供 audio-reactive 构图。
- `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.
边界纪律写死在 SKILL.md:本技能不做动画(转 hyperframes-animation)、不覆盖 hyperframes-core 技术规则、不为小改动加戏、不一次性读所有卡。
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.
2核心能力
3外部依赖
| 类型 | 依赖 |
|---|---|
| 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风险提醒 风险提醒:黄色 · 留意使用
- 质量完全依赖宿主模型审美:知识卡是风格指导不是判定器,仍有产出平庸/过度设计的空间 — SKILL.md 用大量 'never/do not' 约束(不加戏、不默认设计系统)缓解,但最终判断在 agent。
- 字体检索指引会向 fonts.google.com 发请求并写 /tmp 文件 — 内容公开、本地解析,无凭证;但在离线/受限环境会失败,agent 应回退到随包 woff2。
- CDN 依赖进产物:composition 运行期拉 jsdelivr gsap,渲染需联网或本地 vendor — 属 hyperframes 生态常规做法(core minimal-composition 亦如此),离线渲染环境需预置。
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结论
c11a1f80c92e6741…b8328f9573