# Turn a Design or App Screen into Motion with Claude

https://createmotion.io/guides/turn-a-design-into-a-motion-showcase/ · Written by motif with Claude Fable 5.1 · Facts checked 2026-10-27

To turn a static design or app screen into an animated MP4 or GIF with Claude, you have three routes: the free design-to-motion skill, which rebuilds the design as HTML and exports MP4 and GIFs; Claude artifacts, where Claude Design exports HTML and only Claude Motion (beta, Team and Enterprise) exports MP4; or Claude Code with Remotion or HyperFrames.

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

Checked 2026-10-27. The question comes from [a post by @elayadesigns](https://x.com/elayadesigns/status/2114049200749175174) 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](https://createmotion.io/quick-start/).

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

design-to-motion is one of two skills in [elayadesign/ai-design-skills](https://github.com/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](https://github.com/elayadesign/ai-design-skills)). It is listed with other motion skills in [Agent skills for motion](https://createmotion.io/resources/agent-skills/).

The [SKILL.md](https://github.com/elayadesign/ai-design-skills/blob/main/skills/design-to-motion/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](https://github.com/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](https://github.com/elayadesign/ai-design-skills)).
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](https://github.com/elayadesign/ai-design-skills/blob/main/skills/design-to-motion/SKILL.md)).
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](https://github.com/elayadesign/ai-design-skills/blob/main/skills/design-to-motion/SKILL.md)).
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](https://github.com/elayadesign/ai-design-skills/blob/main/skills/design-to-motion/SKILL.md)).
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](https://github.com/elayadesign/ai-design-skills/blob/main/skills/design-to-motion/SKILL.md)).
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](https://github.com/elayadesign/ai-design-skills/blob/main/skills/design-to-motion/SKILL.md)).

**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](https://github.com/elayadesign/ai-design-skills/blob/main/skills/design-to-motion/SKILL.md)). Not stated in the skill: the export step runs headless Chrome and FFmpeg ([SKILL.md, C1](https://github.com/elayadesign/ai-design-skills/blob/main/skills/design-to-motion/SKILL.md)), so both must be installed wherever your agent runs, and motif has not tested an export from a Claude.ai upload.

Note: **Disclosures.** Elaya's post names Higgsfield next to Claude and Cursor. Higgsfield describes itself as an AI-native creative suite for image, video and audio ([higgsfield.ai](https://higgsfield.ai/)), so some imagery in that reel may be generator output; the skill animates a design you already have and makes no footage. On 2026-10-25 Leon Lin asked for credit for his MIT-licensed taste-skill ([@LexnLin](https://x.com/LexnLin/status/2114150089211904417)); Elaya replied that taste-skill had not been traced back as a source, that credit was going into both repos and that the overlapping parts were being rewritten ([@elayadesigns](https://x.com/elayadesigns/status/2114296513941885008)). The README now credits Leonxlnx/taste-skill for landing-page-design, and emilkowalski/skills, Owl-Listener/designer-skills and dylantarre/animation-principles for design-to-motion ([README](https://github.com/elayadesign/ai-design-skills)). motif has not run the skill; the steps above are read from its file.

### 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](https://support.claude.com/en/articles/14604416-get-started-with-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](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them)).

Official: Two versions exist. The standalone site at claude.ai/design closes on December 14, 2026; after that it is read-only and you cannot start new projects there, though the owner of a project that has not moved can still fix its files and move it. Designs now live in Claude as artifacts ([Claude Help Center: move from standalone Claude Design](https://support.claude.com/en/articles/17440474-move-from-standalone-claude-design-to-claude)). The export list above is from the in-Claude article. Re-check both articles on 2026-12-01; see [Claude Design moves into Artifacts](https://createmotion.io/guides/claude-design-moves-into-artifacts/) for the move itself.

#### 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](https://support.claude.com/en/articles/14604416-get-started-with-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](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-send-to-hyperframes.md)).
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](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md), [HyperFrames docs: bring in a design](https://hyperframes.heygen.com/guides/claude-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](https://support.claude.com/en/articles/17454997-get-started-with-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](https://createmotion.io/guides/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](https://www.remotion.dev/docs/render), [Remotion docs: encoding](https://www.remotion.dev/docs/encoding)); its agent skills install with npx skills add remotion-dev/skills ([Remotion docs: Agent Skills](https://www.remotion.dev/docs/ai/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](https://github.com/heygen-com/hyperframes)). Plans, licences and setup are side by side in [Claude Motion vs Remotion vs HyperFrames](https://createmotion.io/guides/claude-motion-vs-remotion-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](https://dev.to/rishabhsxn/making-a-30-second-app-promo-in-code-with-claude-code-and-remotion-5bo8)). 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](https://createmotion.io/articles/making-a-30-second-app-promo-in-code-with-claude-code-and-remotion-d8b321cc3360/). More self-reported times are in [Claude Code + Remotion launch video](https://createmotion.io/guides/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](https://createmotion.io/motions/x-2105268326381625845/) 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](https://dev.to/rishabhsxn/making-a-30-second-app-promo-in-code-with-claude-code-and-remotion-5bo8)).
- 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](https://dev.to/rishabhsxn/making-a-30-second-app-promo-in-code-with-claude-code-and-remotion-5bo8)).
- 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](https://dev.to/rishabhsxn/making-a-30-second-app-promo-in-code-with-claude-code-and-remotion-5bo8)).

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

For a raster logo, [nolangz/pixel2motion](https://github.com/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](https://github.com/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](https://github.com/diffusionstudio/lottie/blob/main/skills/text-to-lottie/SKILL.md)). Both are listed with other motion skills in [Agent skills for motion](https://createmotion.io/resources/agent-skills/).

### Which route should you pick?

Design-to-motion routes compared, checked 2026-10-27. Sources: design-to-motion SKILL.md and README, Claude Help Center, HyperFrames README and guides, Remotion docs, Rishabh Saxena's case study.

| Route | Input | Output | Who can use it | Setup | Watch out for |
| --- | --- | --- | --- | --- | --- |
| design-to-motion skill | Figma frame with node id (best) or a 2x-3x screenshot | HTML page plus MP4 for X, a website GIF and an 800x500 GIF | Anyone with Claude Code, Cursor, Codex or a Claude.ai upload; MIT | Copy SKILL.md; headless Chrome and FFmpeg for exports | Screenshots give softer results; hidden areas are guessed and must be disclosed |
| Claude Design artifact | Prompt, screenshots, design system | Standalone HTML, .zip, PDF, PPTX, Google Slides, Send to tools | Every Claude plan; shares your usage limits | None | No MP4 export; standalone site read-only after 2026-12-14 |
| Claude Motion | Prompt plus attached images or data | MP4 | Beta on Team and Enterprise only | None; Output > Motion | No realistic footage; off by default on Enterprise; not a pixel-exact rebuild |
| Claude Code + Remotion | Screenshots, the app's own components, assets | MP4, H.264 by default | Claude Code users; see the comparison guide for Remotion's licence | Node.js, npx skills add remotion-dev/skills | About 14 hours and 7 review rounds in one documented case |
| Claude Code + HyperFrames | Screenshots, HTML, or a Claude Design .zip | MP4 | Claude Code users; Apache 2.0, made by HeyGen | Node.js 22+, FFmpeg, the hyperframes plugin | Pre-1.0 (v0.8.x); Send to Hyperframes renders on HeyGen's cloud |

### Examples from the archive

- [Weather app sign-in screen animated from a Figma design](https://createmotion.io/motions/archive-2103879303058575556/): 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](https://createmotion.io/motions/archive-2102441708395041170/): 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](https://createmotion.io/motions/archive-2103481296018092204/): 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](https://createmotion.io/motions/archive-2102459650125754812/): 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](https://createmotion.io/motions/archive-2103759350330544254/): phone screens animated with Remotion and three.js.
- [Claude Design animation exported to MP4](https://createmotion.io/motions/reddit-1tkuv1g/): 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](https://createmotion.io/explore/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

#### Can Claude turn a Figma design into a video?

Yes, through code. The design-to-motion skill reads the Figma REST API with your personal access token, rebuilds the frame as HTML, animates it and exports an MP4 and two GIFs; HyperFrames has a /figma skill that imports artwork and brand values for a video rendered with npx hyperframes render. In both cases the video is rendered from code on your machine or in HyperFrames' cloud, not returned by Claude as a file.

#### Can Claude Design export an MP4?

No, as of 2026-10-27. The Claude Design export menu lists .zip, PDF, PPTX, Google Slides, standalone HTML, Send to tools such as Hyperframes and Canva, and Handoff to Claude Code. Only Claude Motion animations export as MP4, and Motion is a beta for Team and Enterprise plans. To get a video from a design, use Send to Hyperframes or open the .zip with Claude Code.

#### How do I make a GIF of my app screen with Claude?

The design-to-motion skill delivers two GIFs by default: a 960px website loop at 15-20fps and an 800x500 GIF, both encoded with FFmpeg's palettegen and paletteuse from the captured frames. If you already have an MP4 from Remotion or HyperFrames, the same FFmpeg filters turn it into a GIF; lower the frame rate or colour count before lowering the size.

#### Do I need Claude Motion to animate a design?

No. Claude Motion is a Team and Enterprise beta. The design-to-motion skill runs in Claude Code, Cursor or Codex, or from a SKILL.md uploaded to Claude.ai, and the Remotion and HyperFrames routes need Claude Code and Node.js on your machine. Motion needs no local setup, so it suits a short explainer when your plan includes it.

#### How long does it take to turn an app into a launch video with Claude?

Reports range widely. Rishabh Saxena documents about 14 hours, 19 commits and 7 review rounds for a 30-second Remotion promo with real app components. One creator in the archive claims a one-shot HyperFrames launch video in under 20 minutes. Both are self-reported. motif has no timing for design-to-motion, because we have not run it.

### Sources

- [design-to-motion SKILL.md (elayadesign/ai-design-skills)](https://github.com/elayadesign/ai-design-skills/blob/main/skills/design-to-motion/SKILL.md)
- [ai-design-skills README: install, credits, licence](https://github.com/elayadesign/ai-design-skills)
- [@elayadesigns on X: landing pages made with Higgsfield, Claude and Cursor](https://x.com/elayadesigns/status/2114049200749175174)
- [@LexnLin on X: credit request for taste-skill](https://x.com/LexnLin/status/2114150089211904417)
- [@elayadesigns on X: credit going into both repos](https://x.com/elayadesigns/status/2114296513941885008)
- [Higgsfield: AI-native creative suite](https://higgsfield.ai/)
- [emilkowalski/skills (credited by design-to-motion)](https://github.com/emilkowalski/skills)
- [Claude Help Center: Get started with Claude Design](https://support.claude.com/en/articles/14604416-get-started-with-claude-design)
- [Claude Help Center: Move from standalone Claude Design to Claude](https://support.claude.com/en/articles/17440474-move-from-standalone-claude-design-to-claude)
- [Claude Help Center: What are artifacts and how do I use them?](https://support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them)
- [Claude Help Center: Get started with Claude Motion](https://support.claude.com/en/articles/17454997-get-started-with-claude-motion)
- [HyperFrames docs: Bring in a design (Figma, Claude Design, Open Design)](https://hyperframes.heygen.com/guides/claude-design)
- [HyperFrames: Claude Design, Send to HyperFrames guide](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-send-to-hyperframes.md)
- [HyperFrames: Claude Design + HyperFrames (Template-First) guide](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md)
- [HyperFrames README](https://github.com/heygen-com/hyperframes)
- [Remotion docs: render](https://www.remotion.dev/docs/render)
- [Remotion docs: encoding](https://www.remotion.dev/docs/encoding)
- [Remotion docs: Agent Skills](https://www.remotion.dev/docs/ai/skills)
- [Rishabh Saxena on dev.to: Making a 30-second app promo in code with Claude Code and Remotion](https://dev.to/rishabhsxn/making-a-30-second-app-promo-in-code-with-claude-code-and-remotion-5bo8)
- [nolangz/pixel2motion](https://github.com/nolangz/pixel2motion)
- [diffusionstudio/lottie: text-to-lottie SKILL.md](https://github.com/diffusionstudio/lottie/blob/main/skills/text-to-lottie/SKILL.md)