| 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
