mcpField
H
huashu-design

huashu-design

github.com/podoDesign & UI29169 installsUpdated 3d ago
Repository

About huashu-design

huashu-design is an HTML/CSS design skill for creating prototypes, slide decks, animations, infographics, and visualizations, with design review and export options. It presents three design directions before execution and tracks prior visual choices to reduce repetition across projects.

Key features

  1. 01Creates prototypes, slides, and visualizations
  2. 02Offers three design directions before execution
  3. 03Uses named styles with visual examples
  4. 04Runs a design-lint check
  5. 05Exports to PPTX, PDF, MP4, and GIF
  6. 06Tracks previously shipped visual styles

Use cases

  1. 01Creating animated interactive prototypes
  2. 02Producing slide decks or infographics
  3. 03Exporting designs to PPTX, PDF, MP4, or GIF

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill huashu-design

After installing, type/huashu-designin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

huashu-design

Catalogue stub — full skill: alchaincyf/huashu-design

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/huashu-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/huashu-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as huashu-design, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/huashu-design ] && echo "global" || echo "project"

    Global:

    npx skills add alchaincyf/huashu-design --skill huashu-design -g -y

    Project:

    npx skills add alchaincyf/huashu-design --skill huashu-design -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • Requires: Python 3 for the skill's helper scripts (learn.py, design_lint.py, capabilities.py); Node.js with the packages in the skill's package.json (Playwright, pptxgenjs, sharp, pdf-lib) and ffmpeg on PATH for PPTX, PDF, MP4 and GIF export; the skills CLI installs none of these
  • License: MIT
  • Large download (~224 MB): the skills CLI gives up cloning after 300 s; if it times out, retry with SKILLS_CLONE_TIMEOUT_MS=900000.

Invoke after install

  • Skill name: huashu-design
  • Trigger phrases: "huashu", "magazine typography", "CSS Grid design", "animated prototype", "MP4 export"

What it does

Produces publication-quality HTML/CSS designs: clickable prototypes, slide decks, animations, infographics and visualizations, with expert design review. For any new design it first shows three directions and waits for your pick before executing, draws on a library of named design styles with visual specimens, runs a design-lint check on the delivered file, and keeps a "look ledger" of what you have shipped so later projects avoid repeating it. Supports animated interactive prototypes and exports to PPTX, PDF, MP4 and GIF. Agent-agnostic and does not need an external component library. The skill's prompts and references are in Chinese, but upstream says it works fine with English tasks.

When NOT to use

  • Production web apps or systems that need a backend — upstream says the skill does not apply
  • Non-HTML targets such as React Native, SwiftUI, or backend rendering (the skill is HTML/CSS native)
  • When you need a pre-built component library or design system scaffold (use shadcn-ui or design-consultation)

Comments

Markdown supported