Huashu Design
Turn natural-language briefs into shippable HTML prototypes, decks, animations, and visual designs.
SKILL.md explicitly requires user confirmation, pauses at gates, records authorization, and uses honest placeholders instead of fabricated content; it also warns against placing private assets in the skill directory. Deductions apply because many workflows require WebSearch, asset downloads, external scripts, and default audio/video export without detailed controls for network requests, dependency permissions, sensitive-data handling, license verification, rollback, or cleanup. Publisher identity is unverified.
The document gives detailed routing, checkpoints, Playwright checks, video validation, and fallback procedures. Deductions apply because key paths assume tools and files that are not guaranteed here, including WebSearch, TaskCreate, subagents, HyperFrames, npm/Playwright, and many referenced assets/scripts. The workflow is highly complex, and static review cannot confirm execution, so the score remains below the static-review ceiling of 10.
The intended audience, scenarios, and non-fit boundary for production web apps and backend systems are clear. It covers prototypes, decks, animation, infographics, and critique, with an explicit weak-runtime mode and strong Chinese-language support. Deductions apply because every new visual design is forced through a three-direction gate, which may not fit simple or urgent tasks; core functions depend on WebSearch, npm, external image sources, and media tooling whose reachability in mainland China is not established.
The skill provides structured routing, progressive references, checkpoints, exception handling, and limitations; the supplied README, package metadata, MIT license, and version-change notes add installation and governance context. Deductions apply because SKILL.md is unusually large and depends on many files and tools not included in the supplied material. Compatibility matrices, installation details, troubleshooting, explicit ownership, and a maintained update path remain incomplete.
The skill defines concrete outputs including HTML, clickable prototypes, decks, MP4/GIF, PPTX, and review reports, with detailed workflows and boundaries; the README also lists expected deliverables. Deductions apply because static review cannot verify output correctness, and results depend on unverified external tools, asset retrieval, browser rendering, and media pipelines. The mandatory three-direction and asset-collection process can also be disproportionate for simple tasks, so the score stays at the static ceiling of 7 or below.
The repository materials include README examples, test prompts, pinned dependency metadata, named scripts, and demo claims, giving limited audit signals. Deductions apply because no real CI plus committed test suite covering the skill's key paths is shown; A/B tests, demos, and quality figures are primarily author assertions and cannot be independently reproduced or corroborated from this static material.
- Do not treat WebSearch, external asset downloads, networked media sources, or audio/video export as verified capabilities; confirm authorization and provide a local fallback in restricted environments.
- Before use, verify the referenced files, assets, scripts, Node/Playwright/HyperFrames versions, and dependency licenses; the supplied material does not prove these paths run.
- The mandatory three-direction gate and repeated pauses may impose substantial overhead on simple tasks; confirm that the user accepts this workflow and external-resource use.
What it does & when to use it
Huashu Design is an agent-oriented, HTML-native design skill for high-fidelity interactive prototypes, presentation decks, timeline animations, infographics, and data visualizations. It provides design-direction exploration, brand-asset handling, variation workflows, and five-dimension critique for briefs with limited design context. Outputs can include HTML, MP4, GIF, PDF, and editable PPTX. It is not intended for production web apps, SEO sites, or backend-driven systems.
Reads supplied brand assets, design systems, screenshots, or code context; creates three visual directions for ambiguous briefs; builds prototypes, decks, animations, and infographics with HTML/CSS and optional React/Babel components; uses Playwright for screenshots and interaction checks; uses repository scripts to export PDF, PPTX, MP4, and GIF files with optional BGM and SFX; and evaluates designs across philosophy consistency, visual hierarchy, execution detail, functionality, and innovation.
- A product manager needs a clickable high-fidelity App or web prototype for a user-flow presentation.
- A speaker needs a browser-playable HTML deck that can also be exported to PDF or PPTX.
- A product or marketing team needs a concept turned into an MP4 or GIF with music and sound effects.
- A design team has no clear visual reference and wants three concrete directions to compare.
- A team wants a structured design critique with Keep, Fix, and Quick Wins recommendations.
Pros & cons
- Covers prototypes, decks, animation, infographics, design variations, and expert critique.
- Strongly emphasizes brand assets, real imagery, readability, and anti-AI-slop practices.
- Includes Playwright verification, HTML-to-PDF/PPTX export, and MP4/GIF processing scripts.
- MIT licensed for personal and commercial use.
- Not intended for production web apps, SEO websites, or backend-driven systems.
- The README acknowledges that quality can fall to roughly 60–65 points when no brand or design context exists.
- Complex 3D, physics simulation, and particle systems are outside its stated scope.
- The source does not show an independent automated test suite; validation mainly uses Playwright and workflow scripts.
- Some workflows require Node.js, Python, Playwright, network access, and local filesystem operations.
How to install
In an Agent Skills-compatible environment, run: npx skills add alchaincyf/huashu-design. The source names Claude Code, Codex, Cursor, OpenClaw, and Hermes as supported environments.
How to use
After installation, describe the task in natural language, for example: “Create a presentation about AI psychology and recommend three visual directions” or “Turn this logic into a 60-second animation and export MP4 and GIF.” For branded work, provide logos, colors, UI screenshots, or brand guidelines. Deck, animation, and export workflows use the repository’s supplied scripts and assets.
Compared to similar skills
The README compares it with Claude Design: Claude Design is a graphical product centered on a canvas and Figma export, while Huashu Design is a conversational Agent Skill focused on HTML, MP4, GIF, PDF, and editable PPTX outputs across multiple agents.