design-to-motion: a free agent skill that turns a static design into a looping MP4 and GIF showcase

What it is. ai-design-skills by designer Elaya (@elayadesigns) is an MIT collection of markdown skills for Claude Code, Cursor, Codex and anything else that reads a rules file. The landing-page-design skill is what went viral. The part for video people is design-to-motion, added on Oct 25: give the agent a static design (a Figma frame, a bento card set, a dashboard, an app screen or a UI on a photo) and it builds an animated showcase. Per the skill, the default deliverables are an MP4 sized for X, a 960px website GIF and an 800x500 GIF. The repo was #1 on GitHub's daily all-languages trending list this afternoon (+1,395 stars, about 9,200 total), and curators including @GitHub_Daily and @designertom have written it up.

How it works, per the SKILL.md. It's strict about fidelity. The agent first rebuilds the design so the finished still matches the source. From Figma, it pulls the node tree and a reference render through the REST API (it tells the agent never to print or commit the token). From a screenshot, it rebuilds surfaces in CSS, retypes text, redraws icons as SVG and lifts only photos as crops. It also has to tell you what it guessed, such as the font or any area hidden behind a card. Then the motion: the frame starts empty, loads in, and each visual 'acts out its story' on a loop. A lead list receives a new item, a chart gets scrubbed, a prompt deletes and retypes, a calendar finds a slot. Each card runs one story of three to eight seconds, offset so attention moves in reading order, and every story ends on the exact design.

The capture step is worth copying even if you never use the skill. It never screen-records. A Playwright fake clock steps whole-millisecond ticks that average 1000/60, screenshots every frame, and drives CSS transitions from the same clock. The result is a deterministic 60 fps frame sequence with a clean loop seam, which ffmpeg then encodes (H.264 at CRF 15 for X, palettegen GIFs for the web). Before encoding, the skill runs overflow checks against the empty first frame. It also has a website mode that animates bento cards on scroll instead of exporting video.

One thing to know before you install it. At about 9:57 AM MDT today, Elaya moved design-to-motion out of ai-design-skills into its own repo, elayadesign/Design-to-motion. That repo wasn't public when we checked this afternoon. The source link above points to the last public version of the SKILL.md (about 560 lines), which still loads by commit. Expect changes when the new repo opens.

Our take: this is the most practical new piece for anyone who makes product launch clips, SaaS feature loops or animated portfolio posts from existing design files. It overlaps with motion2code, which rebuilds an AI-generated clip as editable SVG and GSAP. design-to-motion starts from the design instead and keeps it pixel-exact. As always, the claims about output quality are the creator's and the community's.