Most people use Claude for text. But there’s a whole visual side — slides, infographics, motion graphics — that almost nobody knows about. And with a free tool called HyperFrames, you can take anything you build in Claude Design and render it as a polished, animated MP4. No After Effects. No Premiere. No design degree.

Here’s the exact 4-step workflow.

Get the Free Cheat Sheet

A 2-page PDF with all 4 steps and quick tips — keep it open while you work through the workflow the first time.

Get the free Claude Design → Video Cheat Sheet →

Step 1: Create Your Design in Claude Design

Claude Design is built into Claude.ai — go to claude.ai, describe what you want, and it builds it live in the browser. Slides, infographics, email headers, social graphics — all through plain language. No Canva, no Figma.

Iterate until it’s right: change the layout, swap colors, rewrite copy. There’s no limit to how many revisions you make before exporting.

Quick tips:

• Describe layout, color palette, and copy style in your first prompt
• Ask for changes like you’d brief a designer: “move the headline up, make the background dark navy”
• Claude Design supports slides, email templates, infographics, and motion graphics

Step 2: Export and Download as a .zip

When your design is ready, click Export → Download project as .zip in the top-right of Claude Design.

This bundles all the HTML, CSS, and assets into a local folder you own. Standard web files — no proprietary format, no cloud lock-in.

Quick tips:

• The .zip includes all source files: HTML, CSS, fonts, images
• Open it in any code editor without any setup
• Save it somewhere organized — this is your source of truth before rendering

Step 3: Open the Project in Claude Code

Unzip the folder and open it in Claude Code, or in VS Code / Antigravity with the Claude Code extension installed. Claude Code recognizes the project structure immediately.

From here you can tweak animations, edit copy, adjust timing, and preview the design before you commit to a render.

Quick tips:

• Claude Code, VS Code (with the Claude Code extension), and Antigravity all work
• Make any last-minute copy or animation edits here — no need to re-export from Claude Design
• Preview mode lets you catch timing issues before the full render

Step 4: Install HyperFrames and Render to MP4

In your terminal, run:

1
npx skills add heygen-com/hyperframes

Or install directly from the repo: github.com/heygen-com/hyperframes

Two commands:

1
2
npx hyperframes preview   # Live browser preview — check before rendering
npx hyperframes render    # Export the final MP4

Run preview first to verify animation timing, then render to export. That’s your production-ready video — ready to post on Instagram Reels, TikTok, or YouTube Shorts.

Quick tips:

• VS Code and Antigravity register HyperFrames slash commands automatically
• Rendering typically takes 5–30 seconds depending on animation complexity
• Tweak animation duration in the source files before rendering if timing feels off

Why This Workflow Matters

The bottleneck in most AI content pipelines isn’t writing — it’s visuals. Stock footage gets stale. Every Canva template looks the same. This workflow lets you build branded motion graphics from scratch in natural language and export them as real video files. For creators building AI content systems, it closes a major gap.

For the full step-by-step guide including tips for each command, grab the free cheat sheet.

Want the Full AI Content Stack?

AI Social Hub gives you 380+ Claude Code Skills, 5,000+ automation blueprints, AI avatar tools, a 13-lesson consulting course, and more — completely free, no credit card.

Join AI Social Hub Free →