sailopdocs
docsscanpricinginstall
Getting Started
  • Overview
  • Getting Started
Reference
  • CLI Reference
  • MCP Tools
  • Scoring System
Links
  • Product
  • Pricing
  • Blog
Start here

Getting Started

Install Sailop, run your first scan, and learn how the tool detects AI-generated visual patterns across your frontend code. Takes about 3 minutes.

On this page
  1. Prerequisites
  2. Installation
  3. Your first scan
  4. Setting up the /sailop skill
  5. Your first project with Sailop
  6. FAQ

Prerequisites

Sailop runs on Node.js and works on macOS, Linux, and Windows. You need:

  • Node.js 18 or later (check with node --version)
  • npm (ships with Node) or pnpm
  • A terminal with shell access
Note
No account is required. Sailop runs entirely on your machine. No data leaves your computer, and no signup is needed for the free tier.

Installation

Three methods, from quickest to most flexible.

Method 1: One command (recommended)

Terminal
npm i -g sailop && sailop setup --global

This installs the CLI globally and writes the MCP configuration so Claude Code and Cursor can discover the Sailop tools automatically.

Method 2: Step by step

1
Install the CLI
npm i -g sailop

Or use pnpm: pnpm add -g sailop

2
Run global setup
sailop setup --global

This writes MCP server configuration to your home directory so editors can find Sailop.

3
Verify installation
sailop --version

You should see the current version number printed.

Method 3: From source

Terminal
git clone https://github.com/Git-gta/sailop.git
cd sailop/cli
npm install
npm link
sailop setup --global
Tip
Building from source gives you access to the latest unreleased features. Good for contributors or those who want to inspect the detection rules.

Your first scan

Navigate to any frontend project directory and scan it:

$ sailop scan ./src

Scanning 24 files...

Slop score: 67/100 (Grade D)
  High — typical AI-generated output

  Colors:      4 rules triggered  (blue-indigo palette detected)
  Radius:      2 rules triggered  (uniform 8px everywhere)
  Spacing:     3 rules triggered  (perfect 4px multiples only)
  Typography:  2 rules triggered  (Inter + system-ui only)
  Shadows:     1 rule triggered   (identical box-shadow pattern)
  Layout:      2 rules triggered  (symmetric grid, centered everything)
  Animations:  1 rule triggered   (ease-in-out on every transition)

  15 findings total across 24 files

Run `sailop fix ./src` to auto-transform (Pro)

The score ranges from 0 (no AI patterns detected) to 100 (extremely AI-typical). Lower is better. A score under 20 earns a Grade A.

Scanning a single file

sailop scan ./src/app/page.tsx

JSON output for CI pipelines

sailop scan ./src --format json

JSON output includes the full findings array, per-dimension scores, and file-level breakdowns. Useful for integrating Sailop into CI/CD pipelines or custom tooling.

Setting up the /sailop skill

The /sailop skill activates inside Claude Code, Cursor, and any MCP-compatible editor. After running sailop setup --global, it is available automatically.

Claude Code

After installation, open Claude Code and type:

/sailop

Claude will load the Sailop skill context, which gives it knowledge of all 73+ detection rules and the ability to call Sailop MCP tools during your conversation. Ask it to scan your project, generate a design system, or fix specific patterns.

Cursor

The setup command writes Cursor-compatible MCP configuration. In Cursor, the Sailop tools appear in the MCP tools panel. You can also mention @sailop in chat to invoke the scanner directly.

Note
See the full MCP Tools guide for detailed setup instructions for each editor and a list of all 8 available tools.

Your first project with Sailop

Here is a typical workflow for using Sailop on an existing project:

1
Scan to get a baseline
sailop scan ./src --format json > baseline.json

Save your initial score so you can track improvement over time.

2
Generate a design system
sailop generate --seed my-project

Sailop creates a unique set of CSS variables: colors, fonts, spacing, radius values, and shadows. The seed ensures reproducible output for your project.

3
Apply the transform (Pro)
sailop fix ./src

The transform engine rewrites your CSS, Tailwind classes, and inline styles to use the generated design system. Your visual output changes, your code stays semantic.

4
Scan again to verify
sailop scan ./src

Compare with your baseline. You should see a significant drop in slop score. A well-transformed project typically scores under 20 (Grade A).

5
Set up a pre-commit hook (Pro)
sailop hook install

Prevents new AI slop from entering your codebase. The hook runs a scan before each commit and blocks if the score exceeds your configured threshold.

FAQ

Does Sailop modify my files during a scan?
No. Scanning is read-only. Only the sailop fix command (Pro) modifies files, and it creates backups by default.
What file types does Sailop support?
CSS, SCSS, Tailwind utility classes, inline styles in JSX/TSX, Vue SFC files, Svelte components, and plain HTML. Sailop parses both file-level stylesheets and component-level styles.
Is my code sent anywhere?
No. Sailop runs entirely on your machine. No code, data, or telemetry is sent to any server. The scanner and transform engine are both local processes.
What is the difference between Free and Pro?
Free gives you unlimited scans, the full 73+ rule engine, the MCP skill, and design system generation. Pro adds the transform engine (sailop fix), autotune (Karpathy-style iterative improvement), and the git pre-commit hook. Pro is a one-time $39 purchase.
Does it work with Tailwind v4?
Yes. Sailop detects Tailwind utility classes regardless of the Tailwind version. It scans the class strings in your markup, not the generated CSS output.
Can I use Sailop in CI/CD?
Yes. Use sailop scan --format json --threshold 40 in your pipeline. The process exits with code 1 if the score exceeds the threshold, which fails the build step.

Next steps

CLI Reference — all 18 commands documented →Scoring System — how the 7 dimensions work →MCP Tools — editor integration guide →