Capabilities

Eight things it does well

Every step runs locally against a SQLite database in ~/.designscout. No images leave your machine.

Capture

Full-page screenshots at any viewport, or mobile, tablet, and desktop in one call. Scrolls to trigger lazy content, dismisses cookie banners, flags responsive breakage.

Extract

Colours, type scale, fonts, icon sets, animation libraries, CSS variables, and breakpoints, pulled from the live DOM rather than guessed from a screenshot.

Audit

About 27 deterministic rules catch AI design tells and copy tells: overused fonts, cream palettes, gradient text, glassmorphism, em-dash density, filler phrases. No LLM in the loop.

Generate

Design tokens in six formats, three distinct style directions, and audit-clean React or HTML components. Greys auto-tint toward the brand hue; font stacks skip the monoculture.

Crawl

Walk a whole site, dedupe near-identical pages by structural fingerprint, and score cross-page consistency: font drift, palette spread, unstable nav and footer.

Inventory

Component inventory straight from the DOM: buttons, inputs, cards, and badges grouped by variant, with computed styles and usage counts for each.

Verify

Render the code you just generated at mobile, tablet, and desktop. Reports horizontal overflow with the offending elements, sub-44px tap targets, missing viewport meta, broken images, console errors, and inline-script syntax.

Ship

Check WCAG contrast in light and dark, emit a guarded scroll-animation layer, resolve exact CDN versions, then inline every asset into one self-contained file that opens with no network.

Pipeline

From a URL to shippable code

The server writes screenshots to disk and returns their paths. Claude Code opens the PNGs with its own vision. Token generation and auditing are plain code.

Capture

Playwright Chromium visits the site, scrolls it, and records every section plus the raw HTML.

Analyze

Claude reads the frames, fills the analysis schema, and stores structured patterns in SQLite.

Generate

Tokens, style directions, a DESIGN.md, components, or a motion layer come out of the stored patterns.

Audit

The detector checks the output for AI tells. Clean moves on; tells found means regenerate.

Verify & ship

Render it at every width, check contrast in both themes, then inline every asset into one portable file.

In the wild

Built with DesignScout

Real front ends, generated from captured design systems instead of a model's defaults. The three below are one design study — five reference sites captured and distilled — run through three separate direction passes, the same shape as scout_styles's Refined, Bold, and Expressive output.

Zimbabwe Street Photography Club prototype in the contact-sheet direction: a dark hero with a pinned frame strip, grease-pencil keeper marks, and safelight amber accents

Direction A · Contact sheet

Zimbabwe Street Photography Club — Kontakt

Frame numbers down a sprocket rail, grease-pencil keeper marks, a hero photo that "develops" from blurred sepia to sharp on scroll.

Fraunces + Plex Monoself-contained build

Zimbabwe Street Photography Club prototype in the seasonal-almanac direction: a serif headline over a twelve-month vertical spine navigator

Direction B · Field almanac

Zimbabwe Street Photography Club — Msasa

Same brief, same tokens pool, an entirely different read: a twelve-month spine where the whole page re-tints — wine, gold, jacaranda — as the year turns.

Instrument Serifseasonal re-tint

Zimbabwe Street Photography Club prototype in the street-signage direction: a bold enamel-sign nav with a scrolling route-board marquee

Direction C · Street signage

Zimbabwe Street Photography Club — Kombi

Same brief again: the nav is a route board, and a scroll-velocity-reactive marquee runs today's walk like a kombi destination sign.

Bungee + Antonvelocity marquee

Dev-tool landing page

Loomline — API docs that ship themselves

Tokens extracted from a captured reference, a DESIGN.md generated straight from the pattern set, then a full dark/light landing page built off it.

DM Sansdark + light tokens

Tools

Twenty-three MCP tools

Each one also has a matching CLI subcommand for scripting or piping context.

Capturescout_capture

Visit a URL, scroll the full page, capture viewport frames. Responsive mode, selector-scoped capture, layout-breakage detection, cookie-banner dismissal. Persists the raw HTML.

Capturescout_crawl

Breadth-first crawl of a site's internal pages. Screenshot and design signals per page, near-duplicate pages deduped by structural fingerprint.

Analyzescout_analyze

Return screenshot paths plus the analysis schema for Claude Code to fill in visually.

Analyzescout_store_patterns

Save Claude Code's structured analysis (colour, type, layout, component, mood) to the local database.

Analyzescout_search

Query the pattern database by keyword and category. Every capture adds to the library.

Analyzescout_compare

Screenshot paths and patterns for two or more captured sites, side by side.

Analyzescout_inventory

Component inventory from the live DOM: buttons, inputs, cards, badges grouped by variant with computed styles and counts.

Analyzescout_checklist

Pre-generation checklist for a captured site: imagery, motion, forms, theming, responsive coverage, fonts, and bundling turned into explicit choices, each seeded from what the reference does.

Generatescout_tokens

Generate tokens as json, css, tailwind, style-dictionary, w3c (DTCG), or figma (Tokens Studio).

Generatescout_styles

Three design directions, Refined, Bold, and Expressive, each with its own complete token set.

Generatescout_codegen

Scaffold hero, navbar, card, footer, features, testimonials, cta, or pricing as React or HTML from a token set. Runs the audit rules on its own output.

Generatescout_motion

Guarded scroll-animation layer as CSS + JS: reveal, parallax, line-mask, count-up, marquee, magnetic, blur-in, optional theme transition. Vanilla or GSAP. Bails under prefers-reduced-motion.

