ia-frontend-designv5.0.1

Design and build a high-conversion landing page for a B2B SaaS product with a distinct visual identity. Requires writing a 3-sentence design philosophy, choosing a signature typeface and color relationship, and avoiding generic AI-default aesthetics.

Create a dense but readable analytics dashboard for a data product, handling loading, empty, and error states across charts and tables. The design must balance information density with clarity while respecting an existing component library.

Build an experience-mode site for a designer or creative studio where visual identity is the product. Demands bold differentiation, motion behavior, and a memorable signature visual choice that passes the swap test against unrelated briefs.

Design a product page and catalog for a DTC brand, defining a visual direction grounded in the product's materials and vernacular. Must include focus states, reduced-motion handling, and narrow/wide viewport verification.

Apply full design philosophy to a new Next.js application with zero existing design signals, establishing tokens, spacing scale, and component vocabulary. Keeps interactive code at client boundaries while matching a product-register aesthetic.

Designers and developers use this skill to deliver differentiated, production-grade frontend interfaces to clients, replacing generic template-based output with intentional, subject-grounded aesthetic directions.

Small agencies leverage the skill to standardize a rigorous design process across team members, ensuring every greenfield build passes a validation gate and ships with cohesive aesthetics and verified states.

Platforms that generate frontend code integrate this skill to raise output quality from generic AI defaults to distinctive, accessible, production-ready interfaces, differentiating their product in a crowded market.