Huashu Design Deep Dive: When the AI Design Skill Makes the GUI Layer Disappear
> Subject: alchaincyf/huashu-design
> Author: Huashu (@AlchainHust)
> GitHub: https://github.com/alchaincyf/huashu-design
> Install: npx skills add alchaincyf/huashu-design
> License: Personal Use Only
> Agent compatibility: Claude Code, Cursor, Codex, OpenClaw, Hermes
Key points
- Positioning: huashu-design is not another AI design tool — it is a design *skill* that makes the graphical-tool layer disappear. For developers who live in the terminal, a conversational 80-point skill beats a 100-point GUI product.
- Core Asset Protocol: a five-step pipeline borrowed from Claude Design's philosophy — scan existing brand assets → pick directions (5 schools × 20 philosophies, 3 differentiated recommendations) → parallel demo generation → iterative refinement → export (HTML / PPTX / MP4 / PDF / PNG / SVG).
- Design philosophy system: 5 schools (Minimalism, Neo-Brutalism, Cyberpunk, Organic Nature, Classical Elegance) × 20 philosophies act as a compressed representation of design decisions; users without design training can pick from 3 parallel demos instead of articulating jargon.
- Anti-AI-slop checklist: embedded as a gating mechanism — checks for blue-purple-gradient-only palettes, weak typographic hierarchy, meaningless float-in animations, and unclear interaction feedback.
- Stage + Sprite animation engine: four APIs (
useTime,useSprite,interpolate,Easingwith spring/bounce/elastic curves) cover everything from staggered reveals to full product-launch videos, exported as MP4 (25fps / 60fps interpolated), palette-optimized GIF, or video with BGM. - Honest limitations (from the README): no layer-level PPTX ↔ Figma round-trip; no Framer-Motion-level 3D/physics/particle animation; blank-brand from-scratch designs drop to 60–65 points — confirming that good design grows from context, not a blank page.
- Ecosystem influence: nexu-io/open-design explicitly credits huashu-design as its "design philosophy compass," distilling its workflow, protocol, and checklists into its own discovery.ts.
- Project: https://github.com/alchaincyf/huashu-design
- Chinese README: https://github.com/alchaincyf/huashu-design/blob/master/README.zh.md
- English README: https://github.com/alchaincyf/huashu-design/blob/master/README.en.md
- Related: Claude Design (Anthropic) https://www.anthropic.com/claude-design · open-design https://github.com/nexu-io/open-design · guizang-ppt-skill https://github.com/op7418/guizang-ppt-skill
- Guizang vs Huashu PPT Skills comparison
- Prompt Optimizer deep dive
- Claude Mythos deep dive
- Full zhichai index
The seven capabilities
| Capability | Deliverable | Typical time | |---|---|---| | Interactive prototypes (App/Web) | Single-file HTML, real iPhone 15 Pro bezel, clickable, Playwright-verified | 10–15 min | | Presentation slides | HTML deck + editable PPTX (real text boxes via html2pptx.js reading computedStyle) | 15–25 min | | Timeline animation | MP4 (25/60fps) + GIF + BGM | 8–12 min | | Design variants (Tweaks) | 3+ side-by-side comparisons, real-time tuning, localStorage persistence | 10 min | | Infographics / visualization | Print-grade typography, PDF / PNG / SVG | 10 min | | Design direction advisor | 5 schools × 20 philosophies, 3 recommended directions with parallel demos | 5 min | | 5-dimension expert review | Radar chart + Keep/Fix/Quick Wins action list | 3 min |
The review dimensions are visual hierarchy, color system, typography, interaction feedback, and brand consistency — output is a concrete fix list, not a vague "looks good/bad."
Playwright verification matters because AI-generated code can have silent bugs; automated click-through testing ensures the delivered prototype actually works.
Huashu-design vs Claude Design
| Dimension | Claude Design | huashu-design | |---|---|---| | Form | Web product (browser) | Skill (in Claude Code) | | Quota | Subscription quota | API usage, parallel agents unthrottled | | Deliverables | Canvas + Figma export | HTML / MP4 / GIF / editable PPTX / PDF | | Interaction | GUI (click, drag) | Conversation | | Complex animation | Limited | Stage + Sprite timeline, 60fps export | | Cross-agent | Claude.ai only | Any skill-compatible agent |
Claude Design is a *better graphical tool*; huashu-design *removes the graphical layer*. Two paths for two audiences.
Author's assessment
Strengths: agent-agnostic architecture; the 5×20 philosophy system as compressed design decision-making; the independent animation engine (currently strongest among AI design tools for narrative animation); Playwright self-verification; honest limitation statements.
Weaknesses: HTML as the sole source format creates friction with Figma-based professional workflows; Chinese-first prompts may cause edge-case understanding gaps for non-Chinese users; no visual debugging — conversational iteration can be costlier than drag-and-drop in some cases; API consumption can be high when running parallel generations and complex renders.
Best-fit scenarios: rapid product prototypes, internal presentation decks, and product-launch animations (5/5). Brand-grade delivery (3/5), Figma workflows (2/5), and complex 3D/physics animation (1/5) are weak or out of scope.