Anti-slop frontend skill

Frontend that doesn't look AI-generated.

Portable skills that teach AI agents real layout, typography, motion, and spacing. No more boilerplate UI.

View on GitHub
Codex Cursor Claude Code
terminal
$ install the skill
npx skills add \
github.com/Leonxlnx/taste-skill
+ design-taste-frontend (v2)
+ 12 variant skills
ready

or paste a SKILL.md into your project

What it fixes

The patterns that give AI away.

These are the signatures LLMs default to when they try to look designed. The skill bans them unless the brief asks.

Three identical feature cards

The default feature row. Banned. Use asymmetric grids, zig-zag, or scroll-pinned layouts.

AI-purple gradients

The LLM house color. Reach past it deliberately.

Em-dashes, everywhere

The top visual tell. Zero allowed.

Headline separator Subtitle

Inter on slate-900

The lazy default stack. Pick type with intent.

Inter / slate-900

Glassmorphism on everything

Frosted blur as a default is a tell. Use it only for premium, media-overlay vibes, with a solid fallback.

backdrop-blur-xl

Version labels in the hero

BETA, v2.0, early access. Banned unless the brief is a launch.

BETA ยท INVITE-ONLY

How it works

Four steps before a single line of code.

01

Read the room

Infer the page kind, the vibe words, the audience, and the quiet constraints. Then declare a one-line design read before anything else.

02

Set the dials

Choose DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY from the brief. Every layout and motion decision is gated by these three values.

03

Map the system

When the brief reads as Material, Fluent, Carbon, Polaris, or shadcn, reach for the official package instead of reinventing it.

04

Run the check

A forty-point pre-flight matrix gates every shipment. If any box fails, the output is not done. The check is not optional.

Three dials tune the whole page.

Drag them. The baseline is 7 / 6 / 4, overridden by the design read, never edited in the file.

DESIGN_VARIANCE 7
SymmetryChaos
MOTION_INTENSITY 6
StaticCinematic
VISUAL_DENSITY 4
AiryCockpit

One install, thirteen skills.

A registry of frontend and image-generation skills. Install all, or pick one by name.

Install in one command.

Works with Codex, Cursor, and Claude Code. Or copy a SKILL.md into your repo.

npx skills add https://github.com/Leonxlnx/taste-skill

single skill: add the flag --skill "design-taste-frontend"

Built with taste-skill.

Real output from the skill, not mockups.

Floria site, top of page, built with taste-skill Floria site, bottom of page, built with taste-skill

Stop shipping slop.

Give your agent a design read, three dials, and a pre-flight check. The rest is just code.

Star on GitHub