Skill UI

Generates validated architecture, workflow, sequence, data-flow, lifecycle, ERD, class, tree, timeline and waterfall diagrams as explorable standalone HTML with dark/light themes, motion, and image/SVG/WebM export. Also turns answers into one-page explainers.

Designs bilingual Chinese-English motion captions and typography for the informal launch event template, including gradient text, light sweeps, keyword animations, and video-aware layout in HTML/CSS.

This skill enhances frontend design quality by avoiding generic AI defaults. It guides the model to infer user intent, audience, and vibe before coding. Users configure three dials (Variance, Motion, Density) to control aesthetics. It maps briefs to official design systems like Fluent UI or Material. Ideal for landing pages, portfolios, and redesigns requiring specific visual identity.

Guides production frontend design and UI/UX review using Better Design MCP, covering components, design systems, accessibility, responsive layouts, motion, and cross-platform interfaces.