Turn a Design or App Screen into Motion with Claude

What is the fastest way to animate a static design with Claude?

Checked 2026-10-27. The question comes from a post by @elayadesigns on 2026-10-24: a reel of landing pages made "using @higgsfield, Claude, and Cursor with my custom AI designer skill", with about 10.8K likes and 18.9K bookmarks when we checked. The skill is free and open source. This guide covers it (Route A), the artifact route inside Claude (Route B) and the Claude Code route with Remotion or HyperFrames (Route C), with what each one cannot do.

None of the three routes needs a video generation model. In each one Claude writes HTML, CSS or React that redraws your design, animates it, and a renderer turns the frames into an MP4 or GIF. That is why the result can be pixel-exact and why a one-line change later is cheap. For the general picture of making motion with Claude, start at How to make motion with Claude.

Route A: How does the design-to-motion skill work?

design-to-motion is one of two skills in elayadesign/ai-design-skills (MIT, about 8,500 stars and last pushed 2026-10-26 when checked). A skill here is a single Markdown file, SKILL.md, that your coding agent reads as rules. The README installs it into Claude Code (copy the folder to .claude/skills/), Cursor (.cursor/rules), Codex (AGENTS.md), Windsurf or Cline, and for Claude.ai without a terminal you upload SKILL.md to a Project or attach it to a chat and say "follow this" (README). It is listed with other motion skills in Agent skills for motion.

The SKILL.md promises one thing: the viewer sees the exact design, and sees that it is alive. Its sequence: exact frame, empty state, smooth load, every visual acting out its story, then a seamless repeat. It is for showcase loops and landing-page sections, not for hover, menu or toast motion inside a shipping product, which it hands to emilkowalski/skills.

Step by step with design-to-motion

1. Install the skill. In Claude Code: clone the repo and copy skills/design-to-motion into .claude/skills/. Then ask in plain language, for example "animate this dashboard as a showcase loop" (README).
2. Give it the source. A Figma link with a node id is best: the skill reads the Figma REST API with a personal access token kept in an environment variable or the OS keychain, renders the frame at 2x as the reference image, and exports every moving layer as a 3x PNG. A screenshot also works, but every element is rebuilt or lifted out of the pixels; the skill asks once for the highest-resolution PNG you have (2x or 3x, uncropped, not JPEG) and, if the UI sits on a photo, the original background image (SKILL.md, A2 and A3).
3. Answer the intake in one batch. Showcase or website; what sits behind the UI; which parts should act out a story; which deliverables you want; camera, which defaults to no zoom and no pan. Claude decides itself whether the design is an app frame (joined surfaces such as a sidebar and body) or separate cards (bento, widgets) (SKILL.md, A1).
4. Claude rebuilds the frame as HTML. From Figma it places the exported layers. From a screenshot, surfaces, buttons, bars and gradients become CSS with sampled colours; text is retyped in a matching font or, if no font matches, lifted out of the pixels as a transparent layer; recognisable icons become SVG; photos and avatars are cropped. Before any motion it compares the still with the reference and tells you what was rebuilt, lifted, not separable or guessed (SKILL.md, A2, A3 and A7).
5. Then the motion. The page starts empty, loads in, and each visual acts out one story: a chart being read, a list receiving items, a prompt being typed. The frame then dissolves and the cycle repeats, so the loop has no seam. A story must still read in the 800x500 GIF, so elements under about 4px get enlarged or a halo (SKILL.md, Part B).
6. Export. The skill never screen-records in real time. A headless Chrome script installs a fake clock, steps it in whole milliseconds that average 1000/60, and screenshots every frame; FFmpeg then encodes name-x.mp4 (H.264, yuv420p, 60fps, CRF 14-15, at most 1920x1200 for X), name-loop.gif (960px wide, 15-20fps, about 2-3 MB) and name-800x500.gif (SKILL.md, Part C).

Limits the skill states itself. A lifted layer is only as sharp as the screenshot, and a 1x screenshot gives a softer result than a Figma build. Anything hidden behind a card or panel does not exist in a screenshot; with a photo background the skill must either get the original image, inpaint the hidden parts and say so, or keep the surfaces static and load only their contents. Lifted text can type and delete but cannot count, because counters need live text in a matching font (SKILL.md, A2). Not stated in the skill: the export step runs headless Chrome and FFmpeg (SKILL.md, C1), so both must be installed wherever your agent runs, and motif has not tested an export from a Claude.ai upload.

Route B: Can Claude Design turn a design into a video?

Not directly. Claude Design is an artifact template you can start in any chat, in Claude Code and from the Artifacts tab, and you can attach screenshots or a codebase as context (Claude Help Center: Claude Design). Its Export menu lists: Download as .zip, Export as PDF, Export as PPTX, Export to Google Slides, Export as standalone HTML, Send to Adobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel or Wix, and Handoff to Claude Code (local coding agent or Claude Code Web). MP4 is not on the list. In the artifacts overview, only animations, meaning the Motion template, export as MP4 (Claude Help Center: artifacts).

From a Claude Design artifact to an MP4

