Guide · Agent skill
How to use the Huashu Design Studio agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
huashu-design is an agent skill, a folder of instructions and helper scripts that changes how an AI agent approaches visual work. Once installed, you ask for a prototype, deck, animation or infographic in plain language, and the agent works like a small design studio: it shows you three design directions first and builds the full version only after you choose. This guide explains what the skill does, how to install it, how to trigger it, what it needs, and where to be careful.
Huashu Design Studioalchaincyf/huashu-design · MIT Download the skill Quick start
- 1Download and unzip. Download the ZIP of huashu-design from this page and unzip it so the skill folder contains SKILL.md.
- 2Place the folder. Put it in ~/.claude/skills/ for all projects, or in .claude/skills/ inside one project. Alternatively, upload it in the Claude apps under Settings → Capabilities → Skills.
- 3Check the requirements. Confirm Python 3 runs as python3 or python on your command line. Install Playwright for Python if you want the full health check, though it is optional.
- 4Make a request. Describe the visual you want, such as a deck, prototype, animation or infographic, and name the audience and any brand or reference.
- 5Choose one of three directions. Review the draft directions the agent shows and reply with the one you prefer. The full build starts only after your choice.
- 6Review and export. Check the final file in a browser or screenshot, then ask for an export such as HTML, MP4 or GIF if you need one.
What the huashu-design skill makes the agent do
The skill is built around HTML as the medium. For any new visual piece, the agent is told to act as a designer rather than a web coder, and to avoid generic AI-looking output. It covers HTML-based high-fidelity prototypes, 1920×1080 slide decks, infographics and data visualisations, and timed animations that can be exported to MP4 or GIF. It can also review existing designs and give them scores.
The skill explicitly excludes production web apps, SEO websites and systems that need a backend. Use it for visual output, not for building software that runs a business.
- Interactive prototypes and design explorations
- HTML slide decks at 1920×1080
- Infographics and data visualisation
- Animations and videos, exportable to MP4 or GIF
- Design critiques with scores
How to install the huashu-design skill
Download the ZIP of the skill from this page and unzip it. Then place the folder in one of two locations: your personal skills folder at ~/.claude/skills/, or a project-specific folder at .claude/skills/ inside the project where you work. Project-level installation keeps the skill limited to that project.
If you use the Claude apps instead of Claude Code, you can upload the skill under Settings → Capabilities → Skills. The repository's README also lists an install route through the npx skills command, which is an alternative if you prefer the command line.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
How to trigger the skill with natural requests
You do not need a special command. The skill loads when your request matches its trigger words. The source lists these Chinese trigger terms: 做原型 (make a prototype), PPT, 幻灯片 (slides), 动画 (animation), 设计风格 (design style), 评审 (review), 做个HTML页面 (make an HTML page), UI mockup, 导出MP4/GIF (export MP4/GIF) and 做个好看的 (make something good-looking).
Say what you want, what it is for and who will see it. Mention a brand, product or reference if you have one, because the skill reads existing context first and works best from real assets.
- Example: make an HTML prototype for a booking screen for a yoga studio app
- Example: make a 10-slide deck in HTML for a seed-round pitch
- Example: create a 15-second animated promo for our product launch and export it as MP4
- Example: review this landing page and score it
Expect three design directions before the full build
This is the step most new users notice. For any new visual design, the agent first produces real draft versions in three directions and stops. You then choose one, and only after that does it build the full result. This applies even if you name a style or brand. Naming a style narrows the range of interpretations but does not remove your choice.
Plan for a pause. If you want a fast single answer with no review, this skill will slow you down. Choosing one direction is the intended workflow.
- The agent shows the directions and waits for your choice, including in unattended sessions
- Your choice and its wording are recorded in a file called direction-approved.md
- The exception is when you explicitly say in the session that you want to skip the step
What the skill needs and safety notes
Python 3 is required and must be callable as python or python3 from the command line. Playwright for Python is optional: if it is missing, the health check skips it and prints an install command. Any bundled tooling needs the Node.js dependencies listed in package.json.
The skill runs Python helper scripts and uses the network. Its scripts include learn.py, design_lint.py, capabilities.py, ref_board.py, verify.py and a design gate hook. According to the security statement, the core pipeline runs locally with no network calls and no API keys. Optional cloud features live in scripts/cloud/, use keys you supply, and only run with explicit consent. The skill can also store a local taste profile in ~/.huashu-design/, which stays on your computer. If you do not want scripts running on your machine, do not install it.
- Required: Python 3
- Optional: Playwright for Python
- Node.js dependencies from package.json for bundled tooling
- Runs scripts: yes. Uses network: yes, mainly for optional cloud features
- Local taste profile: ~/.huashu-design/, which you can decline to write to
- Optional cloud calls need --yes or HUASHU_CLOUD_OK=1 and your own keys
python3 "$HD/scripts/learn.py" <主题词…>Tips for better results
Give the agent real material. Logos, product photos, UI screenshots and colour values all help. The skill treats real assets as more important than brand colour codes. If your design shows a named product, the skill expects official logos for each one.
When you state a preference, such as too plain or not AI-looking enough, say it directly. The agent records the wording and the scope you give it, and tells you when it has saved the preference. Preferences meant for one type of material are not applied to everything else. Final checks run with the skill's own lint command, and the agent is expected to view the output in a browser or with a screenshot before delivering.
- Provide your design system, codebase or brand files when you have them
- Ask for a specific output format such as a 1920×1080 deck or an MP4
- State preferences clearly and say when they apply only to one kind of work
- Ask the agent to check the file in a browser before you accept it
What people use it for
- Clickable HTML mockups for a web dashboard or desktop interface before development
- 1920×1080 HTML slide decks for pitches, lessons or reports
- Infographics and data visualisations built from your figures
- Short animated product promo clips exported as MP4 or GIF
- Scored design reviews of an existing landing page or screen
Frequently asked questions
Is the huashu-design skill free to use?
The source lists the licence as MIT. The repository states that it is open source and free for personal and commercial use. Optional cloud features may require API keys from the vendor you choose, which are not part of the skill.
What do I need to install huashu-design?
You need Python 3 available as python or python3 on your command line. Playwright for Python is optional, and the health check skips it if missing. Bundled tooling needs the Node.js dependencies in package.json.
Where do I install the skill in Claude?
Unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. In the Claude apps, upload it under Settings → Capabilities → Skills.
Does huashu-design send my data to the internet?
The core pipeline runs locally with no network calls and no API keys, according to the security statement. Cloud features are isolated in scripts/cloud/, are optional, use keys you supply, and need explicit consent before they run.
Why does the agent show three options instead of building right away?
The skill requires three real draft directions for any new visual design, and the agent must wait for you to pick one before building. This applies even if you name a style or brand. Skip it only by saying so explicitly in the session.
How does huashu-design compare with asking a general AI for a design?
The skill is designed to avoid generic AI-looking output by drawing on a style library, real asset checks and a three-direction choice. It does not handle production web apps or backend systems, so use other tools for those.
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
Choose huashu-design if you want quick high-fidelity HTML prototypes, slide decks, or animated clips, and you are happy to pick a direction before the full build. Skip it if you need a production web app or backend system, want a fast single answer, or do not want helper scripts running on your machine.
Download the skill