Agent skill · design visual · aradotso
huashu-design-html-native
HTML-native design skill for AI coding agents — high-fidelity prototypes, slides, animations, and MP4 export with 20 design philosophies and 5-dimension critique
Why this skill is useful
Adds multiple executable scripts for generating interactive prototypes, animations, and presentations that fundamentally extend the AI's design capabilities.
What it needs
Requires npx installed locally. About 9k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
Huashu Design — HTML-Native Design Skill Skill by ara.so — Daily 2026 Skills collection. Huashu Design turns natural-language requests into deliverable designs — interactive prototypes, animated slides, motion exports, and infographics — entirely in HTML/CSS/JS, no Figma or GUI required. Install it once into your agent; from then on say what you want and receive a finished file. --- Installation Compatible with Claude Code, Cursor, Codex, OpenClaw, Hermes, and any agent that reads SKILL.md. --- What It Produces Output Format Typical Time -------- -------- ------------- Interactive prototype (App/Web) Single-file HTML, iPhone/Android bezel, clickable 10–15 min Presentation deck HTML (browser) + editable PPTX (real text boxes) 15–25 min Timeline animation MP4 (25/60 fps) + GIF (palette-optimized) + BGM 8–12 min Design variants 3+ side-by-side, Tweaks panel, localStorage 10 min Infographic / data viz Print-quality, CSS Grid, exportable PDF/PNG/SVG 10 min Design direction advice 5 schools × 20 philosophies, 3 directions + demos 5 min 5-dimension expert critique Radar chart + Keep/Fix/Quick Wins list 3 min --- Repository Structure --- Core Concepts 1. Junior Designer Workflow (Default Mode) The agent never starts blind. Before any task it: 1. Shows a one-shot question list — waits for batch answers before touching code 2. Writes assumptions, placeholders, and reasoning comments inside the HTML 3. Shows an early skeleton (even gray boxes) — gets approval 4. Fills content → generates variations → adds Tweaks panel — shows each step 5. Runs Playwright visual check before final delivery 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/huashu-design-html-native