Scoring System
Sailop scores your frontend code from 0 to 100 across 7 weighted dimensions. Lower is better. Here is how it works, what triggers each dimension, and how to bring your score down.
How scoring works
Sailop scans your CSS, Tailwind classes, inline styles, and markup to detect patterns that are characteristic of AI-generated frontends. Each detected pattern (called a “finding”) belongs to one of 7 dimensions and has a severity level: low, medium, high, or critical.
The final score is a weighted sum of per-dimension scores. Each dimension has a weight that reflects its visual impact. The formula:
Each dimension score itself is calculated from the number of triggered rules and their severities. A critical finding contributes more points than a low-severity one.
The 7 dimensions
Each dimension covers a specific aspect of visual design. Together, they form a comprehensive picture of how “AI-typical” your frontend looks.
Colors
weight: 20% · 12 rulesDetects the blue-indigo-violet palette that dominates AI outputs. Also flags pure white backgrounds (#fff), pure black text (#000), and hues in the 200-290 range (the AI band). Looks for gray-only neutrals with no warm or cool tint.
- Blue primary (#6366f1, #4f46e5)
- Pure white background (#ffffff)
- Gray neutrals with no hue shift
- Blue-violet gradient backgrounds
Choose a base hue outside the 200-290 range. Use off-white backgrounds (add warmth or coolness). Tint your grays toward your base hue. Avoid pure black for body text.
Typography
weight: 15% · 10 rulesChecks for the ubiquitous Inter + system-ui combination. Detects single-family stacks, missing serif options, default line heights, and the -0.025em letter-spacing that appears in nearly all AI outputs.
- Inter as the sole typeface
- system-ui without a named font
- Identical letter-spacing everywhere
- Missing display/body font pairing
Use at least two typeface families (display + body). Pick a serif option for headings. Vary your letter-spacing between elements. Avoid Inter unless paired with a distinctive display font.
Spacing
weight: 15% · 11 rulesFlags perfect 4px grid systems where every value is a multiple of 4 or 8. AI agents default to uniform spacing scales. Sailop looks for this regularity and rewards intentional irregularity (odd values like 5, 14, 22).
- All gaps are 4, 8, 12, 16, 24, 32
- Padding uses only multiples of 8
- Section spacing is identical throughout
- No off-grid values anywhere
Mix in off-grid values (5px, 14px, 22px). Use different section paddings (92px, 68px, 56px instead of 80px everywhere). Break the 4px grid in intentional places.
Radius
weight: 10% · 8 rulesDetects uniform border-radius everywhere. AI loves 8px on everything, or the Tailwind rounded-lg default. Sailop rewards varied radius values for different element types.
- Same radius on buttons, cards, and containers
- rounded-lg on everything
- No sharp corners (0px) anywhere
- Uniform pill shapes
Use different radius values: 4px for buttons, 7px for cards, 1px for containers. Mix sharp and rounded. Avoid one radius value across the entire project.
Shadows
weight: 10% · 9 rulesDetects the identical box-shadow pattern used across AI outputs. Flags the Tailwind shadow-lg default, shadows with no color tint, and uniform shadow depth throughout a page.
- Same shadow on all cards
- Tailwind shadow-lg default values
- No colored shadows (only rgba(0,0,0,x))
- No inset shadows or glow effects
Tint your shadows toward your accent color. Vary the depth: subtle for small elements, deeper for modals. Use inset shadows where appropriate. Not everything needs a shadow.
Layout
weight: 15% · 12 rulesChecks for the symmetric, centered, predictable layouts that AI generates by default. Detects uniform grid columns, always-centered text, and the hero-features-pricing-CTA page formula.
- Everything is centered
- Symmetric 3-column feature grids
- Hero section with centered text and CTA button
- Identical card layouts repeated
Use asymmetric grids (5fr 3fr instead of 1fr 1fr). Left-align body text. Vary your grid ratios across sections. Break the hero-features-pricing formula.
Animations
weight: 15% · 11 rulesDetects ease-in-out on everything, uniform 300ms durations, and the small set of transitions AI agents reach for. Rewards varied timing functions and intentional animation choices.
- ease-in-out on every transition
- 300ms duration everywhere
- transform + opacity as the only transition properties
- No custom cubic-bezier curves
Use custom cubic-bezier curves. Vary durations: 200ms for micro-interactions, 700ms for theme transitions. Use different easing per element type. Consider spring-like curves.
Weight calculations
Dimension weights reflect how much visual impact each area has on the overall “AI look” of a site. Colors and layout have the highest weights because they are the most immediately recognizable AI patterns.
| Dimension | Weight | Rules |
|---|---|---|
| Colors | 20% | 12 |
| Typography | 15% | 10 |
| Spacing | 15% | 11 |
| Radius | 10% | 8 |
| Shadows | 10% | 9 |
| Layout | 15% | 12 |
| Animations | 15% | 11 |
| Total | 100% | 73 |
Within each dimension, severity multipliers apply to individual findings:
| Critical | 4x |
| High | 3x |
| Medium | 2x |
| Low | 1x |
Grade thresholds
The final score maps to a letter grade:
Example breakdown
Here is a real example from scanning a typical AI-generated Next.js landing page:
$ sailop scan ./src
Scanning 31 files...
Slop score: 72/100 (Grade D)
Dimension Score Weight Findings
─────────────────────────────────────────
Colors 14 20% 5 rules
Typography 9 15% 3 rules
Spacing 11 15% 4 rules
Radius 7 10% 2 rules
Shadows 5 10% 2 rules
Layout 13 15% 4 rules
Animations 13 15% 3 rules
─────────────────────────────────────────
Total 72 100% 23 rules
Weighted calculation:
(14*0.20) + (9*0.15) + (11*0.15) + (7*0.10)
+ (5*0.10) + (13*0.15) + (13*0.15) = 72
Top findings:
[critical] COL-006 AI-band hue range (hue 238)
[high] COL-001 Blue-indigo primary (#6366f1)
[high] LAY-001 Centered symmetric hero section
[high] ANI-001 ease-in-out on all transitions
[high] TYP-001 Inter as sole typefaceAfter running sailop fix ./src with the transform engine, the same project scored 16 (Grade A). The transform replaced the blue-indigo palette with a warm burnt-sienna scheme, swapped Inter for a Bitter + Karla pairing, introduced off-grid spacing, and varied the animation timing.
How to improve your score
Whether you use the automatic transform or fix things by hand, here are the highest-impact changes ranked by how many points they typically save:
- Change your primary color hue (saves 8-15 points). Move away from the blue-indigo-violet range (hues 200-290). Pick a warm hue (10-50), a green (100-170), or a magenta (310-350).
- Add a second typeface (saves 5-9 points). Pair a serif display font with a sans-serif body font, or vice versa. The key is having two distinct families, not just weight variations of one.
- Break the spacing grid (saves 4-8 points). Add 3-5 off-grid values to your spacing scale. Use 5, 14, 22 alongside your 8, 16, 24. Vary section padding so it is not identical throughout the page.
- Vary your border-radius (saves 3-6 points). Use different radius values for buttons, cards, and containers. A button does not need the same radius as a card. Add at least one element with sharp corners (0px radius).
- Use custom easing curves (saves 3-7 points). Replace generic
ease-in-outwith specific cubic-bezier values. Use different curves for different element types. - Use asymmetric layouts (saves 3-6 points). Instead of equal-column grids (1fr 1fr 1fr), try unequal splits (5fr 3fr or 2fr 3fr). Left-align body text rather than centering everything.
- Tint your shadows (saves 2-4 points). Add a hint of your accent color to box-shadows instead of using pure black opacity. Vary shadow depth across different element types.
sailop autotune ./src --target 20 (Pro). It iterates automatically until your score drops below the target. Most projects reach Grade A in 2-3 iterations.