huashu-design

On my radar

huashu-design is an open-source Claude Code skill (`alchaincyf/huashu-design`, MIT, 14k★ at the time of writing). One npx command to install, one sentence to your agent (Claude Code, Cursor, Codex...), and within 3 to 30 minutes you get a deliverable: a clickable iOS prototype, an editable slide deck, an MP4 animation, or a print-grade infographic.

Why it's on my radar

• Direct HTML output instead of a text brief. In my Claude Design article I noted that the 212-line brief required around 30 minutes of manual transcription from HEX values into Tailwind tokens. huashu-design bypasses that step: you get interactive HTML you can open in a browser right away.
• Agent-agnostic. The skill is designed to work with any agent that parses markdown skills: Claude Code, Cursor, Codex, Trae, Hermes, OpenClaw. No lock-in to claude.ai.
• Junior Designer Workflow by default. The skill doesn't attempt a one-shot « here's your final design »: it starts by asking questions, writes assumptions + placeholders + gray blocks inside the HTML, shows it early, iterates. Consistent with the Superpowers discipline (one commit per verified step).
• Install in one command: `npx skills add alchaincyf/huashu-design`. No interface, no Figma panel — the agent drives.

What it actually ships

According to the docs, the skill covers 7 deliverable types, each with an announced typical production time: HTML single-file interactive prototype Playwright-verified in 10-15 min, browser-ready HTML deck plus editable PPTX with preserved text frames in 15-25 min, MP4 motion design at 25/60 fps with interpolation and BGM in 8-12 min, side-by-side variations with live parameters in 10 min, print-grade infographic with PDF/PNG/SVG exports in 10 min, design direction advisor across 5 schools × 20 philosophies with parallel demos in 5 min, and a 5-dimension expert critique with radar and punch list in 3 min.

Every example in the README is itself generated by huashu-design — the repo doesn't show Figma mockups of what the tool could do, it shows what it actually did. That's a strong signal, to be confirmed in real-world use.

The delta with Claude Design

Where Claude Design produces a brief — a Markdown document describing palette, typography, components, usage rules, that you then transcribe into your codebase — huashu-design produces the finished artifact directly. Brief-first vs artifact-first: two AI design philosophies targeting different phases.

Claude Design is better when you want a system — palette, typography, documented components — that you'll reuse in your real codebase for months. huashu-design is better when you want a deliverable — a mockup to validate an idea with a stakeholder tomorrow, a client deck for Friday, a launch animation — usable as-is.

On the Vite Fait, Bien Fait project I describe in the Claude Design article, I needed the system: 4 phased implementation PRs followed. For the next project, if I have to pitch visually before coding, I'll likely try huashu-design first to generate the mockup, then come back to Claude Design for the design system once the direction is locked in.

Notable internal mechanics

Four mechanics caught my attention in the docs, because they address problems I've hit elsewhere.

• Core Asset Protocol — a 5-step process to collect a brand's assets (logo, product shots, UI screenshots, palette, fonts): ask the user, search official channels (brand.com/brand, press kits, launch videos), download with 3 fallback paths per asset type, verify authenticity, freeze into a `brand-spec.md`. The author claims an A/B test v1 vs v2 that reduced quality variance by ×5. The « Never guess from memory » rule resonates directly: on Vite Fait, Bien Fait, the riskiest step of the token rename was exactly the hex colors guessed without verification.
• Design Direction Advisor (Fallback mode) — when the brief is too vague to execute, the skill doesn't guess, it switches to fallback mode: 3 differentiated directions from 5 schools × 20 philosophies (each from a different school), with flagship works, gestalt keywords, representative designer, and demos generated in parallel for side-by-side comparison.
• Junior Designer Workflow — the default mechanic: send the full question batch in one go, wait for all answers, write assumptions + placeholders + reasoning directly into the HTML, show early even with gray blocks, iterate. No heroic one-shot attempt. Exactly the discipline Superpowers applies to code, transposed to design.
• 5-Dimension Expert Critique — a review mode scoring a design on five axes: philosophical coherence, visual hierarchy, execution craft, functionality, innovation. Output: radar chart + Keep / Fix / Quick Wins punch list. The kind of feedback you'd expect from a team design review.

How to try it

One-line install:

npx skills add alchaincyf/huashu-design

Once installed, you talk to the agent (Claude Code, Cursor, Codex...) in natural language:

"Make a keynote for AI psychology. Give me 3 style directions to pick from."
"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable."
"Turn this logic into a 60-second animation. Export MP4 and GIF."
"Run a 5-dimension expert review on this design."

No Figma plugin, no panel, just text. The skill brings its own cultural references (5 schools, 20 philosophies) and its discipline (asset protocol, junior designer workflow) that the agent integrates into its loop.

What I'll test on the next project

The README's marketing promise is strong (25fps animations, Playwright-verified prototypes, PPTX with preserved text frames). Before getting excited, here are the checks I want to run on a real project.

• Real output quality vs marketing-grade README demos. The animations in the README are themselves generated by the skill, but cherry-picked by the author. On an average brief with real constraints, what does it actually produce?
• `brand-spec.md` working on a brand where I know the actual colors and the actual logo. Does the skill respect what it downloaded, or does it silently « improve » things?
• Junior Designer Workflow holds its promises: does it actually show gray blocks early, or does it drift into a one-shot after the first batch of questions?
• Side-by-side with Claude Design on the same brief. I'll re-submit the Vite Fait, Bien Fait brief to both tools and compare what they produce. Not to crown a winner — to understand where each excels.
• Real time to a usable deliverable, not a demo. The README announces 3-30 minutes; does that include the iteration needed to cross the « usable » threshold?

The hands-on review of that test will be its own article — what the tool is really worth in production, not just in demos.

Sources & credits

huashu-design is designed and maintained by 花叔 / @AlchainHust / `alchaincyf` on GitHub. All credit for the skill belongs to the author. This piece is a pre-trial presentation — once I've tested it, I'll publish a separate hands-on review.

The skill runs on coding agents that support skills.sh-compatible markdown skills: Claude Code (by Anthropic), Cursor, Codex, and others. That agent-agnostic portability is what makes it an interesting complement to single-platform tools.