Recipes

Workflows

Name: Sailop
Author: Sailop

Real-world recipes for every situation. Each workflow walks you through a specific problem, the commands to solve it, and the output you should expect.

1. “I just built a landing page with AI and it looks generic”

Diagnose, fix, and verify

You prompted Claude or ChatGPT to build a hero section and the result screams AI: blue-indigo gradients, rounded-xl everywhere, perfect symmetry. Three commands turn it into something that looks hand-crafted.

Step 1 — See what's wrong

sailop scan ./src --format dashboard

Expected output

Dashboard: http://localhost:3811

  Slop score: 72/100 (Grade D)
  ──────────────────────────────
  Colors       ████████░░  78   blue-indigo palette, 3 rules
  Radius       ██████░░░░  55   uniform rounded-xl
  Spacing      ███████░░░  68   perfect 4px grid only
  Typography   █████░░░░░  45   Inter + system-ui
  Shadows      ████░░░░░░  40   identical box-shadow
  Layout       ████████░░  75   symmetric centered grid
  Animations   ███░░░░░░░  30   ease-in-out on everything

Step 2 — Fix it (Pro)

sailop transform ./src --seed 42

Expected output

Transforming 12 files with seed 42...

  hero.tsx         4 patterns replaced
  navbar.tsx       2 patterns replaced
  features.tsx     5 patterns replaced
  footer.tsx       3 patterns replaced

  14 total transformations applied
  Backup saved to .sailop/backup-1711234567/

Step 3 — Verify the fix

sailop scan ./src

Expected output

Slop score: 18/100 (Grade A)
  Low — looks hand-crafted

  15 findings resolved, 2 minor findings remaining

Tip

The --seed flag makes transforms reproducible. Use the same seed across your team so everyone gets consistent output.

2. “I want to build a new site from scratch without AI slop”

Start clean with a unique design system

Instead of fixing slop after the fact, prevent it from the start. Sailop generates a unique design system seed that AI tools will use as a foundation, producing output that never looks like default AI.

Option A: Use the /sailop skill directly in Claude Code. It loads all 73+ detection rules into context so Claude avoids AI-typical patterns from the first line of code.

Option B: Use the CLI to scaffold a config and design system.

Initialize your project

sailop init

Expected output

Created sailop.config.ts
Created sailop.css

Your design system is ready:
  - 12 unique color tokens
  - 4 radius values (non-uniform)
  - 5 spacing scale steps
  - 3 font stacks
  - 4 shadow definitions

Import sailop.css in your layout to use the tokens.

Build your site using the generated tokens. Then scan periodically to keep the score low:

Periodic check

sailop scan ./src
# Target: Grade B (under 30) or better

Note

The /sailop skill works in Claude Code, Cursor, and any MCP-compatible editor. See the MCP Tools guide for setup.

3. “I want to scan my entire project in CI”

Fail the build if AI slop creeps in

Add Sailop to your CI pipeline so every push gets scanned. If any file scores above your threshold, the build fails. No more AI-generated patterns sneaking into production.

Quick test locally

sailop ci ./src --threshold 40
# Exit code 1 if any file scores above 40

Here is a complete GitHub Actions workflow you can drop into your repo:

.github/workflows/sailop.yml

name: Sailop Scan

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  slop-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install Sailop
        run: npx sailop install

      - name: Scan for AI patterns
        run: sailop ci ./src --threshold 40 --format json

      - name: Upload report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: sailop-report
          path: sailop-report.json

Expected output

Scanning 87 files...

  Overall score: 24/100 (Grade B)
  Threshold: 40 — PASSED

  0 files above threshold
  Exit code: 0

Tip

Use --threshold 30 for stricter checks on design-heavy repos, or --threshold 50 for backend-heavy projects where only a few UI files matter.

4. “I want to generate a complete brand from scratch”

One command, full brand identity

Sailop generates a unique brand package from a name and seed. You get an SVG logo, icon, favicon, a brand guidelines document, and CSS variables ready to import. Every seed produces a different visual identity.

Generate the brand

sailop brand "MyStartup" --seed 1234

Expected output

Generating brand for "MyStartup" (seed: 1234)...

  Created: brand/logo.svg        (wordmark, 3 variants)
  Created: brand/icon.svg        (symbol, 48x48)
  Created: brand/favicon.svg     (16x16 optimized)
  Created: brand/brand.md        (guidelines + usage rules)
  Created: brand/variables.css   (color tokens, fonts, spacing)

  5 files written to ./brand/
  Seed 1234 locked — rerun to get identical output.

