Integration

MCP Tools

Name: Sailop
Author: Sailop

Sailop exposes 8 tools through the Model Context Protocol (MCP). Use them from Claude Code, Cursor, or any MCP-compatible client to scan, generate, and transform directly from your editor.

What is MCP?

The Model Context Protocol (MCP) is an open standard that lets AI assistants call external tools. When you install Sailop and run sailop setup --global, it registers a local MCP server. Editors that support MCP (Claude Code, Cursor, Windsurf, and others) can then discover and call Sailop tools during your conversations.

This means you can ask Claude to “scan this project for AI slop” or “generate a unique design system” and it will call the Sailop tools directly, returning results inline in your chat.

Setup for Claude Code

The automatic setup handles everything:

Terminal

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

This writes the MCP configuration to ~/.claude/claude_desktop_config.json (or the equivalent for your platform). The entry looks like:

claude_desktop_config.json

{
  "mcpServers": {
    "sailop": {
      "command": "sailop",
      "args": ["mcp-server"],
      "env": {}
    }
  }
}

After restarting Claude Code, the Sailop tools appear in the tools panel. You can also activate the skill by typing:

/sailop

The skill loads contextual knowledge about all 73+ detection rules and best practices for unique design systems, in addition to making the 8 MCP tools callable.

Setup for Cursor

Run the same setup command:

Terminal

sailop setup --global --editor cursor

This writes Cursor-compatible MCP configuration. The config location depends on your OS:

macOS: ~/.cursor/mcp.json
Linux: ~/.cursor/mcp.json
Windows: %APPDATA%\Cursor\mcp.json

After restarting Cursor, the Sailop tools appear in the MCP panel. You can invoke them through the chat by mentioning @sailop or by asking the AI to use the scan/fix tools.

Setup for any MCP client

Any editor or tool that supports MCP can use Sailop. You need to configure it to launch the Sailop MCP server as a subprocess. The server command is:

sailop mcp-server

The server communicates over stdin/stdout using the MCP JSON-RPC protocol. Point your client's MCP configuration to this command. A generic config entry:

MCP config

{
  "name": "sailop",
  "command": "sailop",
  "args": ["mcp-server"],
  "transport": "stdio"
}

Note

The MCP server starts on demand and stays running for the duration of your editor session. It does not listen on any network port. All communication happens through local stdio pipes.

Tool reference

Sailop exposes 8 MCP tools. Tools marked Pro require a Pro license.

sailop_scan

Scan a file or directory for AI-generated visual patterns. Returns a score, grade, and detailed findings list. This is the core detection tool.

Parameters

path*	string	File or directory to scan
format	string	Output format: pretty, json (default: json)
threshold	number	Fail threshold for the score

Returns: Object with score (number), grade (string), dimensions (object), findings (array), and filesScanned (number).

Example call

{
  "tool": "sailop_scan",
  "arguments": {
    "path": "./src",
    "format": "json"
  }
}

Example result

{
  "score": 67,
  "grade": "D",
  "filesScanned": 24,
  "dimensions": {
    "colors": { "score": 12, "findings": 4 },
    "typography": { "score": 8, "findings": 2 },
    "spacing": { "score": 10, "findings": 3 },
    "radius": { "score": 7, "findings": 2 },
    "shadows": { "score": 5, "findings": 2 },
    "layout": { "score": 13, "findings": 4 },
    "animations": { "score": 12, "findings": 3 }
  },
  "findings": [
    {
      "rule": "COL-006",
      "severity": "critical",
      "dimension": "colors",
      "message": "AI-band hue range detected (hue 238)",
      "file": "src/app/globals.css",
      "line": 12
    }
  ]
}

sailop_scan_content

Scan a raw string of code without reading from disk. Useful when the editor has unsaved changes or when working with generated snippets.

Parameters

content*	string	The code content to scan
fileType	string	File type hint: css, tsx, html, vue (default: auto-detect)
fileName	string	Virtual file name for reporting

