What problem does it solve? New web interfaces built by AI often look generic and interchangeable, with default fonts, purple gradients, and layouts that break under real content. This Skill guides the creation of distinctive, production-grade frontend code for components, pages, landing pages, and dashboards, with explicit rules against common AI-generated aesthetic patterns. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold visual direction (typography pairing, color system, motion, spatial composition) before writing any HTML/CSS/JS or React/Vue code. - Anti-Pattern Guardrails: Enforces concrete rules such as avoiding Inter/Roboto defaults, avoiding purple-gradient-on-white schemes, using pure viewport units for responsive scaling, and defaulting to light themes for Chinese audiences. - CJK Typography Handling: Applies mandatory rules for Chinese/Japanese/Korean content, including text-wrap: pretty, whitespace-nowrap on dates and metadata, flex-wrap instead of nested grids, and an orphan-character audit checklist. - Use Case: Ask for a new product landing page, receive a visual direction proposal first, then get working responsive code verified against long text, empty states, and mobile viewports. ## Quick Start Ask the agent to design and build a new landing page for your product, describing the target audience, use scenario, and brand tone in one sentence.
