Description
claude-design-hyperframes is a skill from HeyGen's HyperFrames project for running inside Claude Design. It produces a valid, brand-accurate HyperFrames video draft from pre-valid skeletons. HyperFrames compositions are plain HTML, CSS and a paused GSAP timeline, and the CLI turns that HTML into an MP4 when the user renders it locally. In this mode the assistant does not use the copy_starter_component tool, the built-in Animated video skill or React and Babel. It writes plain HTML and GSAP only, and it is positioned as a rapid prototyping tool rather than a motion design tool. The skill defines a three-step handoff. Claude Design handles brand identity, scene content, layout, first-pass animations and shader choices. The user downloads the ZIP, which is a valid HyperFrames project. Then Claude Code or another AI coding agent handles animation polish, timing, pacing and production checks, such as linting and live preview. The draft is meant to open in that next tool with no structural fixes needed, so the assistant's job is the creative decisions, not the project scaffolding. It suits designers who want a first version of a branded motion piece that a developer can then refine. It passes Gen Agent Trust Hub and Socket on skills.sh, and Snyk shows a warning. It has about 2,000 installs. Install it with npx skills add https://github.com/heygen-com/hyperframes --skill claude-design-hyperframes.…
Highlights
- Produces a valid HyperFrames draft from pre-valid skeletons
- Plain HTML, CSS and GSAP, with no React
- Three-step handoff from Claude Design to Claude Code
- Focused on brand identity and layout, not final motion
Ratings & Reviews
No ratings yet
Be the first to rate claude-design-hyperframes.
People also visit
graphic-overlays
Package an existing talking-head / interview / podcast video by layering timed
claude-design-hyperframes FAQ
What does it produce?
A valid HyperFrames project draft, delivered as a ZIP, that can be opened and refined without structural fixes.
Who renders the video?
The user renders locally with the HyperFrames CLI. The assistant writes the HTML.
What happens next?
The draft goes to Claude Code or another coding agent for animation polish, timing, linting and preview.
How do I install it?
Run npx skills add https://github.com/heygen-com/hyperframes --skill claude-design-hyperframes.
What are the best claude-design-hyperframes alternatives?
Popular alternatives to claude-design-hyperframes include slideshow, figma and animejs. See all claude-design-hyperframes alternatives