HyperframesTop pick
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips…
Video & Motion
HeyGen79k
Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed motion (frames read as states, not slides), shaders and connector-assisted motion. Use when the person pastes a figma.com link or asks to use a Figma design, frame, logo or brand.
Install
Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.
$ npx skills add heygen-com/hyperframes --skill figmaNeeds Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.
How to use Figma
Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /figma.
It includes scripts that Claude may run on your computer, so skim them on GitHub before you install.
What the instructions cover
- 1Access
- 2Commands
- 3Motion (connector)
- 4Shaders
- 5Storyboards: frames are KEYFRAMES, not slides
Section headings from the skill's SKILL.md file.
What's inside · 2 files
- SKILL.md
- scripts/verify-motion.mjs
More from HeyGen
See all →Hyperframes CLI
The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and…
Video & MotionHeyGen79k
Hyperframes Registry
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera…
Video & MotionHeyGen79k
Media Use
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks…
Video & MotionHeyGen79k
More Claude skills for design
See all →Frontend DesignTop pick
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't…
Design & UI
Anthropic187k
UI UX Pro MaxTop pick
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design…
Design & UI
NextLevelBuilder145k
Taste SkillTop pick
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals…
Design & UI
Leon110k
Impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages…
Design & UI
Paul Bakaus103k