skills.rest
Bigdrops
BigdropsCOMMUNITY
Explore all skills by this author →
GitHub

huashu-design

Generates HTML prototypes, slide decks, animations, and infographics with export to MP4, GIF, PPTX, and PDF.

Updated Jun 7, 2026
Search Tags:#animation#playwright#prototype#slide deck#infographic#pptx export#html design
One-click install
npx skills add https://github.com/Bigdrops/Bigdrops-carousel --skill huashu-design-bigdrops
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: huashu-design
Source: https://github.com/Bigdrops/Bigdrops-carousel/tree/main/.agents/skills/huashu-design
Command: npx skills add https://github.com/Bigdrops/Bigdrops-carousel --skill huashu-design-bigdrops

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Producing high-fidelity design deliverables (app prototypes, presentation decks, launch animations, infographics) normally requires graphical tools like Figma or After Effects and hours of manual work. This Skill lets an AI agent produce those deliverables as HTML and export them to MP4, GIF, editable PPTX, PDF, PNG, or SVG directly from a conversation. ## Core Features & Use Cases - Interactive Prototypes: Builds clickable single-file HTML app/web prototypes with device frames (iPhone 15 Pro, Android, macOS, browser) and Playwright-verified interactions. - Slides & Motion Design: Creates 1920x1080 HTML decks convertible to editable PPTX with real text frames, plus timeline-based animations exported as MP4 (25/60fps), palette-optimized GIF, and BGM-scored video. - Design Direction Consulting & Critique: When briefs are vague, runs three parallel logic tracks (random style roulette, award-winning reference migration, top-designer philosophy) producing three real visual versions, backed by a 40-style HTML-native library, plus a 5-dimension expert critique with radar charts. - Use Case: Ask your agent to "make an iOS prototype for a Pomodoro app, 4 clickable screens" and receive a Playwright-tested HTML prototype in about 10-15 minutes. ## Quick Start Ask your agent to create a presentation deck on your topic and recommend three visual style directions 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 create a clickable app prototype with an AI agent?▼

Describe the app and screens you want in one sentence, and the skill builds a single-file HTML prototype with a real iPhone 15 Pro frame and state-driven navigation. Playwright runs automated click tests before delivery to verify interactions work.

How to convert HTML slides to editable PowerPoint?▼

The included html2pptx.js script reads DOM computed styles from an HTML deck and translates each element into real PowerPoint objects via pptxgenjs. Exported PPTX files contain genuine editable text frames, not flattened images.

Can I export HTML animations to MP4 or GIF video?▼

Yes, the render-video.js script captures HTML animations to MP4 at 25fps, and convert-formats.sh produces 60fps interpolated versions and palette-optimized GIFs. The add-music.sh script can also layer background music onto the final video.

Does this skill work with agents other than Claude Code?▼

Yes, it is agent-agnostic and works with any markdown-skill-compatible agent including Cursor, Codex, Trae, Hermes, and OpenClaw. On runtimes without subagent support, the three design direction tracks run serially instead of in parallel.

What are the limitations of HTML-based design output?▼

Output is HTML, so there is no layer-editable Figma export or drag-to-edit Keynote round trip. Complex 3D, physics simulation, and particle-system animations are out of scope, and brand-from-scratch designs without any reference assets score noticeably lower.

Related Skills

Explore More Design & Creative Skills→
KartikSharma4448KartikSharma4448

branding-generator

Interview clients, research markets, and generate three brand directions with visual assets.

Community
Advanced
zhukunpenglinyutongzhukunpenglinyutong
4.1k

huashu-design

Generate HTML prototypes, slide decks, animations, and design variations with export to MP4, GIF, and PPTX.

Community
Advanced
CompSci-SquadCompSci-Squad

doublecheck

Extract claims from AI-generated text and verify them via web search.

Official
Advanced
partme-aipartme-ai
610

figma

Guide Figma design creation, components, prototyping, collaboration, and design systems.

Official
Basic