Communitygithub.com

alchaincyf/huashu-design

Huashu Design: Use HTML to create high-fidelity prototypes, interactive demos, slides, animations, design variant exploration, design direction consulting, and expert review.

What is huashu-design?

Huashu Design is a comprehensive design skill for AI agents that streamlines the creation of high-fidelity HTML-based prototypes, interactive demos, presentation slides, animations, and design variants. It is ideal for UX designers, product managers, animators, and developers looking to rapidly prototype and iterate on visual concepts without relying on typical web design tropes. The skill supports a wide range of platforms and scenarios—from web apps and iOS prototypes to exporting MP4/GIF videos at 60fps. It operates by embodying specific expert roles (UX, animator, slide designer, prototyper) based on the user's request, and when requirements are vague, it shifts to a 'design direction consultant' mode that proposes three parallel visual concepts drawn from a library of 40 HTML-native styles, 20 web templates, and 20 slide templates. Key capabilities include a brand asset agreement, anti-AI slop guardrails, a Junior workflow for onboarding, a Tweaks mode for variants, animation-to-MP4/GIF export, a long-form narrated video pipeline, and a 5-dimension review system for evaluating aesthetics and usability.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alchaincyf/huashu-design/tree/main/skills/huashu-design

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

What does huashu-design do?

Huashu Design——Create high-fidelity prototypes, interactive demos, slides, animations, and design variant exploration using HTML, along with design direction consulting and expert review. Embody the corresponding expert (UX, animator, slide designer, prototyper) based on the task, avoiding typical web design tropes. Trigger words: "build a prototype," "interactive demo," "HTML presentation," "animation demo," "design variants," "hi-fi design," "UI mockup," "prototype," "make an HTML page," "create a visualization," "app prototype," "iOS prototype," "export MP4/GIF," "60fps video," "design style," "design direction," "color scheme," "recommend a style," "pick a style," "make it look good," "review," "is this pretty?", "review this design," "animated walkthrough," "explainer video," "long-form educational video," "voiceover," "narration," "explain what XX is in 5 minutes." When requirements are vague, enter design direction consulting mode (three parallel logic streams produce three real visual concepts, using a library of 40 HTML-native styles, 20 web templates, and 20 slide templates as ammunition). Also includes: brand asset agreement, anti-AI slop, Junior workflow, Tweaks variants, animation-to-MP4/GIF export, long-form narrated video pipeline, and 5-dimension review.

Related Skills