huashu-design
Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic
Huashu Design is an HTML-native design skill for Claude Code and other AI coding agents that transforms text prompts into deliverable design assets. Through conversational commands, it generates interactive prototypes, presentation decks, animated videos (MP4/GIF), infographics, and print-ready visuals—all using pure HTML/CSS without external design tools. The skill incorporates 20 design philosophies, 60 style presets, a brand asset protocol that extracts authentic brand colors from official sources, and a five-dimension design review system to ensure professional-grade output.
Key Features
Use Cases
- 01Creating clickable iOS or Android app prototypes from a single text description without opening Figma or design software
- 02Generating professional presentation decks in 15-25 minutes that can be presented in-browser or exported to editable PowerPoint files
- 03Producing product launch animations or explainer videos (60 seconds) with synchronized background music and sound effects
- 04Designing infographics and data visualizations with magazine-quality typography exportable as PDF, PNG (300dpi), or SVG
- 05Running five-dimension design critiques on existing work with actionable radar charts and Keep/Fix/Quick Wins checklists
- 06Exploring multiple design directions when requirements are unclear, receiving three complete visual mockups based on different design philosophies
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
huashu-design — FAQ
What is Huashu Design and what does it do?+
Huashu Design is an agent skill that enables AI coding assistants like Claude Code to generate production-ready design deliverables—interactive prototypes, animated videos, presentation slides, and infographics—purely through natural language prompts and HTML/CSS output.
How do I install Huashu Design?+
Run 'npx skills add alchaincyf/huashu-design' in your terminal. After installation, verify that the ~/.claude/skills/huashu-design/ directory contains not just SKILL.md but also the references/, assets/, scripts/, and demos/ subdirectories. If only SKILL.md appears, upgrade to skills CLI version 1.5.19 or later, or clone the repository manually.
Which AI clients and agents work with this skill?+
Huashu Design is agent-agnostic and compatible with any client supporting the skills.sh standard, including Claude Code, Cursor, Codex, OpenClaw, and Hermes.
Do I need API keys or external services to use this skill?+
No API keys are required for core functionality—design, rendering, and export to HTML, MP4, PDF, or PPTX all run 100% locally. Optional cloud features like TTS voiceover or AI-based design review require your own API keys and explicit confirmation on first use.
Is Huashu Design free to use commercially?+
Yes, as of May 14, 2026, Huashu Design switched to the MIT License, making it completely free for personal and commercial use without requiring prior authorization or payment.
Can I export designs to Figma or edit them layer-by-layer?+
No, the skill outputs HTML files, MP4 videos, editable PPTX slides (with text boxes), and PDF/PNG/SVG exports, but it does not produce layer-editable Figma or Keynote files.
How do I install huashu-design?+
Open the source repository on GitHub and follow its README. huashu-design is a skill — MCP Agents Market links you directly to the official repo.
Is huashu-design free?+
huashu-design is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.