| name | anti-slop-frontend |
| description | 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 |
Overview
Anti-slop frontend design framework based on 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
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
- Define content goal (traffic, engagement, conversion, brand awareness)
- Research target audience pain points and search intent
- Generate content using appropriate AI tools
- Edit and humanize output for authenticity
- Optimize for target platform (SEO, hashtags, format)
- Schedule and distribute across channels
- 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
Process
- Analyze the task requirements
- Apply domain expertise
- 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. |
