What problem does it solve? Designing high-fidelity UI artifacts in CLI/API agent environments often produces generic, templated output because agents lack a structured design process and taste guidelines. This Skill provides a complete design workflow that turns a brief into a verified, self-contained HTML artifact while avoiding common AI design slop. ## Core Features & Use Cases - Surface-First Composition: Commits to one of seven surface archetypes (Monitor, Operate, Compare, Configure, Decide/Learn, Explore, Command/Inspect) before choosing colors or type, eliminating generic hero-plus-three-cards layouts. - Structured Design Workflow: Covers brief analysis, context gathering from repos and brand docs, design system definition, variant exploration (conservative, strong-fit, divergent), and verification. - Slop Diagnostic Audit: Scores artifacts against ten known AI design tells (tech gradients, feature-tile grids, glassmorphism, default Inter type) and prescribes matched repairs. - Use Case: Ask the agent to design a dashboard concept for a new product; it inspects your repo's existing tokens and components, commits to a Monitor surface, produces a self-contained HTML file with a Tweaks panel, and verifies it opens cleanly in a browser. ## Quick Start Ask the agent to design a landing page or interactive prototype as a self-contained HTML file and save it to a local path.
