DesignScan

io.github.ms-zamanPublished by GitHub account ms-zamanv0.4.0Updated Oct 25, 2026

Extract a website’s design tokens (colors, type, spacing, shadows) as DESIGN.md, W3C, or CSS.

The publisher's own server: scan.mx Email Diagnostics

VerifiedSTDIODesktop onlyWeb Search & ScrapingDeveloper ToolsMedia & Design

Overview

AI-generated overview

DesignScan extracts a website's design tokens (colors, type, spacing, shadows) and generates a DESIGN.md, W3C tokens or CSS file an assistant can use to match a

What you can do
Extract design tokens from any website URL, including light, dark or both themes, using a headless browser pass over the page's styles and components. Generate output as a DESIGN.md spec file with YAML tokens and prose, W3C Design Tokens JSON, CSS custom properties, or a raw token profile JSON. Emit a self-contained HTML proof sheet that renders swatches, type specimens, spacing and radius scales and components so results can be checked before use. Append deterministic per-extraction notes for a coding agent, covering heading hierarchy, contrast, font fallback and button and spacing conventions. Build or extend a curated brand corpus of specs from committed JSON or live URLs.
When to use it
Useful when you want an assistant to reproduce or align with an existing site's visual language, for example generating a design spec for a new project that should match a reference site, or producing paste-ready CSS or W3C tokens from a live page. Also suited to building a reusable library of brand design specs.
Requirements
Runs as a local process over stdio from the npm package @designscan/extractor. Needs Node.js and a one-time Playwright Chromium install, plus network access to reach the target site. No accounts, API keys, environment variables or headers are declared.
Before you install
The engine drives a headless browser against live third-party websites, so target URLs are fetched from your machine. Extracted tokens may be degenerate or blocked by bot challenges; the strict option exists to fail instead of emitting junk. Generated specs describe another site's look, so check licensing before reusing brand assets or fonts.

Installation

In SourceWeft

  1. Open DesignScan in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

DesignScan

URL → design tokens → DESIGN.md. Point it at any website and get a spec-compliant DESIGN.md file (YAML tokens + prose) that AI coding agents can read to match that site's look.

Preview

Every run can also emit a self-contained HTML proof sheet (--preview) that renders the extracted tokens — color roles, type specimens, spacing/radius scales, components — so you can eyeball the result before trusting it:

[DesignScan preview proof sheet for stripe.com]

Notes for your coding agent

A DESIGN.md is always consumed by an AI coding agent (Cursor, Claude Code, …). So rather than run our own LLM to resolve semantic intent, every file ends with a Notes for your coding agent section: deterministic, per-extraction instructions computed from the actual tokens — heading hierarchy vs. a muted text color, sub-AA body contrast, brand-font fallback, the primary-button contract, shape/spacing rhythm. The reasoning stays on our side (no API key); the application happens for free inside the agent you already use.

It measurably changes the output. Below: the same stripe.DESIGN.md cloned by an agent that ignored the notes (left) vs one that followed them (right) — identical tokens, layout, and copy:

[Same DESIGN.md, with vs without the agent notes]

Brand corpus

A growing, curated library of real-brand specs lives in examples/ — each one a DESIGN.md, an HTML preview, and the raw token JSON, indexed in examples/README.md (visual gallery: index.html).

[DesignScan brand corpus gallery]

Rebuild it from the committed JSON with pnpm seed rebuild (no network), or add brands with pnpm seed add <url> — degenerate / bot-challenged pages are skipped automatically so the corpus only holds trustworthy specs.

Monorepo layout

PathWhat
packages/extractorThe extraction + generation engine (Playwright → tokens → DESIGN.md).
packages/designscanThe short npm name — a thin CLI shim over the engine (npx designscan <url>).
examples/The brand corpus — DESIGN.md + HTML preview + token JSON per brand, with a gallery index.

Install (as a CLI / library)

The engine ships as the publishable @designscan/extractor package — a designscan CLI and a typed library — with designscan as its short npx alias.

bash
# one-off, no installnpx designscan stripe.com --md --out stripe.DESIGN.md
# or install the CLInpm i -g @designscan/extractornpx playwright install chromium   # one-time (the engine drives headless Chromium)designscan stripe.com --md --preview --out stripe.DESIGN.md

Quick start (from this repo)

This is a pnpm workspace (corepack enable to get pnpm).

