design-to-motion (ai-design-skills)
design-to-motion (ai-design-skills) is an agent skill in our Motion graphics category. Elaya's MIT agent skill (Claude Code, Cursor, Codex): rebuilds a Figma frame or screenshot pixel-exact in HTML, then every visual acts out a looping story (lists receive items, charts get scrubbed, prompts retype). Deterministic Playwright fake-clock capture to an MP4 for X plus 960px and 800x500 GIFs, or a scroll-triggered website mode. Repo #1 on GitHub trending Oct 27; the skill is moving to its own repo (elayadesign/Design-to-motion, not public yet). Companion: landing-page-design.
Where it fits: Motion graphics skills.
Listing isn’t endorsement. This is our summary of the project’s own docs. Check the licence and requirements at the source before you build on it.
Lab posts that cover design-to-motion (ai-design-skills)
Related Lab posts
- Motion2Code: let a video model design the motion, then have your agent rebuild it as editable SVG + GSAP
- Framefields: code-first video for agents that renders on the GPU, with no headless Chrome
- huashu-motion: an open skill that writes the launch film, scores it, and lets you point at the frame to fix it
- motion-prompt: a clickable dictionary of motion names your agent can build from
- Remotion 4.0.536–537: a real editing timeline, then After Effects–style effects
Similar skills & repos
- motion2code · Skill, Motion graphics
- ffmpeg-skill · Skill, Motion graphics
- huashu-motion · Skill, Motion graphics
- lemo-opuscar · Skill, Motion graphics
- claude-motion-explainer · Skill, Motion graphics
- whiteboard-teacher-video · Skill, Motion graphics