关于 style-library
这是一项 Skill,用于从样式库中挑选并调整可复用的动态图形卡片和模板,以用于视频合成。它还指导资源本地化、插槽配置和渲染质量检查。
主要功能
- 01按风格、等级和用途筛选
- 02检查设计令牌与插槽限制
- 03调整叠加层或全屏卡片
- 04本地化 CSS、字体和依赖项
- 05执行 lint 与渲染检查
适用场景
- 01为视频选择可复用样式
- 02在合成中添加卡片叠加层
- 03按项目分辨率验证卡片
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ nateherkai/ hyperframes-student-kit --skill style-library安装后在 Claude Code 中输入/style-library确认已加载。
详细介绍
复用风格库
先阅读 style-library/GUIDE.md,再阅读 style-library/registry.json。按风格、层级和用途筛选,然后再打开单张卡片。阅读所选风格的 DESIGN.md、tokens.css 和清单中的插槽限制。
对于叠加层,卡片和说话者面部以外的区域应保持透明。
对于全屏替换,使用不透明背景。将选定的卡片复制到视频的 compositions/ 中,在本地配置其 CSS、字体和 GSAP 依赖,填入其命名的 data-slot 值,并使用 HyperFrames 技能配置时间。复制卡片时若未包含其相对依赖,就无法得到完整资源。
使用 style-templates/ 作为完整场景的起点。媒体模板可能需要学生提供自己的 assets/source.mp4;渲染前请查看其 README。
目录中包含的是草稿资源,并不保证每张卡片都通过了渲染 QA。请在实际项目分辨率下检查所选卡片并进行渲染,检查其主视觉帧和转场,并确认插槽文本在达到最大长度时的效果。
添加风格时,请使用 node scripts/style-library/new-style.mjs 03 my-style "My Style",然后补全其设计令牌、清单和卡片。修改清单后运行
node scripts/style-library/build-registry.mjs。将项目专属文案保留在项目中,让可复用的库卡片保持通用。
评论
支持 Markdown