style-library

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Reuse the style library

复用风格库

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