[ LOADING ]
Code Quality vs Design Quality
ESLint tells you your code has problems. Sailop tells you your design has problems. They work on completely different dimensions -- and you should run both.
| Dimension | ESLint | Sailop |
|---|---|---|
| Purpose | Code quality and syntax correctness | Visual uniqueness and AI pattern detection |
| What it scans | JavaScript, TypeScript, JSX logic | CSS, HTML, Tailwind, design tokens |
| Catches bugs? | Yes -- unused vars, type errors, bad imports | No -- not a code linter |
| Catches AI slop? | No -- has no concept of visual patterns | Yes -- 73+ rules across 7 visual dimensions |
| Color analysis | None | Detects AI color bands (hue 200-290), pure #fff/#000 |
| Typography | None | Flags Inter/system-ui monoculture, uniform weights |
| Layout detection | None | Catches grid-cols-3 repetition, uniform spacing |
| Border radius | None | Detects rounded-lg everywhere (the AI signature) |
| Animation | None | Flags identical 300ms ease-in-out on everything |
| Fix capability | Auto-fix code style (--fix) | Auto-generate unique design system |
| Output format | Error list with line numbers | Grade A-F + score + visual report |
| CI integration | eslint . --max-warnings 0 | sailop check --threshold B |
| Plugin ecosystem | Thousands of plugins | MCP skill for Claude Code and Cursor |
ESLint is the standard JavaScript/TypeScript linter. It analyzes your code for syntax errors, bad practices, unused variables, inconsistent patterns, and potential bugs. With plugins it extends to React hooks rules, accessibility checks, and import ordering.
Missing semicolons, bad destructuring, invalid JSX
Unused variables, unreachable code, no-console
Strict equality, no eval, no var
Hooks dependencies, key props, exhaustive deps
Consistent import grouping and sorting
jsx-a11y plugin for ARIA and semantic HTML
Sailop scans your frontend code for AI-generated visual patterns. These are the default choices that AI coding assistants produce -- the same palette, the same fonts, the same layout grids. Individually they are fine. Together they create a site that looks like every other AI-generated site.
Blue-indigo-violet AI band, pure white/black, no personality
Inter everywhere, uniform font weights, no typographic hierarchy
Grid-cols-3 on repeat, identical gap-4 spacing
rounded-lg on every element -- the AI fingerprint
Same 300ms ease-in-out on hover, no variety
Overall sameness score across all 7 dimensions
ESLint and Sailop are complementary. ESLint checks that your code is correct. Sailop checks that your design is unique. Run them together in your CI pipeline:
ESLint and Sailop solve different problems. ESLint asks "is this code correct?" Sailop asks "does this design look like AI generated it?" If you already run ESLint (and you should), adding Sailop gives you a second axis of quality that no other tool covers.