What problem does it solve? AI-generated interfaces often fall into repetitive, generic patterns like centered cards, purple gradients, and flat layouts. This Skill provides concrete design principles, layout patterns, and reference guides to produce distinctive, polished frontend interfaces with intentional visual hierarchy. ## Core Features & Use Cases - Anti-Generic Design Rules: Concrete dos and don'ts covering color palettes, typography pairings, shadows, and button states to eliminate cookie-cutter AI aesthetics. - Layout & Composition Patterns: Bento grid layouts, asymmetric grids, ambient lighting with blur gradients, and layered surface techniques with ready-to-use HTML/Tailwind snippets. - Visual Hierarchy System: A 3-level prominence framework with optical alignment, spacing, and contrast checklists for accessible, legible interfaces. - Use Case: When building a SaaS dashboard, apply the bento grid pattern with status badges, monospaced metrics, and tactile micro-interactions instead of a default card stack. ## Quick Start Use the frontend-design skill to redesign my dashboard page so it looks custom-crafted rather than like a generic AI template.
