design-taste-frontend

name	design-taste-frontend
description	Anti-slop frontend design guidance for creating distinctive, high-quality web interfaces that avoid generic AI-generated aesthetics. Use when building or refining frontend designs, landing pages, or UI components to ensure they have intentional design taste, visual character, and avoid common "AI slop" patterns.
license	MIT
metadata	{"author":"Leonxlnx","version":"1.0.0"}

Design Taste — Frontend

Anti-slop frontend design guidance to create interfaces with genuine design taste and visual character.

When to Use This Skill

Apply when:

• Building new frontend designs or landing pages
• Refining existing UI to improve its visual quality
• Avoiding the generic, "AI-generated" look
• Making design decisions that require taste and judgment
• Creating interfaces that feel distinctive and intentional

The Anti-Slop Approach

What "Slop" Looks Like

• Generic purple/blue gradients on every hero
• Uniform card grids with identical spacing
• Overly rounded corners and soft shadows everywhere
• Centered everything with no visual tension
• Stock-photo imagery with no art direction
• Cookie-cutter layouts that all look the same

What Good Design Looks Like

• Distinctive visual character and personality
• Intentional asymmetry and visual tension
• A clear, memorable focal point
• Typography with character
• Cohesive, purposeful color
• Details that reward attention

Design Taste Principles

1. Intentionality

Every design decision should have a reason. If you can't explain why something is the way it is, reconsider it.

2. Restraint

• Use fewer, better elements
• Edit ruthlessly — remove what doesn't serve the design
• Let whitespace do the work
• One strong idea per screen, not many weak ones

3. Character

• Give the interface a personality
• Use distinctive typography, color, or imagery
• Avoid the safe, generic default
• Make it memorable

4. Craft

• Pay attention to the details: spacing, alignment, micro-interactions
• Polish hover states, transitions, and focus states
• Ensure consistency in every corner
• Care about the small things

Practical Guidelines

• Typography: Choose a distinctive display face; pair it with a readable body face
• Color: Build a palette with personality; use accent color sparingly
• Layout: Break the grid; create visual tension; use asymmetry
• Imagery: Art-direct images; use custom illustrations or graphics
• Details: Add borders, dividers, subtle textures, and micro-interactions

Related Skills

• redesign-skill — redesigning existing interfaces
• output-skill — output quality standards
• minimalist-skill — minimalist design
• brutalist-skill — brutalist design
• stitch-skill — stitching designs together
• brandkit — brand kits
• image-to-code-skill — converting images to code

Resources

• Taste Skill — source repository