What problem does it solve? AI-generated interfaces tend to converge on the same generic patterns — cream backgrounds with serif headlines, dark themes with acid-green accents, or purple-gradient glassmorphism. This Skill forces deliberate aesthetic decisions before any code is written, so landing pages, dashboards, and design systems end up with a recognizable visual identity instead of looking like unreviewed AI output. ## Core Features & Use Cases - Aesthetic Direction Framework: Choose from seven defined design directions (industrial utilitarian, warm editorial, Swiss minimal, playful product, luxury restraint, retro-futurist, organic natural) with an explicit blocklist of overused AI-default combinations. - Token-Based Design System: Define CSS variable or Tailwind theme tokens for surfaces, text, brand, and semantic colors, with contrast requirements and typography pairing rules. - Four-Phase Workflow with Self-Critique: Direction selection, design brief critique, implementation guidance per stack (Tailwind v4, CSS Modules, styled-components, shadcn/ui), and screenshot-based visual critique at three viewport widths. - Use Case: When building a new SaaS landing page, run Phase 1 to commit to a direction and signature element, then use the screenshot critique template to verify the result passes the squint, swap, and neighbor tests before shipping. ## Quick Start Ask the agent to design a landing page for your product using the frontend-design skill, starting with an aesthetic direction and design brief before writing any components.
