What problem does it solve? Designing high-fidelity UI artifacts from a CLI or API agent environment often produces generic, templated-looking output. This Skill provides a structured design process—brief scoping, context gathering, surface selection, and anti-slop auditing—so agents produce thoughtful, verified HTML artifacts instead of default-looking layouts. ## 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 the most common cause of generic AI design. - Slop Diagnostic Audit: Scores artifacts against ten predictable AI design tells (tech gradients, feature-tile grids, unearned blur, wrong surface) and prescribes matched repairs—re-layout, recolor, or decoration removal. - Multiple Artifact Formats: Produces landing pages, interactive prototypes, 1920×1080 HTML slide decks with keyboard navigation, component labs, motion studies, and in-page Tweaks panels persisted via localStorage. - Use Case: A user asks for a dashboard concept for an internal admin tool. The Skill identifies it as a Monitor surface, inspects the repo's existing tokens and components, builds a self-contained HTML prototype with density-appropriate hierarchy, runs the slop audit, and verifies the file opens without console errors. ## 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.
