skills.rest
deriye
deriyeCOMMUNITY
Explore all skills by this author →
GitHub

huashu-design

Generate HTML prototypes, slide decks, animations, and design variations with brand asset extraction.

Updated Sep 7, 2026
Search Tags:#motion graphics#brand assets#design generation#video export#pptx export#html prototype#ios mockup
One-click install
npx skills add https://github.com/deriye/.agents-work --skill huashu-design-deriye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: huashu-design
Source: https://github.com/deriye/.agents-work/tree/main/skills/huashu-design
Command: npx skills add https://github.com/deriye/.agents-work --skill huashu-design-deriye

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 AI agent produce them as HTML, MP4, GIF, and editable PPTX directly from a conversation. ## 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. - Slides & Editable PPTX: HTML decks for browser presentation plus an html2pptx.js pipeline that converts DOM elements into real editable PowerPoint text frames. - Motion Design & Video Export: Stage + Sprite timeline engine exporting MP4 (25fps/60fps), palette-optimized GIF, with BGM and SFX mixing via ffmpeg scripts. - Design Direction Advisor & Critique: Recommends 3 differentiated directions from 20 design philosophies for vague briefs, and runs a 5-dimension expert review with radar chart scoring. - Use Case: Ask the agent to "make a 60-second product launch animation for DJI Pocket 4" — it verifies product facts via web search, downloads the real logo and product images, writes a brand-spec.md, builds the animation, and exports a scored MP4. ## Quick Start Ask your agent to create a clickable iOS prototype, an HTML slide deck, or a short product animation for your topic and let it propose three design 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 iOS app prototype with an AI agent?▼

Describe the app and screens you want; the skill builds a single-file HTML prototype using a pixel-accurate iPhone 15 Pro frame component with a state-driven AppPhone manager. It pulls real images from Wikimedia or Unsplash and runs Playwright click tests before delivery.

How to convert HTML slides to editable PowerPoint?▼

The included 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 documented in references/editable-pptx.md.

Can I export an HTML animation to MP4 or GIF?▼

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

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, OpenClaw, and Hermes. It installs via npx skills add and operates through conversation without GUI dependencies.

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, or particle animations are out of scope, and designing a brand entirely from scratch without any assets drops output quality significantly.

Why does the skill require downloading brand assets before designing?▼

The core asset protocol prevents generic output by requiring real logos, product images, and UI screenshots, with colors extracted from actual files rather than guessed from memory. Skipping it produces designs with no brand recognition, which internal testing showed causes costly rework.

Related Skills

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

3iq-brand

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

Official
Advanced
zunyiqingfeng-codezunyiqingfeng-code
2

huashu-design

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

Community
Advanced
EliasOulkadiEliasOulkadi
110

research

Verify factual claims via web search with evidence hierarchy and source credibility checks.

Community
Advanced
treygoff24treygoff24
5

react-three-fiber

Create declarative 3D scenes in React using Three.js.

Community
Advanced