design-taste-frontend

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

Updated May 9, 2026
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill design-taste-frontend-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill design-taste-frontend-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to fall back on the same templated aesthetic: purple gradients, centered heroes, three equal feature cards, and Inter on slate. This Skill forces the agent to read the brief first, infer the right design direction, and ship landing pages, portfolios, and redesigns that do not look like default AI output. ## Core Features & Use Cases - Brief Inference and Design Read: Analyzes page kind, vibe words, references, audience, and constraints, then declares a one-line design read before writing any code. - 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 and Anti-Slop Rules: Selects real design systems (Fluent, Material, Carbon, shadcn/ui, Tailwind v4) when applicable, and enforces hard layout, typography, color, and accessibility rules plus a pre-flight check. - Use Case: Ask for a redesign of a premium consumer cookware landing page and receive a React/Next.js + Tailwind implementation with a deliberate palette, varied section layouts, real image assets, and no AI-default clichés. ## Quick Start Use the design-taste-frontend skill to build a landing page for my B2B SaaS product with a Linear-style minimalist feel.

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 with a brief inference step that reads page kind, vibe words, references, and audience before writing code. Then set variance, motion, and density dials and enforce anti-default rules that ban purple gradients, centered heroes, and generic feature cards.

What design system should I use for a SaaS landing page?▼

For indie and small-team SaaS builds, Tailwind v4 utilities with a dark variant are the default. If the brief maps to an official system like Fluent, Material, Carbon, or Primer, install that official package instead of recreating its CSS by hand.

Can I use Framer Motion with Next.js Server Components?▼

Yes, but any component using Motion, scroll listeners, or pointer physics must be an isolated leaf with 'use client' at the top. Import from motion/react in new code, and use useMotionValue instead of useState for continuous values like scroll progress.

Why does my hero section jump on mobile Safari?▼

Using h-screen for full-height heroes causes layout jumping because of the iOS Safari address bar. Use min-h-[100dvh] instead so the hero stays stable as the viewport height changes.

When should I not use this frontend design skill?▼

It is scoped to landing pages, portfolios, editorial sites, and redesigns, not dashboards, data tables, or multi-step product UI. For dense application interfaces, use a component-driven design system workflow instead.