Oct 24, 2026

Get a Deliverable Design from One Sentence with Huashu Design

Huashu Design is a 26k-star agent-agnostic skill that turns one sentence into a clickable app prototype, an editable PPTX deck, a motion piece, or an infographic — three real directions picked from six thumbnails, backed by an 84-style library.

#tutorial#developer-tools#creative

Huashu Design exists because its author would rather have an agent work in the terminal than open any graphical design UI. The 26k-star, MIT-licensed skill takes one sentence in Claude Code, Cursor, Codex, OpenClaw, or Hermes and returns a product launch animation, a clickable app prototype, an editable PPT deck, or a print-grade infographic in 3 to 30 minutes.

Why This Skill Matters

The README's pitch is that the output should look like a real design team made it, not "decent for AI". Two mechanisms carry that. Give the skill your brand assets — logo, colors, UI screenshots — and it reads your brand's voice. Give it nothing, and three real directions picked from six thumbnails — backed by an 84-style HTML-native library with a visual specimen for every style: web 20, deck 20, infographic 20, app 12, and Chinese & East Asian 12 — keep you out of AI slop territory.

One thing to know before you start: the skill's own prompts (SKILL.md, references/*.md) are written in Chinese. The README notes the agent is bilingual and works fine with English tasks.

Installation

npx skills add alchaincyf/huashu-design

Then verify. This skill is more than a single SKILL.md — the references/, assets/, scripts/, and demos/ subdirectories hold 99 referenced recipes, scripts, and assets. Check the install path (for example ~/.claude/skills/huashu-design/): if you only see SKILL.md, your skills CLI is too old. Versions ≤1.5.15 had a bug that synced only the single file, fixed in 1.5.19. Upgrade and reinstall:

npm i -g skills@latest        # or npx skills@latest add alchaincyf/huashu-design

If it is still wrong after upgrading, the README's fallback is a git clone into any skills directory:

git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design

Real Workflow: A Clickable iOS Prototype

  1. Give your agent one of the README's example prompts:
"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable."
  1. The default working mode is the Junior Designer Workflow: the agent sends its full question set in one batch and waits for all answers, writes assumptions, placeholders, and reasoning comments directly into the HTML, and shows you an early version — even if it is just gray blocks.
  2. If the brief is too vague to execute, the design direction advisor takes over: three logics with two candidates each — a best designer, a real-world award-winning reference in the same medium (screenshotted first by scripts/ref_board.py, so the agent actually looks), and a seconds roulette over the style library. Six thumbnails come back; the three strongest and most distinct become real designs, with the other three as alternates.
  3. Fill in real content, produce variations, then open Tweaks — a side panel with parameterized colors, typography, and information density that persists in localStorage. The agent shows you the result at each of these three steps.
  4. Before delivery the agent eyeballs the page in a browser with Playwright. The prototype ships as a single HTML file with a pixel-accurate iPhone 15 Pro body (Dynamic Island, status bar, Home Indicator), state-driven multi-screen navigation, and Playwright click tests already run.

Deck requests follow the same path but end differently: the HTML deck comes with an editable PPTX, where html2pptx.js reads DOM computed styles and translates each element into a real PowerPoint object — actual text frames, not image-bed fakes.

Tips

  • When the task touches a specific brand, the Core Asset Protocol enforces five steps: ask, search official channels, download by asset type with three fallback paths, verify and extract, then freeze everything into brand-spec.md. The README's rule: never guess brand colors from memory — grep them from real assets.
  • The README's Principle #0 is fact verification first. When a task mentions a specific product, technology, or event, the first action is a WebSearch to confirm it exists, its release status, its current version, and its specs — no claims from training-corpus memory.
  • The skill learns on your machine. scripts/learn.py recalls your verbatim taste notes before work starts, a look ledger logs what each delivery looked like so the next project steers away from repeats, and scripts/design_lint.py measures only checkable facts — broken images, unreadably small text, low contrast, and console errors are red, while habitual template chrome is flagged yellow. Everything lives in ~/.huashu-design/; delete the folder to forget it all.
  • The core pipeline — design, render, MP4/PDF/PPTX export — runs 100% locally with zero network calls and zero API keys. Cloud features such as Doubao TTS narration sit in scripts/cloud/, are optional, use your own keys, and require an explicit --yes consent gate before anything leaves your machine.
  • Ask for Run a 5-dimension expert review on this design. to get a radar chart scored across philosophical coherence, visual hierarchy, execution craft, functionality, and innovation, plus a Keep / Fix / Quick Wins punch list.

When Not to Use This

The README names its own limits. The output is HTML, so there is no layer-editable PPTX-to-Figma round-trip — the result is screenshottable, recordable, and image-exportable, but not draggable into Keynote for text-position tweaks. Framer-Motion-tier complex animation — 3D, physics simulation, particle systems — is out of scope. And a brand designed from zero drops to 60–65 points by the author's own scale: this is "an 80-point skill, not a 100-point product".


See the leaderboard for more skills.