Returns: Same structure as sailop_scan but for a single virtual file.

Example call

{
  "tool": "sailop_scan_content",
  "arguments": {
    "content": ".hero { background: #6366f1; border-radius: 8px; }",
    "fileType": "css",
    "fileName": "snippet.css"
  }
}

Example result

{
  "score": 45,
  "grade": "C",
  "findings": [
    { "rule": "COL-001", "severity": "high", "message": "Blue-indigo primary detected (#6366f1)" },
    { "rule": "RAD-001", "severity": "medium", "message": "Uniform 8px radius" }
  ]
}

sailop_generate

Generate a unique design system as CSS custom properties. Returns a complete set of variables that can be applied to any project.

Parameters

seed	string	Seed for reproducible output
format	string	Output format: css, json, tailwind (default: css)
mode	string	Light or dark mode (default: light)
hue	number	Force a specific base hue (0-360)

Returns: String containing the design system in the requested format.

Example call

{
  "tool": "sailop_generate",
  "arguments": {
    "seed": "my-project",
    "format": "css"
  }
}

Example result

:root {
  --c-bg: #f2ede6;
  --c-bg-raised: #faf7f3;
  --c-fg: #1e1a15;
  --c-accent: #b05530;
  --c-secondary: #2a7568;
  --f-display: 'Bitter', Georgia, serif;
  --f-body: 'Karla', system-ui, sans-serif;
  --r-btn: 3px;
  --r-card: 6px;
  --r-container: 1px;
  /* ... */
}

sailop_fixPro

Transform code to replace AI patterns with a unique design system. Rewrites CSS, Tailwind classes, and inline styles. Returns the modified code.

Parameters

path*	string	File or directory to transform
seed	string	Seed for the design system
dryRun	boolean	Preview changes without writing (default: false)
dimensions	string[]	Only fix these dimensions

Returns: Object with transformedFiles (number), changes (array), and estimatedScoreChange.

Example call

{
  "tool": "sailop_fix",
  "arguments": {
    "path": "./src/app/globals.css",
    "seed": "acme",
    "dryRun": true
  }
}

Example result

{
  "transformedFiles": 1,
  "changes": [
    { "file": "src/app/globals.css", "property": "--c-bg", "from": "#ffffff", "to": "#f2ede6" },
    { "file": "src/app/globals.css", "property": "--c-accent", "from": "#6366f1", "to": "#b05530" },
    { "file": "src/app/globals.css", "property": "border-radius", "from": "8px", "to": "5px" }
  ],
  "estimatedScoreChange": { "before": 67, "after": 22 }
}

sailop_rules

List all detection rules or filter by dimension/severity. Returns structured data about each rule that Sailop checks.

Parameters

dimension	string	Filter by dimension name
severity	string	Filter by severity: low, medium, high, critical

Returns: Array of rule objects with id, dimension, severity, and description.

Example call

{
  "tool": "sailop_rules",
  "arguments": {
    "dimension": "colors",
    "severity": "high"
  }
}

Example result

[
  { "id": "COL-001", "dimension": "colors", "severity": "high", "description": "Blue-indigo primary palette" },
  { "id": "COL-002", "dimension": "colors", "severity": "high", "description": "Blue-violet gradient backgrounds" },
  { "id": "COL-006", "dimension": "colors", "severity": "high", "description": "AI-band hues (200-290 range)" }
]

sailop_score

Quick score check. Returns just the numeric score and grade. Lighter than a full scan when you only need the number.

Parameters

path*

string

File or directory to score

Returns: Object with score (number) and grade (string).

Example call

{
  "tool": "sailop_score",
  "arguments": {
    "path": "./src"
  }
}

Example result

{ "score": 67, "grade": "D" }

sailop_diffPro

Show a before/after diff of what the transform would change. Returns structured change data without modifying files.

Parameters

