skills.rest
anilveersingh1308
anilveersingh1308COMMUNITY
Explore all skills by this author →
GitHub

huashu-design

Generate HTML prototypes, slide decks, and motion demos with Playwright and ffmpeg export.

Updated May 19, 2026
Search Tags:#slide decks#interactive UI#brand assets#motion design#video export#html prototypes#voiceover pipeline
One-click install
npx skills add https://github.com/anilveersingh1308/copilot-skills --skill huashu-design-anilveersingh1308
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: huashu-design
Source: https://github.com/anilveersingh1308/copilot-skills/tree/main/.github/skills/huashu-design
Command: npx skills add https://github.com/anilveersingh1308/copilot-skills --skill huashu-design-anilveersingh1308

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you produce professional, high-fidelity visual outputs in HTML—interactive prototypes, design demos, slide decks, and motion animations—while avoiding generic AI “slop” and maintaining rigorous quality controls.

Core Features & Use Cases

  • Expert HTML design workflow (design-as-craft): Converts ambiguous design requests into structured execution using a designer-manager “assumptions + placeholders → early reviews → full craft pass” flow.
  • Brand-safe, fact-first asset discipline: Uses a strict “fact verification” rule for real products/specs and a “core assets” rule (logo, product/UI images, accurate palette) to keep outputs recognizable and non-generic.
  • Interactive hi-fi prototypes & review-ready outputs: Supports UX/design prototype behaviors, variant switching (Tweaks), and Playwright validation before delivery.
  • Motion + cinematic export pipeline: Provides Anthropic-level motion grammar (Slow-Fast-Boom-Stop, physics easings, focus pulls) and an end-to-end flow for MP4/GIF export with synchronized SFX/BGM, including voiceover-driven long concept videos.
  • Fallback design consulting mode: When context is missing, recommends 3 distinct design philosophies and generates preview showcase variants so you can choose direction quickly.

Quick Start

Use huashu-design to build a high-fidelity, brand-consistent interactive HTML prototype from your product idea and output a validated MP4 or GIF video with sound cues.

Frequently Asked Questions about huashu-design

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

FAQPage Schema
How do I build high-fidelity HTML prototypes that export as MP4 video?▼

High-fidelity HTML prototypes are built using structured execution and validated via Playwright, then exported as MP4 video using ffmpeg with synchronized audio and cinematic motion grammar. This ensures outputs are interactive, brand-safe, and export-ready.

What is the best way to create a 1920x1080 slide deck in HTML?▼

Creating a 1920x1080 slide deck in HTML involves using a structured design workflow that enforces core-asset sourcing and fact verification. The output is a review-ready, high-fidelity visual deck rather than generic presentation slides.

Do I need ffmpeg and Playwright to validate interactive UI prototypes?▼

Yes, Playwright is required to validate interactive UI prototype behaviors before delivery, while ffmpeg is necessary for exporting motion demos to MP4 or GIF formats with synchronized voiceover pipelines and sound cues.

How does motion design animation grammar work in HTML exports?▼

Motion design animation grammar applies physics-based easings like expo, overshoot, and spring, alongside techniques like Slow-Fast-Boom-Stop and focus pulls. This cinematic structure is rendered in HTML and exported using ffmpeg.

Can I generate design variant explorations without providing full brand assets?▼

When context is missing, the system uses a fallback design consulting mode that recommends three distinct design philosophies and generates preview showcase variants. This allows you to quickly choose a direction before full asset sourcing.

Why does my voiceover-driven long concept animation lack synchronized audio?▼

Voiceover-driven concept animations require timed narration pipelines using ffmpeg to synchronize SFX, BGM, and voiceover tracks. Without enforcing this export workflow, the HTML prototype will not produce a correctly synced MP4 output.

Related Skills

Explore More Design & Creative Skills→
ScaleAcademyScaleAcademy
2

brand-specs

Generate HTML visual spec cards from brand-research-brief.json for AI image generation.

Official
Advanced
jykimjykim
49

markdown-video

Convert Deckset markdown slides with speaker notes into narrated MP4 videos.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

ppt

Create and edit PowerPoint presentations via HTML-to-PPTX conversion and OOXML manipulation.

Community
Advanced
ahostbrahostbr

ls-design-huashu

Design high-fidelity HTML prototypes with brand asset validation and anti-AI slop guardrails.

Community
Advanced