style-library
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseReuse the style library
复用风格库
Read , then . Filter by
style, tier, and purpose before opening individual cards. Read the selected
style's , , and manifest slot limits.
style-library/GUIDE.mdstyle-library/registry.jsonDESIGN.mdtokens.cssFor an overlay, preserve transparency outside the card and the speaker's face.
For a takeover, use an opaque background. Copy the chosen card into the video's
, localize its CSS, fonts, and GSAP dependency, fill its named
values, and wire its timing using the HyperFrames skill. Copying a
card without its relative dependencies does not produce a complete asset.
compositions/data-slotUse for a whole-scene starting point. A media template may
require the student's own ; check its README before rendering.
style-templates/assets/source.mp4The 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.
When adding a style, use , then
complete its design tokens, manifest, and cards. Run
after manifest changes. Keep
project-specific copy in the project, leaving reusable library cards generic.
node scripts/style-library/new-style.mjs 03 my-style "My Style"node scripts/style-library/build-registry.mjs阅读 ,然后阅读 。在打开单个卡片之前,先按风格、层级和用途进行筛选。阅读所选风格的 、 和 manifest 插槽限制。
style-library/GUIDE.mdstyle-library/registry.jsonDESIGN.mdtokens.css对于 overlay(叠加层),保留卡片外部区域和讲者面部的透明度。
对于 takeover(画面接管),使用不透明背景。将选定卡片复制到视频的 ,本地化其 CSS、字体和 GSAP 依赖,使用 HyperFrames skill 填写其命名的 值并配置时序。仅复制卡片而不复制其相对路径依赖,无法生成完整资源。
compositions/data-slot使用 作为整个场景的起点。媒体模板可能需要学生自己的 ;渲染前请查看其 README。
style-templates/assets/source.mp4目录中包含的是草稿资源,并不代表每张卡片都已通过渲染 QA。按项目的实际分辨率对所选卡片进行 lint 和 render,检查其 hero frame 和 transition,并检查槽位文本达到最大长度时的显示效果。
添加风格时,运行 ,然后完成其设计令牌、manifest 和卡片。manifest 发生变化后,运行 。项目专用副本应保留在项目中,使可复用的库卡片保持通用。
node scripts/style-library/new-style.mjs 03 my-style "My Style"node scripts/style-library/build-registry.mjs