Huashu Design: A Skill That Turns Plain Prompts into Brand-Ready HTML Deliverables

What It Actually Solves

Huashu Design addresses a specific gap in agent-based design work: the difference between a generic AI-generated mockup and a deliverable that looks like a professional design team produced it. The README claims you can type one sentence and get a clickable app prototype, an editable slide deck, a product launch animation, or a print-grade infographic in 3 to 30 minutes. The intended user is someone who already works with a coding agent and wants design output without switching to Figma or After Effects. The project is explicitly agent-agnostic, listing Claude Code, Cursor, Codex, OpenClaw, and Hermes as compatible hosts. The core value is not generating images; it is generating structured HTML and CSS that follows design principles and can be exported to standard formats.

The Brand Asset Protocol Is the Hardest Rule

The most concrete mechanism in the repository is the five-step brand asset protocol. When the user names a specific brand, the skill is forced to ask for brand guidelines first, then search official pages like <brand>.com/brand, download SVG files or screenshots, grep all hex color values from those assets, sort by frequency, filter out black and white and gray, and finally write a brand-spec.md file with CSS variables. The README states the rule bluntly: never guess brand colors from memory. This is a deliberate anti-pattern against what most AI design tools do, which is approximate a brand's palette. The protocol is not optional; the README calls it the most rigid rule in the skill. It also claims an A/B test showed v2 has five times lower variance in output stability than v1, though the test details are not provided.

Three Parallel Logic Advisors for Vague Requests

When a request is too vague to start, Huashu Design triggers a fallback that runs three complementary logic paths in parallel. The first is a seconds roulette: it takes the current second from the system clock and picks one of 20 options to break the model's habit of defaulting to minimalism. The second path references award-winning websites and migrates their visual language. The third path simulates what a top-tier design studio would do if budget were unlimited. Each path produces a real visual, not just a text description. The README emphasizes that the user never picks a style blind; they see three versions side by side. This mechanism is meant to counter the common failure where an AI produces one generic style because it cannot imagine alternatives.

The 60-Style Library and the Anti-AI-Slop Rules

Underlying the design advisor is a library of 60 HTML-native styles: 20 for web pages, 20 for slides, and 20 for infographics, all implemented in pure CSS with no image generation. The styles are graded by boldness: bold, neutral, and quiet. The README also lists explicit anti-AI-slop rules: no purple gradients, no emoji icons, no rounded corners with left border accents, no SVG faces, and no Inter font for display text. These rules are encoded in the skill's instructions, so the agent is expected to avoid the visual clichés that make AI output recognizable. This is a practical constraint that distinguishes the project from generic prompt engineering; it gives the agent a checklist of what not to do.

How the Deliverables Are Produced and Exported

The skill produces single-file HTML for prototypes, which can include an iPhone 15 Pro bezel with Dynamic Island and a status bar, and it uses Playwright to run automatic click tests on the prototype to verify interactivity. For slides, it generates an HTML deck for browser presentation and then uses a script called html2pptx.js to read the DOM's computed styles and translate each element into a PowerPoint object. The README claims the export contains real text boxes that can be edited in PowerPoint. For animations, it uses a motion engine with four APIs: useTime, useSprite, interpolate, and Easing, and exports MP4 at 25 or 60 fps with optional background music. Infographics can be exported as PDF vector, PNG at 300 DPI, or SVG. These are concrete output paths, not vague promises.

Getting It Installed and the Known CLI Bug

The installation command is npx skills add alchaincyf/huashu-design. The README warns that the skill is not a single file; it depends on four subdirectories: references, assets, scripts, and demos, with 99 referenced items. If after installation you only see SKILL.md, the README says your skills CLI version is too old, specifically at or below 1.5.15, which had a bug that synced only one file. The fix is to upgrade with npm i -g skills@latest or use npx skills@latest add, and if that still fails, clone the repository directly into any skills directory, such as ~/.claude/skills/huashu-design. This is a real operational constraint that any adopter must check before relying on the skill.

Maintenance, License, and Honest Limitations

The project is MIT-licensed, and the README explicitly states that as of 2026-05-14 it is fully open source for both personal and commercial use, with no prior authorization required. The previous restriction that commercial use required a license is void. The last push was 2026-04-21, with release v2.0 that includes nine reworked capability demos and both Chinese and English versions. One limitation is that the README is heavily Chinese-first, and while an English version exists, some nuance may be lost in translation. Another limitation is that the skill depends on external network access for fetching brand assets and public domain images; if you are offline, the brand protocol cannot work. Also, the README claims a 25-second hero animation with sound is available as an MP4 download, but the actual quality and reliability of the output in your environment cannot be confirmed from the repository alone. You must run it yourself to judge.

A Real Alternative: Claude Design and the Difference

The README explicitly references Claude Design, and the relationship is important. Huashu Design positions itself as a skill that works on top of agents like Claude Code, whereas Claude Design is likely a built-in or separate design capability from Anthropic. The key difference in approach is that Huashu Design brings its own structured rules, such as the brand asset protocol and the 60-style library, rather than relying on the agent's default design behavior. Claude Design might be more integrated into the Claude ecosystem, but Huashu Design is agent-agnostic and can be installed into Cursor or Codex as well. If you are already using Claude Code, you could try Claude Design first, but if you need cross-agent portability or the specific anti-slop constraints, Huashu Design offers a more opinionated framework.

Editorial conclusion

Adopt Huashu Design if you are a developer or designer who works inside Claude Code, Cursor, Codex, or similar agents and need quick, editable HTML deliverables like clickable prototypes, PPTX-exportable slides, or MP4 animations. Do not adopt it if you expect a Figma plugin or a standalone GUI; this is a prompt-driven skill with no visual interface. Before relying on it, verify that your skills CLI version is at least 1.5.19, because the README documents a bug in earlier versions that syncs only the SKILL.md file and leaves out the required references, assets, scripts, and demos directories. Also inspect the brand asset protocol: the skill will fetch official brand pages and grep hex values, so you must have network access and accept that it never guesses colors from memory.

Official sources

1. Official README
2. Project repository
3. Release notes