What is the Huashu Design skill?
Huashu Design is an agent skill from alchaincyf for making design work in HTML: clickable prototypes, slide decks with editable PPTX export, motion exported to MP4 or GIF, infographics and expert critiques. Its SKILL.md tells the AI coding agent to offer three directions first and to follow a brand asset protocol. The SKILL.md is written in Chinese.
Huashu Design is a skill from the developer behind the alchaincyf account. Its README describes saying one sentence to your agent and getting a design back: a product launch animation, a clickable app prototype, an editable PPT deck or a print-grade infographic. It lists typical times from 3 to 30 minutes.
The SKILL.md and reference files are written in Chinese. The README says the agent is bilingual and works with English tasks, and it provides an English README.
What changes in your agent's output
- Every new design starts with three differently styled draft directions for you to choose from, even when you name a style or brand.
- Work on a specific brand follows a five-step asset protocol: ask, search official channels, download, verify and extract, then freeze to a brand-spec.md.
- The default working mode is a junior designer workflow: assumptions and placeholders first, shown early, then iterated.
- Vague briefs go through a design direction advisor that picks directions from 5 schools and 20 design philosophies.
- Output is checked: prototypes are click-tested with Playwright before delivery.
What the skill produces
The README table lists interactive prototypes as single-file HTML, slide decks as HTML and editable PPTX, motion as MP4 and GIF, design variations with live parameter switching, infographics exported to PDF, PNG or SVG, direction advice and a five-dimension critique scored from 0 to 10.
Who the Huashu Design skill is for
Best for
- Marketers and founders who need prototypes, decks or launch animations without a design tool.
- Exploring several visual directions before committing, with variations side by side.
- Pairing with a code-side skill such as frontend-design or an audit like critique.
Not for
- Production web apps or systems that need a backend. The SKILL.md says it does not apply there.
- Teams that need English-language skill instructions. Check that your agent copes with the Chinese SKILL.md.
Use it with UiChemy
Huashu Design outputs HTML. UiChemy AI to WordPress imports an existing AI build, so a prototype you approve can move into a WordPress site, and Composer then edits it in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Huashu Design Skill: HTML Prototypes, Decks and Motion
git clone https://github.com/alchaincyf/huashu-design.gitClone into a skills folder
The README's fallback route is
git clone https://github.com/alchaincyf/huashu-design.gitinto a skills directory your agent reads. Name the folder huashu-design.Keep the whole repository
The skill depends on references, assets, scripts and demos folders, which the README says hold 99 referenced recipes, scripts and assets. Do not copy SKILL.md alone.
Check the folders exist
After copying, confirm references, assets and scripts sit beside SKILL.md.
Describe the design you want
Ask in plain words, for example for a clickable prototype or a launch animation, and pick one of the three directions.
Check that it loaded
Ask for a one-screen prototype. The agent should offer three differently styled directions before building, then deliver a single-file HTML you can open in a browser.
Key features
- Three directions firstThe SKILL.md requires a three-direction draft round for every new design before execution.
- Interactive prototypesSingle-file HTML with an iPhone bezel, state-driven screens and Playwright click tests.
- Slides to editable PPTXHTML decks for the browser plus an html2pptx.js export that produces real PowerPoint text frames.
- Motion designAn animation engine that exports MP4 and GIF, with background music options.
- Design variationsThree or more variants side by side, with live parameter switching for color, type and density.
- InfographicsPrint-quality typography exported to vector PDF, 300 dpi PNG or SVG.
- Design direction advisorA fallback that offers three directions from 5 schools and 20 philosophies and builds demos of each.
- Five-dimension critiqueScores philosophy, hierarchy, craft, function and innovation from 0 to 10, with a keep, fix and quick wins list.
- Core Asset ProtocolA five-step process for brand work covering logo, product shots, UI screenshots, colors and fonts, frozen into brand-spec.md.
- Anti-slop rulesThe SKILL.md carries a core section on avoiding generic AI design output and a quick-check list.
Frequently asked questions
What is the Huashu Design skill?
It is an agent skill in alchaincyf/huashu-design for producing design work in HTML: prototypes, slide decks, motion, infographics and expert critiques. It requires a three-direction draft round before building anything new.
How do I install it without npx?
Clone the repository with git into a skills folder your agent reads, for example a folder named huashu-design. Keep the references, assets, scripts and demos folders, since the skill depends on them. The README names this as its fallback install.
Is it usable in English if the SKILL.md is in Chinese?
The README says the agent prompts are in Chinese but the agent is bilingual and works with English tasks, and it ships an English README. Test one task first, since results depend on how well your agent follows the Chinese instructions.
What can it export?
Single-file HTML prototypes, HTML slide decks, editable PPTX with real text frames, MP4 and GIF animation, and infographics as vector PDF, 300 dpi PNG or SVG, according to the README's capability table.
Is it for production websites?
No. The SKILL.md says production web apps and systems that need a backend are out of scope. It makes prototypes, decks and visual pieces. For production UI rules see frontend-ui-engineering.
Why does it always offer three directions?
The SKILL.md makes a three-direction first draft mandatory for every new design, even when you specify a style or brand, so you choose before execution. For brand work it adds a five-step asset protocol to avoid guessing logos and colors.
What license does it use?
The repository is MIT licensed, and the README says it moved to MIT on 2026-05-14, free for personal and commercial use. The 47.8K install count on this page comes from a third-party skills listing, not from the repository.