mcpField
S
style-library

style-library

github.com/nateherkai创意与媒体2.4k74 次安装2 周前更新
代码仓库

关于 style-library

这是一项 Skill,用于从样式库中挑选并调整可复用的动态图形卡片和模板,以用于视频合成。它还指导资源本地化、插槽配置和渲染质量检查。

主要功能

  1. 01按风格、等级和用途筛选
  2. 02检查设计令牌与插槽限制
  3. 03调整叠加层或全屏卡片
  4. 04本地化 CSS、字体和依赖项
  5. 05执行 lint 与渲染检查

适用场景

  1. 01为视频选择可复用样式
  2. 02在合成中添加卡片叠加层
  3. 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