bash
pnpm installpnpm --filter @designscan/extractor exec playwright install chromium  # one-time
# token profile (JSON) for any URLpnpm extract stripe.com
# generate a DESIGN.md (light theme by default)pnpm extract stripe.com --md --out out/stripe.DESIGN.md
# pick a theme: light (default) | dark | bothpnpm extract vercel.com --md --theme dark --out out/vercel.dark.DESIGN.md
# both = bundle light + dark into one file (parallel *-dark tokens)pnpm extract vercel.com --md --theme both --out out/vercel.DESIGN.md
# --preview = also write a self-contained HTML proof sheet beside the file,# rendering every token (swatches, type specimens, scales, components) so you# can eyeball the extraction before trusting it (--theme both adds a Light/Dark toggle)pnpm extract stripe.com --md --preview --out out/stripe.DESIGN.md# → out/stripe.DESIGN.md  +  out/stripe.preview.html
# --format = pick your output: json (profile) | md (DESIGN.md) | w3c | csspnpm extract stripe.com --format w3c --out out/stripe.tokens.json  # W3C Design Tokens (Style Dictionary etc.)pnpm extract stripe.com --format css --out out/stripe.tokens.css   # CSS custom properties, paste-ready# (--theme both folds a genuinely distinct dark pass into every format)
# --strict = exit non-zero if the result looks degenerate (bot challenge / too# few signals), for CI/automation that must not consume junk tokenspnpm extract stripe.com --strict --quiet
# seed / rebuild the curated brand corpus under examples/pnpm seed add tailwindcss.com vercel.com   # extract live + add to the corpuspnpm seed rebuild                          # regen md/preview/gallery from JSON

Scripts (root)

ScriptDoes
pnpm extract <url> [--format json|md|w3c|css] [--theme light|dark|both] [--preview] [--strict] [--timeout ms] [--out f]Extract tokens in your format: profile JSON, DESIGN.md (--md shorthand), W3C Design Tokens, or CSS custom properties (--theme both = light + dark in one file; --preview = HTML proof sheet beside it; --strict = non-zero exit on a degenerate result)
pnpm seed rebuild / pnpm seed add <url…>Build the brand corpus under examples/ (md + preview + gallery; add extracts live)
pnpm buildCompile the publishable package (tsc → dist)
pnpm typecheckType-check all packages
pnpm testRun the test suite (vitest)
pnpm checkBiome — format + lint (use pnpm format to auto-fix)
pnpm lint:designmdValidate examples/*.DESIGN.md against the official spec

All of these run on every push/PR via GitHub Actions. The engine is consumable as a library through its public API (packages/extractor/src/index.ts).

Status

  • Step 1 — Extraction engine (Playwright → clean token profile)
  • Step 2 — Generator (token profile → spec-valid DESIGN.md, lint-clean)
  • Step 3 — HTML preview (--preview → self-contained token proof sheet, light/dark toggle)
  • [~] Step 4 — agent guidance. Each DESIGN.md now ships a Notes for your coding agent section: deterministic, per-extraction instructions (contrast, heading hierarchy, font fallback) so the consuming agent applies the tokens with intent — no LLM on our side. (Optional LLM-refined prose still future.)
  • [~] Step 5 — brand-seed library (pnpm seed, curated corpus + gallery) done; npx … add / checkout next

See packages/extractor/README.md for the full roadmap and engine details.

Source: README.md at commit e22bacb

Tools

0
SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

1
  1. v0.4.0LatestSep 16, 2026

Score

50% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts

    Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.

  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts

Other Scan integrations

scan.mx Email Diagnostics

mx.scanOfficial publisher

Remote MCP server that lets an assistant run graded email deliverability and DNS checks on a domain, covering MX, SPF, DKIM, DMARC, blacklists and more.

Streamable HTTPWeb executable
Developer Tools9 toolsOct 25, 2026

MTG Trade Scan

fr.mtg-trade

Scans Magic: The Gathering binder photos, turning uploaded page images into processed scan jobs, with free daily pages and paid credits.

Streamable HTTPWeb executable
Business & Commerce5 toolsNov 6, 2026

mcp-guard

Published by GitHub account diegoperezg7

Security scanner for MCP servers that checks tool lists for poisoning, shadowing, excessive permissions, leaked secrets and weak transports.

STDIODesktop only
Developer Tools4 toolsNov 4, 2026

PredictionScan

Published by GitHub account JordanKarst

Derived prediction-market flow, price changes, trader research and news. 11 read-only tools.

Streamable HTTPWeb executable
11 toolsNov 3, 2026

x402-sec-scan

Published by GitHub account 6mickswagger9

Local stdio MCP server exposing an x402 paid API for AI agents, settling payments in USDC on Base through a CDP facilitator.

STDIODesktop only
AI & MLNot validated · the server did not answer in timeOct 31, 2026