What Is huashu-design?
huashu-design is an HTML-native design skill created by Alchain (alchaincyf) that produces high-fidelity prototypes, slide decks, and animated outputs directly in HTML. It applies 20 design philosophies and performs a 5-dimension quality review on every output before delivery.
Rather than generating static mockups, huashu-design produces interactive HTML that can be previewed in any browser, refined with natural language, and exported to MP4 for sharing. Key capabilities:
High-fidelity HTML prototypes
Interactive, pixel-level accurate, browser-ready
Slide deck generation
Presentation-ready decks with animation and transitions
Animation support
CSS and JS animations baked in; no external dependencies
MP4 export
Record and export animated outputs as video files
20 design philosophies
From Swiss grid to material design to editorial layout
5-dimension review
Fisual hierarchy, typography, color, spacing, and interaction quality checks
Design Philosophy
huashu-design applies 20 distinct design philosophies, each appropriate for different contexts:
- Swiss/International Style: grid-based, typography-forward, minimal ornamentation
- Material Design: elevation, motion, and responsive layout principles
- Editorial/Magazine: contrast, scale, and typographic drama
- Flat/Minimal: reduced visual noise, functional color use
- Brutalist Web: raw, intentional, unconventional layout
- And 15 additional styles spanning neomorphism, glassmorphism, dark editorial, data-rich, and more
The 5-dimension review checks every output against: visual hierarchy clarity, typographic system consistency, color palette harmony, spacing rhythm, and interaction affordance quality.
huashu-design Output Types
- Interactive Prototypes: Fully clickable HTML/CSS/JS prototypes that behave like real products. Link states, hover effects, and form interactions included.
- Slide Decks: Presentation-ready decks with slide navigation, animations, and speaker notes.
- Animations: CSS and JavaScript animations for loading states, micro-interactions, and hero sections.
- MP4 Export: For animated outputs, the skill guides the export process to produce shareable video files.
How to Use huashu-design?
npx skills add alchaincyf/huashu-design Or download from GitHub https://github.com/alchaincyf/huashu-design
Then describe what you need: Design a SaaS landing page hero section in Swiss editorial style. High-fidelity, with an animated headline and scroll-triggered feature reveal.