Generatescout_moodboard

Build an HTML mood board from captured sites: screenshots, palettes, type analysis, mood tags.

Generatescout_designmd

Generate an impeccable-compatible DESIGN.md that any AI coding tool can read and enforce.

Auditscout_audit

Anti-pattern detection on a file, raw text, or a captured site (real HTML plus extracted styles and tokens).

Auditscout_a11y

Deterministic accessibility scan: alt text, control names, labels, heading order, landmarks, focus rings, with a 0 to 100 score.

Auditscout_consistency

Cross-page consistency report from a crawl: font drift, palette spread, unstable nav and footer, with a score and an HTML report.

Verifyscout_verify

Render generated HTML — a file, a string, or a URL — at mobile/tablet/desktop and report horizontal overflow with the offending elements, tap-target size, missing meta, broken images, console errors, script syntax, and AI-tell lint.

Verifyscout_contrast

WCAG 2.1 contrast for a single pair, a CSS file, or a whole token set — token mode checks light and dark together so a combo that passes one theme but fails the other is caught. Returns a fix per failure.

Shipscout_bundle

Inline remote images as data: URIs and allowlisted CDN script/style into one self-contained file that opens with no network. Adds missing charset and viewport meta.

Shipscout_deps

Resolve exact pinned versions and ready-to-paste script URLs for CDN libraries — cdnjs, then jsDelivr. Handles the awkward ones (gsap, ScrollTrigger, lenis).

Managescout_list

List captured sites and crawls held in the local database.

Managescout_delete

Remove a captured site or crawl, along with its screenshots and outputs.

Anti-pattern detection

Twenty-seven rules that know what "AI-made" looks like

Point scout_audit at a file, raw text, or a captured site. Every rule is a deterministic check against real markup and computed styles, not a vibe check from a model — same input, same finding, every time.

Design slop slop

Overused fontsCream surfacesPurple palettes Tailwind defaultsGradient textGlow shadows Radial halosOvershoot easingGlassmorphism Stacked 100vhUniform rounded-xlEmoji headings Icon tile above headingStaggered scroll reveals

Copy tells copy

Em-dash overuseExclamation densityEllipsis overuse Label: header patternTrailing arrowsTemplate metrics Template testimonials30+ filler phrases

Quality quality

Untinted greysPure blackGrey text on colour WCAG AA contrast (light + dark)Too many typefacesToo many pinned elements Multiple animation librariesMissing viewport metaMissing lang attribute

before

 4 tells found> scout_audit generated-hero.css
 
warning cream-palette
  background: #F8F5F0 — the default AI "warm neutral"
warning overused-font
  font-family: Inter — the default AI sans
warning gradient-text
  background-clip: text on the <h1>
advisory dark-glow
  box-shadow: 0 0 40px rgba(124,58,237,.4)

after

 clean, 0 tells> scout_audit generated-hero.css
 
✓ no cream palette
  background: #e9e7e4 — from the captured token set
✓ no overused font
  font-family: Fraunces, Hanken Grotesk
✓ no gradient text
  solid fill, line-mask reveal instead
✓ no glow shadow
  flat elevation, brand-tinted border

Illustrative run against a generic AI-styled hero, regenerated from a captured token set. Same shape of output scout_audit returns on a real file — see it applied to the prototypes above.

DesignScout uses impeccable for design-quality enforcement. Its own generated components and default token set pass the same audit.

Token formats

Six ways to export

Format	Output
json	The raw DesignTokenSet
css	:root custom properties for colour, font, space, radius, and shadow
tailwind	A tailwind.config theme.extend object
style-dictionary	Style Dictionary v3 source with value leaves
w3c	W3C Design Tokens Community Group format ($type and $value)
figma	Tokens Studio for Figma, single global set

Setup

Running in four steps

You need Node 20 or newer, Claude Code, and about 400 MB of disk for the bundled Chromium.

01

Clone and build

# clone the repo git clone https://github.com/SpenceChakabva/designscout.git cd designscout npm install npm run build

02

Install the browser

# bundled Chromium for Playwright npx playwright install chromium

03

Register with Claude Code

# -s user makes it available in every project claude mcp add designscout -s user -- \ node /ABSOLUTE/PATH/TO/designscout/dist/index.js

04

Verify

# restart Claude Code, then run /mcp # designscout shows connected with 17 tools

On Windows PowerShell, use the full path with forward slashes, for example node C:/Users/you/designscout/dist/index.js. To update later: git pull && npm install && npm run build, then reconnect from /mcp.

Start scouting

Open source, MIT licensed, and built to keep AI output from looking like AI output.

Install DesignScout Read the docs

Build from real design,not a model's guess.

Eight things it does well

Capture

Extract

Audit

Generate

Crawl

Inventory

Verify

Ship

From a URL to shippable code

Capture

Analyze

Generate

Audit

Verify & ship

Built with DesignScout

Zimbabwe Street Photography Club — Kontakt

Zimbabwe Street Photography Club — Msasa

Zimbabwe Street Photography Club — Kombi

Loomline — API docs that ship themselves

Twenty-three MCP tools

Twenty-seven rules that know what "AI-made" looks like

Design slop slop

Copy tells copy

Quality quality

Six ways to export

Running in four steps

Clone and build

Install the browser

Register with Claude Code

Verify

Start scouting

Build from real design,
not a model's guess.