Interactive · 8 live demos · 33 rules

Anti-slop, demonstrated.

Eight of the patterns that make interfaces look AI-generated. Flip the toggle to watch each transform into the crafted version ui-craft writes instead — the same rules ui-craft-detect v0.5.0 enforces in CI.

8 patterns·8 detected·0 fixed

Gradient button + bounce

purple-cyan-gradient · animate-bounce · generic-cta

Three rules fire. See all 33 in the detector →

Uniform card grid

🚀

Revenue

Lorem ipsum dolor sit amet consectetur adipiscing.

$12,480

Revenue · last 7 days

+12.5% from last week

⚡

Customer feedback

Lorem ipsum dolor sit amet consectetur adipiscing.

It stopped looking like an AI wrote it — even my designer asked who made it.

Alex ChenFrontend lead

uniform-border-radius · emoji-feature-icon

Identical cards become distinct shapes.

ALL CAPS heading

Features·04

Features

What you get.

uppercase-heading

Uppercase tracking reads as a label, not a section heading.

Gradient metric text

+324%

vs last quarter·Q3 → Q4

Driven by retention cohort changes in enterprise.

gradient-text-metric · pure-black-text

Gradient fill makes numbers harder to read, not more impressive.

Glassmorphism + neon

Jordan Rivera

Design Engineer

Online·active 2m ago

Reviewed the new pricing page.

3 comments·2 mentions·15 min read

updated 4:15 PM·Project Aurora

glassmorphism-stack · no-focus-visible

Backdrop blur and cyan glow read as decoration, not depth.

Decorative gradient blobs

Essay · 02

Typography, given the room it needs.

Restraint is not the absence of style — it is the evidence that a designer made every call on purpose, and none of them were decoration.

purple-cyan-gradient · left-top-animation

Blobs exist because the layout wasn't good enough without them.

Colored trend pill

Revenue

$12,480

12.5%from last month

Last updated 2 minutes ago

gradient-text-metric

A green pill adds color, not information. Typography carries it.

Generic loading state

Loading post…

This won't take long...

setTimeout-animation · uppercase-heading

A skeleton that matches the final layout tells the user what's coming.

Eight shown. The detector catches 33.

v0.5.0 added accessibility, forms and table rules on top of the visual tells — plus --fix autofix and SARIF output for CI.

transition-all
left-top-animation
pure-black-text
absolute-zindex
no-focus-visible
outline-none-no-replacement
a11y/modal-without-dialog
forms/placeholder-as-label
tables/no-overflow-handling
aria-label-emoji
pixel-radius-inconsistency
inline-any-style

Full table of all 33 in ui-craft-detect.