Choose what should remain editable
Do not animate a stack of complete screenshots merely because they came from a
design tool. Use screenshots for proof; use HTML for the parts that need to
change.
Start from Figma
Send the agent the Figma link and the outcome:/figma skill to import assets, read brand values,
reconstruct editable components, and translate supported motion. Everything
required by the final render should end up as local project source.
For tokens, API credentials, exact CLI commands, and import troubleshooting,
use the Figma integration reference.
Start from Claude Design or Open Design
These tools can establish layout, palette, type, and scene direction before a deeper production pass.- Give the design tool the current HyperFrames instruction file and your real brand material.
- Ask for a valid project rather than isolated mockups.
- Download or save the project to disk.
- Open that folder with a coding agent.
- Let the agent validate timing, motion, media, captions, and rendering.
Judge the handoff
A useful handoff has:- a clear visual direction;
- real assets or honestly labeled placeholders;
- editable source for anything likely to change;
- stable local media and fonts;
- a project that opens and can be checked.