design-taste-frontend

Generates non-templated frontend interfaces for landing pages, portfolios, and redesigns using inferred design direction.

Updated Jul 31, 2026
One-click install
npx skills add https://github.com/AarnavBaddam/skills --skill design-taste-frontend-aarnavbaddam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/AarnavBaddam/skills/tree/main/design-taste-frontend
Command: npx skills add https://github.com/AarnavBaddam/skills --skill design-taste-frontend-aarnavbaddam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to look templated and generic, repeating the same AI-purple gradients, centered heroes, and default font choices. This Skill forces the agent to read the brief first, infer the right design direction, and ship interfaces that avoid recognizable AI slop patterns. ## Core Features & Use Cases - Brief Inference and Design Read: Analyzes page kind, vibe words, references, audience, and constraints before writing code, then declares a one-line design read. - Three-Dial Configuration: Tunes DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY based on the brief, with presets for SaaS landings, portfolios, editorial sites, and public-sector services. - Design System Mapping: Selects official packages (Fluent, Material, Carbon, Polaris, GOV.UK Frontend, shadcn/ui, Tailwind v4) when the brief matches a real system, and gives honest implementation guidance for aesthetics like glassmorphism, bento, and brutalism. - Pre-Flight Layout Rules: Enforces hard rules on hero sizing, eyebrow restraint, CTA contrast, palette locking, and layout-family diversity to catch broken design before shipping. - Use Case: Ask for a redesign of a premium cookware landing page and receive a React/Tailwind implementation with a deliberate non-default palette, real image assets, and a passed pre-flight audit. ## Quick Start Redesign my SaaS landing page so it looks like a deliberate Linear-style design instead of a generic AI template.

Frequently Asked Questions about design-taste-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated landing pages not look templated?

Start by inferring the design direction from the brief: page kind, vibe words, audience, and existing brand assets. Then set variance, motion, and density dials, pick a real design system when one fits, and enforce rules against default patterns like AI-purple gradients and centered heroes.

What design system should I use for a React landing page?

Match the system to the brief: Fluent for Microsoft-style enterprise, Material 3 for Google-flavored products, Carbon for IBM-style B2B, GOV.UK Frontend or USWDS for public sector, and Tailwind v4 with shadcn/ui for modern SaaS. Use one system per project and install the official package rather than recreating its CSS.

Does this approach work with Next.js Server Components?

Yes. The default stack is Next.js with Server Components for static layouts. Any component using Motion, scroll listeners, or pointer physics must be an isolated client leaf with 'use client', and global state providers must be wrapped in a client component.

Why does my AI-generated hero section overflow the viewport?

Hero overflow happens when headline copy exceeds two lines or font scale is too large for the content. Keep subtext under 20 words, cap top padding at pt-24, use text-4xl to text-6xl for most heroes, and cut copy rather than shrinking layout discipline.

When should I not use serif fonts in web design?

Serif is discouraged as a default and only appropriate when the brand brief names a serif or the aesthetic is genuinely editorial, luxury, or heritage. For creative agencies, portfolios, and premium consumer brands, default to a sans display face like Geist Display or Cabinet Grotesk.

What are the limitations of aesthetic trends like glassmorphism on the web?

Aesthetics like glassmorphism, bento grids, and Apple Liquid Glass have no official web package, so implementations are approximations using backdrop-filter, CSS Grid, and layered gradients. Provide solid-fill fallbacks for prefers-reduced-transparency and label approximations honestly in code comments.