How to Get the Best Results with Sailop

1. Understanding the Score

Sailop assigns every scanned file (or project) a slop score from 0 to 100. Lower is better. A score of 0 means no AI-generated patterns were detected. A score of 100 means the output is saturated with the same visual clichés every LLM produces.

Grade thresholds

The 9 scoring dimensions

The total score is a weighted average of nine independent dimensions. Each dimension is scored 0–100 independently, then combined.

Color

Detects AI-typical palettes: the blue-indigo band, pure black/white, and low-contrast pairings that every model defaults to.

Typography

Flags overused typefaces (Inter, Roboto, Poppins, system-ui) and lack of typographic hierarchy or contrast.

Layout

Measures grid symmetry, centered-everything patterns, and identical column widths that scream auto-generated.

Animation

Catches generic fade-up entrances, uniform ease-in-out timing, and lack of staggered or physics-based motion.

Component

Identifies cookie-cutter UI: 3 identical feature cards, backdrop-blur navbars, rounded-full badges, and hero-stats-features stacking.

Structural

Evaluates HTML semantics and DOM structure — divs-for-everything vs. proper use of section, article, figure, and dl.

Spacing

Detects mechanical spacing: perfectly uniform 4px/8px multiples everywhere, identical margins, and no breathing room variation.

Craft

Checks for attention to detail: custom ::selection colors, :focus-visible styles, prefers-reduced-motion support, and CSS custom properties.

Builder

Detects signatures of specific AI tools and templates: v0, Bolt, Lovable, and common boilerplate frameworks.

2. The 5-Step Workflow

This is the standard loop for taking any project from AI-typical to visually unique. Follow it once, then repeat steps 1 and 4 as you add new pages.

sailop scan ./src --format json > baseline.json
sailop scan ./src

sailop generate --seed my-startup-2024

sailop fix ./src

/sailop
> "Refactor this page using the design system above"

sailop scan ./src

sailop hook install --threshold 40

3. Using the /sailop Skill in Claude Code

The /sailop skill is the fastest way to get a Grade A landing page. It loads Sailop context directly into Claude Code, giving the model full knowledge of banned patterns, scoring rules, and procedural generation.

Installation

npx sailop install && sailop setup --global

After setup, the skill is available in any Claude Code session. No additional configuration needed.

How it works

• Type /sailop in Claude Code to activate the skill
• Every invocation uses a different seed (timestamp-based), so you never get the same design twice
• The skill knows all 73+ banned patterns and enforces them automatically
• Works with GSAP, Framer Motion, or plain CSS — it adapts to your stack
• Generates unique color palettes, type pairings, layout structures, and animation systems
• Avoids all patterns in the detection engine — the output is designed to score Grade A

> /sailop
> "Build a pricing page for a developer tool called Nextera.
>  Use a warm palette, asymmetric layout, and clip-reveal animations."

4. Using MCP Tools

Sailop exposes 18 MCP tools that work in Claude Code, Cursor, and any MCP-compatible client. These tools let AI assistants scan, generate, and transform directly within your editor.

Key tools

• sailop_scan_file — Scan a single file and return the slop score + findings
• sailop_get_design_system — Generate a complete design system from a seed
• sailop_design_kit — Get a brand kit with palette, fonts, spacing, and components
• sailop_transform — Rewrite code to remove detected patterns (Pro)

Example prompts

"Scan this project and fix the worst patterns.
 Focus on color and typography first."

"Generate a brand kit for my startup called Nextera.
 Warm tones, serif display font, modular spacing."

All 18 MCP tools

5. Procedural Generation Deep Dive

Everything Sailop generates is deterministic: the same seed always produces the same output. This means your design system is reproducible, version-controllable, and shareable. Change the seed, get an entirely different (but equally coherent) system.

Palette generation

The generator avoids the AI hue band (195–300° on the color wheel — the blue-indigo-violet range that every LLM gravitates toward). It generates palettes in warm earth tones, greens, ambers, and teals. Every palette is validated for WCAG AA contrast compliance at generation time. No manual accessibility audits needed.

Typography

12 display fonts × 10 body fonts = 120 pairings, and none of them are Inter, Roboto, or Poppins. The generator picks serif or slab-serif display faces paired with humanist or geometric sans-serif body faces. Type scales follow a modular ratio (golden, perfect fourth, or major third) rather than arbitrary pixel values.

Layout

Asymmetric grids only: 5fr 3fr, 7fr 4fr, 3fr 2fr — never 1fr 1fr. The system includes 5 hero layout types (split-offset, editorial, overlap, sidebar-hero, full-bleed) and 6 pricing layout variations. Every generated layout breaks the symmetric grid that AI defaults to.

Spacing

Modular spacing scales based on musical ratios: golden ratio (1.618), perfect fourth (1.333), or major third (1.25). This creates natural visual rhythm instead of the mechanical 4px/8px multiples that AI produces. Spacing values are non-uniform and contextual.

Animations

Sailop never generates fade-up. Instead: clip-reveal (clip-path wipes), blur-in (opacity + blur filter), and scale-subtle (0.97 → 1 with spring easing). Timing uses cubic-bezier curves with overshoot, not generic ease-in-out. Stagger offsets are always included for lists and grids.

6. What Sailop Detects (Top 20 Patterns)

These are the 20 most commonly flagged patterns. If your project triggers even half of these, you are almost certainly in Grade D or F territory.

7. Best Practices for Grade A

Follow these rules and your site will score under 20 consistently. Each rule directly targets one or more scoring dimensions.

1. Use 2 typefaces — a serif or slab-serif for display headings, a humanist sans-serif for body text. Never use the same font for both.
2. Pick a hue outside 195–300° — the AI band. Warm earth tones (amber, olive, terra cotta), teals, and deep greens read as intentional. Blue-indigo reads as auto-generated.
3. Never use pure #000 or #FFF — use warm near-blacks (#1c1714) and warm off-whites (#faf8f5). Pure black/white is a dead giveaway.
4. Asymmetric layouts — use 5fr 3fr or 7fr 4fr instead of 1fr 1fr. Symmetry is the default for every AI.
5. Custom easing — replace ease-in-out with cubic-bezier(0.34, 1.56, 0.64, 1). The overshoot gives animations personality.
6. Vary border-radius — don't use the same radius everywhere. 0px for section cards, 4px for buttons, 50% for avatars. Variation signals intentional design.
7. Add micro-interactions — hover: translateY(-2px) + active: scale(0.97). These small details are never generated by AI.
8. Polish the details — add ::selection styling, :focus-visible rings, and prefers-reduced-motion media queries. AI never adds these. The craft dimension rewards them heavily.
9. Use CSS custom properties — 15 minimum. A real design system has tokens for every color, spacing step, and radius. Hardcoded values in every component is an AI pattern.
10. Semantic HTML — use <section>, <article>, <figure>, <dl>. AI wraps everything in divs. Proper semantics improve the structural dimension and accessibility.

8. Future Integrations (Roadmap)

Sailop v1 is the scanner, generator, and transform engine. Future versions expand into adjacent tools to cover the full design-to-deploy pipeline.