skills.rest
rod97-1
rod97-1COMMUNITY
Explore all skills by this author →
GitHub

design-taste-frontend

Enforce context-aware design discipline and anti-default guardrails on frontend output.

1|Updated May 29, 2026
Search Tags:#design systems#landing pages#frontend design#anti-slop#redesign#portfolios#ui guardrails
One-click install
npx skills add https://github.com/rod97-1/design-skills --skill design-taste-frontend-rod97-1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-taste-frontend
Source: https://github.com/rod97-1/design-skills/tree/main/raw-design-skills/design-taste-frontend
Command: npx skills add https://github.com/rod97-1/design-skills --skill design-taste-frontend-rod97-1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

LLM-generated frontend interfaces frequently default to generic "slop" aesthetics: overused AI purple gradients, templated three-card layouts, default Inter font, and generic glassmorphism that fails to align with user intent or brand identity. This Skill eliminates those defaults by enforcing context-aware design discipline, ensuring shipped interfaces feel intentional, on-brand, and non-templated.

Core Features & Use Cases

  • Context-Aware Brief Inference: Aligns design direction with page type, target audience, vibe cues, and brand constraints before any code is written.
  • Configurable Design Dials: Adjustable variance, motion intensity, and visual density settings to tailor output for use cases from minimalist SaaS landing pages to experimental agency portfolios.
  • Anti-Slop Guardrails: Hard rules banning default AI aesthetics, enforcing layout diversity, typography discipline, color consistency, and WCAG accessibility compliance to avoid templated output.
  • Redesign Support: Audit-first workflow for redesign projects, with options to preserve existing brand assets or execute full overhauls while respecting existing identity.

Quick Start

Use the design-taste-frontend skill to build a non-templated landing page for a B2B SaaS product targeting technical buyers, with a Linear-style minimalist aesthetic.

Frequently Asked Questions about design-taste-frontend

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

FAQPage Schema
How do I stop LLM-generated frontend design from looking like generic AI slop?▼

To stop LLM-generated frontend design from looking like generic AI slop, apply anti-default aesthetic guardrails that ban overused purple gradients and templated three-card layouts. This enforces context-aware design discipline, ensuring your interface feels intentional and on-brand.

What is the best way to redesign a B2B SaaS landing page without losing brand consistency?▼

The best way to redesign a B2B SaaS landing page without losing brand consistency is using an audit-first workflow. This process evaluates existing brand assets and constraints before enforcing typography discipline and color consistency to execute a full, brand-aligned overhaul.

How do I create a non-templated portfolio site for a creative agency?▼

To create a non-templated portfolio site for a creative agency, configure adjustable design dials for visual variance and motion intensity. This tailors the layout diversity and aesthetic output to match experimental agency requirements instead of default templates.

Can I enforce WCAG accessibility compliance when generating frontend interfaces?▼

Yes, you can enforce WCAG accessibility compliance when generating frontend interfaces by applying hard anti-slop guardrails. These rules ensure layout diversity, typography discipline, and color consistency align with accessibility standards before any code is finalized.

Why does my AI-generated landing page always default to the Inter font and glassmorphism?▼

Your AI-generated landing page defaults to the Inter font and glassmorphism because LLMs frequently fallback to generic templated aesthetics. Enforcing context-aware brief inference and anti-default guardrails eliminates these defaults to align with your specific brand identity.

Does this approach work for minimalist public-sector service sites?▼

Yes, this approach works for minimalist public-sector service sites by adjusting visual density and motion intensity settings. These configurable design dials tailor the output to satisfy strict accessibility compliance and layout diversity requirements for public-sector contexts.

Related Skills

Explore More Design & Creative Skills→
hi-yuki-922hi-yuki-922
1

i-teach-impeccable

Gather design context from codebase and user input into CLAUDE.md.

Community
Intermediate
BeltDoorBeltDoor

taste-frontend

Enforce intentional visual direction and anti-template standards for frontend designs.

Community
Advanced
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
Badar-e-AlamBadar-e-Alam

frontend-design

Create distinctive frontend visual designs with a two-pass planning process.

Community
Intermediate