alchaincyf/huashu-design

What is huashu‑design?

A Claude‑compatible skill that lets you generate finished design artefacts by simply typing a natural‑language request to an AI‑agent (Claude Code, Cursor, Codex, etc.). The skill runs locally, stitches together a collection of HTML/CSS style templates, animation utilities and export scripts, and produces:

• Clickable app prototypes (HTML with iPhone‑style frames)
• Presentation decks – both an interactive HTML version and an editable PPTX file
• Short motion graphics exported as MP4/GIF (including optional background music)
• Print‑ready infographics (PDF/PNG/SVG)
• Design direction suggestions with visual mock‑ups
• A quick 5‑dimensional design critique (radar chart + actionable checklist)

All of this is done without opening a GUI – you just tell the agent what you need and wait for the skill to finish.

---

How to install

npx skills add alchaincyf/huashu-design

If the installation only creates SKILL.md you probably need a newer skills CLI (≥ 1.5.19). Alternatively clone the repo into your Claude skills folder:

git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design

---

What can it do? (Typical time‑to‑delivery)

Task	Output	Approx. time
Clickable app prototype	HTML file with iPhone‑15‑Pro frame, fully functional navigation, Playwright‑verified	10‑15 min
Presentation deck	Browser‑based HTML deck + editable PPTX (real text boxes)	15‑25 min
Short animation	MP4 (25 fps or 60 fps interpolated) + GIF + optional BGM	8‑12 min
Design variants	3+ side‑by‑side mock‑ups, live tweak panel, cross‑dimensional exploration	10 min
Infographic / data viz	Print‑quality PDF/PNG/SVG with CSS‑grid layout	10 min
Design direction advisor	Six thumbnail concepts → three refined visuals, backed by a library of 84 pure‑HTML style specimens	10 min
5‑dimensional expert review	Radar chart + Keep/Fix/Quick‑Wins list	3 min

---

Core mechanisms

1. Brand‑asset protocol – When a brand is mentioned the skill automatically:
   • asks for brand guidelines,
   • scrapes official brand pages for SVG/logo assets,
   • extracts colour values, and
   • writes a brand‑spec.md with CSS variables so every generated file uses the exact brand palette.
2. Design direction fallback – For vague prompts the skill runs three independent logics (best‑designer, real‑world reference, “second‑hand” style roulette) and produces six thumbnails. You pick three; the remaining three are kept as backups.
3. 84‑style HTML library – Pure HTML/CSS templates covering web, PPT, infographic and app UI styles (including Chinese/East‑Asian visual vocab). No external images are required; the library supplies sample screenshots for each style.
4. Junior Designer workflow – The skill emits assumptions, placeholders and reasoning comments before filling in real content, showing the user early drafts and allowing iterative tweaks.
5. Design lint & ledger – design_lint.py checks factual issues (broken images, low contrast, console errors) and records each project’s visual fingerprint in a local ledger (~/.huashu-design/). This helps avoid accidental style duplication across projects.

---

Example prompts

做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选
做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击
把这段逻辑做成 60 秒动画，导出 MP4 和 GIF
帮我对这个设计做一个 5 维度评审

The skill responds with the requested assets, ready to ship.

---

Limitations

• No editable PPTX → Figma pipeline (output is HTML, not a native design file).
• Very complex 3‑D or particle‑system animations are out of scope.
• Starting from a completely unknown brand may yield a lower aesthetic score (≈ 60‑65 / 100).

---

License & community

Since 2026‑05‑14 the project is MIT‑licensed – free for personal and commercial use. The repository includes translation forks for English, Korean and Vietnamese, and a community‑maintained SKILL.md that the agents read.

---

Quick start checklist

1. Install the skill (npx skills add …).
2. Verify the assets/, scripts/, references/, demos/ folders are present.
3. Open any Claude‑compatible agent and issue a design request.
4. Review the generated files, tweak via the built‑in panel if needed, and export.

---

In a nutshell: huashu‑design is an open‑source, agent‑agnostic skill that turns a single line of text into a polished, export‑ready design – from UI prototypes to motion graphics – all executed locally with no hidden telemetry.