What problem does it solve? Frontend code generated by AI often looks generic, with default fonts, predictable card grids, and no coherent visual identity. This Skill guides the creation of distinctive, production-grade interfaces by committing to a named aesthetic philosophy and enforcing concrete typography, color, layout, motion, and spacing rules before any code is written. ## Core Features & Use Cases - Eight Aesthetic Philosophies: Concrete implementation guides for Dieter Rams, Swiss/International Typographic, Japanese Minimalism, Brutalist, Scandinavian, Art Deco, Neo-Memphis, and Editorial/Magazine styles, each defining typography, color, layout, spacing, motion, and detail treatment. - Codebase-First Workflow: Scans existing components, CSS tokens, Tailwind configs, UI framework themes, and font loading before writing code, so new work extends the current design system instead of duplicating it. - Mobile-First and Dark Mode Rules: Enforces 375px-first layouts, 44px touch targets, 16px body text, CSS custom properties for theming, prefers-color-scheme support, and prefers-reduced-motion handling. - Use Case: Ask for a landing page hero in an Editorial/Magazine style and receive working HTML/CSS or React code with a display serif at hero scale, a strict column grid, and scroll-triggered reveals rather than a generic gradient layout. ## Quick Start Ask the assistant to build a specific component or page and optionally name an aesthetic philosophy, such as requesting a settings page in a Scandinavian style.
