๐ English ยท ไธญๆ
# Huashu Design
> *"Type. Hit enter. A finished design lands in your lap."*
> *ใๆๅญใๅ่ฝฆใไธไปฝ่ฝไบคไป็่ฎพ่ฎกใใ*
[](LICENSE)
[](https://skills.sh)
[](https://skills.sh)
**Say one sentence to your agent โ Claude Code, Cursor, Codex, OpenClaw, Hermes all work.**
3 to 30 minutes โ you ship a **product launch animation**, a clickable App prototype, an editable PPT deck, a print-grade infographic.
Not "decent for AI" quality โ it looks like a real design team made it. Give the skill your brand assets (logo, colors, UI screenshots) and it reads your brand's voice; give it nothing and the built-in 20 design vocabularies still keep you out of AI slop territory.
**Every animation in this README was made by huashu-design itself.** No Figma, no After Effects โ just a sentence + skill run. Next product launch needs a promo video? You can make it too.
```
npx skills add alchaincyf/huashu-design
```
[See it work](#demo-gallery) ยท [Install](#install) ยท [What it does](#what-it-does) ยท [How it works](#core-mechanics) ยท [vs. Claude Design](#vs-claude-design)
> ๐ **Note for English readers**: this skill is built by a Chinese-speaking developer. The skill's agent prompts (`SKILL.md`, `references/*.md`) are in Chinese but the agent is bilingual โ works fine with English tasks. The demos below are the English parallel versions; the Chinese ones are in the default-named files (see the Chinese [README.md](README.md)).
---
โฒ 10-second hero animation showing what huashu-design does (download MP4 if autoplay doesn't work)
---
## Install
```bash
npx skills add alchaincyf/huashu-design
```
Then just talk to Claude Code:
```
"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 buttons, no panels, no Figma plugin. Agent-agnostic โ drops into Claude Code, Cursor, Trae, Hermes, OpenClaw, or any markdown-skill-capable agent.
---
## Star History
---
## What it does
| Capability | Deliverable | Typical time |
|---|---|---|
| Interactive prototype (App / Web) | Single-file HTML ยท real iPhone bezel ยท clickable ยท Playwright-verified | 10โ15 min |
| Slide decks | HTML deck (browser presentation) + editable PPTX (text frames preserved) | 15โ25 min |
| Motion design | MP4 (25fps / 60fps interpolation) + GIF (palette-optimized) + BGM | 8โ12 min |
| Design variations | 3+ side-by-side ยท Tweaks live params ยท cross-dimension exploration | 10 min |
| Infographic / data viz | Print-quality typography ยท exports to PDF/PNG/SVG | 10 min |
| Design direction advisor | 5 schools ร 20 philosophies ยท 3 directions recommended ยท Demos generated in parallel | 5 min |
| 5-dimension expert critique | Radar chart + Keep/Fix/Quick Wins ยท actionable punch list | 3 min |
---
## Demo Gallery
> English parallel versions of the demos. Chinese versions live at the default filenames (see the Chinese README).
### Design Direction Advisor
The fallback for vague briefs: pick 3 differentiated directions from 5 schools ร 20 philosophies, generate all 3 demos in parallel, let the user choose.
### iOS App Prototype
Pixel-accurate iPhone 15 Pro body (Dynamic Island / status bar / Home Indicator) ยท state-driven multi-screen navigation ยท real images pulled from Wikimedia/Met/Unsplash ยท Playwright click tests before delivery.
### Motion Design Engine
Stage + Sprite time-slice model ยท `useTime` / `useSprite` / `interpolate` / `Easing` โ four APIs cover every animation need ยท one command exports MP4 / GIF / 60fps-interpolated / BGM-scored finals.
### HTML Slides โ Editable PPTX
HTML decks for browser presentation ยท `html2pptx.js` reads DOM computed styles and translates each element into real PowerPoint objects ยท exports are **actual text frames**, not image-bed fakes.
### Tweaks ยท Live Variation Switching
Colors / typography / information density parameterized ยท side panel toggle ยท pure-frontend + `localStorage` persistence ยท survives reload.
### Infographic / Data Viz
Magazine-grade typography ยท precise CSS Grid columns ยท `text-wrap: pretty` typographic details ยท driven by real data ยท exports to vector PDF / 300dpi PNG / SVG.
### 5-Dimension Expert Critique
Philosophical coherence ยท visual hierarchy ยท execution craft ยท functionality ยท innovation โ each scored 0โ10 ยท radar-chart visualization ยท outputs Keep / Fix / Quick Wins punch list.
### Junior Designer Workflow
No heroic one-shot attempts: start with assumptions + placeholders + reasoning, show it to the user early, then iterate. Fixing a misunderstanding early is 100ร cheaper than fixing it late.
### Core Asset Protocol ยท 5-step hard process
Mandatory whenever the task involves a specific brand: ask โ search โ download (three fallback paths) โ verify + extract โ write `brand-spec.md` covering **logo, product shots, UI screenshots, colors, fonts** โ all required assets, not just colors.
---
## Core Mechanics
### Core Asset Protocol
The hardest rule in the skill. When the task touches a specific brand (Stripe, Linear, Anthropic, DJI, your own company, etc.), five steps are enforced:
| Step | Action | Purpose |
|---|---|---|
| 1 ยท Ask | Checklist of 6 asset types: logo / product shots / UI screenshots / color palette / fonts / brand guidelines | Respect existing resources |
| 2 ยท Search official channels | `.com/brand` ยท `.com/press` ยท `brand..com` ยท product pages ยท launch films | Find authoritative assets |
| 3 ยท Download by asset type | Logo (SVG โ inline-SVG in HTML โ social avatar) ยท Product shots (hero โ press kit โ launch video frames โ AI-generated from reference) ยท UI (App Store screenshots โ official video frames) | Three fallback paths per asset type |
| 4 ยท Verify + extract | Check logo fidelity ยท product image resolution ยท UI freshness ยท grep color hex from real assets | **Never guess from memory** |
| 5 ยท Freeze to spec | Write `brand-spec.md` with logo paths, product image paths, UI screenshot paths, CSS variables for colors/fonts | Un-frozen knowledge evaporates |
**Ranking of asset importance** (from the skill's internal rubric):
1. Logo โ mandatory for any brand
2. Product renders โ mandatory for physical products
3. UI screenshots โ mandatory for digital products
4. Color values โ auxiliary
5. Fonts โ auxiliary
A/B-tested (v1 vs v2, 6 agents each): **v2 reduced stability variance by 5ร**. Stability of stability โ that's the real moat.
### Design Direction Advisor (Fallback)
Triggered when the brief is too vague to execute:
- Don't run on generic intuition โ enter Fallback mode
- Recommend 3 differentiated directions from 5 schools ร 20 philosophies, each **from a different school**
- Each comes with flagship works, gestalt keywords, representative designer
- Generate 3 visual demos in parallel, let the user choose
- Once chosen, continue into the Junior Designer main flow
### Junior Designer Workflow
The default working mode across every task:
- Send the full question set in one batch, wait for all answers before moving
- Write assumptions + placeholders + reasoning comments directly into the HTML
- Show it to the user early (even if just gray blocks)
- Fill in real content โ variations โ Tweaks โ show at each of these three steps
- Manually eyeball the browser with Playwright before delivery
### Fact Verification First (Principle #0)
The highest-priority rule, added after a real failure mode: when the task mentions a specific product / technology / event (e.g., "DJI Pocket 4", "Nano Banana Pro", "Gemini 3 Pro"), the first action **must** be a `WebSearch` to confirm existence, release status, current version, and specs. No claims from training-corpus memory. Cost of a search: ~10 seconds. Cost of a wrong assumption: 1โ2 hours of rework.
### Anti AI-slop Rules
Avoid the visual common denominator of AI output (purple gradients / emoji icons / rounded-corner + left border accent / SVG humans / Inter-as-display / **CSS silhouettes standing in for real product shots**). Use `text-wrap: pretty` + CSS Grid + carefully chosen serif display faces + oklch colors.
---
## vs. Claude Design
I'll be upfront: the Core Asset Protocol's philosophy was lifted from system prompts Anthropic wrote for Claude Design. That prompt hammers home a single idea โ **great hi-fi design doesn't start from a blank page, it grows from existing design context**. That one principle is the difference between a 65-point design and a 90-point design.
Positioning differences:
| | Claude Design | huashu-design |
|---|---|---|
| Form | Web product (used in browser) | Skill (used in Claude Code) |
| Quota | Subscription quota | API usage ยท parallel agents unblocked |
| Output | Canvas + Figma export | HTML / MP4 / GIF / editable PPTX / PDF |
| Interaction | GUI (click, drag, edit) | Conversation (tell agent, wait) |
| Complex animation | Limited | Stage + Sprite timeline ยท 60fps export |
| Agent compatibility | Claude.ai only | Claude Code / Cursor / Trae / Hermes / OpenClaw |
Claude Design is a **better graphics tool**. Huashu-design makes **the graphics-tool layer disappear**. Two paths, different audiences.
---
## Limitations
- **No layer-editable PPTX-to-Figma round-trip.** The output is HTML โ screenshottable, recordable, image-exportable, but not draggable into Keynote for text-position tweaks.
- **Framer-Motion-tier complex animations are out of scope.** 3D, physics simulation, particle systems exceed the skill's boundaries.
- **Brand-from-zero design quality drops to 60โ65 points.** Drawing hi-fi from nothing was always a last resort.
This is an 80-point skill, not a 100-point product. For people unwilling to open a graphical UI, an 80-point skill beats a 100-point product.
---
## Repository Structure
```
huashu-design/
โโโ SKILL.md # Main doc (read by agent, Chinese)
โโโ README.md # Chinese README (default)
โโโ README.en.md # English README (this file)
โโโ assets/ # Starter Components
โ โโโ animations.jsx # Stage + Sprite + Easing + interpolate
โ โโโ ios_frame.jsx # iPhone 15 Pro bezel
โ โโโ android_frame.jsx
โ โโโ macos_window.jsx
โ โโโ browser_window.jsx
โ โโโ deck_stage.js # HTML deck engine
โ โโโ deck_index.html # Multi-file deck assembler
โ โโโ design_canvas.jsx # Side-by-side variation display
โ โโโ showcases/ # 24 prebuilt samples (8 scenes ร 3 styles)
โ โโโ bgm-*.mp3 # 6 scene-specific background tracks
โโโ references/ # Drill-down docs by task (Chinese)
โ โโโ animation-pitfalls.md
โ โโโ design-styles.md # 20 design philosophies in detail
โ โโโ slide-decks.md
โ โโโ editable-pptx.md
โ โโโ critique-guide.md
โ โโโ video-export.md
โ โโโ ...
โโโ scripts/ # Export toolchain
โ โโโ render-video.js # HTML โ MP4
โ โโโ convert-formats.sh # MP4 โ 60fps + GIF
โ โโโ add-music.sh # MP4 + BGM
โ โโโ export_deck_pdf.mjs
โ โโโ export_deck_pptx.mjs
โ โโโ html2pptx.js
โ โโโ verify.py
โโโ demos/ # Capability demos referenced by this README
```
---
## Origin Story
The day Anthropic launched Claude Design I played with it until 4 a.m. A few days later I realized I hadn't opened it once since โ not because it's bad (it's the most polished product in the category) but because I'd rather have an agent work in my terminal than open any graphical UI.
So I had an agent deconstruct Claude Design itself (including the system prompts circulating in the community, the brand asset protocol, the component mechanics), distill it into a structured spec, then write it as a skill installed in my own Claude Code.
Thanks to Anthropic for writing the Claude Design prompts so clearly. This kind of derivative work inspired by other products is the new form of open-source culture in the AI era.
---
## License ยท Usage Rights
**Personal use is free and unrestricted** โ studying, research, creating things for yourself, writing articles, side projects, personal social media. Use it freely, no need to ask.
**Enterprise / commercial use is restricted** โ any company, team, or for-profit organization integrating this skill into a product, external service, or client deliverable **must obtain authorization from Huasheng first**. Including but not limited to:
- Using the skill as part of internal company tooling
- Using skill outputs as the primary creative method for external deliverables
- Building a commercial product on top of the skill
- Using it in paid client projects
**Commercial licensing contact**: any of the social platforms below.
---
## Connect ยท Huasheng (Huashu)
Huasheng is an AI-native coder, independent developer, and AI content creator. Notable work: Cat Fill Light (App Store Top 1 in Paid category), *A Book on DeepSeek*, Nรผwa.skill (GitHub 12k+ stars). Combined 300k+ followers across platforms.
| Platform | Handle | Link |
|---|---|---|
| X / Twitter | @AlchainHust | https://x.com/AlchainHust |
| WeChat Official Account | ่ฑๅ | Search "่ฑๅ" in WeChat |
| Bilibili | ่ฑๅ | https://space.bilibili.com/14097567 |
| YouTube | ่ฑๅ | https://www.youtube.com/@Alchain |
| Xiaohongshu | ่ฑๅ | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |
| Official Site | huasheng.ai | https://www.huasheng.ai/ |
| Developer Hub | bookai.top | https://bookai.top |
For commercial licensing, collaborations, or sponsored content, DM on any of the above.