What problem does it solve? AI-generated web pages tend to converge on the same generic aesthetic: Inter font, blue buttons, purple-pink gradients, emoji icons, and fabricated testimonials. This Skill injects design discipline into the AI's workflow so HTML/CSS/JavaScript output is visually distinctive, brand-aware, and grounded in a declared design system rather than training-data defaults. ## Core Features & Use Cases - Calibrated design workflow: A seven-step process from requirements through a Design Read (five dials), design-system declaration, v0 draft, full build, and verification, with explicit user checkpoints. - Anti-cliché rules and style recipes: A blocklist of overused AI design patterns plus 25 anchored style recipes (Linear, Aesop, Pentagram, Bloomberg Terminal, and more) loaded on demand from references/style-recipes/. - Preservation-aware redesigns and brand asset protocol: Classifies work as Extension, Preserve, or Overhaul before editing existing UIs, and enforces real logo/product imagery over CSS imitations for branded tasks. - Use Case: Ask the agent to build a landing page for a developer tool; it declares an oklch-based color system and font pairing first, shows a v0 draft with placeholders for early course-correction, then delivers a polished page with a Tweaks panel for live parameter adjustment. ## Quick Start Copy the skill folder into your project's .agents/skills directory and ask your AI agent to design a landing page, dashboard, slide deck, or interactive prototype.
