1实现原理 · 为什么它能做到
先过滤再开卡片:读 GUIDE.md(契约)→ 读 registry.json(生成的主索引)→ 按 style/tier/purpose 过滤,最后才打开具体卡片。
.claude/skills/style-library/SKILL.md
Read `style-library/GUIDE.md`, then `style-library/registry.json`. Filter by style, tier, and purpose before opening individual cards.
注:这里在做什么:把 247.7KB 的 registry.json 当「先查再取」的入口,避免把整个库读进上下文;过滤维度由 GUIDE.md 的 ID 方案定义(card id = `<style>.<tier>.<purpose>[.<variant>]`,稳定且自描述)。
复制卡片必须连带相对依赖(CSS、字体、GSAP)并本地化、再填充命名 slot,否则拿到的不是完整资产。
.claude/skills/style-library/SKILL.md
Copying a card without its relative dependencies does not produce a complete asset.
注:这里在做什么:把「复制 HTML 就完事」这个常见坑写成硬规则;slot 上限由选中 style 的 manifest 决定(SKILL.md 要求先读该 style 的 DESIGN.md、tokens.css 与 manifest 槽位上限)。
按用途分两种落地方式:叠加层要保持卡片外与说话人脸部的透明;接管整屏才用不透明背景。
.claude/skills/style-library/SKILL.md
For an overlay, preserve transparency outside the card and the speaker's face. For a takeover, use an opaque background.
注:这里在做什么:与 tier 分层(tier1 接管卡 / tier2 保留说话人可见)匹配的渲染约束,直接决定合成时会不会挡住人。
明确把库定性为草稿资源,并要求在真实项目分辨率下 lint+渲染、检查 hero 帧与转场、用最大长度验 slot 文案。
.claude/skills/style-library/SKILL.md
The catalog contains draft resources, not a promise that every card has passed rendered QA. Lint and render the selected card at actual project resolution, inspect its hero frame and transition, and check slot text at its maximum length.
注:这里在做什么:把「库里的卡未经过成品 QA」写进入口说明,避免使用者误当成品级资产;与 GUIDE.md 的提交/忽略清单(preview MP4 属可重生资产)一致。
扩展路径固定:用生成器新建 style 目录,补齐 tokens/manifest/cards 后重跑索引生成器;项目专属文案留在项目里,库内卡片保持通用。
.claude/skills/style-library/SKILL.md
When adding a style, use `node scripts/style-library/new-style.mjs 03 my-style "My Style"`, then complete its design tokens, manifest, and cards. Run `node scripts/style-library/build-registry.mjs` after manifest changes.
注:这里在做什么:registry.json 是生成物,所以新卡/新风格必须经 build-registry.mjs 重建而不是手改索引——从机制上防止索引与目录漂移。
整场起步另走模板路径:style-templates/ 提供整场起点,媒体类模板可能需要用户自备 assets/source.mp4,渲染前先看其 README。
.claude/skills/style-library/SKILL.md
Use `style-templates/` for a whole-scene starting point. A media template may require the student's own `assets/source.mp4`; check its README before rendering.
注:这里在做什么:把「单卡复用」与「整场模板」两条路分开,并对需要外部素材的模板给出前置检查,避免渲染时才发现缺素材。
库的组织契约在 GUIDE.md:一个 style 一个文件夹、先完整做完一个再开下一个,并明确 _blueprint 是复制骨架而非就地编辑对象。
style-library/GUIDE.md
One style = one folder. We build **one style fully before starting the next**.
注:这里在做什么:用「顺序推进 + 骨架克隆」降低多风格并行带来的不一致;同文件另给三段式 ID 方案(NN-slug 文件夹、slug 作 style id、card id 稳定)与 tier 分层说明。
2核心能力
01风格选择与卡片检索(按 style/tier/purpose 过滤 registry.json,基于三段式 ID 命名)
02卡片复用落地:复制进项目 compositions/、本地化 CSS/字体/GSAP、填 data-slot、按 HyperFrames 接线
03tier 分层使用:tier1 全屏接管卡(论点/大数字/章节标记/引言)与 tier2 陪伴卡(标签/列表/公式/下三分之一)
04整场模板复用(style-templates/,含媒体模板的前置素材检查)
05新增风格包(new-style.mjs 生成骨架 → 补 tokens/manifest/cards)与索引重建(manifest 变更后跑 build-registry.mjs)
06库的契约与结构:style 文件夹内容清单(style.json / DESIGN.md / tokens.css / cards/ / preview)、提交与 gitignore 边界
07风格隔离与通用性纪律:卡片引用 style 级 CSS 变量而非硬编码值;项目专属文案留在项目里
3外部依赖
| 类型 | 依赖 |
|---|---|
| cli | Node 生成器(仓库级,非本 skill 目录内):scripts/style-library/new-style.mjs、build-registry.mjs、gen-kallaway-style.mjs |
| cli | HyperFrames CLI(lint / 渲染,验证所选卡片与槽位文案) |
| package | 卡片/主题引用的第三方资产:GSAP(npm 安装,许可随包)与 Google Fonts(字体许可随发布方;本地化时需保留许可) |
| package | 兄弟资源:hyperframes skill(卡片接线)与 style-templates/README.md(整场模板前置条件) |
4风险提醒 风险提醒:蓝色 · 知晓即可
风险提醒:蓝色 · 知晓即可
- 库与索引的规模使逐卡审计不现实 — registry.json 约 247.7KB、卡片数量多;引入第三方风格包时无法保证每张卡都无外部引用/无凭证残留,需要使用者抽样或加自动化审计(见 second_pass 的 unlocatable 条)。
- Google Fonts 等第三方资产的许可合规由使用者承担 — THIRD_PARTY_NOTICES.md 声明字体许可归发布方,并要求本地化时保留许可;商用发布前需自行核对。
- 示例媒体/品牌素材仍带第三方权利 — THIRD_PARTY_NOTICES.md 明说示例视频与品牌素材的收录不授予第三方权利;把示例资产直接用于发布有侵权风险。
- 「库内卡片保持通用」是纪律性要求,缺少强制检查 — SKILL.md 要求项目专属文案留在项目里,但没有脚本校验卡片是否被塞入项目专属内容(靠人遵守)。
- 卡片未过 QA 的部分只能靠使用者自测 — 在真实分辨率下 lint + 渲染 + 看 hero 帧/转场 + 用最大长度验 slot 文案都是人工步骤;跳过时会以「渲染后才发现槽位断裂」的形式付代价。
风险提醒:蓝色,知晓即可。本 skill 自身目录只有一份 SKILL.md(1.6KB),是纯指令:没有脚本、没有网络端点、没有凭证读取、没有可执行代码;全目录 grep 无 URL、无 process.env、无 fetch。其工作流落到本机的部分都是本地读写与本地生成器——把选中的卡片复制进项目 compositions/、本地化 CSS/字体/GSAP、填 data-slot(写项目文件),以及运行仓库级 Node 生成器 scripts/style-library/new-style.mjs 与 build-registry.mjs 重写 style-library/registry.json。唯一涉及第三方的部分是资产层:卡片/主题引用 Google Fonts(字体许可随发布方,THIRD_PARTY_NOTICES.md 有声明),属「产物期引用」,由浏览器端或本地化时拉取,不构成执行期外发,故不因此升档。
5第二遍独立确认
- [ok] SKILL.md 是否真的只有指令、没有夹带脚本或端点 — 目录仅 SKILL.md;全文无 http、无 fetch、无 process.env;唯一的命令是本地 node 生成器与 HyperFrames 验证命令。
- [ok] 指名的生成器与库路径是否真实存在(避免文档指向空气) — style-library/{GUIDE.md,registry.json,01-vox-explainer,02-kallaway,_blueprint}、style-templates/{README.md,left-glass-popout,dark-graph-paper-template}、scripts/style-library/{new-style.mjs,build-registry.mjs,gen-kallaway-style.mjs} 均在工作副本内可定位。
- [ok] 「目录是草稿资源」这一质量声明是否与库内实际状态相符(有没有夸大) — GUIDE.md 写明 Committed 与 Gitignored 的分界(preview MP4 循环不入库、可由卡片重生),SKILL.md 也明说卡未保证过渲染 QA;两者一致,属诚实标注而非夸大。
- [unlocatable] 卡片是否含硬编码凭证或外部跟踪(供应链面) — 本次只读侦查未逐张打开 style-library/cards/ 下全部卡片 HTML(registry.json 247.7KB,卡数众多)。已确认的第三方面是 Google Fonts 引用(THIRD_PARTY_NOTICES.md 声明);「每张卡是否只用 tokens.css 变量而无外部脚本」需逐卡审计,本报告不据此下结论。
- [ok] 新增风格流程会不会破坏既有索引 — SKILL.md 要求 manifest 变更后跑 build-registry.mjs,且 GUIDE.md 要求从 _blueprint 克隆而非就地改;索引重写是显式步骤,不存在「手改索引导致漂移」的鼓励。
6结论
适合:适合已在用该教学包做 HyperFrames 视频、需要「选一个视觉风格 → 取可复用卡片/整场模板」的人:尤其适合按 tier 分层批量产出图形(接管卡 vs 陪伴卡),或想扩展自有风格库(new-style 起骨架 → 补 token/manifest → 重建 registry)的制作者。
不适合:不适合:① 期望「卡片即成品、直接可用」的用户——库是草稿资源,仍需在真实分辨率下 lint+渲染并用最大 slot 文案自检;② 不使用 HyperFrames 的工程(卡片接线依赖 hyperframes skill 与 GSAP 契约);③ 需要严格第三方资产溯源与许可保证的商用场景(Google Fonts/示例媒体的权利归各自发布方)。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 style-library.tar.gz
sha256:
方式 B · JSON 格式安装指南,复制给 agent2463b10b86691d38…agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nateherkai / nateherkai/hyperframes-student-kit
原始 GitHubnateherkai/hyperframes-student-kit ↗
Stars1070
最近推送2026-09-28
本 skill commit
0d30152a82许可MIT(仓库根 LICENSE = MIT License, Copyright (c) 2026 Nate Herk);另有 licenses/PIPELINE-USE-PERMISSION.txt(教学包再分发授权)与 licenses/HYPERFRAMES-LICENSE(Apache-2.0,随包 HyperFrames skill 的上游许可);GitHub API 因附加许可把仓库标为 NOASSERTION
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源:本站锁定 commit 快照经 /r2 分发;GitHub 为实时上游,内容可能已更新。