1. Start a Design artifact, attach the screenshot or Figma export and your design system, and ask for the animated version as a working HTML prototype (Claude Help Center: Claude Design).
2. Export as standalone HTML when a web page that animates is enough: for a landing page section, a demo link or an embed.
3. For a video file, give Claude Design HyperFrames' Send-to guide and choose Send to Hyperframes. That guide says the composition is imported into a hosted HeyGen project, previewed, and rendered to MP4 in the cloud; it must be one self-contained HTML file, with assets inlined or at public URLs. By the same guide, import is free and the render is the paid step: 3 renders a month on a free account, 20 credits per rendered minute on paid plans (HyperFrames: Send to HyperFrames).
4. Or give Claude Design HyperFrames' Template-First instruction file, Download as .zip and open the folder with Claude Code. That guide treats the design as a first draft that Claude Code polishes (easing, stagger, scene length) and renders locally with npx hyperframes render (HyperFrames: Claude Design + HyperFrames, HyperFrames docs: bring in a design).
5. Or use Handoff to Claude Code and continue with Route C in Remotion or HyperFrames.

Claude Motion is the artifact that does export MP4. It is in beta on Team and Enterprise plans, on by default on Team and off by default on Enterprise until an owner turns it on in Organization settings > Artifacts. Claude builds the animation from your prompt as code that animates the text, charts, shapes and images in it; the help article says to attach the report, data or images you want used so it is built from your own content, and to click Export > MP4. It uses no video generation model, so no realistic footage or people (Claude Help Center: Claude Motion). The article documents attaching images, not rebuilding them layer by layer, so do not expect Route A's pixel-exact replica from a pasted screenshot. Plans and limits are compared in Claude Motion explained.

Route C: Claude Code with Remotion or HyperFrames and real screenshots

This is the route for a launch film rather than a loop: several scenes, a voice, music, two aspect ratios. Remotion renders React components to video with npx remotion render, H.264 by default (Remotion docs: render, Remotion docs: encoding); its agent skills install with npx skills add remotion-dev/skills (Remotion docs: Agent Skills). HyperFrames, made by HeyGen, turns HTML, CSS, media and seekable animations into deterministic MP4s; it is Apache 2.0, needs Node.js 22 or newer, and installs in Claude Code with claude plugin marketplace add heygen-com/hyperframes then claude plugin install hyperframes@hyperframes. Its releases were still numbered v0.8.x when checked, so it is pre-1.0 (HyperFrames README). Plans, licences and setup are side by side in Claude Motion vs Remotion vs HyperFrames.

Effort benchmark, one case. Rishabh Saxena made a 30-second promo for his habit app as a Remotion 4 project (React 19, 60fps, 9:16 and 16:9) with Claude Code doing most of the typing. He reports about 14 hours from an empty project to the final files, 19 commits and 7 rounds of review by a critic subagent that never fully signed off; final renders took about 19 minutes per format on an M1 Pro. His rule was "never invent UI": Claude ported the app's own calendar, habit list, stat cards and charts into the video project with data from a seeded demo account, and each shot's key pose was rendered as a still for approval before any video (Rishabh Saxena on dev.to, 2026-10-13). These are his numbers, not ours; the voice came from ElevenLabs' free plan and the music from ACE-Step, by his credits. motif's summary: Making a 30-second app promo in code. More self-reported times are in Claude Code + Remotion launch video.

• Give Claude the real thing: 2x screenshots, the logo and brand tokens, or run it inside the app's repository so it can reuse the components. In the archive, a LaunchBuddy promo was prompted with "use actual product screenshot/logo/assets" and, by the creator's account, built inside the app's repo with no images attached.
• Ask for stills of each key pose first and approve them before a render; re-rendering 60fps finals cost Rishabh about 40 minutes a time (dev.to).
• Design the 9:16 version from the phone layout from the start; squeezing a desktop dashboard into a tall frame cost him two review rounds (dev.to).
• Set a stop rule before round one, such as three rounds or every score at 8, instead of deciding when the scores stop moving (dev.to).

What if it is a logo or a Lottie file, not a screen?

For a raster logo, nolangz/pixel2motion (MIT, 2,522 stars, last pushed 2026-08-21) traces the PNG into the simplest smooth SVG that passes its own overlay checks, then choreographs the parts into a logo animation delivered as standalone HTML with GIF or video previews and QA frames, by its description. Its README also promotes a commercial Pixel2Motion service that the maker says is coming online. For an animation that must ship inside an app, diffusionstudio/lottie (MIT, 5,632 stars) has a text-to-lottie skill for Claude Code or Codex that writes Lottie/Bodymovin JSON for logos, loaders, icons, lower thirds and chart animations and verifies it in the Skia Skottie player; the output is Lottie JSON, not a video (text-to-lottie SKILL.md). Both are listed with other motion skills in Agent skills for motion.

Which route should you pick?

Examples from the archive

• Weather app sign-in screen animated from a Figma design: designed in Figma and animated in Claude, by the creator's post; the same idea as Route A, though the post names no skill.
• Editor UI mockup shows a redwood forest clip: a launch video for Shotbase made with HyperFrames, in under 20 minutes by the creator's account.
• Image grid swirls into a taste cosmos for a moodboard app: a 40-second Cosmos launch video built in HyperFrames Studio from a prompt that asks Claude to research the product first; the prompt is on the page.
• Kotlin promo types and runs a five-line program: JetBrains says a colleague gave Claude HeyGen's HyperFrames skills and pointed it at the Kotlin site.
• Material 3 phone screens rearrange on a dotted canvas: phone screens animated with Remotion and three.js.
• Claude Design animation exported to MP4: a background video made in Claude Design with a linked write-up on the export; the poster discloses that the export tool is their own.

More launch films and UI loops are in Product & UI. Model names on these pages are the creators' own labels, and times like "under 20 minutes" are their claims; motif has not reproduced them.

FAQ