skills.rest
hugotown
hugotownCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

huashu-design

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

Updated Oct 16, 2025
Search Tags:#animation#prototype#slide deck#brand assets#video export#pptx export#html design
One-click install
npx skills add https://github.com/hugotown/dotfiles --skill huashu-design-hugotown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: huashu-design
Source: https://github.com/hugotown/dotfiles/tree/main/agents/skills/huashu-design
Command: npx skills add https://github.com/hugotown/dotfiles --skill huashu-design-hugotown

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 (app prototypes, pitch decks, motion graphics, infographics) normally requires Figma, After Effects, or a design team. This Skill lets an AI agent create presentation-grade visual output directly as HTML, with enforced brand-asset collection, anti-generic-design rules, and automated export pipelines. ## Core Features & Use Cases - Interactive App Prototypes: Single-file HTML mockups with accurate iPhone 15 Pro frames, clickable multi-screen flows, real images from Wikimedia/Unsplash, and Playwright click-testing before delivery. - Slide Decks & Editable PPTX: HTML decks for browser presentation, exportable to PDF or genuinely editable PowerPoint files via an html2pptx element translator. - Motion Design & Video Export: Stage + Sprite timeline animation engine with one-command export to MP4 (25fps/60fps), palette-optimized GIF, plus BGM and SFX mixing scripts. - Design Direction Advisor: When briefs are vague, recommends 3 differentiated directions from 20 design philosophies across 5 schools and generates parallel visual demos. - Use Case: Ask your agent to "build a clickable iOS prototype for a Pomodoro app with 4 screens" and receive a Playwright-verified single-file HTML prototype in minutes. ## Quick Start Ask your agent to make a clickable iOS app prototype, an HTML slide deck, or a 30-second product animation exported as MP4 with background music.

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?▼

Describe the app and screens to your agent, and it builds a single-file HTML prototype using the bundled iPhone 15 Pro frame component with a state-driven screen manager. Real images are pulled from Wikimedia or Unsplash, and Playwright runs click tests before delivery.

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

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

Can HTML slide decks be converted to editable PowerPoint files?▼

Yes, the html2pptx.js translator reads DOM computed styles and converts each element into native PowerPoint text frames and shapes via export_deck_pptx.mjs. The HTML must follow four structural constraints for the conversion to preserve editability.

Which AI agents support this design skill?▼

It is agent-agnostic and works with Claude Code, Cursor, Codex, Trae, OpenClaw, Hermes, or any agent supporting markdown-based skills. Installation uses npx skills add alchaincyf/huashu-design.

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

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 reference assets reach lower quality.

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

Its fact-verification rule mandates confirming a product's existence, release status, and specs before design work, since wrong assumptions cause hours of rework. A five-step asset protocol then downloads the real logo, product images, and UI screenshots rather than guessing colors from memory.

Related Skills

Explore More Design & Creative Skills→
BillChiricoBillChirico
5

volvox-brand

Apply Volvox LLC brand identity to visual and written artifacts.

Community
Basic
zunyiqingfeng-codezunyiqingfeng-code
2

huashu-design

Create high-fidelity HTML prototypes and motion demos from concise briefs.

Community
Advanced
robinaderobinade

frontend-design-pro

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

Community
Advanced
pelcherspelchers

automating-after-effects

Automate After Effects composition creation, animation, and batch rendering via ExtendScript.

Community
Advanced