Skip to content
Get packs

Guide · Open source

How to use huashu-design: install and make designs from a prompt

Updated · written with AI from the project's own documentation and checked against our catalogue data

Huashu Design is a skill for AI coding agents such as Claude Code, Codex and Cursor. You describe a design in one sentence, and the agent produces HTML-based deliverables such as web pages, app prototypes, slide decks with editable PPTX export, animations and infographics. This guide shows you how to install it, how to phrase prompts, and what to check before you use the output.

Huashu Designalchaincyf/huashu-design · ★ 28.5k · MIT

Quick start

  1. 1Check prerequisites. Make sure you have an agent that supports skills, such as Claude Code, Codex or Cursor, and Node.js installed.
  2. 2Install the skill. Run npx skills add alchaincyf/huashu-design in your terminal.
  3. 3Verify the install folder. Confirm the skill folder contains more than SKILL.md, including references, assets, scripts and demos.
  4. 4Update or fall back if needed. If the install is incomplete, run npm i -g skills@latest and retry, or clone the repository into your skills directory.
  5. 5Write a one-sentence request. Describe the deliverable and audience in one sentence inside your agent.
  6. 6Pick a direction. Ask for several style options if you are unsure, then choose the one that fits.
  7. 7Review and export. Check the output carefully, then export the format you need such as PPTX, MP4 or PDF.

What you need before you install

Huashu Design is installed into an agent that supports skills. The README names Claude Code, Codex and Cursor as examples. You also need Node.js, because the install uses npx and the skills CLI.

The project is MIT licensed and written in HTML, according to its repository listing.

  • An agent that supports skills, such as Claude Code, Codex or Cursor
  • Node.js (needed for npx and the skills CLI)

Install huashu-design with the skills CLI

Run the install command from the README. It adds the skill to your agent's skills setup.

After installing, check the install folder, for example ~/.claude/skills/huashu-design/. The README says the skill depends on the references/, assets/, scripts/ and demos/ subfolders. If only SKILL.md is present, the README says your skills CLI may be too old (1.5.15 or earlier had a single-file sync bug, fixed in 1.5.19). Update the CLI and install again.

  • If the install is incomplete, update the CLI and retry
  • If it still fails, use the git clone fallback from the README
npx skills add alchaincyf/huashu-design

Update the skills CLI or use the git fallback

If the install is incomplete, the README suggests updating the skills CLI first. If that does not fix it, clone the repository into a skills directory. The README's example clones into ~/.claude/skills/huashu-design.

npm i -g skills@latest git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design

Ask for a design in plain language

Once installed, you talk to the agent in ordinary sentences. The README gives examples in Chinese. The pattern is a one-sentence request for a specific deliverable. You can also ask for several style directions before the agent commits to one.

The README says there are no buttons, panels or Figma plugin. Your interface is the agent chat.

  • Name the deliverable: a web page, app prototype, slide deck, animation or infographic
  • Ask for options if you want to choose a direction first
  • Ask for a review if you already have a design to check
Make a presentation deck on AI psychology, and recommend 3 style directions for me to choose from Make an AI pomodoro timer iOS prototype with 4 core screens that are truly clickable Turn this logic into a 60-second animation and export MP4 and GIF Run a 5-dimension review of this design

Choose among style directions

When your request is vague, the README describes a design direction advisor. It combines three approaches, each producing two candidates: a best-designer reference, a real-world award-winning reference in the same medium, and a random pick from the style library. Six candidates are first drawn as thumbnails, and the strongest three are built into real visuals for you to compare.

The README says the style library has 84 HTML-native styles, each with a specimen sheet.

  • Use the direction advisor when you do not know what style you want
  • Compare the three built versions before asking for refinements

Review and export your output

Deliverables listed in the README include single-file HTML prototypes, HTML decks with editable PPTX export where text boxes are kept, MP4 and GIF animations, and infographics exportable to PDF, PNG and SVG. A design review gives a radar chart and a Keep/Fix/Quick Wins list.

The README describes AI-generated results that still need your judgment. Check text, facts and details before you publish.

  • Slides: HTML deck for browser presenting, plus editable PPTX
  • Animation: MP4 and GIF output
  • Infographics: PDF, PNG or SVG
  • Review: 5-dimension score with Keep/Fix/Quick Wins

What people use it for

  • Drafting a clickable app prototype from a short description
  • Building a slide deck with editable text boxes in PowerPoint
  • Making a short product announcement animation with MP4 or GIF output
  • Creating an infographic exportable to PDF, PNG or SVG
  • Getting a design review with Keep/Fix/Quick Wins suggestions

Frequently asked questions

Is huashu-design free to use?

The repository is licensed under MIT, according to its badge and listing. The README states that the skill is open source under MIT and that personal and commercial use is free without prior authorization. Read the LICENSE file in the repository for the exact terms.

What do I need to install huashu-design?

You need an agent that supports skills, such as Claude Code, Codex or Cursor, plus Node.js for npx and the skills CLI. The skill is installed into the agent, so you cannot use it without one.

Why are some files missing after I install huashu-design?

The README says the skill needs the references, assets, scripts and demos subfolders. If only SKILL.md appears, update the skills CLI with npm i -g skills@latest and install again. If the problem continues, use the git clone fallback.

Does huashu-design have a Figma plugin or visual panel?

No. The README says there is no panel or Figma plugin. You work through chat in your agent, and the output is HTML-based deliverables.

Can huashu-design export editable PowerPoint files?

Yes, according to the README. Its HTML slides can be exported to PPTX, and the README says the exported text boxes stay editable in PowerPoint.

How does huashu-design compare to Figma, Penpot or Excalidraw?

Huashu Design generates designs from a text prompt inside an AI agent, while tools like Penpot and Excalidraw are design tools where you draw and edit directly. Choose huashu-design for quick drafts from prompts, and a dedicated design tool if you need collaborative editing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Huashu Design suits designers and founders who want quick visual drafts from one sentence, and developers already working in Claude Code, Codex or Cursor. Skip it if you need a collaborative Figma-style workflow, pixel-level control over production UI code, or you do not use an agent that supports skills.

Install options & downloads