What problem does it solve? Designing high-fidelity UI artifacts in a CLI/API environment often produces generic, templated-looking output because agents lack a structured design process. This Skill provides a complete design workflow — from brief scoping and context gathering to surface selection, variation exploration, and slop auditing — so the resulting HTML artifacts look deliberately designed rather than auto-generated. ## 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 any visual tokens, eliminating the default hero-plus-three-cards layout. - Structured Workflow: Covers brief understanding, repo/brand context gathering, design-system definition, format selection (static board, prototype, deck, component lab, motion study), building, and verification. - Slop Diagnostic: A 10-point self-audit that scores common AI design tells (tech gradients, feature-tile grids, glassmorphism, default Inter type) and maps each tell to the correct repair strategy. - Use Case: Ask for a landing page for a new developer tool. The Skill inspects your repo's existing tokens and components, produces three variants (conservative, strong-fit, divergent) as a self-contained HTML file with an optional Tweaks panel, and verifies the file renders without console errors. ## Quick Start Ask the agent to design a landing page or interactive prototype as a self-contained HTML file, providing any brand docs, screenshots, or repo paths for visual context.
