What problem does it solve? AI-generated frontend interfaces tend to look generic — the same fonts, card grids, and gray palettes regardless of the product. This Skill forces deliberate, domain-specific design decisions (typography, color world, layout, CSS token naming, depth and spacing systems) so dashboards, admin panels, landing pages, and marketing sites feel crafted for their actual product instead of defaulting to training-data patterns. ## Core Features & Use Cases - Context-based routing: Directs work to app.md for product/data UIs (dashboards, admin panels, SaaS tools) or marketing.md for landing pages and creative artifacts. - Required pre-generation process: Mandates answering intent questions and producing a domain concept list, color world, signature element, and rejected defaults before any code is written. - Quality checklists: Provides swap, squint, signature, and token tests plus universal anti-patterns (dramatic shadows, multiple accents, inconsistent spacing) to catch generic output before showing it. - Use Case: When asked to build a bakery's order-management dashboard, instead of shipping a default Inter-plus-blue-accent layout, you derive warm domain concepts (flour, parchment, oven heat), propose a signature element, confirm direction with the user, then generate the UI. ## Quick Start Use the frontend-design-principles skill to design a landing page for my product and propose a domain-specific direction before writing any code.