path*	string	File to diff
seed	string	Seed for the design system

Returns: Array of change objects with file, property, from, and to fields.

Example call

{
  "tool": "sailop_diff",
  "arguments": {
    "path": "./src/app/globals.css",
    "seed": "acme"
  }
}

Example result

{
  "changes": [
    { "property": "--c-bg", "from": "#ffffff", "to": "#f2ede6", "line": 3 },
    { "property": "--c-accent", "from": "#6366f1", "to": "#b05530", "line": 8 },
    { "property": "border-radius", "from": "8px", "to": "5px", "line": 22 }
  ],
  "totalChanges": 14
}

sailop_compare

Compare two scan results or snapshots. Shows score delta, dimension-level changes, and which rules improved or regressed.

Parameters

before*	string	Path to before snapshot (JSON file or directory)
after*	string	Path to after snapshot (JSON file or directory)

Returns: Object with score delta, per-dimension changes, improved rules, and regressed rules.

Example call

{
  "tool": "sailop_compare",
  "arguments": {
    "before": "./baseline.json",
    "after": "./src"
  }
}

Example result

{
  "before": { "score": 67, "grade": "D" },
  "after": { "score": 22, "grade": "A" },
  "delta": -45,
  "improved": ["COL-001", "COL-006", "TYP-001", "SPC-003"],
  "regressed": []
}

Example workflows

Here are some natural language prompts you can give to Claude Code or Cursor once Sailop is set up:

“Scan this project for AI slop and show me the worst offenders.”

Uses: sailop_scan

“Generate a unique design system with a warm earthy palette for this project.”

Uses: sailop_generate

“Show me what would change if we ran the transform on globals.css.”

Uses: sailop_diff

“What is our current slop score? How does it compare to last week?”

Uses: sailop_score, sailop_compare

“Fix the colors and typography in this file but leave the layout alone.”

Uses: sailop_fix

“List all critical-severity rules that are currently failing.”

Uses: sailop_rules, sailop_scan

Tip

The /sailop skill in Claude Code preloads context about all detection rules and best practices. This means Claude can give you specific advice about your findings, not just raw scan data. Always activate the skill before asking Sailop-related questions.

← Scoring System CLI Reference →

Integration

MCP Tools

Sailop exposes 8 tools through the Model Context Protocol (MCP). Use them from Claude Code, Cursor, or any MCP-compatible client to scan, generate, and transform directly from your editor.

What is MCP?

This means you can ask Claude to “scan this project for AI slop” or “generate a unique design system” and it will call the Sailop tools directly, returning results inline in your chat.

Setup for Claude Code

The automatic setup handles everything:

Terminal

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

This writes the MCP configuration to ~/.claude/claude_desktop_config.json (or the equivalent for your platform). The entry looks like:

claude_desktop_config.json

{
  "mcpServers": {
    "sailop": {
      "command": "sailop",
      "args": ["mcp-server"],
      "env": {}
    }
  }
}

After restarting Claude Code, the Sailop tools appear in the tools panel. You can also activate the skill by typing:

/sailop

The skill loads contextual knowledge about all 73+ detection rules and best practices for unique design systems, in addition to making the 8 MCP tools callable.

Setup for Cursor

Run the same setup command:

Terminal

sailop setup --global --editor cursor

This writes Cursor-compatible MCP configuration. The config location depends on your OS:

macOS: ~/.cursor/mcp.json
Linux: ~/.cursor/mcp.json
Windows: %APPDATA%\Cursor\mcp.json

After restarting Cursor, the Sailop tools appear in the MCP panel. You can invoke them through the chat by mentioning @sailop or by asking the AI to use the scan/fix tools.

Setup for any MCP client

Any editor or tool that supports MCP can use Sailop. You need to configure it to launch the Sailop MCP server as a subprocess. The server command is:

sailop mcp-server

The server communicates over stdin/stdout using the MCP JSON-RPC protocol. Point your client's MCP configuration to this command. A generic config entry:

