I ran my own product through the full loop: brand analysis, visual direction, and a finished 15-second promo.
The product is finally written. The site is live.
Then what? Post a few screenshots on X?
Record a mouse wandering around the page?
Or pair it with: “I built something new—come try it.”
You can write the code yourself. AI can help ship the site. But at launch, a lot of engineers discover the hard part: building a product and making other people understand it quickly are completely different skills.
Today I tested an open-source project:
It works with Coding Agents like Claude Code, Codex, and Cursor to produce promo animation for products that just shipped.
I cloned the repo, checked the code, dependencies, and export scripts, then used my own blog timewait.cc to produce a 15-second promo.
Note: For this evaluation I did not polish the promo frame by frame. The demo cut is on the original post.
The goal was to validate the workflow, not to obsess over design details.
Even so, the result made me think: this project is worth a serious recommendation.
The last mile after launch
Product demos, feature motion, brand frames, launch videos, and social assets used to need designers, animators, and editors.
A designer explains the product.
They have to understand the brand and the user.
An animator turns comps into shots.
When copy changes, you may walk the whole loop again.
Huashu Design offers another path: hand the product site, logo, screenshots, brand colors, and copy to a Coding Agent, and let it follow a clear design process for visuals, animation, browser verification, and video export.
That especially fits newly launched SaaS, apps, open-source projects, and indie products.
What is Huashu Design, really?
At first glance I assumed it was a well-packaged prompt pack.
After opening the repo, it felt more solid than that.
Huashu Design is a design Skill you install into Agents like Claude Code, Codex, and Cursor.
The repository includes:
1. Design and animation rules
2. HTML / React starter components
3. Device and browser frame assets
4. Background music and demo cases
5. Playwright verification scripts
6. PDF, PPTX, and video export toolingThe host Agent visits the site, understands the product, writes code, and edits the animation.
Huashu Design supplies the working method: what assets to collect first, how to read the brand, how to generate directions, what to check, and how to deliver files.
So I prefer to call it:
An Agent design SOP that already has engineering implementation behind it.
It lets a Coding Agent work closer to how a real design team ships.
How a promo animation gets made
The flow looks roughly like this:
Read the product site and brand assets
↓
Analyze selling points and target users
↓
Generate three real visual directions
↓
The user picks one direction
↓
Write HTML / CSS / JavaScript animation
↓
Browser verification and human review
↓
Frame-by-frame render and export MP4Huashu Design starts from the same product content and brand materials, then produces three directions you can actually preview. You choose which one to refine after seeing real frames. That surfaces taste and direction conflicts early, before you finish a cut you have to throw away.
Technical note: why HTML can become a promo video
If you do not care about implementation, skip ahead to the results.
Huashu Design treats the browser as the animation render environment.
HTML, CSS, JavaScript, SVG, and Canvas build the frames and motion.
Chromium renders the page at each point in time.
Playwright records the browser, or saves frames as images.
FFmpeg then encodes, crops, and mixes in music and SFX into an MP4.
There are two main generation paths today.
Path one: realtime recording.
The browser plays the animation while Playwright records. It is faster, but machine load can hurt frame rate and final duration.
Path two: deterministic frame rendering.
The program seeks to each exact timestamp and captures that frame alone.
A 15-second, 60fps video needs 900 accurate frames.
Frame rendering takes longer, but the result is more stable:
- Duration is more accurate
- Machine stutter does not directly drop frames
- You can get true 60fps
- Any timestamp can be rechecked
- Failures are easier to pin to a specific frame
For launch-ready product animation, this path is the better fit.
What I actually produced
I first ran the repo’s HTML demo, browser screenshots, and related export flow.
Then I used timewait.cc content to finish a full promo animation.
I ended up with two versions.
Full-version specs:
- 15 seconds
- 1920 × 1080
- 60fps
- H.264 video
- AAC audio
- About 4.36 MB
I also checked background music, SFX, keyframes, second-by-second timeline, image loading, and the browser console.
At minimum, the test proved this:
From product content, brand analysis, visual direction, and HTML animation through to a final MP4, the full chain can run on a real project.
More importantly, you keep the HTML, CSS, and JavaScript source.
Need different copy? Edit it.
Wrong shot order? Rearrange it.
Bad pacing? Adjust the timeline.
For engineers, that workflow feels natural—and the sources can live in Git.
Compared with AI video tools that only hand you a black-box result, this approach is far more controllable.
Who it fits—and who it does not
I think it fits people like these:
- Indie builders who just launched a SaaS, app, or open-source project and need a launch video.
- Engineers already using Claude Code, Codex, or Cursor who are willing to let an Agent edit project files directly.
- Small teams without a full design staff who want launch assets that look more professional than plain screenshots.
- Anyone who iterates copy, pages, and motion often, and wants editable source files.
If you refuse to touch a terminal, code, or dependency setup—and only want a webpage button that spits out a video—it will feel rough today.
Complex 3D, real physics, and heavy film post are also outside its current sweet spot.
Final take
Shipping a product is getting easier.
Making other people understand it quickly is still hard.
Plenty of indie builders finish the hardest code, then launch with a few screenshots and hope users discover the value on their own.
Huashu Design is worth watching because it pulls Coding Agents into product launch and visual storytelling.
It still has setup, stability, and human-review friction, and it will not auto-produce Apple-keynote-grade films.
But it already has real, usable engineering capability.
That is the share for this round.
If you have a repo you want me to evaluate, tell me.
