HyperFrames Creative for Claude Code: Design a Brand Title Card
Use the maintained HyperFrames design references to build a readable branded title card. This guide preserves the context of the retired Creative skill.
中文Setup for Claude Code (current HyperFrames replacement)
Claude Code, Node.js 22 or newer for the local HyperFrames CLI, and a disposable project. The separate hyperframes-creative skill was retired upstream. This example uses its maintained /hyperframes workflow.
- Run `claude plugin marketplace add heygen-com/hyperframes` and `claude plugin install hyperframes@hyperframes` in a terminal. Start a fresh Claude Code session in a scratch project.
- Ask the agent to load /hyperframes and read `skills/hyperframes/references/look.md` and `skills/hyperframes/references/spec.md` from the installed bundle or the upstream v0.9.53 tree. Use `npx hyperframes@0.9.53` for the pinned CLI when running the example's checks.
- For historical reading, the original GitHub source below preserves the standalone hyperframes-creative document from before the retirement.
Example task
Give Claude Code a fictional brand, 'Field Atlas', with ink #112233, paper #F7F3E8, and accent #0B7765. Ask for a 3-second 1920×1080 title card with one two-line headline, one accent rule, no stock assets, and key text inside the central 80% title-safe area. Inspect a settled frame at 1.5 seconds.Expected result
The frame shows both headline lines within the 1536×864 title-safe box. The only accent colour belongs to the rule and the title uses the assigned ink colour.
Upstream documentation
Original SKILL.md on GitHub · Apache-2.0 license · Source reviewed
Frequently asked question
Does the Creative reference replace the animation rules too?
Use the look and specification references for visual direction, typography and palette. Use the separate motion reference to choose animation timing and easing.