Last Updated: June 2, 2026 — Based on a real production workflow. All technical details verified against official documentation. See Sources.

What if you could make a professional-looking car commercial by typing one sentence?

That’s exactly what happened when a creator used OpenAI’s Codex CLI with HeyGen’s HyperFrames to produce a 15-second concept video for the Xiaomi YU7 GT — a newly launched electric vehicle. The AI browsed the official Xiaomi website, extracted real car images and specs, wrote animations, rendered the video, and exported an MP4. All without opening a video editor.

Here’s the complete breakdown of how it works, so you can do it too.

The Result

The final output: a 15-second, 16:9 widescreen concept commercial featuring:

  • Real car images sourced from Xiaomi’s official website
  • Animated spec cards (1003PS, 300km/h, 705km CLTC range, 2.92s 0-100km/h)
  • Black-and-red “dark tech” visual style
  • Light scanning effects, red light trails, glitch transitions
  • Camera push-pull effects
  • Auto-generated background music and sound effects
  • Final MP4 export

No manual timeline editing. No After Effects. No Premiere Pro.

(Source: 水哥AIGC WeChat article, June 2026)

How It Works: The Three-Tool Stack

ToolRoleSource
OpenAI Codex CLIAutonomous coding agent — executes the entire workflowOpenAI
HyperFrames by HeyGenHTML-to-video framework — renders the final MP4GitHub
Chrome PluginWeb browsing — finds real materials from websitesCodex plugin ecosystem

The workflow is:

  1. Chrome plugin browses the target website and extracts images/text/specs
  2. HyperFrames converts HTML + CSS + animations into a deterministic MP4
  3. Codex CLI orchestrates everything — browsing, coding, rendering, exporting

(Source: heygen-com/hyperframes GitHub)

Step-by-Step: How to Do It Yourself

Step 1: Create a Project Folder

Create a dedicated folder on your computer (e.g., Codex Film). This is where Codex will create files, save assets, write code, and export videos.

Open Codex CLI and add this folder as a project. All subsequent work — prompts, generation, modifications — should happen within this project space.

Why a dedicated folder? The AI generates many files: HTML, config, audio, video. Without a dedicated folder, things get messy fast.

Step 2: Install the HyperFrames Plugin

In Codex CLI:

  1. Go to the Plugins section in the left sidebar
  2. Search for “HyperFrames by HeyGen” in the Design category
  3. Click Install
  4. In the input box, click the “+” icon → Select Plugin → HyperFrames by HeyGen

When the HyperFrames icon appears in the input box, the plugin is active.

Step 3: Install the Chrome Plugin

Also install the Chrome plugin from the same plugin marketplace. This allows Codex to browse websites, extract images, and gather real data.

Why both plugins? HyperFrames handles video creation. Chrome handles research. Together, they enable the full workflow.

Step 4: Write Your Prompt

Here’s the exact prompt used for the Xiaomi YU7 GT commercial (translated from Chinese):

Using HyperFrames, create a 15-second, 16:9 concept promotional video for the Xiaomi YU7 GT. First, open the Xiaomi Auto official website’s YU7 page via Chrome, and automatically find, extract, and crop publicly visible YU7 GT real car images, detail images, and visual elements. Only use images visible on the official website or screenshots of the official page — do not use any placeholder images, fictional materials, or generic car images. Also extract and verify the core information visible on the official site, focusing on: Xiaomi YU7 GT, 1003PS, 300km/h, 705km CLTC, 2.92s 0-100km/h, GT-themed cockpit. Overall style: black-and-red dark tech aesthetic, premium, cool, with a sense of speed. The visual rhythm should feel like a high-end EV launch event promotional video. Add light scanning effects, red light trails, animated number scrolling, card pop-ups, silhouette transitions, camera push-pull, glitch transitions, and strong rhythm motion effects. Keep on-screen text minimal but impactful. Emphasize spec shock value and real car image quality. End with an impactful closing title, and render directly to MP4.

Step 5: Let Codex Work

Once you send the prompt, Codex autonomously executes the workflow:

Phase 1: Material Sourcing

  • Codex calls the Chrome plugin
  • Opens the Xiaomi Auto official website
  • Scrolls through the page, identifying car images, specs, and visual elements
  • Downloads and organizes multiple real images (full car, details, cockpit)
  • Crops and prepares assets for video use

