Skip to content

Huashu Design Studio

Makes the agent work like a design studio: explores three directions before building HTML prototypes, decks, animations and reviews

Stars
28,466
Licence
MIT
Files
7 files

What it does

Once installed, the agent stops making generic AI-looking pages and instead works like a small design studio. For any new visual piece it first sketches several design directions, shows them to you, and only builds the full version after you pick one. It produces HTML-based prototypes, 1920x1080 slide decks, infographics, and timed animations that can be exported to MP4 or GIF, and it can review existing designs with scores.

Great for

  • Designers who want quick high-fidelity HTML mockups and visual explorations
  • People making slide decks or pitch presentations with HTML
  • Marketers or creators producing animated promo clips or infographics

Skip it if

  • Production web apps or systems that need a backend, which the skill explicitly excludes
  • Users who want a fast single answer without reviewing several options first, since the three-direction gate requires a pause for your choice
  • Projects where scripts running on your machine are not acceptable, because the skill runs Python helper scripts and may store a local taste profile

Try asking

  • “Make a high-fidelity prototype for a coffee shop landing page and show me three design directions first”
  • “Build a 10-slide HTML deck for my startup pitch in 1920x1080”
  • “Create a 30-second animated product intro and export it as MP4”
  • “Review this dashboard design and score how polished it looks”
Step-by-step guide: how to use Huashu Design StudioInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the MIT licence and an attribution note.

    huashu-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip huashu-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip huashu-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your brand assets, logos or reference sites up front so it does not have to guess
  • When the three directions appear, reply with your choice and any taste notes; those notes get saved locally
  • Answer the agent's questions about content and audience to get a more specific design

What's inside

  • package-lock.json
  • package.json
  • README.en.md
  • README.md
  • SECURITY.md
  • SKILL.md
  • test-prompts.json

Redistributed unmodified from alchaincyf/huashu-design under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.