MCP config

{
  "name": "sailop",
  "command": "sailop",
  "args": ["mcp-server"],
  "transport": "stdio"
}

Note

The MCP server starts on demand and stays running for the duration of your editor session. It does not listen on any network port. All communication happens through local stdio pipes.

Tool reference

Sailop exposes 8 MCP tools. Tools marked Pro require a Pro license.

sailop_scan

Scan a file or directory for AI-generated visual patterns. Returns a score, grade, and detailed findings list. This is the core detection tool.

Parameters

path*	string	File or directory to scan
format	string	Output format: pretty, json (default: json)
threshold	number	Fail threshold for the score

Returns: Object with score (number), grade (string), dimensions (object), findings (array), and filesScanned (number).

Example call

{
  "tool": "sailop_scan",
  "arguments": {
    "path": "./src",
    "format": "json"
  }
}

Example result

{
  "score": 67,
  "grade": "D",
  "filesScanned": 24,
  "dimensions": {
    "colors": { "score": 12, "findings": 4 },
    "typography": { "score": 8, "findings": 2 },
    "spacing": { "score": 10, "findings": 3 },
    "radius": { "score": 7, "findings": 2 },
    "shadows": { "score": 5, "findings": 2 },
    "layout": { "score": 13, "findings": 4 },
    "animations": { "score": 12, "findings": 3 }
  },
  "findings": [
    {
      "rule": "COL-006",
      "severity": "critical",
      "dimension": "colors",
      "message": "AI-band hue range detected (hue 238)",
      "file": "src/app/globals.css",
      "line": 12
    }
  ]
}

sailop_scan_content

Scan a raw string of code without reading from disk. Useful when the editor has unsaved changes or when working with generated snippets.

Parameters

content*	string	The code content to scan
fileType	string	File type hint: css, tsx, html, vue (default: auto-detect)
fileName	string	Virtual file name for reporting

Returns: Same structure as sailop_scan but for a single virtual file.

Example call

{
  "tool": "sailop_scan_content",
  "arguments": {
    "content": ".hero { background: #6366f1; border-radius: 8px; }",
    "fileType": "css",
    "fileName": "snippet.css"
  }
}

Example result

{
  "score": 45,
  "grade": "C",
  "findings": [
    { "rule": "COL-001", "severity": "high", "message": "Blue-indigo primary detected (#6366f1)" },
    { "rule": "RAD-001", "severity": "medium", "message": "Uniform 8px radius" }
  ]
}

sailop_generate

Generate a unique design system as CSS custom properties. Returns a complete set of variables that can be applied to any project.

Parameters

seed	string	Seed for reproducible output
format	string	Output format: css, json, tailwind (default: css)
mode	string	Light or dark mode (default: light)
hue	number	Force a specific base hue (0-360)

Returns: String containing the design system in the requested format.

Example call

{
  "tool": "sailop_generate",
  "arguments": {
    "seed": "my-project",
    "format": "css"
  }
}

Example result

:root {
  --c-bg: #f2ede6;
  --c-bg-raised: #faf7f3;
  --c-fg: #1e1a15;
  --c-accent: #b05530;
  --c-secondary: #2a7568;
  --f-display: 'Bitter', Georgia, serif;
  --f-body: 'Karla', system-ui, sans-serif;
  --r-btn: 3px;
  --r-card: 6px;
  --r-container: 1px;
  /* ... */
}

sailop_fixPro

Transform code to replace AI patterns with a unique design system. Rewrites CSS, Tailwind classes, and inline styles. Returns the modified code.

Parameters

path*	string	File or directory to transform
seed	string	Seed for the design system
dryRun	boolean	Preview changes without writing (default: false)
dimensions	string[]	Only fix these dimensions

Returns: Object with transformedFiles (number), changes (array), and estimatedScoreChange.

Example call