Phase 2: Video Engineering

  • Codex calls HyperFrames to set up the video project
  • Generates the video structure file (HTML + CSS + data attributes)
  • Sets up the timeline and scene sequence
  • Writes animations (GSAP for number scrolling, card pop-ups, transitions)
  • Cross-references specs (e.g., verifies “2.92s 0-100km/h” against the website)

Phase 3: Quality Check

  • Codex runs its own quality checks
  • Identifies issues (e.g., text overflow, font fallback warnings, transition mask problems)
  • Automatically fixes issues and re-renders

Phase 4: Export

  • Renders the final video using HyperFrames CLI
  • Exports as MP4
  • Provides a clickable link to the output file

(Source: 水哥AIGC WeChat article, June 2026)

Step 6: Add Music and Sound Effects (Optional)

The first version may lack background music. Send a follow-up prompt:

Please add an original background music track and key sound effects to this 15-second Xiaomi YU7 GT concept promotional video, and re-export as an MP4 with audio. Music style: high-end EV launch event feel, black-and-red tech aesthetic, deep bass, impactful rhythm, with a hint of cyber-electronic. Generate the music programmatically using WebAudio, Tone.js, or ffmpeg — do not download music from the web or use copyrighted material. Sync the music with video rhythm: low-frequency impact at the start, whoosh/hit sounds when specs appear, short glitch sounds at transitions, strong closure at the end. Save generated audio to the assets directory, mix into HyperFrames final render, and export as MP4 with background music and sound effects.

(Source: 水哥AIGC WeChat article, June 2026)

What Makes This Different from “AI Video”

Traditional AI video tools (Sora, Runway, Pika) work like this:

You type a prompt → The AI generates a video clip

HyperFrames + Codex works differently:

You describe a goal → The AI builds a video engineering project (HTML + CSS + animations + assets + timeline) → Renders it to MP4

This means:

  • Deterministic: Same input always produces the same output
  • Editable: You can modify individual frames, assets, or animations
  • Real materials: Uses actual images from real websites, not generated fakes
  • Professional quality: Proper transitions, typography, and motion design

(Source: heygen-com/hyperframes README)

Tips for Better Prompts

Based on this case study, here’s how to write effective video prompts for Codex + HyperFrames:

  1. Specify video format: Duration (e.g., 15 seconds), aspect ratio (e.g., 16:9)
  2. Define material sources: “Only use official website images” prevents AI from using stock photos
  3. Describe visual style: “Black-and-red dark tech aesthetic” gives clear direction
  4. List specific effects: “Light scanning, red trails, glitch transitions” — be explicit
  5. Include key data points: Mention specific numbers/text that must appear
  6. Define the ending: “End with an impactful closing title”

Limitations

  • Not professional-grade: Won’t match a real ad agency’s output (yet)
  • Requires Node.js 22+: HyperFrames has specific technical requirements
  • Rendering time: Complex videos can take 5-10 minutes to render
  • First-try quality: Expect to iterate — the AI may need 2-3 rounds to get it right
  • Material quality depends on source: If the website has low-res images, the video will too

Frequently Asked Questions

Do I need to know how to code?

No. That’s the point. You describe what you want in natural language, and Codex handles the implementation.

Do I need to know video editing?

No. The entire workflow — from sourcing materials to exporting MP4 — is automated.

What does it cost?

Codex CLI uses OpenAI’s API (GPT-5.5 at $5/$30 per million tokens). A 15-minute video creation session costs roughly $0.50-2.00 in API fees. HyperFrames is free and open source.

Can I use this for commercial videos?

Yes. HyperFrames is Apache 2.0 licensed. Just make sure you have rights to any images/materials used.

Can I modify the video after it’s rendered?

Yes. Tell Codex what to change (“make the title animation slower,” “add a fade-out”), and it re-renders.

Sources

  1. heygen-com/hyperframes — GitHub Repository — “Write HTML. Render video. Built for agents.” Apache 2.0 license.
  2. HyperFrames Documentation — Official docs, quickstart, and catalog.
  3. HyperFrames Showcase — Example videos and templates.
  4. feicaiclub/video-spec-builder — GitHub Repository — Video director skill for AI agents.
  5. nexu-io/open-design — GitHub Repository — Open-source design tool with HyperFrames integration.
  6. 水哥AIGC, “Codex+HyperFrames自动剪视频教程，小白也能学会~” — WeChat article, June 2026. Author profile: 水哥AIGC, AI one-person company practitioner, author of “AI One-Person Company” (Tsinghua University Press).

This article is updated monthly. Last verified: June 2, 2026. Found an error? Contact us.