huashu-design

Transforms text descriptions into interactive prototypes, presentations, and motion graphics using HTML, CSS, and JavaScript.

Updated Jul 3, 2026
One-click install
npx skills add https://github.com/pxlcrtiv/opencode-setup --skill huashu-design-pxlcrtiv
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: huashu-design
Source: https://github.com/pxlcrtiv/opencode-setup/tree/main/skills/huashu-design
Command: npx skills add https://github.com/pxlcrtiv/opencode-setup --skill huashu-design-pxlcrtiv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pdf-lib, playwright, pptxgenjs, sharp, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill converts plain text descriptions into finished, professional-looking designs for interactive prototypes, presentations, and motion graphics.

Core Features & Use Cases

  • Interactive Prototypes: Generate high-fidelity interactive prototypes for apps and web pages with real interactivity and visuals.
  • Presentations: Create editable slide decks that can be presented as HTML decks or converted to PPTX for offline viewing.
  • Motion Graphics: Produce animations and motion graphics in various formats, including MP4 and GIF with background music.
  • Use Case: Imagine you need a quick and effective design for a product presentation. You can describe the design elements you want to the Skill, and it will generate a complete design in minutes.

Quick Start

npx skills add alchaincyf/huashu-design "Make a product presentation video showcasing the key features of our app. Include 3 styles for the UI design to choose from."

Frequently Asked Questions about huashu-design

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

FAQPage Schema
How do I turn text into interactive prototypes and motion graphics?

To turn text into interactive prototypes and motion graphics, describe your design elements to the Skill and it generates finished HTML, CSS, and JavaScript outputs. It creates high-fidelity app or web prototypes with real interactivity and visuals.

Can I convert HTML presentations to PPTX for offline viewing?

Yes, you can convert HTML presentations to PPTX for offline viewing. The Skill creates editable slide decks presentable as HTML and uses pptxgenjs to export them directly into PPTX format for offline access.

How do I generate motion graphics in MP4 or GIF formats with background music?

You generate motion graphics in MP4 or GIF formats by describing the animation to the Skill. It produces animations with background music using HTML, CSS, and JavaScript, leveraging playwright for video rendering.

Does this design generation tool require style guides and UI components?

Yes, the design generation tool requires style guides and UI components. Successful generation of professional-grade interactive designs, prototypes, and presentations depends on providing these assets to ensure high-fidelity output.

What is the best way to create a product presentation video from a text description?

The best way to create a product presentation video from text is to describe your key features and desired UI styles. The Skill instantly transforms this text into a complete, professional-grade presentation with motion graphics.

Can I use playwright and sharp for interactive media production?

Yes, you can use playwright and sharp for interactive media production. Playwright handles browser automation for rendering motion graphics, while sharp processes image assets required for high-fidelity interactive designs.