# Huashu Design: An HTML-Native Design Skill for Claude Code and Other Agents

> Huashu Design turns a single prompt into a clickable prototype, a slide deck, or an MP4 animation by generating plain HTML. It is a skill, not an app, and its strongest feature is a five-step brand-asset protocol that stops the model from guessing your colours.

**alchaincyf/huashu-design** — Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic.

- Repository: https://github.com/alchaincyf/huashu-design
- Stars: 24,536 · Forks: 2,797
- Language: HTML
- License: MIT
- Published: 2026-08-08 · Updated: 2026-08-18 · Language: en
- Canonical page: https://hysenlabs.com/projects/alchaincyf-huashu-design

## What Huashu Design actually produces

Huashu Design is a skill file plus supporting directories that an agent loads when you ask for design work. The README frames it as "Type. Hit enter. A finished design lands in your lap." That is marketing, but the deliverable list is concrete: single-file HTML prototypes, HTML slide decks with an editable PPTX export, timeline animations rendered to MP4 and GIF, infographics exportable as PDF, PNG at 300dpi or SVG, and a five-dimension design review.

The intended user is someone who already talks to Claude Code, Cursor, Codex, OpenClaw or Hermes and would otherwise open Figma. The README claims a 3 to 30 minute turnaround depending on the artefact, and lists typical durations of 10 to 15 minutes for an interactive prototype and 15 to 25 minutes for a slide deck. Those are the project's own numbers, not measured independently.

The interesting part is not the output format. It is that the project treats HTML and CSS as the rendering layer for everything, including PPTX, so there is no proprietary document format in the middle.

## How the skill is structured and what the agent reads

The repository root holds SKILL.md alongside four directories the README says contain 99 referenced recipes, scripts and assets: references/, assets/, scripts/ and demos/. There is also test-prompts.json, a package.json with four dependencies (pdf-lib, playwright, pptxgenjs and sharp), and a .env.example for optional cloud services.

Two mechanisms carry most of the weight. The first is the brand-asset protocol, a five-step sequence the skill enforces when a specific brand is involved: ask whether the user has brand guidelines, search the official brand pages, download assets with three fallbacks (SVG file, then full site HTML, then colour sampling from product screenshots), grep every hex value and sort by frequency while filtering black, white and grey, then freeze the result into a brand-spec.md and CSS variables that all HTML references as var(--brand-*). The README states the rule plainly: never guess brand colours from memory.

The second is the Junior Designer workflow, which is the default mode. Before building, the skill writes assumptions, placeholders and reasoning comments into the HTML, shows the user early even if it is only grey boxes, then shows again after filling content, after variations, and after tweaks. The README argues that correcting a wrong assumption early is cheaper, which is the kind of claim every design tool makes, but here it is backed by an actual ordering constraint in the workflow rather than a slogan.

## Installing Huashu Design and running a first prompt

Installation is a single command through the skills CLI. The README notes that Claude Code, Cursor, Codex, OpenClaw and Hermes can all load it, so the same install works across agents.

```bash
npx skills add alchaincyf/huashu-design
```

After installing, the README asks you to inspect the install directory, for example ~/.claude/skills/huashu-design/, and confirm that references/, assets/, scripts/ and demos/ are present next to SKILL.md. If only SKILL.md appears, the skills CLI is too old: the README states that versions up to 1.5.15 had a bug that synced a single file, fixed in 1.5.19. Upgrade and reinstall.

```bash
npm i -g skills@latest
```

If the upgrade does not fix it, the README gives git clone as a fallback, cloning the repository straight into a skills directory.

```bash
git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design
```

With the skill in place, you prompt the agent in natural language. The README's own examples include asking for a talk deck with three style directions to choose from, an iOS prototype with four clickable screens, a 60-second animation exported to MP4 and GIF, or a five-dimension review of an existing design. There is no panel, no button and no Figma plugin; the interaction is the conversation. The README also links a YouTube walkthrough recorded by the author for anyone who prefers video.

## The brand-asset protocol is the real differentiator

Most agent design workflows fail in the same place: the model invents a palette that looks plausible and is wrong. Huashu Design's answer is procedural rather than prompt-based. The five steps are ordered so that each one only runs if the previous one failed, and step four is a grep over downloaded assets rather than a recollection. Sorting hex values by frequency and discarding black, white and grey is a crude heuristic, but it is a heuristic grounded in the actual artefact rather than in the model's training data.

Step five matters more than it looks. Writing brand-spec.md and CSS variables means the colour decision survives across the HTML files the agent generates in a session, and across sessions if the file is kept. Without that step, the README argues, the model forgets. That is a fair description of how context windows behave.

The README also reports an A/B test comparing v1 and v2 across six agents each, claiming v2's stability variance was five times lower. Treat that as a project-reported result. The methodology is not described in the README, so the number tells you the authors measured something, not that the measurement would reproduce on your prompts.

