How to Detect AI-Generated Code in 30 Seconds

Inspect any button on the page. If its transition reads transition: all 0.3s ease-in-out, inspect a card. If the card says the same thing, inspect a link. Three for three? You're looking at code a model wrote. Here's the full field guide.

The 30-Second Visual Test

Before you even open DevTools, look at the page. Check these five things:

• Is the primary color blue or indigo? Sample it. If it lands near #3b82f6 (Tailwind blue-500), +20 points on the slop scale.
• Is the font Inter, Geist, or system-ui? If yes, +15 points.
• Are all cards the same size with the same border radius? Almost always rounded-2xl. If yes, +10 points.
• Is the hero centered with a big heading, subtitle, and two buttons (one filled, one ghost)? If yes, +15 points.
• Does hovering over anything trigger the exact same transition speed? If yes, +10 points.

Score 40 or higher and you're almost certainly looking at AI-generated code. If you want the visual-only version of this test in more depth, we built the 21-signs site checklist for exactly that.

The DevTools Audit (30 More Seconds)

Open DevTools and inspect a few elements. AI-generated code leaves fingerprints:

/* AI fingerprints in CSS */
transition: all 0.3s ease-in-out;     /* every interactive element, same timing */
border-radius: 1rem;                  /* rounded-2xl everywhere */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);  /* shadow-md */
font-family: Inter, sans-serif;       /* or Geist, the new Inter */
color: #3b82f6;                       /* blue-500 */
backdrop-filter: blur(12px);          /* backdrop-blur-md on the navbar */

Inspect three different elements. If they share the same transition timing, the same border radius, and the same shadow, that's slop. The single loudest tell is transition: all 0.3s ease-in-out repeated everywhere: a human picks transform for one thing and opacity for another, and varies the duration. A model picks all once and never thinks about it again. Our definitive list of 90+ AI design patterns catalogs the rest.

Now check the spacing. Inspect padding and margin values. If every single one is a multiple of 4 (8px, 12px, 16px, 24px, 32px), the code follows Tailwind's spacing scale with zero deviation. Hand-tuned design slips off-grid: a 15px gap here, a 30px section there, because a human eyeballed it against real content.

Read the computed styles, not the classes

Class names lie. A site can rename bg-blue-500 to bg-brand and look bespoke in the markup while computing to the exact same hex. So read the Computed tab, not the HTML. Pull the resolved color, convert it to HSL, and check the hue:

• Hue 200-290 (blue through violet) is the AI default range. #3b82f6 is hue 217.
• A real brand color usually sits outside it, or at least shifts the saturation and lightness off the Tailwind preset values.

This is the same trick our CSS audit walkthrough uses on production sites.

Using Sailop Scan

Manual inspection is fast but subjective. To get a number, run an automated scan. Sailop's CLI analyzes a frontend codebase and produces a DNA score:

# Install globally
npx sailop install

# Scan a directory
sailop scan ./src

# Scan a single file
sailop scan ./src/app/page.tsx

# Scan with detailed dimension breakdown
sailop scan ./src --verbose

The output gives you a 0-100 score (lower is more unique) with a letter grade:

Sailop DNA Scan Results
=======================
File: src/app/page.tsx

DNA Score:  72/100 (Grade D)
Verdict:    High AI pattern density detected

Dimensions:
  Color       81/100  blue-500 primary, no hue variation
  Typography  68/100  Inter only, uniform weight
  Layout      75/100  grid-cols-3, centered hero
  Animation   90/100  transition-all 300ms ease-in-out
  Components  65/100  rounded-2xl shadow-md pattern
  Structure   58/100  standard hero>features>cta>footer
  Spacing     67/100  strict 4px grid adherence

Top findings:
  [HIGH]   Blue-range primary color (hue 217)
  [HIGH]   transition-all with ease-in-out
  [MEDIUM] uniform border-radius (1rem)
  [MEDIUM] no serif font reference
  [LOW]    standard section ordering

Understanding the DNA Score

The DNA score measures how closely code matches the statistical profile of AI output. It is not a quality score. A 72 doesn't mean the code is bad. It means the code is indistinguishable from what v0, Lovable, or Cursor would have produced from the same prompt. For what drives each dimension, read the 7 dimensions of generic design.

Grade A (0-20): Highly unique. Intentional decisions throughout. Hand-crafted or built under strong constraints.

Grade B (21-40): Above average. Some unique patterns mixed with common defaults.

Grade C (41-60): A mix of intentional and default patterns. Typical of an AI starting point that got some customization.

Grade D (61-80): High AI pattern density. Most choices match the defaults. Needs real differentiation.

Grade F (81-100): Maximum slop. The entire visual language is defaults.

What Each Dimension Checks

The 73+ rules are distributed across the 7 dimensions:

Color rules detect blue/indigo/violet primaries, pure black/white backgrounds, mechanical palette construction, and the absence of hue-shifted neutrals.

Typography rules check for Inter/Geist/system-ui defaults, missing serif pairings, uniform font weights, and absent letter-spacing or text-wrap declarations.

Layout rules identify grid-cols-3 patterns, centered-everything layouts, uniform max-widths, and missing asymmetry.

Animation rules catch transition-all, ease-in-out, uniform durations, missing prefers-reduced-motion, and the absence of custom cubic-bezier curves.

Component rules flag uniform border-radius, shadow-md, predictable card structures, and generic button styling.

Structure rules analyze section ordering, HTML semantics, nesting depth, and content hierarchy.

Spacing rules measure 4px-grid adherence, section-padding uniformity, and the absence of off-grid values.

Quick Wins: 5 Fixes That Drop Your Score Fast

Scored high? These five changes move the needle most:

• Change your primary color. Pick a hue outside 200-290. Warm tones (hue 10-40) or greens (hue 140-170) differentiate instantly. If you don't know where to start, pick an accent color that isn't Tailwind blue.

• Add a serif display font. Pair it with your sans body font and use it for h1-h3. This alone can drop your typography score by 30 points. See why Inter is killing your brand for tested pairings.

• Kill transition-all. Replace transition: all 300ms ease-in-out with a named property and a real curve: transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1). That overshoot curve gives a button a tiny spring instead of the flat machine ease.

• Vary your border radius. 4px for buttons, 7px for cards, 2px for input fields. The same radius everywhere is the signature of a single design token applied without thought.

• Use off-grid spacing. Swap p-4 (16px) for 14px or 18px. Use 5px for tiny gaps instead of 4px. Small shifts create organic rhythm the eye reads as deliberate.

Automate It

Don't rely on manual checks forever. Wire Sailop into the workflow so a high score can't ship:

# Pre-commit hook
sailop check ./src --max-score 50

# CI/CD pipeline
sailop ci ./src --fail-above 60 --format json

This catches slop before production, the same way ESLint catches code-quality issues, except design has never had its own linter until now. For the full pipeline, see CI/CD for design; for the detection-to-prevention loop, the complete guide to anti-AI design.

Scan your project now at sailop.com/scan or install the CLI with npx sailop install.