How to Build Video Pipelines with Claude Code πŸ”΄REC

DIY Smart Code
1,023 views β€’

How to make an AI explainer video with Claude Code and HyperFrames: a full Claude Code video tutorial from brief to render, with a fact check, a storyboard review, Higgsfield illustrations and an ElevenLabs voice. ElevenLabs, the voice API used in this tutorial (affiliate link): https://try.elevenlabs.io/diysmartcode One animated explainer video (motion graphics, no After Effects) built step by step from the free claude-video-starter repo, next to the same video made from one prompt. Full Run: https://youtu.be/3qUIR-5vl3o ---- Higgsfield AI β€” Create AI Videos & Visuals Get 10% OFF here: https://higgsfield.ai?fpr=thomas-dccf7e πŸš€ DYNAMOUS AI COMMUNITY Want to learn agentic coding with live daily events and workshops? Check out Dynamous AI: https://dynamous.ai/?code=646a60 Get 10% off here πŸ‘‰ https://shorturl.smartcode.diy/dynamous_ai_10_percent_discount ⚑ HOSTINGER β€” RELIABLE HOSTING FOR YOUR PROJECTS (10% OFF) Whether you're shipping a portfolio, a side project, n8n flows, or AI agents β€” I use Hostinger for fast, affordable VPS + web hosting. Get 10% off here πŸ‘‰ https://hostinger.com/DIYSMARTCODE n8n: https://n8n.partnerlinks.io/diysmartcode (Affiliate links β€” costs you nothing, supports the channel.) ---- Chapters 0:00 How to Make AI Videos With Claude Code: One Prompt vs a Real Workflow 0:52 How to Set Up Claude Code for Video (HyperFrames, ElevenLabs, Higgsfield MCP) 2:36 How to Plan an AI Explainer Video: The Brief and Your One-Sentence Take 3:39 How to Write a Video Script With AI (and Fact-Check Every Line) 4:26 Brand Colours and Fonts for AI Videos 4:46 How to Storyboard a Video With AI Before You Build It 5:39 Consistent AI Images With Higgsfield: Style Lock and Checklist 7:10 How to Make an AI Voiceover With ElevenLabs, Synced to the Video 7:46 Building the Animated Video: 13 Claude Code Sub-Agents in 19 Minutes 8:42 How to Review and Fix an AI Video (Every Score 8 or Higher) 10:25 The Finished AI Explainer Video: Prompt Caching in 2 Minutes 12:27 Better AI Motion Graphics: GSAP, Ready-Made Blocks, Sound Effects 12:57 The One Step to Keep in Every AI Video Workflow What you will see in this 13-minute HyperFrames tutorial: - One prompt vs the workflow: the one-prompt video holds still for 3 s or longer for over a third of its runtime; the workflow changed two frames as sketches, rejected five illustrations and fixed thirteen problems in five review rounds. - Setup: Node 22+, FFmpeg, Python 3.8+, the 21 official HyperFrames skills, `npx hyperframes doctor`, the starter repo and the three CLAUDE.md rules that shape every video. - Accounts: an ElevenLabs API key and voice ID in .env (never in a prompt), Higgsfield as an MCP server via `claude mcp add`. - Script and fact check: 302 words for 13 frames, 19 fact-check rows tied to the Claude Code and Claude API prompt caching docs. - Storyboard review: storyboard.html with every frame as a sketch, one prompt to change frames 11 and 12. - Art direction: a copperplate-engraving style lock, nine Higgsfield generations, four kept, each logged with its job ID. - Voice: scripts/tts.py writes narration.wav plus transcript.json with a start time for every word. 119.8 s, on the two-minute brief. - Build: 13 frames on 13 sub-agents in 19 minutes, lint 0 errors, 29/29 contrast checks, Studio preview. - The /video-review loop: an 18-still contact sheet, scores out of 10, timestamped fixes, the hook taken from 6 to 8. - Watch one whole run, start to finish (53 minutes of work in 13, waits sped up): COMPANION-LINK-HERE - Follow-along task list (every command and prompt): https://tasklist.smartcode.diy/list/claude-code-video-starter - Claude Video Starter repo (free): https://github.com/DIY-Smart-Code/claude-video-starter - HyperFrames docs: https://hyperframes.heygen.com - Official GSAP skills: https://github.com/greensock/gsap-skills - Higgsfield MCP setup: https://higgsfield.ai/creator-hub/help-center/integrations/what-is-higgsfield-mcp - ElevenLabs API key docs: https://elevenlabs.io/docs/api-reference/authentication - Claude Code prompt caching docs: https://code.claude.com/docs/en/prompt-caching - Claude API prompt caching docs: https://platform.claude.com/docs/en/build-with-claude/prompt-caching What should we cover next? #ClaudeCode #HyperFrames #HyperFramesTutorial #ClaudeCodeTutorial #ClaudeCodeVideo #ExplainerVideo #AIExplainerVideo #HowToMakeExplainerVideo #ExplainerVideoAnimation #AIMotionGraphics #MotionGraphicsTutorial #AIVideoWorkflow #ClaudeAI #Anthropic #ElevenLabs #Higgsfield #MCP #Storyboard #PromptCaching #HeyGen #AIContentCreation #FacelessVideo

Keyboard shortcuts

On. Switch them off if they collide with your assistive tools; ? still opens this sheet.

Go to

Press g then the letter.

  • gh Latest
  • gs Sources
  • gm Media
  • gv Videos
  • gp Podcasts
  • gc Calendar
  • gd Decoder
  • gz Dataviz
  • ga Datasets
  • gb Blog
  • gk Markets
  • gj Careers
  • gn Prompt Notebook

On this page

  • / Focus search, where there is one
  • t Back to top
  • ? This list
  • Esc Close