threeaus/creator-style-kit

Creator Style Kit

The kit lives in this skill's folder: KIT=/Volumes/ORICO/Opus/creator-style-kit (on the ORICO drive — if the path is missing, ask the user to mount it). It is a design system on top of HyperFrames: the /hyperframes workflow still owns project setup, narration and rendering; this skill decides how every scene looks, moves and sounds.

Workflow

1. Pick the style (skip if the user named one).
   • python3 $KIT/scripts/list_styles.py prints the live catalog (id · name · best_for · essence).
   • Use the table below; recommend one main style + at most one accent style for hooks/code segments, with a one-line reason each.
   • Offer the previews: /Volumes/ORICO/Opus/风格样张_18套_一览.jpg (stills) and 风格样张_18套.mp4 (motion + sound).
2. Read the brief before building: python3 $KIT/scripts/list_styles.py <id>. Its not: lines are hard rules (one accent, no glow, etc.) — 高级感 comes from obeying them.
3. Build scenes. Standard beats (chapter card / headline + list / big number) → write a beats file and run python3 $KIT/scripts/scaffold.py <id> <project> --content beats.json [--init] (--init only for a fresh project; otherwise paste the printed host <div> into index.html). Custom scenes → follow the markup contract and kit.* API in REFERENCE.md. Beat lengths come from the style's pacing (see REFERENCE.md "Pacing"); pass "dur" only to stretch a beat to its narration — never to squeeze it.
4. Re-subset fonts after all text is final: python3 $KIT/scripts/build_style.py <id> <project> (once per style used). Fonts only contain glyphs present in the project's .html at build time — stale builds show tofu/fallback glyphs.
5. Verify the picture: npx hyperframes check then npx hyperframes snapshot --at … at each beat's "holds until" time (in the generated script comments) — everything should be settled there (emphasis visible, nothing overflowing, accent used once).
6. Sound pass after rendering: python3 $KIT/scripts/sound_pass.py <project> renders/<x>.mp4 [--voice vo.wav] [--music bed.wav]. Fix every FAIL by changing cues or sounds (≤ 2 rounds), look at audio/qa.png, and hand over out/final.mp4 + LISTEN.md. Report what the checks show; don't call the sound good — the user listens.

Which style

Scene	Main	Alternative
Benchmark results, score reveal	data-journal	benchmark-hud
Model A vs B, version upgrades	data-journal	instrument-panel
Specs: price / speed / context	instrument-panel	swiss-grid
Launch opener, title card	frosted-aurora	dark-keynote, particle-field
Paper / tech-report explainer	paper-figure	manim-morph
How it works (attention, reasoning)	manim-morph	particle-field
Architecture, agent workflow	blueprint	isometric-stack
Layers (tech stack, context makeup)	isometric-stack	blueprint
Concept frameworks, "3 elements"	bauhaus-geometry	swiss-grid
Claude / Opus topics, opinion pieces	clay-serif	editorial-paper
Screen recordings, prompts, code	dev-console	instrument-panel
Beginner tutorial, friendly tone	warm-notebook	clay-serif
History / culture / festival specials	ink-wash	editorial-paper
First-3-second hook, chapter stings	poster-kinetic	bauhaus-geometry

Typical pairing: an evaluation video in data-journal, opened with frosted-aurora, with code segments cut to dev-console. Don't use poster-kinetic or benchmark-hud for a whole video (they tire fast; HUD looks are common in AI videos).

Rules that always apply

• Never invent benchmark numbers. Use figures the user supplies or that you can cite; put the citation in the beats file's source (data-journal footer) or caption (paper-figure). Placeholder figures must be labelled "示例数据" on screen.
• No logos or brand marks. clay-serif borrows Anthropic's public palette only.
• One <em> per beat: it marks the single emphasised word and drives the emphasis effect.
• Sound stays sparse: each style's sound.rules (maxPerSecond, silentShare) caps the density, enforced by compose.py. Don't add cues by hand on top; one sound per list, the reveal on the lock.
• Pace for reading, not for speed: one thing moves at a time, the key figure holds ≥ 2 s. If a video feels slow, cut content — don't shorten holds.
• All layouts are 1080×1920 (9:16). A 16:9 video needs new layouts — say so instead of stretching.

Extending

To add a style, change a palette, or fix a layout, see "Adding a style" in REFERENCE.md. Then regenerate the previews with python3 $KIT/scripts/lookbook.py $KIT/lookbook and render.