skills.rest
serguei9090
serguei9090COMMUNITY
Explore all skills by this author →
GitHub

huashu-design

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

Updated Mar 22, 2026
Search Tags:#slide deck#brand assets#motion design#design critique#video export#pptx export#html prototype
One-click install
npx skills add https://github.com/serguei9090/LogLensAi --skill huashu-design-serguei9090
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: huashu-design
Source: https://github.com/serguei9090/LogLensAi/tree/main/.agents/skills/huashu-design
Command: npx skills add https://github.com/serguei9090/LogLensAi --skill huashu-design-serguei9090

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, slide decks, motion graphics, infographics) normally requires opening graphical tools like Figma or After Effects; this Skill lets an agent generate them directly as HTML and exportable media from a conversational brief. ## Core Features & Use Cases - Interactive Prototypes: Builds clickable single-file HTML app mockups with accurate iPhone/Android device frames, real images from Wikimedia/Unsplash, and Playwright click-test verification. - Slides & Documents: Creates HTML slide decks and exports them to PDF or genuinely editable PPTX via an html2pptx element translator. - Motion Design: Renders timeline-based HTML animations to MP4 (25fps or 60fps), palette-optimized GIF, with BGM and SFX mixing via ffmpeg scripts. - Design Direction & Critique: Recommends 3 differentiated style directions from 20 design philosophies for vague briefs, and runs a 5-dimension expert review with radar-chart scoring. - Use Case: Ask for a 60-second product launch animation for a specific brand; the Skill verifies product facts via web search, downloads the brand's logo and product images, freezes them into a brand-spec.md, builds the animation, and delivers an MP4 with soundtrack. ## Quick Start Ask your agent to make a clickable iOS prototype of a Pomodoro app with 4 screens, or to turn a concept into a 60-second animation exported as MP4 and GIF.

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

Describe the app and screens to the agent; the Skill builds a single-file HTML prototype using pixel-accurate iPhone 15 Pro or Android device frames with state-driven navigation. It pulls real images from Wikimedia, Met Museum, or Unsplash and runs Playwright click tests before delivery.

How to convert HTML slides to editable PowerPoint?▼

The export_deck_pptx.mjs script uses html2pptx.js to read DOM computed styles and translate each element into native PowerPoint text frames and shapes. The HTML must follow four structural constraints documented in references/editable-pptx.md for the conversion to preserve editability.

Can HTML animations be exported to MP4 or GIF video?▼

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

Does this work with agents other than Claude Code?▼

Yes, the Skill is agent-agnostic and works with Cursor, Codex, Trae, OpenClaw, Hermes, or any agent supporting markdown-based skills. Environment-specific features like Tweaks fall back to pure-frontend localStorage implementations.

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

Outputs are HTML, so there is no layer-editable round-trip into Figma or Keynote. Complex 3D, physics simulations, and particle systems are out of scope, and designing a brand entirely from scratch without any existing assets yields noticeably lower quality.

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

Its highest-priority rule mandates verifying a product's existence, release status, and specs via web search before any design work, then downloading real logos, product images, and UI screenshots. This prevents factually wrong assumptions and generic output lacking brand identity.

Related Skills

Explore More Design & Creative Skills→
BillChiricoBillChirico
5

volvox-brand

Apply Volvox LLC brand identity to visual and written artifacts.

Community
Basic
zhukunpenglinyutongzhukunpenglinyutong
4.1k

huashu-design

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

Community
Advanced
lukaskellersteinlukaskellerstein
3

image-sourcing

Find and download royalty-free stock photos from Unsplash, Pexels, and Pixabay.

Community
Intermediate
pelcherspelchers

automating-after-effects

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

Community
Advanced