AH

alchaincyf/huashu-design

Developer tools

This page was translated automatically. Technical details may differ from the original. View the original

28.2K stars Quality 76 Trend 98MIT

Huashu Design · HTML-native design skill for Claude Code · Native HTML design skills in Claude Code · High-fidelity prototypes / slides / animations + 20 design philosophies + 5D review + MP4 export · Agent-agnostic

Overview

"Type. Enter. A design that can be delivered." "Type. Hit enter. A finished design lands in your lap." In 3 to 30 minutes, you can ship a snippet, a clickable app prototype, an editable PPT, or a print-grade infographic. It's not the kind of 'AI is okay'—it looks like a design team from a big company. Give skill your brand assets (logo, color swatch, UI screenshots), and it will understand your brand temperament; If you give nothing else, ** can still cover the bottom line so much that AI slops won't appear. It's not Figma, not AE, just a one-sentence prompt + skill running the job. Next product launch, should you make a promotional video? You can do it now. Cross-agent universality—Claude Code, Cursor, Codex, OpenClaw, Hermes can all be installed. 📣 Since 2026-05-14, this skill is fully open source (MIT License), and individuals and ** do not require prior authorization. The original clause of "free for personal use, license required for enterprise and commercial use" has been voided. (View changes) ▲ 25 seconds · Terminal → 4 directions → Gallery ripple → 4 times Focus → Brand 👉 reveal Access the interactive version of HTML with sound effects · Download MP4 (with BGM+SFX · 10MB) Then speak directly in any agent that supports skills, such as Claude Code / Codex / Cursor:

Overview (machine translated)

🌐 Chinese · English

Huashu Design

*“Typing. Enter. A design that can be delivered.” * *“Type. Hit enter. A finished design lands in your lap.” *

**Type a message in your agent to get back a deliverable design. **

In 3 to 30 minutes, you can ship a product launch animation, a clickable app prototype, an editable PPT, or a print-grade infographic.

It’s not the kind of ‘AI is okay’—it looks like a design team from a big company. Give skill your brand assets (logo, color palette, UI screenshots), and it will understand your brand temperament; If you don’t give anything, three real directions picked from six thumbnails + 84 style libraries with samples can still cover the bottom line without AI slops.

**Every animation you see in this README is made by huashu-design itself. ** It’s not Figma, not AE, just a one-sentence prompt + skill running smoothly. Next product launch, will you make a promotional video? You can do it now.

Cross-agent universality—Claude Code, Cursor, Codex, OpenClaw, Hermes can all be installed.

📣 > **Changed to the MIT License. ** Since 2026-05-14, this skill is fully open source (MIT License), free for both personal and commercial use, no prior authorization required. The original clause “Free for personal use, license required for enterprise commercial use” has been voided. (View changes)

🆕 > **3.0: Three directions are bolder, and projects no longer look the same. ** First release six thumbnails, then select three editions to make authentic drafts; Style library expanded to 84 types (adding two new categories: App, Chinese, and East Asia), each with sample images; Refer to works before taking screenshots; Bring a design check-up that only measures facts, and a look ledger that remembers what you’ve done. See core mechanisms for details

Observe the effect · Install · What can be done · Core mechanics · Relationship with Claude Design


▲ 25 seconds · Terminal → 4 directions → Gallery ripple → 4 times Focus → Brand reveal 👉 Access the interactive version of HTML with sound effects · Download MP4 (including BGM+SFX · 10MB)


📺 Beginner’s Tutorial (Recorded by Uncle Hua)

Not sure how to use it? Watch Huashu’s tutorial on huashu-design:

👉 Watch the full tutorial on YouTube


Ready to use as soon as you install it

Self-check after installation: This skill is not just about SKILL.md one file; in the four subdirectories references/, [T1]], scripts/, and [T3]], there are 99 referenced recipes, scripts, and materials, none of which can be omitted. After installation, take a quick look at the installation directory (such as '~/.

This page was translated automatically. Technical details may differ from the original.

Recommended Tools

Try a different keyword or remove a filter.

Install

npx skillfish add alchaincyf/huashu-design
New to MCP? Start with the mcpskill.org guide →