Repolode
Submit
alchaincyf

alchaincyf/huashu-design

An HTML-native design skill for AI coding agents that turns a text prompt into prototypes, slide decks, animations and infographics.

Open-source alternative to:FigmaAdobe After Effects

View on GitHub
Stars
25,426
Forks
2,850
Open issues
4
Last commit
3 days ago

What is it?

Huashu Design is an agent skill that installs into Claude Code, Codex, Cursor and similar tools. It has the agent produce design deliverables as HTML files, so a prompt can yield a clickable iPhone-style app prototype, a presentation deck with an editable PPTX export, a timeline animation exported as MP4 or GIF, or a print-quality infographic.

The skill is built around a brand asset protocol: when a specific brand is named, the agent looks for official brand pages and assets, extracts color values from them, and records them in a brand spec before designing. When the request is vague, it offers a set of style directions drawn from an 84-style HTML-native library, shows six thumbnails, and builds three full versions for the user to choose from.

It also includes a five-dimension design review that scores philosophy consistency, visual hierarchy, detail execution, functionality and innovation, with a Keep / Fix / Quick Wins list. The core pipeline runs locally, while optional cloud features such as text-to-speech and AI video review are isolated in a separate folder and require explicit confirmation.

Key features

  • 01Generates single-file HTML prototypes, including iPhone 15 Pro frames and clickable multi-screen flows.
  • 02Exports slide decks to HTML for presenting and to editable PPTX with real text boxes.
  • 03Renders timeline animations to MP4 and GIF, with optional 60fps interpolation and background music.
  • 04Offers design direction exploration with thumbnails and an 84-style reference library.
  • 05Runs a five-dimension design critique with a radar chart and actionable fix list.

Use cases

  • Drafting a conference slide deck with a few style options before committing to one.
  • Building a clickable mobile app prototype from a one-line description.
  • Producing a short product launch animation exported as MP4 or GIF.
  • Getting a structured critique of an existing design before handoff.

Quick start

  1. 1

    Install the skill with the skills CLI

    npx skills add alchaincyf/huashu-design
  2. 2

    Open your agent (Claude Code, Codex, Cursor, etc.) and describe the design you want in plain language

Things to know

  • Cannot export layer-editable PPTX to Figma; output is HTML, screenshots, video, or text-editable PPTX.
  • Complex 3D, physics, or particle animations are beyond the skill's scope.
  • Designs made from a blank brand start are rated around 60–65 quality by the author, so providing brand assets is recommended.

Topics

#design#agent-skill#claude-code#html#prototyping#slides#animation#ui-design

FAQ

What is huashu-design?
An HTML-native design skill for AI coding agents that turns a text prompt into prototypes, slide decks, animations and infographics. Huashu Design is an agent skill that installs into Claude Code, Codex, Cursor and similar tools. It has the agent produce design deliverables as HTML files, so a prompt can yield a clickable iPhone-style app prototype, a presentation deck with an editable PPTX export, a timeline animation exported as MP4 or GIF, or a print-quality infographic.
Is huashu-design free to use? What license does it have?
huashu-design is open source under the MIT license. Check the license terms before using it in commercial products.
Is huashu-design still maintained?
Actively maintained. The last commit to huashu-design was on Oct 17, 2026.
What can I use huashu-design for?
Drafting a conference slide deck with a few style options before committing to one. Building a clickable mobile app prototype from a one-line description. Producing a short product launch animation exported as MP4 or GIF. Getting a structured critique of an existing design before handoff.
How do I install huashu-design?
Install the skill with the skills CLI: npx skills add alchaincyf/huashu-design Open your agent (Claude Code, Codex, Cursor, etc.) and describe the design you want in plain language
Where can I get huashu-design?
The source code and installation instructions are on GitHub: https://github.com/alchaincyf/huashu-design

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects