Kuala Lumpur
← Back to the library

SKILL3D & design

Huashu Design: see three design directions before the full build

A free MIT design skill by Huasheng. Your agent shows three different looks as real drafts and waits for your pick. Also makes decks, prototypes and short animations.

WHAT YOU’LL GET

Three side-by-side drafts of your deck, prototype or promo, so you choose the look instead of accepting the first thing the agent made.

WHO IT’S FOR

Owners and professionals who need a pitch deck, a clickable app prototype or a launch animation, made with Claude Code or Codex.

DIFFICULTY

Intermediate

TIME

About 10 minutes to install

WORKS WITH

Claude Codex

Get the full file

The whole resource as one Markdown file for your notes or your AI workspace.

FREEOpen the tool

What it does

Most of us ask an AI for a deck or a mockup, get one version, and then spend an hour nudging it. The real decision, which look to go with, never happened.

Huashu Design, by the developer Huasheng (@AlchainHust), puts that decision first. Before it makes any new visual, the skill tells your agent to prepare three different directions as real drafts, show them side by side, and stop until you choose. Its instructions say that after you pick, it builds in that direction and checks the result in a browser.

The README lists the kinds of visual work it covers, and they match what an owner or professional actually needs:

  • clickable app or web prototypes in a single HTML file,
  • slide decks in HTML that can also export to an editable PowerPoint file,
  • short animations exported to MP4 or GIF,
  • infographics, and a design review that lists what to keep and what to fix.

I have it installed in my own Claude Code. The skill's instructions are written in Chinese; the README says the agent works fine with English requests.

What you need first

  • Claude Code, Codex, Cursor or another agent that reads SKILL.md skill folders.
  • Node.js, for the npx installer.
  • The skill is free, but it runs inside a coding agent such as Claude Code or Codex, which may need a paid plan.
  • Your real material: logo, colours, product screenshots, the message. The skill works best when it starts from what you give it.

Install (checked 30 Sep 2026)

From the upstream README:

BASH
npx skills add alchaincyf/huashu-design

If the installer asks, pick your agent and whether it is for this project or all projects. Then check the installed folder. It should hold references, scripts, assets and demos as well as SKILL.md. The README warns that old versions of the skills tool copied only SKILL.md; if that happens, update and run it again with npx skills@latest add alchaincyf/huashu-design, or clone the repo straight into your skills folder:

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

We ran the npx install into a throwaway project on 30 Sep 2026 (skills tool 1.7.0). It installed the full folder, 191 files and about 32 MB, mostly demo media. Start a new agent session afterwards.

First use

Give it a real job and ask for the choice explicitly:

What to expect, from the skill's own rules: the agent asks a few questions first (who the deck is for, the core message, the tone, the format), then shows three directions, each with two sample slides, and ends its turn. Nothing else gets built until you reply with your pick. Say which one and what you would change, for example "the second one, but warmer colours".

The rules also say the three drafts happen even when you name a style, such as "Apple-like": the skill treats a style word as a starting point, not a choice. To skip them, say so plainly, for example "no need for three versions, just build it". Once you have picked, later changes to the same project do not trigger three new drafts.

How it chains with other library skills

  • Huashu Design is for decks, prototypes, animations and mockups. Its own instructions say it is not for production web apps or SEO websites. For the real site, take the direction you picked into Fable Forge or frontend-design.
  • The full order, from brief to three drafts to a design file to the real build, is in Pick a design direction before your AI builds.
  • For an animation that needs a timeline, captions and a proper render, compare it with HyperFrames.

Watch-outs

  • Licence: MIT since 14 May 2026. Earlier versions carried a personal-use licence; if you copied the skill before that date, update it.
  • Watermark on animations. By default, animation exports carry a small "Created by Huashu-Design" mark. Slides, prototypes and pages do not. Ask the agent to remove it if you need to.
  • Optional cloud add-ons. Text-to-speech voice-over and an AI video review need Volcengine API keys (see its .env.example). Volcengine is a paid cloud service, so these calls can cost money. The voice-over sends your script text to it, and the video review sends your rendered video. You do not need either for decks or prototypes. If you add keys, tell the agent to ask you before each call. Keep any key in a .env file, never in chat.
  • Images you did not make. The prototypes can pull real images from sources such as Wikimedia and Unsplash. Check each image's licence before a client or the public sees it, or use your own photos.
  • Three drafts cost more. Each direction is a real draft, so a first run uses more time and more of your plan's usage than a single version.
  • Where it came from. The author says he built it by having an agent study Anthropic's Claude Design product, including prompts shared in the community. The licence is MIT; that background is worth knowing.

github.com/alchaincyf/huashu-design, by Huasheng (alchaincyf), MIT. This page is our own summary.

MORE LIKE THIS

PROMPT · 3D & designBrief: turn your logo text into floating 3D letters with three.jsPROMPT · 3D & designBrief: a Rubik's cube that scrambles and solves itself in three.jsGUIDE · 3D & designthree.js: why your black 3D text looks grey, and how to fix it