{
  "tool": "sailop_fix",
  "arguments": {
    "path": "./src/app/globals.css",
    "seed": "acme",
    "dryRun": true
  }
}

Example result

{
  "transformedFiles": 1,
  "changes": [
    { "file": "src/app/globals.css", "property": "--c-bg", "from": "#ffffff", "to": "#f2ede6" },
    { "file": "src/app/globals.css", "property": "--c-accent", "from": "#6366f1", "to": "#b05530" },
    { "file": "src/app/globals.css", "property": "border-radius", "from": "8px", "to": "5px" }
  ],
  "estimatedScoreChange": { "before": 67, "after": 22 }
}

sailop_rules

List all detection rules or filter by dimension/severity. Returns structured data about each rule that Sailop checks.

Parameters

dimension	string	Filter by dimension name
severity	string	Filter by severity: low, medium, high, critical

Returns: Array of rule objects with id, dimension, severity, and description.

Example call

{
  "tool": "sailop_rules",
  "arguments": {
    "dimension": "colors",
    "severity": "high"
  }
}

Example result

[
  { "id": "COL-001", "dimension": "colors", "severity": "high", "description": "Blue-indigo primary palette" },
  { "id": "COL-002", "dimension": "colors", "severity": "high", "description": "Blue-violet gradient backgrounds" },
  { "id": "COL-006", "dimension": "colors", "severity": "high", "description": "AI-band hues (200-290 range)" }
]

sailop_score

Quick score check. Returns just the numeric score and grade. Lighter than a full scan when you only need the number.

Parameters

path*

string

File or directory to score

Returns: Object with score (number) and grade (string).

Example call

{
  "tool": "sailop_score",
  "arguments": {
    "path": "./src"
  }
}

Example result

{ "score": 67, "grade": "D" }

sailop_diffPro

Show a before/after diff of what the transform would change. Returns structured change data without modifying files.

Parameters

path*	string	File to diff
seed	string	Seed for the design system

Returns: Array of change objects with file, property, from, and to fields.

Example call

{
  "tool": "sailop_diff",
  "arguments": {
    "path": "./src/app/globals.css",
    "seed": "acme"
  }
}

Example result

{
  "changes": [
    { "property": "--c-bg", "from": "#ffffff", "to": "#f2ede6", "line": 3 },
    { "property": "--c-accent", "from": "#6366f1", "to": "#b05530", "line": 8 },
    { "property": "border-radius", "from": "8px", "to": "5px", "line": 22 }
  ],
  "totalChanges": 14
}

sailop_compare

Compare two scan results or snapshots. Shows score delta, dimension-level changes, and which rules improved or regressed.

Parameters

before*	string	Path to before snapshot (JSON file or directory)
after*	string	Path to after snapshot (JSON file or directory)

Returns: Object with score delta, per-dimension changes, improved rules, and regressed rules.

Example call

{
  "tool": "sailop_compare",
  "arguments": {
    "before": "./baseline.json",
    "after": "./src"
  }
}

Example result

{
  "before": { "score": 67, "grade": "D" },
  "after": { "score": 22, "grade": "A" },
  "delta": -45,
  "improved": ["COL-001", "COL-006", "TYP-001", "SPC-003"],
  "regressed": []
}

Example workflows

Here are some natural language prompts you can give to Claude Code or Cursor once Sailop is set up:

“Scan this project for AI slop and show me the worst offenders.”

Uses: sailop_scan

“Generate a unique design system with a warm earthy palette for this project.”

Uses: sailop_generate

“Show me what would change if we ran the transform on globals.css.”

Uses: sailop_diff

“What is our current slop score? How does it compare to last week?”

Uses: sailop_score, sailop_compare

“Fix the colors and typography in this file but leave the layout alone.”

Uses: sailop_fix

“List all critical-severity rules that are currently failing.”

Uses: sailop_rules, sailop_scan

Tip

← Scoring System CLI Reference →