## Where the approach breaks down

The install path is the first failure mode, and it is not a small one. A skill that silently loads as a single file will still respond to prompts, but roughly 99 referenced files will be missing, so scripts, style libraries and demo assets will not resolve. The symptom is a model that appears to ignore its own instructions. The README acknowledges this and points at a CLI version bug, which is honest, but it also means the skill's correctness depends on a third-party installer you do not control.

Animation is the second weak point. The README describes a Stage plus Sprite timing model with useTime, useSprite, interpolate and Easing, and an export command producing MP4, GIF, 60fps interpolation and a BGM mix. The .env.example shows that BGM-adjacent and review features reach outside the repository: DOUBAO_TTS_API_KEY, DOUBAO_TTS_VOICE_ID, DOUBAO_TTS_CLUSTER and DOUBAO_TTS_ENDPOINT point at Volcengine's speech service, and ARK_API_KEY points at Volcengine Ark for the optional video review script. Those are optional, but they are cloud dependencies with their own accounts, and the README does not document what happens to an export when the keys are absent.

Finally, the output is HTML. If your team's design system lives in Figma libraries or a component package, Huashu Design produces artefacts that sit outside it. The PPTX export addresses one handoff, not the general case.

## Huashu Design compared with Claude Design and Open Design

The comparison people search for is Huashu Design versus Claude Design. The README devotes a section to the relationship, and the structural difference is that Huashu Design is agent-agnostic: the install command works in Claude Code, Cursor, Codex, OpenClaw and Hermes, and nothing in the repository layout ties it to one vendor. A first-party design feature inside a single agent cannot be loaded into a different agent, which matters if your team is not standardized on one tool.

The second difference is where the design knowledge lives. Huashu Design ships it as files: a 60-style HTML library (20 web, 20 slide, 20 infographic, graded bold, neutral and quiet), a brand-asset protocol, a five-dimension review rubric covering philosophical consistency, visual hierarchy, detail execution, functionality and innovation, each scored 0 to 10 with a radar chart. Those are inspectable and editable. A hosted design feature is not.

Against Open Design, which appears in the related searches, no feature-by-feature comparison can be made from what the repository documents, so the honest statement is that Huashu Design's distinguishing property is the same one: it is a repository of markdown, HTML and scripts you can read before you trust it.

## Licence, maintenance and the cost of upgrading

The licence is MIT, and the README states that the project moved to MIT on 2026-05-14, making it free for personal and commercial use without prior authorization. The earlier terms, which the README describes as free for personal use with a commercial licence required for enterprises, are declared void. If you evaluated Huashu Design before that date and rejected it on licensing grounds, that reason no longer applies. This is a description of what the repository says, not legal advice; read LICENSE before shipping anything commercially.

On maintenance, the last push to the default branch was on 2026-04-21, which is the same timestamp as the v2.0 release. The repository is not archived. The README is written in Chinese with an English translation at README.en.md, and the v2.0 release notes mention nine capability demos remade in both Chinese and English versions, so the translation is maintained alongside the source.

Upgrade cost is low in the ordinary case, because the artefact is a directory of files rather than a running service. The one thing to watch is the skills CLI version, since the README ties correct installation to 1.5.19 or later. If you pin the CLI for reproducibility, pin it above that floor.

## Conclusion

Adopt Huashu Design if you already work inside an agent that reads SKILL.md and you want deliverables you can hand to a client without a Figma round trip. Skip it if you need a GUI, a design system that lives outside your repository, or a tool that works without an LLM in the loop. Before you rely on it, install it and check that references/, assets/, scripts/ and demos/ all landed next to SKILL.md, because a partial install leaves roughly 99 referenced files missing and the skill will fail in ways that look like model errors rather than packaging errors.

## FAQ

### What is Huashu Design?

It is an HTML-native design skill for agents such as Claude Code, Cursor and Codex. It generates single-file HTML prototypes, slide decks with an editable PPTX export, animations rendered to MP4 or GIF, and infographics, from a natural-language prompt.

### How does Huashu Design compare with Claude Design?

The README covers this relationship directly, and the structural difference is that Huashu Design installs through the skills CLI into Claude Code, Cursor, Codex, OpenClaw and Hermes rather than being tied to one agent. Its design knowledge also ships as readable files, including a 60-style HTML library and a five-dimension review rubric.

### What alternatives to Huashu Design exist?

Open Design comes up in searches about this project, but the repository does not describe it, so no feature comparison can be made from what is documented. The property Huashu Design does document is being agent-agnostic and shipping its design rules as editable markdown, HTML and scripts.

## Sources

- [Official README](https://github.com/alchaincyf/huashu-design#readme)
- [Project repository](https://github.com/alchaincyf/huashu-design)
- [Release notes](https://github.com/alchaincyf/huashu-design/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/alchaincyf-huashu-design