Anti Slop Frontend

---
name: anti-slop-frontend
description: Use when anti-slop frontend framework for AI agents. Enforces better
  layout, typography, motion, and spacing to counter generic AI-generated boilerplate
  UIs. Use when building frontend, countering generic AI UIs, need distinctive visual
  design, image-to-code pipeline.
domain: content
author: oyi77
license: Apache-2.0
subdomain: content-creation
tags:
- frontend
- design
- ui
- anti-slop
- taste
- typography
- motion
- image-to-code
version: 1.0.0
category: content
---



## Overview

Anti-slop frontend design framework based on [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill). Provides 13 specialized skills that enforce distinctive, production-grade visual design — countering the generic, soulless UIs that AI agents typically generate.

The framework covers layout systems, typography hierarchies, motion design, spacing discipline, and image-to-code pipelines across three visual style variants.

## Implementation Skills

- Configure agents, anti, better, boilerplate, building settings before first use


### taste-skill (v2)

Core design taste engine. Injects layout/typography/color/motion constraints into agent output to prevent generic patterns.

- **When to use**: Every frontend generation task as a baseline quality filter.
- **Key principles**: White space is intentional, type scales are non-negotiable, color palettes have hierarchy, motion serves purpose.

### taste-skill-v1

Legacy taste skill for backward compatibility with existing agent pipelines.

### gpt-taste

GPT-specific taste calibration — adapts design constraints for GPT-based code generators.

### image-to-code

Screenshot-to-production-code pipeline. Takes a reference image and generates pixel-accurate frontend code.

- **When to use**: Converting mockups, competitor screenshots, or design references into working code.
- **Process**: Image analysis → layout extraction → component mapping → responsive code generation.

### redesign-existing-projects

Audit and redesign existing frontend projects. Identifies anti-patterns and applies taste-skill improvements.

- **When to use**: Inheriting ugly codebases, post-MVP polish, design debt cleanup.
- **Process**: Visual audit → priority matrix → incremental redesign → before/after validation.

### high-end-visual-design

Premium visual design patterns — luxury brand aesthetics, editorial layouts, cinematic compositions.

- **When to use**: High-end brand sites, portfolio showcases, product launch pages.

### full-output-enforcement

Ensures agents produce complete, production-ready output — no placeholder content, no stub components, no TODO comments.

### minimalist-ui

Minimalist design system — reduction to essentials, generous whitespace, restrained color palettes.

- **Key principles**: Remove until it breaks, then stop. Every element must earn its place.

### industrial-brutalist-ui

Industrial brutalist design system — raw typography, exposed structure, intentional roughness, anti-polish aesthetics.

- **Key principles**: Honesty in materials, function over decoration, embrace the grid.

### stitch-design-taste

Design taste layer for Stitch-based component generation — ensures consistent quality across stitched UI components.

## Image Generation Skills

- Configure agents, anti, better, boilerplate, building settings before first use


### imagegen-frontend-web

Generate web-specific visual assets — hero images, section backgrounds, illustration sets — with consistent style matching the frontend design system.

### imagegen-frontend-mobile

Generate mobile-specific visual assets — splash screens, onboarding illustrations, app store screenshots.

### brandkit

Generate cohesive brand identity kits — logo variants, color palettes, typography pairings, icon sets, pattern libraries.

## Visual Style Variants

- Configure agents, anti, better, boilerplate, building settings before first use


### Soft/Premium
- Rounded corners, subtle gradients, soft shadows
- Warm neutral palettes with accent pops
- Smooth easing curves on transitions
- High whitespace ratio, generous padding

### Minimalist
- Sharp edges or very subtle radius
- Monochrome + single accent color
- Immediate transitions (100-200ms)
- Grid-disciplined, content-first layouts

### Industrial Brutalist
- No border radius, raw edges
- High contrast black/white with one bold accent
- No animation or hard cuts
- Exposed grid lines, visible structure

## Installation

```bash
npx skills add Leonxlnx/taste-skill
```

## When to Use

**Trigger phrases:**
- "anti slop frontend"
- "Building any frontend UI from scratch"
- "Countering generic AI-generated boilerplate designs"
- "Need distinctive, production-grade visual design"


- Building any frontend UI from scratch
- Countering generic AI-generated boilerplate designs
- Need distinctive, production-grade visual design
- Running an image-to-code conversion pipeline
- Redesigning existing projects with poor visual quality
- Generating brand-consistent visual assets

## How to Use

1. Define content goal (traffic, engagement, conversion, brand awareness)
2. Research target audience pain points and search intent
3. Generate content using appropriate AI tools
4. Edit and humanize output for authenticity
5. Optimize for target platform (SEO, hashtags, format)
6. Schedule and distribute across channels
7. Measure performance and iterate

## When NOT to Use

- Task is about content strategy, not creation (use strategy skills)
- Task is about content distribution (use distribution skills)
- You need to analyze content performance (use analytics skills)
- Task is about content moderation (use moderation tools)
- You don't have content guidelines
- Task requires domain expertise (consult experts)


## Red Flags

- **AI-generated content sounds robotic**: Always run through humanizer before publishing
- **Engagement dropping week-over-week**: Content fatigue or algorithm change — vary formats
- **Duplicate content across platforms**: Adapt content per platform, don't just cross-post
- **No content calendar**: Sporadic posting kills audience retention
- **Ignoring analytics**: Content without measurement is just publishing, not marketing

## Verification

- [ ] Skill output matches expected behavior

## Process

1. Analyze the task requirements
2. Apply domain expertise
3. Verify output quality

## Anti-Rationalization Table

| Rationalization | Reality |
|---|---|
| "Good enough content works" | Quality content drives engagement. Mediocre content gets ignored. |
| "I will optimize later" | SEO and distribution need optimization from the start. |
| "Templates are good enough" | Templates are a starting point. Custom content outperforms generic. |