huashu-design

Convert design briefs into hi-fi HTML prototypes and presentation assets.

Updated May 12, 2026
One-click install
npx skills add https://github.com/YeomanYe/skills --skill huashu-design-yeomanye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: huashu-design
Source: https://github.com/YeomanYe/skills/tree/main/huashu-design
Command: npx skills add https://github.com/YeomanYe/skills --skill huashu-design-yeomanye

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ffmpeg, ffprobe, playwright, python, node, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Huashu-design provides a self-contained skill that converts design briefs into hi-fi HTML prototypes, interactive demos, and presentation-ready assets (slides, MP4s, PDFs) that work across agents and environments.

Core Features & Use Cases

  • Interactive prototypes and motion demos for apps, dashboards, and product concepts
  • HTML decks, slides, and printable visuals for reviews and stakeholder meetings
  • Design exploration workflows including Tweaks, variants, and brand asset integration to accelerate decision making
  • Agent-agnostic execution: runs with Claude Code, Cursor, Codex, OpenClaw, Hermes, and other markdown-based agents
  • Export pipelines: HTML/MP4/GIF/PPTX/PDF generation through a deterministic, script-driven workflow

Quick Start

Build a hi-fi HTML prototype and export a clickable demo plus a slide deck from this brief.

Frequently Asked Questions about huashu-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a design brief into a hi-fi HTML prototype?▼

To turn a design brief into a hi-fi HTML prototype, you can use a brand-context-first workflow that processes your concepts and generates tangible interactive HTML assets through a script-driven pipeline. This approach automates the conversion of ideas into presentation-ready prototypes.

Can I export HTML prototypes to MP4 or PDF for stakeholder presentations?▼

Yes, you can export HTML prototypes to MP4, PDF, GIF, and PPTX formats. A deterministic, script-driven workflow automates the generation of these presentation-ready assets, making them suitable for stakeholder reviews and demos.

Does this HTML prototyping workflow run with agents like Cursor and Claude Code?▼

Yes, this HTML prototyping workflow runs with agent-agnostic execution environments including Cursor, Claude Code, Codex, and OpenClaw. It operates as a self-contained skill that integrates seamlessly into markdown-based agent toolchains.

What dependencies do I need to generate motion demos and interactive slides?▼

To generate motion demos and interactive slides, you need ffmpeg, ffprobe, Playwright, Python, and Node installed. These dependencies support the script-based export pipeline for rendering HTML decks and video outputs.

What is the best way to create interactive motion demos for product dashboards?▼

The best way to create interactive motion demos for product dashboards is using a design exploration workflow that enforces brand-context-first rules. This method converts briefs into hi-fi HTML prototypes, allowing you to test tweaks and variants rapidly.

Why use a brand-context-first workflow for UX prototyping?▼

A brand-context-first workflow for UX prototyping ensures that all generated HTML prototypes, slides, and assets integrate brand specifications from the start. This accelerates decision-making by keeping design exploration aligned with established brand guidelines.