design-video-render — Claude Design "video" → real MP4

Turn a Claude Design video export (which is actually an HTML/React animation, not a video file) into a real, frame-accurate MP4 — no play bar, no letterboxing, pixel-exact. Installed end-to-end as a Claude Code skill.

Claude Design exports its "videos" as React animations driven by an internal timeline — open the export and you get a play bar, fonts that resolve only inside claude.ai, and no .mp4 anywhere. Screen-recording it gives you the wrong size, the play bar, and dropped frames.

This Claude Code skill renders the animation properly, offline:

1. Patches the source React component so it runs in headless Chromium and exposes a deterministic seek hook (window.__seek(t)), tagging the exact capture canvas.
2. Drives the timeline frame by frame — for each frame it seeks, waits two animation frames, and screenshots only the canvas element. 30 fps, pixel-exact.
3. Encodes the PNG frames to H.264 with a bundled ffmpeg (libx264, yuv420p, crf 18, +faststart) — a clean .mp4 ready for LinkedIn, a website, or a deck.

Built by: Hectelion SA — independent Franco-Swiss M&A advisory, Lausanne.

---

How it works

Step	Script	What it does
1. build	skill/scripts/build.js	Patches the source React (Promo.jsx) to tag the capture canvas ([data-capture-canvas]) and expose window.__seek(t); auto-detects the _ds/<id>/styles.css; emits a self-contained render.html.
2. render	skill/scripts/render.js	Puppeteer loads render.html, waits for __seek + document.fonts.ready, calls __seek(t) per frame and screenshots the canvas → PNG frames at 30 fps.
3. encode	skill/scripts/encode.js	ffmpeg-static assembles the PNGs into an MP4 (libx264, yuv420p, crf 18, +faststart).

---

Installation in 3 minutes — driven by Claude Code

No copy-paste of code, no PowerShell typing. You paste one prompt into Claude Code, click "Allow" to approve each step, done.

How it works

1. Have Claude Code installed and signed in (claude.com/claude-code).
2. Open a terminal in any folder. Run claude.
3. Copy-paste the prompt from CLAUDE_INSTALL_PROMPT.md into the conversation.
4. Send. Claude Code clones the repo, copies the skill to ~/.claude/skills/design-video-render/, runs npm install (Puppeteer downloads Chromium, ffmpeg is bundled).
5. From then on, in any Claude Code project, type /design-video-render and point it at your export folder.

Prerequisites

• Windows 10/11, macOS, or Linux
• Node.js 18+ on PATH (nodejs.org)
• Claude Code installed + active Anthropic plan
• ffmpeg is not required separately — it ships via ffmpeg-static.

Manual install (without the Claude Code prompt)

git clone https://github.com/Hectelion-SA/claude-design-video-render.git ~/Github/design-video-render
cd ~/Github/design-video-render
# Windows
./install.ps1
# macOS / Linux: copy skill/ to ~/.claude/skills/design-video-render and run npm install in scripts/

---

Usage

Once installed, in any Claude Code project:

/design-video-render

Give it the Claude Design export folder (the one containing _ds/<id>/styles.css and the component source). The skill copies its scripts/ into the export as _render/, sets the per-export CONFIG (source file, canvas size, duration), then runs:

cd _render && npm install
cd .. && node _render/build.js && node _render/render.js && node _render/encode.js   # -> promo.mp4

Two export formats it handles

Format	Size	Source	Notes
New (flat, square) — June 2026+	1080×1080	Promo.jsx exposing window.VideoRoot	Handled by default. Icons/SVG inline, fully self-contained.
Old (modular, vertical)	1080×1920	promo.html + separate .jsx	Each .jsx must be pre-compiled in its own IIFE before assembling render.html (see SKILL.md).

Adjust the CONFIG block at the top of each script for your export (source file name, exposed global, canvas size W/H, total duration TOTAL). See skill/SKILL.md for the full procedure and known pitfalls.

---

Known pitfalls (the things that waste an afternoon)

• Don't render the standalone *(vertical).html — its fonts/assets point to opaque IDs that resolve only inside claude.ai. Always start from the modular export / Promo.jsx.
• Viewport = format + 120 px. The play bar is 44 px tall; oversizing the viewport forces the Stage to scale = 1 and a 1:1 render.
• Screenshot the [data-capture-canvas] element, not the whole page — that's how you avoid the play bar and letterboxing.
• The _ds/<id> folder id changes every export — build.js auto-detects styles.css.

---

Requirements

• Node.js 18+
• Chromium is downloaded automatically by Puppeteer on first npm install (cached in ~/.cache/puppeteer).
• ffmpeg is bundled via ffmpeg-static — nothing to install.

---

Privacy & Security

• 🔒 Local processing only — patching, rendering, and encoding all happen on your machine.
• 🔒 No uploads — the only network access is npm install (packages + Chromium) and the React UMD <script> tags loaded from unpkg at render time.
• 🔒 Source untouched — the skill copies the scripts into the export as _render/; your original export files are not modified (other than the optional em-dash brand fix you choose to apply).

---

About Hectelion SA

Hectelion SA is an independent Franco-Swiss M&A advisory firm based in Lausanne, focused on mid-cap transactions (CHF 2M to CHF 500M). This skill is part of the internal toolchain we open-source for the Claude Code community.

Founder: Aristide Ruot — aristide.ruot@hectelion.com

---

License

MIT — see LICENSE. Use it, fork it, modify it. Attribution appreciated but not required.

---

Keywords (for GitHub search)

claude-code-skill · claude-skill · claude-design · video-render · html-to-video · react-to-video · puppeteer · headless-chromium · ffmpeg · mp4-export · animation-rendering · frame-accurate · screen-capture-alternative · hectelion