Huashu Design
github.com/alchaincyf/huashu-design- Category
- Developer Tools
- Rank
- No. 118Tools index
- Pricing
- Open Source
- Platform
- cli
- Type
- TOOL
- Builder
- alchaincyf
- GitHub
- 24.0k stars
- Latest release
- v2.0
- Date
About
An HTML-native design skill for AI coding agents that generates production-quality prototypes, animations, and presentations. Input a single sentence and get clickable app prototypes, slide decks, motion graphics with MP4 export, and design critiques in 3-30 minutes.
What it does
Huashu Design gives compatible coding agents a structured design workflow built around browser-rendered HTML. It gathers requirements, develops visible alternatives, and iterates before delivery. The supplied components and scripts turn those designs into interactive screens, browser slide decks, editable PowerPoint objects, PDFs, images, GIFs, and rendered video.
Why it's ranked here
The strongest reason to consider it is breadth backed by an actual export toolchain. It does more than supply style prompts: it includes browser verification, editable PowerPoint conversion, deterministic frame rendering, media conversion, and reusable presentation components. The workflow also asks for brand assets and shows alternatives early. That makes it unusually practical, although several quality claims come only from the project authors.
What's good
Its outputs remain useful after generation. Slide text can become native editable PowerPoint text boxes, while PDF export preserves searchable vector text. Browser checks capture multiple viewports, slide pages, console warnings, and JavaScript errors. Video has both real-time recording and deterministic frame-by-frame rendering. Brand work starts from supplied or official assets instead of guessed colors, and optional cloud speech requires explicit consent.
Tradeoffs
Editable PowerPoint export requires restrictive HTML structure and rejects several visually flexible techniques, including CSS gradients and background images on containers. PDF output preserves appearance but not direct text editing. Deterministic video rendering only works with animations using the supplied timeline clock; CSS keyframes and unrelated animation systems need real-time recording. The stated scope excludes advanced 3D, physics, particle work, and layer-level transfer into graphical editors.
How to use it well
Use it when a coding agent already sits at the center of your workflow and HTML is an acceptable design source. Bring brand guidelines, logos, colors, screenshots, real content, and references, then compare the early visual directions before requesting exports. It suits prototypes, decks, explainers, infographics, and critiques. It does not replace a layer-based editor for detailed manual manipulation or complex motion effects.
Technical notes+
SKILL.md is the agent-facing entry point, with recipes in references/, reusable components in assets/, export tooling in scripts/, and examples in demos/. assets/deck_stage.js implements a Shadow DOM slide component with scaling, keyboard and click navigation, hash routing, localStorage restoration, speaker-note messaging, and print styles. scripts/verify.py wraps Playwright for screenshots and browser error collection. scripts/html2pptx.js reads computed DOM geometry and styles, validates dimensions and overflow, then maps supported elements into PptxGenJS objects. scripts/export_deck_pptx.mjs, scripts/export_deck_pdf.mjs, and scripts/export_deck_stage_pdf.mjs cover editable and vector deck exports. scripts/render-video.js records browser video, while scripts/render-video-seek.js captures timeline-controlled frames before FFmpeg encoding. scripts/cloud/tts-doubao.mjs gates optional TTS behind explicit consent and an endpoint hostname allowlist.
Observed
- License
- MIT, with personal and commercial use described as free.
- Packaging
- Distributed as a skills.sh-compatible agent skill, installable through the skills CLI or by cloning the repository.
- Interface
- Conversational skill for compatible coding agents; the README describes no separate buttons, control panel, or Figma plugin.
- Implementation
- The supplied tooling uses JavaScript and Node.js, Python, shell scripts, browser HTML, and CSS.
- Runtime dependencies
- The package declares pdf-lib, Playwright, PptxGenJS, and Sharp.
- Host support
- The README names Claude Code, Cursor, Codex, OpenClaw, and Hermes as compatible agent hosts.
- Repository structure
- The documented tree separates agent instructions, reference recipes, starter assets, export scripts, and demonstrations.
Read from README.md, package.json, scripts/verify.py, assets/deck_stage.js, scripts/html2pptx.js, scripts/fetch_images.py, scripts/render-video.js, scripts/export_deck_pdf.mjs, scripts/gen_deck_thumbs.mjs, scripts/export_deck_pptx.mjs, scripts/narrate-pipeline.mjs, scripts/render-video-seek.js, scripts/export_deck_stage_pdf.mjs, scripts/cloud/tts-doubao.mjs.
What it can do
Generate interactive app prototypes from text descriptions
Natural language description → Clickable HTML/CSS/JS prototype
Create slide deck presentations from text prompts
Single sentence or text description → Interactive slide deck
Generate motion graphics and animations
Text description of desired animation → HTML/CSS/JS animations with MP4 export
Export animations as video files
HTML/CSS/JS animation → MP4 video file
Create infographics from text descriptions
Natural language request → HTML/CSS infographic
Provide design critiques and feedback
Design prototype or deliverable → Design critique and recommendations
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.