Try different seeds to explore variations. Each seed deterministically produces a completely different color palette, logo geometry, and typographic pairing.

Explore variations

sailop brand "MyStartup" --seed 1235
sailop brand "MyStartup" --seed 1236
sailop brand "MyStartup" --seed 1237
# Compare the outputs and pick your favorite

Note

Brand generation is included in the free tier. The generated variables.css integrates directly with Sailop’s design system tokens.

5. “I want unique mockups for my marketing site”

Generate browser, terminal, and phone mockups

Need product screenshots for your landing page but your app is not built yet? Sailop generates realistic device mockups with your content inside. Six types, six variants each, so you get 36+ unique combinations.

Generate mockups

sailop mockup browser --seed 42 --title "Dashboard"
sailop mockup terminal --seed 42 --title "sailop scan"
sailop mockup phone --seed 42

Expected output

Generated: mockups/browser-42-dashboard.svg
Generated: mockups/terminal-42-sailop-scan.svg
Generated: mockups/phone-42.svg

3 mockups written to ./mockups/

Available mockup types:

browser — Chrome-style window frame with address bar
terminal — Dark terminal with realistic prompt and output
phone — Mobile device frame with status bar
tablet — Tablet frame in landscape or portrait
code — VS Code-style editor with syntax highlighting
dashboard — Analytics-style dashboard with charts

Each type has 6 visual variants (different color schemes, layouts, and details). Change the seed to cycle through them: 6 types x 6 variants = 36+ unique mockups.

6. “I want to protect my repo from AI slop commits”

Install a pre-commit hook that blocks slop

One command installs a git pre-commit hook that scans every changed file before it is committed. If any file scores above 50, the commit is blocked with a clear explanation of what triggered the detection.

Install the hook

sailop setup --hooks

Expected output

Installed pre-commit hook at .git/hooks/pre-commit
Threshold: 50 (configurable in sailop.config.ts)

Every commit will now scan changed files.
Commits with score > 50 will be blocked.

Now when you try to commit a file with too much AI slop:

What a blocked commit looks like

$ git commit -m "add hero section"

sailop: scanning 2 changed files...

  src/hero.tsx — Score: 68/100 (Grade D)
    - blue-indigo gradient detected (color)
    - uniform rounded-xl on all elements (radius)
    - symmetric centered layout (layout)

  BLOCKED: 1 file above threshold (50)
  Run `sailop transform src/hero.tsx` to fix, then commit again.

Tip

Adjust the threshold in sailop.config.ts to match your team’s tolerance. Start at 50, tighten to 30 as your codebase improves.

7. “I’m using Claude Code / Cursor and want live scanning”

MCP-powered scanning inside your editor

After the one-time global setup, Sailop tools are available directly in your AI editor. Ask Claude or Cursor to scan files, fix patterns, or generate design tokens without leaving your conversation.

One-time setup

sailop setup --global

This writes MCP server configuration so your editor discovers Sailop automatically. Then, inside your editor:

Scan a file: “Scan this file for AI patterns”
Claude/Cursor calls sailop_scan_file tool

Fix patterns: “Fix the color patterns in this file”
Uses sailop_transform tool

Generate tokens: “Generate a unique color palette for this project”
Uses sailop_generate tool

Note

All 8 MCP tools are documented in the MCP Tools guide. The tools work with any MCP-compatible editor, not just Claude Code and Cursor.

8. “I need to fix a specific dimension only”

Target individual dimensions for surgical fixes

Sometimes you only want to fix colors and typography but leave layout and spacing alone. The --dimensions flag lets you target exactly the dimensions that matter, leaving everything else untouched.

Fix only color and typography

sailop transform ./src/hero.tsx --dimensions color,typography

Expected output

