HyperFrames Faceless Explainer for Claude Code: Animate a Process
Build a short faceless explainer from notes, with original graphics and a factual storyboard. Use the current HyperFrames explainer reference after the retirement.
中文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 faceless-explainer 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/types/explainer.md` and `skills/hyperframes/references/storyboard.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 faceless-explainer document from before the retirement.
Example task
Give Claude Code the fictional workflow 'Save a draft, review the text, publish the approved version.' Ask for a 9-second diagram-led explainer with three 3-second scenes, simple shapes and no narration. Ask for three reference frames plus a caption-free script that labels each stage.Expected result
The three reference frames show Draft, Review and Publish in that order. The diagram gives each action a different symbol and adds no step or feature absent from the prompt.
Upstream documentation
Original SKILL.md on GitHub · Apache-2.0 license · Source reviewed
Frequently asked question
What replaces faceless-explainer for a video built from notes?
Use the main HyperFrames skill and the explainer reference. Start with a specific situation and use a diagram, text or other original visuals to explain it.