huashu-design for Claude Code and Codex: prototypes, decks, and animations in HTML

huashu-design is a skill that creates prototypes, presentation decks, and animations in HTML from a single conversational request. It is a single skill with supporting folders, released under the MIT license, and its README says it works with skill-compatible agents such as Claude Code, Codex, and Cursor. This post covers the problem it solves, who it suits, how to install it so nothing is missing, and the one thing to check before your first run.

What problem it solves

Early design work often stalls on the tool rather than the idea. A product planner who wants to show how an app screen should behave has to open a design tool, build frames, and wire up clicks before anyone can react to it. A launch needs an introduction animation, and that usually means a separate video tool. Each output lives in a different program, so a change in one does not carry over to the others.

huashu-design keeps everything in HTML. Instead of producing one guess, it proposes three drafts in different directions, drawn from a catalog of 60 HTML styles, and starts full production only after you pick one. App screens are placed in an iPhone device frame and the required interactions are validated. From the same HTML source it can export MP4, GIF, PPTX, and PDF, and an HTML deck can be presented straight from a browser.

Who it fits

The chapter rates four situations. Three of them cover most decisions.

Situation	Fit	Reason
Clickable app screen prototypes	Good fit	Provides device frames and validation
Launch introduction animations	Good fit	Exports HTML as MP4
Editing Figma layers	Poor fit	Does not deliver layers

The middle ground is designing a new brand from scratch. The skill can do it, but quality drops when it has no brand assets to work from, so bring a logo and colors if you have them.

Install and first run

Install it with the skills CLI, or clone the repository into the Claude Code skills folder if subfolders are missing.

# Install for a skill-compatible agent
npx skills add alchaincyf/huashu-design
# If subfolders are missing, clone into the Claude Code folder
git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design

After installation, ask the agent where you installed it for the output you want in one sentence.

Create [the prototype or presentation deck I want]

The skill answers with three design directions first. You choose one, it builds the HTML for that direction, and then it exports whichever formats you ask for.

What trips people up

The catch is in the install itself. The README describes an issue where older versions of the skills CLI copy only SKILL.md and leave the rest behind. The skill still loads, but the workflow depends on files in references/, assets/, scripts/, and demos/, so a partial copy fails in confusing ways rather than with a clear error. After installing, open the skill folder and confirm all four are there. If any are missing, use the git clone line above instead.

Two smaller points follow from the same design. Rendering and export run as local scripts, and Playwright is used to check the results, so expect the agent to run code on your machine. Cloud features such as Doubao speech synthesis and video evaluation need keys you obtain yourself, and they ask for consent before the first call.

Where this comes from

This post adapts part of chapter 04-04 of The Claude Code & Codex Skills Guidebook. The full chapter covers the table of included files, from the iPhone frame and timeline animations to the HTML-to-PPTX converter, and how the skill keeps brand colors fixed in brand-spec.md and returns a five-item expert evaluation with Keep, Fix, and Quick Wins lists, and the book has 52 more skills like this one. Read the full chapter in The Claude Code & Codex Skills Guidebook on Gumroad.