You're a designer. Figma is home. But every time you need a product video with animated type, counting numbers or a smooth logo reveal, it's back to After Effects or asking someone else. In 2026 there's another way: describe the video in words, let Claude write code for every frame, then render it to MP4.
Here are the GitHub repos most worth trying for this workflow, seen from a UI/UX designer's point of view: which ones improve taste, which ones render, and which ones carry over to the web.
The short version: Claude writes the code → a skill teaches rhythm and motion → an engine renders the video.
The three layers
- Skill: an instruction pack (usually a
SKILL.md) installed into Claude Code that teaches timing, easing and transitions. - Engine: turns code (HTML or React) into video.
- Animation library: the motion foundation, usable for both video and web UI.
Group 1: Render engines (pick one)
1. HyperFrames
Write HTML/CSS, get a video. Built by HeyGen for AI agents. Basic HTML is enough; Apache-2.0 license.
2. Remotion
Video in React, big community and templates. Note its own license: some companies need a paid license for commercial use.
3. Remotion Skills
Remotion's official agent skills. Install first if you go with Remotion.
Group 2: Video skills for Claude
4. animate
Best for beginners: it pauses to ask about story, style and storyboard first, ships with preset styles and syncs to your music.
5. claude-motion
A full motion design toolkit with built-in aesthetic rules that reviews its own rendered frames.
6. claude-motion-design
A lean stack: HTML + Playwright + ffmpeg, no Remotion or After Effects.
7. product-launch-motion
Launch films with camera moves, color grading, beat-synced sound and motion blur.
8. motion-graphics-skills
A set of skills aimed at launch videos for apps, courses and digital products.
9. claude-remotion-skill
Turns Claude into a Remotion editor: captions, B-roll and sound from one prompt.
10. motion-graphics (Barty-Bart)
Generates B-roll straight from the transcript of your talking-head video.
11. hyperframes-motion-reel-skill
Beat-cut showreels for teasers and social reels.
Group 3: Motion taste (where designers should focus)
12. motion-design-skill (LottieFiles)
Timing, easing, sequencing and the 12 animation principles applied to UI. Pair it with any skill above.
13. motion-design-skills (iart-ai)
Fundamentals of timing, color, typography, layout and logo animation.
14. awesome-motion-design-agent-skills
A curated map of skills for GSAP, Motion, Remotion, Lottie and Rive.
Group 4: Animation libraries for the web too
15. GSAP
A powerful timeline library, used under the hood by HyperFrames, with its own agent skills.
16. Motion (formerly Framer Motion)
The go-to for React micro-interactions, for bringing video motion into real products.
17. lottie-web
Lightweight animations for web and apps instead of MP4.
Which combo?
- Product launch / case study video: HyperFrames + product-launch-motion.
- Just starting: animate, step by step.
- Comfortable with React: Remotion + Remotion Skills.
- Better taste: add LottieFiles' motion-design-skill.
- Website motion: Motion or GSAP.
A 5-minute check before installing
- Read the
READMEandSKILL.md. - Inspect bundled scripts and watch for file deletion or data upload.
- Check the license for client work.
- Check the last update date.
- Try it in a separate folder first.
Installing in Claude Code
- Plugin: for supported repos, e.g.
/plugin marketplace add heygen-com/hyperframes. - Skills CLI:
npx skills add <author>/<repo>. - Manual: copy the folder containing
SKILL.mdinto~/.claude/skills/(all projects) or.claude/skills/(one project).
You'll need Node.js 18+, ffmpeg, and Playwright/Chromium for browser-rendered skills.
Wrap-up
For designers, the point isn't "AI makes videos for me." You keep control of rhythm, typography and how motion feels, and skip the manual work. Pick 2–3 tools that match your daily work and turn them into your own workflow.
Inspired by a roundup on giangxai.com. Repo links checked on Oct 16, 2026.