Sailop + Claude Code

Name: Sailop
Author: Sailop

The tightest integration Sailop offers. Install the CLI, run the setup, and Claude Code gets native access to all Sailop tools through MCP. Scan, fix, and generate — all from the same terminal session where you write code.

Step 1: Install the CLI

Sailop requires Node.js 18 or later. Install globally so it is available in every project.

npx sailop install

Or from source: git clone https://github.com/Git-gta/sailop.git && cd sailop/cli && npm i && npm link

Step 2: Setup the skill and MCP server

The setup command does three things: installs the /sailop slash command as a Claude Code skill, registers the MCP server so Claude Code can call Sailop tools, and creates a default sailop.config.ts in your home directory.

sailop setup --global

What this creates

~/.claude/commands/sailop.mdSlash command skill that Claude Code loads when you type /sailop

~/.claude/claude_desktop_config.jsonMCP server registration so Claude Code can call Sailop tools directly

~/sailop.config.tsDefault configuration with recommended presets (you can override per-project)

Step 3: MCP tools available to Claude Code

Once setup is complete, Claude Code can call these tools at any point during a conversation. You do not need to invoke them manually — Claude will use them when relevant.

sailop_scan(path, preset?, format?)

Scan a file or directory for AI-generated visual patterns. Returns a slop score (0-100), grade, and detailed findings across 7 dimensions.

sailop_fix(path, findings, strategy?)

Apply automatic fixes to detected AI patterns. Rewrites code to use unique design tokens while preserving functionality.

sailop_generate(seed?, avoidHues?, preferSerif?)

Generate a complete design system (palette, typography, spacing, radii) that avoids all detected AI patterns.

sailop_report(format, compare?)

Produce a detailed report of scan results in markdown, JSON, or terminal format. Includes per-file breakdowns and trend data.

sailop_check(path, threshold?, strict?)

CI-mode scan that returns exit code 0 (pass) or 1 (fail) based on a configurable threshold. Used in pre-commit hooks and pipelines.

sailop_compare(baseline, current)

Compare two scans to show improvement or regression. Useful for tracking progress across commits.

Example workflow: building a landing page

Here is a typical session where you build a page with Claude Code, then use Sailop to make it unique.

Start a new project

You: "Build me a SaaS landing page for a developer tool"

Claude Code generates the initial page with components, styling, and layout.

At this point, the page likely scores 60-80 on the slop scale because Claude (like all LLMs) defaults to common patterns.

Scan for AI slop

You: "/sailop" or "Scan this project for AI slop"

Sailop MCP tools activate. Claude Code calls sailop_scan on your source files and presents the report: score, grade, and line-by-line findings.

The skill knows to scan all relevant files (TSX, CSS, HTML) and aggregate the results.

Review findings

Claude shows: "Score: 72/100 (Grade: D). 14 findings across 7 dimensions. Top issues: blue-to-indigo gradient (color), Inter font (typography), three-column feature grid (layout)."

You see exactly which parts of your code match AI-generated patterns and why.

Each finding includes the file, line number, severity, and the specific rule that was triggered.

Generate a unique design system

You: "Generate a design system that fixes these issues"

Claude Code calls sailop_generate and receives a complete design system: CSS custom properties, font pairings, palette, spacing scale, border radii. It then applies them to your project.

The generated system is procedurally unique — it avoids the AI hue band (200-290), uses off-grid spacing, and pairs non-default fonts.

Re-scan and verify

You: "Scan again and compare with the previous result"

Claude Code calls sailop_compare with the baseline and current scans. Shows the score dropping from 72 to 15.

The before/after comparison makes it clear which changes had the most impact.

Tips for best results

Scan early, scan oftenRun /sailop after the initial generation, not at the end. It is easier to course-correct early than to redesign a finished page.

Use the strict preset for marketing pagesMarketing pages (landing, pricing, about) benefit from the strict preset. Internal tools can use the default preset.

Let Claude apply the fixesAfter scanning, ask Claude to apply the Sailop recommendations. It will call sailop_fix and sailop_generate to rewrite your styles.

Commit before and afterCreate a commit before running Sailop so you can diff the changes. The before/after makes it easy to see what Sailop changed and why.

Combine with the /sailop skillThe slash command bundles scan + generate + fix into one step. Type /sailop in Claude Code for the fastest workflow.

Add a sailop.config.ts per projectOverride the global config with project-specific rules. A SaaS project might want stricter color rules; a dashboard might relax layout rules.

Track your score over timeUse sailop_compare to track how your slop score changes across commits. Aim for under 20 on marketing pages, under 30 on internal tools.

Quick reference

# Install + setup (one time)

npx sailop install && sailop setup --global

# In Claude Code

/sailop

# Or ask Claude naturally

"Scan this project for AI slop and fix the issues"

# CLI directly

sailop scan src/ --preset=strict

Ready to break the pattern?

Install Sailop, open Claude Code, and type /sailop. That is it.

Install Sailop See Cursor setup

[ LOADING ]