What problem does it solve?
LLM-generated frontend designs for landing pages, portfolios, and redesigns often default to generic, templated "AI slop" aesthetics that fail to align with brand identity, audience expectations, or unique project requirements, leading to unoriginal, low-impact interfaces.
Core Features & Use Cases
- Brief Inference Engine: Automatically reads project context, audience, vibe cues, and existing brand assets to determine the correct design direction before any code is written, avoiding default aesthetic assumptions.
- Configurable Design Dials: Adjustable variance, motion intensity, and visual density settings to tailor output to specific use cases, from minimalist B2B SaaS landing pages to experimental creative portfolios.
- Design System Mapping: Prioritizes official, maintained design systems (e.g., GOV.UK Frontend, shadcn/ui, Primer) when applicable instead of hand-rolled CSS, ensuring accessibility and consistency.
- Strict Pre-Flight Validation: Enforces hard rules for layout, typography, color, and accessibility to eliminate common AI design tells like centered heroes, generic purple gradients, and inconsistent corner radii.
- Use Case Example: A solo designer building a portfolio for hiring managers can use this skill to generate an editorial, kinetic-type design with custom typography and scroll-driven animations, rather than a generic template with Inter font and three-column feature cards.
Quick Start
Use the design-taste-frontend skill to build a landing page for my sustainable skincare brand targeting eco-conscious consumers, with a calm, premium minimalist vibe that avoids generic AI design clichés.
