How to Detect AI-Generated Code in 30 Seconds

Can you tell if a website was built by an AI? In 30 seconds? You can, and it's easier than you think. Here's the 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? If yes, +20 points on the slop scale.
• Is the font Inter, system-ui, or the browser default? If yes, +15 points.
• Are all cards the same size with the same border radius? If yes, +10 points.
• Is the hero centered with a big heading, subtitle, and two buttons? If yes, +15 points.
• Does hovering over anything trigger the exact same transition speed? If yes, +10 points.

If you scored 40 or higher, you're almost certainly looking at AI-generated code.

The DevTools Audit (30 More Seconds)

Open your browser's DevTools and inspect a few elements. AI-generated code has fingerprints:

/* AI fingerprints in CSS */
transition: all 0.3s ease-in-out;     /* Universal transition */
border-radius: 0.5rem;                /* rounded-lg everywhere */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);  /* shadow-md */
font-family: Inter, sans-serif;       /* The AI font */
color: #3b82f6;                       /* blue-500 */

Check three different elements. If they all use the same transition timing, the same border radius, and the same shadow -- that's AI slop. Our definitive list of 90+ AI design patterns catalogs every pattern you might spot.

Now check the spacing. Inspect padding and margin values. If every value is a multiple of 4 (4px, 8px, 12px, 16px, 24px, 32px), the code follows Tailwind's spacing scale exactly. Real design uses intentional off-grid values.

Using Sailop Scan

The fastest and most accurate method is automated scanning. Sailop's CLI analyzes any frontend codebase and produces a DNA score:

# Install globally
npm install -g sailop

# 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-lg 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 (0.5rem)
  [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-generated output. It's not a quality score. A score of 72 doesn't mean the code is bad -- it means the code is indistinguishable from AI output. For a full explanation of what drives each dimension's score, read what is AI slop: the 7 dimensions of generic design.

Grade A (0-20): Highly unique. Intentional design decisions throughout. Almost certainly hand-crafted or built with strong design constraints.

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

Grade C (41-60): Average. A mix of intentional and default patterns. Typical of projects that started with AI and received some customization.

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

Grade F (81-100): Maximum slop. Virtually indistinguishable from raw AI output. 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 lack of hue-shifted neutrals.

Typography rules check for Inter/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 asymmetric compositions.

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

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

Structure rules analyze section ordering, HTML semantic usage, nesting complexity, and content hierarchy.

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

Quick Wins: 5 Fixes That Drop Your Score Fast

If you've scanned and scored high, here are the five changes that make the biggest difference:

• Change your primary color. Pick any hue outside 200-290. Warm tones (hue 10-40) or greens (hue 140-170) immediately differentiate.

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

• Replace transition-all with specific properties. Instead of transition: all 300ms ease-in-out, use transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1).

• Vary your border radius. 4px for buttons, 7px for cards, 1px for containers. Never use the same radius everywhere.

• Use off-grid spacing. Replace p-4 (16px) with 14px or 18px. Use 5px for tiny gaps instead of 4px. These small shifts create organic rhythm.

Automate It

Don't rely on manual checks. Add Sailop to your development workflow:

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

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

This catches AI slop before it reaches production, the same way linters catch code quality issues. For a complete pipeline setup guide, see CI/CD for design. For the full anti-slop workflow from detection to prevention, read our complete guide to anti-AI design.

Try scanning your project now at sailop.com/scan or install the CLI with npm i -g sailop.

Try Sailop

Scan your frontend for AI patterns. Generate a unique design system. Ship code that looks intentional.