Skip to content
Get packs

Huashu Design

An agent skill that turns a one-line prompt into HTML prototypes, slides, animations and infographics.

GitHub Download v3.1.0
Stars
28.5k
Forks
3.1k
Licence
MIT
Language
HTML
Last update
6 days ago
Type
CLI

What it is

Huashu Design is a skill (a set of instructions and scripts) 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 like web pages, app prototypes, slide decks with editable PPTX export, animations and infographics. It can also offer several style directions to choose from before building.

  • Generate a clickable single-file HTML iPhone app prototype from a one-line request
  • Build a slide deck in HTML and export it to an editable PPTX
  • Create a short motion piece and export it to MP4 or GIF
  • Ask for a 5-dimension design review with a radar chart and a fix list

Great for

  • Designers or founders who want quick visual drafts from a short text prompt
  • Developers already working inside Claude Code, Codex or Cursor who want design output without leaving the agent
  • People making simple presentations or product announcement animations
  • Users who want to pick between several style directions before committing

Not ideal for

  • Teams that need a full Figma-style collaborative design workflow, since the README says there is no panel or Figma plugin
  • Anyone needing pixel-level control over production UI code without reviewing agent output, because the README describes AI-generated results that still need judgment
  • People without an agent that supports skills, since the tool is installed into such agents
Step-by-step guide: how to use Huashu DesignInstall, first run, examples, tips and FAQs
Huashu Design alternativesExcalidraw vs Huashu DesignHuashu Design vs reveal.jsHuashu Design vs SlidevHuashu Design vs 张雪峰.skill

How to get it

  1. 1

    Install with a package manager

    You'll need: An agent that supports skills, such as Claude Code, Codex or Cursor · Node.js (needed for npx and the skills CLI)

    Install the skill via the skills CLI

    npx skills add alchaincyf/huashu-design

    Update the skills CLI if the install is incomplete

    npm i -g skills@latest

    Fallback: clone the repo into a skills directory

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

    Run it

    • Install the skill with the npx command
    • Check that the install folder contains references, assets, scripts and demos subfolders alongside SKILL.md
    • Open your agent (Claude Code, Codex or Cursor) and type a one-line design request in plain language
    • Review the options or variants the agent returns and ask for changes
  3. 3

    Get the most out of it

    • Provide brand assets such as a logo, color palette or UI screenshots so the skill can match your brand tone, as the README suggests
    • Ask for the design direction advisor when your request is vague to get three real visual options
    • Use the Tweaks feature to adjust colors, fonts and information density live in the browser
    • Run the 5-dimension expert review on a finished design to get Keep, Fix and Quick Wins lists

Downloads

Source code (.zip)master branch · straight from GitHubRelease v3.1.0Release notes and source

Strengths

  • Runs inside several popular agents, and the README says it installs with a single npx command
  • Produces HTML-native output that can be previewed in a browser and exported to PDF, PNG, SVG, MP4 or PPTX
  • Ships with a large built-in style library of 84 styles, each with a sample image

Trade-offs

  • Installation can fail on older skills CLI versions; the README says versions 1.5.15 and below sync only a single file, so you must check for the subfolders
  • Much of the documentation and examples are in Chinese, with an English README linked separately
  • Quality depends on the agent and prompt; the README's showcase examples were chosen by the author

How it compares

ProjectStarsTypeLevelUpdatedBest for
huashu-design (this)28.5kCLIbeginner6 days agoDesigners or founders who want quick visual drafts from a short text prompt
excalidraw135kAppbeginner4 days agoTeams sketching diagrams or wireframes together in a shared canvas
reveal.js72.5kLibraryintermediate1 months agoDevelopers who already write HTML, CSS, or JavaScript and want full control over slide design
slidev49.3kDev toolbeginner14 days agoDevelopers who want to present code, technical talks, or architecture diagrams
planning-with-files27.8kDev toolbeginner6 days agoDevelopers running long multi-step tasks in Claude Code or Codex CLI
Kami12.2kAI model / agentbeginner5 days agoPeople who use Claude Code, Codex, or Cursor and want polished documents without manual layout work

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.