Transforming src/hero.tsx (dimensions: color, typography)...

  Colors:
    - #3b82f6 → #d4764e (warm terracotta)
    - #6366f1 → #8b6f4e (muted bronze)
    - linear-gradient(blue, indigo) → linear-gradient(#c4856a, #a67c5b)

  Typography:
    - font-family: Inter → font-family: 'DM Sans'
    - system-ui fallback preserved

  2 dimensions transformed, 5 others skipped
  Backup: .sailop/backup-1711234567/hero.tsx

Available dimensions you can target:

color — Palettes, gradients, backgrounds, text colors
typography — Font families, weights, sizes, line heights
radius — Border radius values
spacing — Margins, padding, gaps
shadows — Box shadows, drop shadows
layout — Grid patterns, flex alignment, symmetry
animations — Transitions, keyframes, easing functions

Tip

Combine multiple dimensions with commas: --dimensions color,radius,shadows. Run sailop scan first to see which dimensions score highest.

9. “I want to iterate until the score is perfect”

Karpathy-style iterative improvement

Autotune runs a loop of scan, fix, rescan until your target score is reached or the iteration limit is hit. It is the fastest way to get a codebase from Grade D to Grade A without manual intervention.

Run autotune

sailop autotune ./src --target 15 --max-iter 8

Expected output

Autotune: target 15, max iterations 8

  Iteration 1: score 67 → 38  (-29)
  Iteration 2: score 38 → 24  (-14)
  Iteration 3: score 24 → 17  (-7)
  Iteration 4: score 17 → 14  (-3)

  Target reached in 4 iterations
  Final score: 14/100 (Grade A)

  Backup: .sailop/autotune-backup-1711234567/

Each iteration applies different strategies. The first pass handles obvious patterns (blue-indigo colors, uniform radius). Later passes tackle subtler signals (spacing uniformity, easing curves, shadow patterns).

Warning

Autotune modifies files in place. It creates a full backup before the first iteration, but you should commit or stash your changes before running it. Use --dry-run to preview what would change without writing files.

10. “I want to compare before and after”

Preview, compare, and audit your changes

Three commands for different levels of detail: diff shows a quick preview of what would change, compare shows a side-by-side after transforming, and audit generates a full markdown report for your team.

Preview changes without applying

sailop diff ./src/hero.tsx

Expected output

--- src/hero.tsx (current)
+++ src/hero.tsx (after transform)

  - bg-gradient-to-r from-blue-500 to-indigo-600
  + bg-gradient-to-r from-amber-600 to-rose-500

  - rounded-xl shadow-lg
  + rounded-sm shadow-[2px_4px_12px_rgba(0,0,0,0.08)]

  - font-family: Inter, system-ui
  + font-family: 'DM Sans', 'Satoshi', sans-serif

  6 changes in 1 file (not applied)

Side-by-side comparison after transform

sailop compare ./src/hero.tsx

Expected output

Comparison for src/hero.tsx:

  Before          After           Delta
  ──────          ─────           ─────
  Score: 68       Score: 16       -52
  Grade: D        Grade: A        +3 levels
  Colors: 78      Colors: 12      -66
  Radius: 55      Radius: 8       -47
  Layout: 75      Layout: 20      -55

Full project audit

sailop audit ./src

Expected output

Audit report written to sailop-audit.md

  24 files scanned
  14 findings across 7 dimensions
  3 files above threshold
  Recommended actions included

  Open sailop-audit.md for the full report.

Tip

The audit report is great for sharing with your team or including in pull request descriptions. It renders cleanly on GitHub and includes actionable recommendations for each finding.

Next steps

CLI Reference — all 18 commands documented →Scoring System — how the 7 dimensions work →MCP Tools — editor integration guide →Getting Started — installation and first scan →

Recipes

Workflows

Real-world recipes for every situation. Each workflow walks you through a specific problem, the commands to solve it, and the output you should expect.

1. “I just built a landing page with AI and it looks generic”

Diagnose, fix, and verify

Step 1 — See what's wrong

sailop scan ./src --format dashboard

Expected output

Dashboard: http://localhost:3811

  Slop score: 72/100 (Grade D)
  ──────────────────────────────
  Colors       ████████░░  78   blue-indigo palette, 3 rules
  Radius       ██████░░░░  55   uniform rounded-xl
  Spacing      ███████░░░  68   perfect 4px grid only
  Typography   █████░░░░░  45   Inter + system-ui
  Shadows      ████░░░░░░  40   identical box-shadow
  Layout       ████████░░  75   symmetric centered grid
  Animations   ███░░░░░░░  30   ease-in-out on everything

Step 2 — Fix it (Pro)

sailop transform ./src --seed 42

Expected output

Transforming 12 files with seed 42...

  hero.tsx         4 patterns replaced
  navbar.tsx       2 patterns replaced
  features.tsx     5 patterns replaced
  footer.tsx       3 patterns replaced

  14 total transformations applied
  Backup saved to .sailop/backup-1711234567/

Step 3 — Verify the fix

sailop scan ./src

Expected output

Slop score: 18/100 (Grade A)
  Low — looks hand-crafted

  15 findings resolved, 2 minor findings remaining

Tip

The --seed flag makes transforms reproducible. Use the same seed across your team so everyone gets consistent output.

2. “I want to build a new site from scratch without AI slop”

Start clean with a unique design system

Option A: Use the /sailop skill directly in Claude Code. It loads all 73+ detection rules into context so Claude avoids AI-typical patterns from the first line of code.

Option B: Use the CLI to scaffold a config and design system.

Initialize your project

sailop init

Expected output

Created sailop.config.ts
Created sailop.css

Your design system is ready:
  - 12 unique color tokens
  - 4 radius values (non-uniform)
  - 5 spacing scale steps
  - 3 font stacks
  - 4 shadow definitions

Import sailop.css in your layout to use the tokens.

Build your site using the generated tokens. Then scan periodically to keep the score low:

Periodic check

sailop scan ./src
# Target: Grade B (under 30) or better

Note

The /sailop skill works in Claude Code, Cursor, and any MCP-compatible editor. See the MCP Tools guide for setup.

3. “I want to scan my entire project in CI”

Fail the build if AI slop creeps in

Add Sailop to your CI pipeline so every push gets scanned. If any file scores above your threshold, the build fails. No more AI-generated patterns sneaking into production.

Quick test locally

sailop ci ./src --threshold 40
# Exit code 1 if any file scores above 40

Here is a complete GitHub Actions workflow you can drop into your repo:

.github/workflows/sailop.yml

name: Sailop Scan

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  slop-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install Sailop
        run: npx sailop install

      - name: Scan for AI patterns
        run: sailop ci ./src --threshold 40 --format json

      - name: Upload report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: sailop-report
          path: sailop-report.json

Expected output

Scanning 87 files...

  Overall score: 24/100 (Grade B)
  Threshold: 40 — PASSED

  0 files above threshold
  Exit code: 0

Tip

Use --threshold 30 for stricter checks on design-heavy repos, or --threshold 50 for backend-heavy projects where only a few UI files matter.

4. “I want to generate a complete brand from scratch”

One command, full brand identity

Generate the brand

sailop brand "MyStartup" --seed 1234

Expected output

Generating brand for "MyStartup" (seed: 1234)...

  Created: brand/logo.svg        (wordmark, 3 variants)
  Created: brand/icon.svg        (symbol, 48x48)
  Created: brand/favicon.svg     (16x16 optimized)
  Created: brand/brand.md        (guidelines + usage rules)
  Created: brand/variables.css   (color tokens, fonts, spacing)

  5 files written to ./brand/
  Seed 1234 locked — rerun to get identical output.

Try different seeds to explore variations. Each seed deterministically produces a completely different color palette, logo geometry, and typographic pairing.

Explore variations

sailop brand "MyStartup" --seed 1235
sailop brand "MyStartup" --seed 1236
sailop brand "MyStartup" --seed 1237
# Compare the outputs and pick your favorite

Note

Brand generation is included in the free tier. The generated variables.css integrates directly with Sailop’s design system tokens.

5. “I want unique mockups for my marketing site”

Generate browser, terminal, and phone mockups

Generate mockups

sailop mockup browser --seed 42 --title "Dashboard"
sailop mockup terminal --seed 42 --title "sailop scan"
sailop mockup phone --seed 42

Expected output

Generated: mockups/browser-42-dashboard.svg
Generated: mockups/terminal-42-sailop-scan.svg
Generated: mockups/phone-42.svg

3 mockups written to ./mockups/

Available mockup types:

browser — Chrome-style window frame with address bar
terminal — Dark terminal with realistic prompt and output
phone — Mobile device frame with status bar
tablet — Tablet frame in landscape or portrait
code — VS Code-style editor with syntax highlighting
dashboard — Analytics-style dashboard with charts

Each type has 6 visual variants (different color schemes, layouts, and details). Change the seed to cycle through them: 6 types x 6 variants = 36+ unique mockups.

6. “I want to protect my repo from AI slop commits”

Install a pre-commit hook that blocks slop

Install the hook

sailop setup --hooks

Expected output

Installed pre-commit hook at .git/hooks/pre-commit
Threshold: 50 (configurable in sailop.config.ts)

Every commit will now scan changed files.
Commits with score > 50 will be blocked.

Now when you try to commit a file with too much AI slop:

What a blocked commit looks like

$ git commit -m "add hero section"

sailop: scanning 2 changed files...

  src/hero.tsx — Score: 68/100 (Grade D)
    - blue-indigo gradient detected (color)
    - uniform rounded-xl on all elements (radius)
    - symmetric centered layout (layout)

  BLOCKED: 1 file above threshold (50)
  Run `sailop transform src/hero.tsx` to fix, then commit again.

Tip

Adjust the threshold in sailop.config.ts to match your team’s tolerance. Start at 50, tighten to 30 as your codebase improves.

7. “I’m using Claude Code / Cursor and want live scanning”

MCP-powered scanning inside your editor

After the one-time global setup, Sailop tools are available directly in your AI editor. Ask Claude or Cursor to scan files, fix patterns, or generate design tokens without leaving your conversation.

One-time setup

sailop setup --global

This writes MCP server configuration so your editor discovers Sailop automatically. Then, inside your editor:

Scan a file: “Scan this file for AI patterns”
Claude/Cursor calls sailop_scan_file tool

Fix patterns: “Fix the color patterns in this file”
Uses sailop_transform tool

Generate tokens: “Generate a unique color palette for this project”
Uses sailop_generate tool

Note

All 8 MCP tools are documented in the MCP Tools guide. The tools work with any MCP-compatible editor, not just Claude Code and Cursor.

8. “I need to fix a specific dimension only”

Target individual dimensions for surgical fixes

Sometimes you only want to fix colors and typography but leave layout and spacing alone. The --dimensions flag lets you target exactly the dimensions that matter, leaving everything else untouched.

Fix only color and typography

sailop transform ./src/hero.tsx --dimensions color,typography

Expected output

Transforming src/hero.tsx (dimensions: color, typography)...

  Colors:
    - #3b82f6 → #d4764e (warm terracotta)
    - #6366f1 → #8b6f4e (muted bronze)
    - linear-gradient(blue, indigo) → linear-gradient(#c4856a, #a67c5b)

  Typography:
    - font-family: Inter → font-family: 'DM Sans'
    - system-ui fallback preserved

  2 dimensions transformed, 5 others skipped
  Backup: .sailop/backup-1711234567/hero.tsx

Available dimensions you can target:

color — Palettes, gradients, backgrounds, text colors
typography — Font families, weights, sizes, line heights
radius — Border radius values
spacing — Margins, padding, gaps
shadows — Box shadows, drop shadows
layout — Grid patterns, flex alignment, symmetry
animations — Transitions, keyframes, easing functions

Tip

Combine multiple dimensions with commas: --dimensions color,radius,shadows. Run sailop scan first to see which dimensions score highest.

9. “I want to iterate until the score is perfect”

Karpathy-style iterative improvement

Run autotune

sailop autotune ./src --target 15 --max-iter 8

Expected output

Autotune: target 15, max iterations 8

  Iteration 1: score 67 → 38  (-29)
  Iteration 2: score 38 → 24  (-14)
  Iteration 3: score 24 → 17  (-7)
  Iteration 4: score 17 → 14  (-3)

  Target reached in 4 iterations
  Final score: 14/100 (Grade A)

  Backup: .sailop/autotune-backup-1711234567/

Warning

10. “I want to compare before and after”

Preview, compare, and audit your changes

Preview changes without applying

sailop diff ./src/hero.tsx

Expected output

--- src/hero.tsx (current)
+++ src/hero.tsx (after transform)

  - bg-gradient-to-r from-blue-500 to-indigo-600
  + bg-gradient-to-r from-amber-600 to-rose-500

  - rounded-xl shadow-lg
  + rounded-sm shadow-[2px_4px_12px_rgba(0,0,0,0.08)]

  - font-family: Inter, system-ui
  + font-family: 'DM Sans', 'Satoshi', sans-serif

  6 changes in 1 file (not applied)

Side-by-side comparison after transform

sailop compare ./src/hero.tsx

Expected output

Comparison for src/hero.tsx:

  Before          After           Delta
  ──────          ─────           ─────
  Score: 68       Score: 16       -52
  Grade: D        Grade: A        +3 levels
  Colors: 78      Colors: 12      -66
  Radius: 55      Radius: 8       -47
  Layout: 75      Layout: 20      -55

Full project audit

sailop audit ./src

Expected output

Audit report written to sailop-audit.md

  24 files scanned
  14 findings across 7 dimensions
  3 files above threshold
  Recommended actions included

  Open sailop-audit.md for the full report.

Tip

The audit report is great for sharing with your team or including in pull request descriptions. It renders cleanly on GitHub and includes actionable recommendations for each finding.

Next steps

CLI Reference — all 18 commands documented →Scoring System — how the 7 dimensions work →MCP Tools — editor integration guide →Getting Started — installation and first scan →