DESIGNSCOUT

MCP server for Claude Code. Captures websites with a headless browser, extracts colors, type, icons, and animations from the live DOM, then audits the output so it does not look like a model wrote it.

Get Started Source Code
claude code
> Capture linear.app, show me 3 styles
 
scout_capture https://linear.app
12 screenshots, 100% coverage
8 sections detected
 
scout_store_patterns 22 patterns
scout_styles
 
1. Refined light, spacious, soft radii
2. Bold dark, saturated, tight
3. Expressive accent-led, rounded

HOW PEOPLE USE IT

COPY A DESIGN SYSTEM
Capture a client's existing site. DesignScout extracts the actual computed fonts, colors, spacing, and animation libraries from the DOM. Generate a DESIGN.md that any coding tool can enforce.
> Capture example.com, generate a DESIGN.md from it scout_capture example.com fonts: DM Sans, Literata icons: Phosphor Icons (24 SVGs) anim: GSAP ScrollTrigger scout_designmd DESIGN.md written (42 tokens)
BLEND MULTIPLE REFERENCES
Capture three sites you like. Compare their patterns, pick the strongest elements from each, and generate a merged token set that Claude Code uses to write the page.
> Capture stripe.com, linear.app, and resend.com. Compare them, build a page with the best of each. scout_capture 3 sites captured scout_compare common: sans display, dark hero unique: stripe's gradient depth, linear's density scout_tokens format: tailwind merged token set written
AUDIT BEFORE SHIPPING
Run the detector against generated code. 14 rules check for overused fonts, pure grays, gradient text, em-dash density, and filler phrases. Nothing leaves the repo looking like a model wrote it.
> Audit src/app/page.tsx scout_audit src/app/page.tsx warn overused-font "Inter" is on the monoculture list warn ai-copy-phrase "seamlessly" is LLM filler clean 2 fixed, 0 remaining
PICK A DIRECTION
After capturing, generate three design directions from the same source patterns. Each has its own token set. Choose one, then Claude Code builds from those exact values.
> Show me 3 styles from vercel.com scout_styles Refined bg: #fafafa radius: 8px spacing: 1.2x Bold bg: #0a0a0a radius: 4px spacing: 0.85x Expressive bg: #fafafa radius: 16px accent-led > Go with Bold.

TEN TOOLS

scout_capture
Scrolls the full page, triggers lazy content, captures every section with 20% overlap. Reports coverage percentage.
scout_analyze
Returns screenshot paths for Claude Code to read with native vision. Includes the analysis schema.
scout_store_patterns
Saves color, type, layout, component, and mood patterns to the local SQLite database.
scout_tokens
Outputs JSON, CSS custom properties, or Tailwind config. Auto-tints grays, avoids overused fonts.
scout_styles
Three design directions from one capture: Refined, Bold, Expressive. Each with a complete token set.
scout_audit
14 deterministic rules for design slop, copy tells, and quality issues. No LLM, pure pattern matching.
scout_designmd
Generates an impeccable-compatible DESIGN.md from captured patterns. Readable by any AI coding tool.
scout_search
Queries the pattern database by keyword. Every capture builds the library.
scout_compare
Side-by-side analysis of multiple captured sites. Common patterns, unique elements, blended approach.
scout_moodboard
Renders an HTML mood board with screenshots, palettes, type analysis, and mood tags.

WHAT CAPTURE EXTRACTS

FROM THE DOM

Computed colors on every visible element. Loaded fonts via the document.fonts API. Every unique font-size, weight, line-height, and letter-spacing in use. CSS custom properties on :root. Container max-widths, grid vs flex usage, and media query breakpoints. Sticky and fixed element counts.

ICONS AND ANIMATION

Detects Font Awesome, Material Icons, Phosphor, Lucide, Remix, Tabler, Heroicons, Feather, and Bootstrap Icons. Counts inline SVGs with samples. Reads every @keyframes definition and which properties it animates. Detects GSAP, Framer Motion, Anime.js, Lenis, Locomotive, AOS, Three.js, Lottie, Motion One, and Barba.js. Flags scroll-triggered animations.

SETUP

# clone git clone https://github.com/SpenceChakabva/designscout.git cd designscout # dependencies npm install npx playwright install chromium # build npm run build # register globally with Claude Code claude mcp add designscout -s user -- node dist/index.js

Restart Claude Code after registering. Run /mcp to verify. Then ask it to capture a site.

START SCOUTING

Open source. MIT licensed. Captures real design from real sites.

View on GitHub