_{🌐 English · 中文}

npx skills add alchaincyf/huashu-design

_{▲ 10-second hero animation showing what huashu-design does (download MP4 if autoplay doesn't work)}

Install

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

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:

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 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                # English README (default, this file)
├── README.zh.md             # Chinese README
├── 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

Relicensed to MIT on 2026-05-14. This skill was previously released under a Personal Use License that restricted commercial use. That restriction is now removed.

Under the MIT License you are free to use, modify, and distribute this skill for any purpose, including commercial use — inside companies, in client deliverables, as part of a paid product, anywhere. No prior authorization, no licensing fee, no notification required. Attribution is appreciated but not required.

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 21k+ stars). Combined 300k+ followers across platforms.

For collaborations or sponsored content, DM on any of the above.