skills.rest
GSU26SE55
GSU26SE55OFFICIAL
Explore all skills by this author →
GitHub

design-taste-frontend

Generates non-templated frontend designs for landing pages, portfolios, and redesigns using brief inference and design dials.

Updated Apr 27, 2026
Search Tags:#landing page#react#design system#tailwind#frontend design#anti-slop#ui generation
One-click install
npx skills add https://github.com/GSU26SE55/frontend --skill design-taste-frontend-gsu26se55
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/GSU26SE55/frontend/tree/main/.agents/skills/design-taste-frontend
Command: npx skills add https://github.com/GSU26SE55/frontend --skill design-taste-frontend-gsu26se55

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend code tends to look templated and generic, repeating the same purple gradients, centered heroes, and card grids. This Skill forces deliberate design decisions by inferring the brief's intent, selecting an appropriate design system or aesthetic, and enforcing anti-default rules before any code is written. ## Core Features & Use Cases - Brief Inference and Design Read: Analyzes page kind, vibe words, references, audience, and constraints, then declares a one-line design direction before generating code. - Three-Dial Configuration: Tunes DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY with presets for SaaS landings, portfolios, editorial sites, and public-sector services. - Design System Mapping: Routes briefs to official packages like Fluent UI, Carbon, Material 3, GOV.UK Frontend, shadcn/ui, or Tailwind v4 instead of hand-rolled imitations. - Pre-Flight Audits: Enforces hard rules on hero layout, eyebrow restraint, CTA contrast, palette consistency, and section-layout diversity. - Use Case: A user asks for a premium cookware brand landing page; the Skill rejects the default beige-and-brass palette, picks a cold-luxury alternative, generates real imagery, and ships an asymmetric hero that passes the pre-flight checklist. ## Quick Start Ask the agent to design a landing page or portfolio from your brief, including any vibe words, reference sites, and brand assets you have.

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 identifies page kind, audience, and vibe before coding. Then set variance, motion, and density dials, avoid default patterns like purple gradients and centered heroes, and run a pre-flight audit on typography, color, and layout rules.

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

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

Does this approach work for redesigns of existing websites?▼

Yes, redesigns are a supported page kind with audit-first handling. Existing brand assets like logos, colors, and typography become starting material, and dial values either match the existing design for preservation or increase for an overhaul.

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

Yes, but interactive components using Motion must be isolated leaf components with 'use client' at the top, imported from motion/react. Server Components render static layouts only, and continuous values like scroll progress should use useMotionValue instead of useState.

When should serif fonts be used in web design?▼

Serif fonts are appropriate only when the brand brief explicitly names one or the aesthetic is genuinely editorial, luxury, or heritage. For creative agencies, portfolios, and modern brands, sans-serif display fonts like Geist Display or Cabinet Grotesk are the correct default.

Why do AI-generated hero sections fail design review?▼

Common failures include headlines exceeding two lines, subtext over 20 words, top padding above 6rem, and CTAs pushed below the viewport. The fix is reducing font scale or cutting copy so the hero fits the initial viewport with visible CTAs.

Related Skills

Explore More Design & Creative Skills→
zivtechzivtech

copy-planner

Generate structured content briefs covering audience, goals, and success criteria.

Official
Intermediate
Jesse-L-MJesse-L-M

benchmark

Run browser-based performance audits and compare results against a baseline.

Community
Advanced
valtterimelkkovaltterimelkko
1

web-asset-generator

Generates favicons, PWA icons, and Open Graph images from source logos or text slogans.

Community
Intermediate
Haohao-endHaohao-end
779

frontend-skill

Plan and implement front-end UI designs with hierarchy, spacing, and motion.

Community
Basic