skills.rest
cloudofgeorge
cloudofgeorgeCOMMUNITY
Explore all skills by this author →
Website𝕏@cloudofgeorgeGitHub

huashu-design

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

Updated May 11, 2026
Search Tags:#animation#slide deck#motion design#design critique#pptx export#html prototype#ios mockup
One-click install
npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill huashu-design-cloudofgeorge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: huashu-design
Source: https://github.com/cloudofgeorge/AI-hands-Engineer/tree/main/skills/design/huashu-design
Command: npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill huashu-design-cloudofgeorge

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Producing high-fidelity design deliverables (prototypes, decks, motion graphics) normally requires Figma, After Effects, or Keynote expertise; this Skill lets an agent create them directly as HTML and export finished assets. ## Core Features & Use Cases - Interactive prototypes: Single-file HTML App/Web mockups with real iPhone 15 Pro bezel, clickable flows, and Playwright click-testing before delivery. - Slides and motion design: HTML decks exportable to editable PPTX or PDF, plus timeline-driven animations rendered to MP4 (25fps/60fps), GIF, with BGM and TTS voiceover pipelines. - Design direction and critique: A fallback advisor recommends 3 directions from 20 design philosophies, and a 5-dimension expert review scores work with a fix list. - Use Case: Ask for a 60-second product launch animation for a real brand; the Skill verifies product facts via web search, downloads the brand's logo and product images, writes a brand-spec, builds the animation, and exports a scored MP4. ## Quick Start Ask your agent to make a clickable iOS prototype for a Pomodoro app with 4 screens and export it as a single HTML file.

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 iOS app prototype with HTML?▼

The Skill builds single-file HTML prototypes using a bundled iPhone 15 Pro frame component with accurate Dynamic Island, status bar, and Home Indicator. Screens are state-driven and clickable, and Playwright runs click tests before delivery to catch interaction bugs.

How to export an HTML animation to MP4 or GIF?▼

Use the render-video.js script to record the HTML animation at 25fps via Playwright, then convert-formats.sh produces a 60fps MP4 and palette-optimized GIF with ffmpeg. The add-music.sh script mixes in background music with fade in and out.

Can HTML slides be converted to an editable PowerPoint file?▼

Yes, the html2pptx.js script reads DOM computed styles and translates each element into native PowerPoint objects, producing real editable text frames rather than images. The HTML must follow four structural constraints described in the editable-pptx reference.

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

Yes, it is agent-agnostic and works with any markdown-skill-capable agent including Cursor, Codex, Trae, Hermes, and OpenClaw. The Skill prompts are written in Chinese but the agent operates bilingually with English tasks.

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

Output is HTML, so it cannot round-trip into Figma or Keynote for layer-level editing. Complex 3D, physics simulations, and particle systems are out of scope, and brand-from-scratch designs without any existing assets reach lower quality.

Why does the skill require web search before designing for a brand?▼

Its fact-verification rule requires confirming a product's existence, release status, and specs via web search before any design work, since wrong assumptions from training memory caused real rework. It then downloads actual logos, product images, and UI screenshots rather than guessing brand colors.

Related Skills

Explore More Design & Creative Skills→
3iQ-Corp3iQ-Corp

3iq-brand

Validate text and design elements against 3iQ Corp brand guidelines.

Official
Advanced
Dante-danDante-dan

baoyu-slide-deck

Generate structured PPTX and PDF presentation decks from source content.

Community
Advanced
robinaderobinade

frontend-design-pro

Generate HTML/CSS/JS components with real Unsplash or Pexels images.

Community
Advanced
figmafigma
1.9k

figma-use-motion

Animate Figma nodes with keyframing, styles, and timeline durations via the Plugin API.

Official
Advanced