What problem does it solve? AI-generated frontend code tends to look templated: purple gradients, centered heroes, three equal feature cards, and generic glassmorphism. This Skill forces the agent to read the brief first, infer the right design direction, and ship landing pages, portfolios, and redesigns that do not look like default LLM output. ## Core Features & Use Cases - Brief Inference and Design Read: Analyzes page kind, vibe words, references, audience, and constraints, then declares a one-line design read before writing any code. - Three-Dial Configuration: Tunes DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY based on the brief, with presets for SaaS landings, portfolios, editorial sites, and public-sector services. - Design System Mapping: Routes briefs to official packages (Fluent, Material 3, Carbon, Polaris, GOV.UK, shadcn/ui, Tailwind v4) instead of hand-rolled imitations, with honesty rules for aesthetics like glassmorphism and bento grids. - Hard Layout Rules and Pre-Flight Checks: Enforces hero viewport fit, eyebrow restraint, CTA contrast and wrap bans, palette locks, and section-layout diversity before shipping. - Use Case: Ask for a redesign of a premium consumer cookware landing page and receive a React/Tailwind implementation with a non-default palette, real image assets, and a passing pre-flight audit. ## Quick Start Redesign my SaaS landing page so it looks like a Linear-style minimalist site and audit it against the pre-flight checklist before shipping.
