huashu-design
SHA-256Open-source design skill for AI agents: one prompt yields clickable prototypes, editable PPTX decks, motion videos, and print-grade infographics.
Smart Download
Download Download Version
v3.0.0 · 270.8 KB
Type one sentence in your AI agent, get back a deliverable-ready design.
Core Features
- One-sentence brief turns into deliverable web pages, app prototypes, decks, animations, and infographics
- Six thumbnail candidates narrowed to three real visual directions you pick from
- 84-style specimen library in pure HTML/CSS, including Chinese & East Asian styles
- HTML slides export to genuinely editable PPTX with real text boxes
- Timeline motion engine exports MP4/GIF with 60fps interpolation and background music
What It Can't Do
- •It is not a standalone app and has no GUI—it only works inside skills-compatible agents like Claude Code, Cursor, or Codex. Watch the installer: skills CLI 1.5.15 or older syncs only SKILL.md and silently drops the asset folders, so upgrade the CLI first or fall back to git clone. It is also not a Figma replacement: outputs are HTML, PPTX, and MP4 deliverables, not .fig source files, and there is no real-time multiplayer collaboration. For branded projects, provide logos and color palettes upfront for the best results. Motion export and Playwright-based click tests require a local Node.js environment, so absolute beginners should watch the official YouTube tutorial first.
Use Cases
- Product managers validating ideas with clickable app prototypes in minutes
- Professionals generating presentation decks exported as editable PPTX
- Creators turning concepts into 60-second launch animations or infographics
- Indie developers shipping big-tech-quality pages without a design team
- Teams auditing existing designs with a 5-dimension review and fix list
Detailed Introduction
Huashu Design 3.0 is an MIT-licensed design skill for AI agents like Claude Code, Cursor, and Codex. Type one sentence and get deliverable-ready output in 3–30 minutes: clickable app and web prototypes, HTML decks exported as truly editable PPTX, MP4/GIF animations with soundtracks, and print-grade infographics. It proposes six thumbnail directions, builds three into real visuals for you to pick, and relies on an 84-style specimen library plus a design audit and appearance ledger to avoid generic AI output. Unlike closed tools such as Canva or v0, it is free for commercial use and works across any skills-compatible agent.
Troubleshooting & FAQ (2)
TroubleshootingWhy doesn't huashu-design generate a PPT when I upload documents to GitHub Issues, and how to use it correctly?
GitHub Issues is not a runtime入口—no agent runs there, so uploaded files are never read or executed. huashu-design is a skill that must be installed into your own coding agent (Claude Code, Codex, Cursor, OpenClaw, or Hermes). Steps: 1) Install: npx skills add alchaincyf/huashu-design. 2) Verify the install directory (e.g., ~/.claude/skills/huashu-design/) contains references, assets, scripts, and demos subdirectories alongside SKILL.md. If only SKILL.md exists, your skills CLI is outdated—run npm i -g skills@latest and reinstall, or clone directly: git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design. 3) Put your source materials in a local folder, start an agent session in that folder, and describe your need in natural language (e.g., audience, duration, structure, ask for outline and time allocation first). Note: the skill always outputs 3 style drafts (2 sample pages each for multi-page decks) for you to pick from before producing the full deck—specifying a style upfront does not skip this step.
TroubleshootingHow to fix "YAML parse error: Nested mappings are not allowed in compact mappings" when running npx skills add?
This error means the SKILL.md frontmatter in the skill repo has an unquoted value containing a colon (e.g., description: Huashu-Design — HTML-based hi-fi prototypes, ... slides: ...). YAML reads the inner text: text as a nested mapping, so parsing fails and the CLI reports "No valid skills found." Fix: quote the description value in SKILL.md:
---
name: huashu-design
description: "Huashu-Design — HTML-based hi-fi prototypes, interactive demos..."
---Alternatives: remove colons from the description, or use a YAML block scalar (description: > followed by an indented line). If you are just consuming the skill and don't own the repo, fork it, fix the frontmatter, then run npx skills add <your-username>/<fork-name>, or report the malformed SKILL.md to the upstream author.
Tags
Getting Started
Install the software
Install the appropriate package for your distro (dpkg / rpm / AppImage)
Install Node.js (v18 or later) so the npx command is available in your terminal
Run npx skills add alchaincyf/huashu-design to install the skill
Verify the install folder (e.g. ~/.claude/skills/huashu-design/) contains the references, assets, scripts and demos subdirectories
- Install Node.js (v18 or later) so the npx command is available in your terminal
- Run npx skills add alchaincyf/huashu-design to install the skill
- Verify the install folder (e.g. ~/.claude/skills/huashu-design/) contains the references, assets, scripts and demos subdirectories
SHA-256 checksum verified
Checksum extracted from GitHub official Release page
SHA256 Checksum
388c726432c06b5f4e91d7e9b83556d3b44bb65fae06263f8a6b931d7dc19a38This checksum is extracted from the GitHub Release page. Verify file integrity after download.
All SHA-256 checksums on this platform are extracted from the project's official GitHub Release page, without any modification. You can independently verify them on the GitHub Releases page.
Open Source Transparency
View GitHub SourceUninstall Info
No desktop application is installed. To uninstall, simply delete the skill folder (usually ~/.claude/skills/huashu-design or your agent's skills directory). If you installed via git clone, delete the cloned folder the same way. No files remain elsewhere on your system.
No Extra Dependencies
Ready to use after download. No additional runtime required.
Having issues? Check the FAQ below
2 FAQs
Similar Projects
reveal.js
An open source HTML presentation framework that lets anyone create beautiful, interactive slideshows in a web browser.
drawio-desktop
Free offline diagramming desktop app based on draw.io. Completely isolated from internet, no data leaves your computer.
Penpot
Penpot is the open-source design platform for teams building digital products at scale, offering full ownership of design infrastructure via self-hosting and open standards like SVG/CSS/HTML.