What problem does it solve? AI-generated frontend code often looks generic and ignores existing design systems. This Skill guides the creation of distinctive web interfaces by detecting existing design patterns, planning the visual direction before coding, and verifying results with screenshots. ## Core Features & Use Cases - Context Detection: Scans the codebase for design tokens, component libraries, CSS frameworks, and animation libraries to decide whether to follow existing patterns or apply fresh design guidance. - Structured Design Workflow: Covers pre-build planning (visual thesis, content plan, interaction plan), typography, color, composition, motion, accessibility, and copy rules across landing pages, dashboards, and components. - Visual Verification: Takes screenshots via Playwright, browser MCP tools, or agent-browser to confirm the output matches the intended design before declaring done. - Use Case: Ask for a new landing page for your product; the Skill plans a bold aesthetic direction, builds it with intentional typography and motion, then screenshots the result to catch layout or contrast issues. ## Quick Start Build a landing page for my product with a distinctive editorial design and verify it with a screenshot.
