winspect-mcp

Turn any website into Tailwind components, from inside your coding agent.

Point it at a URL and it extracts that page's design system — color theme, font stacks, type scale, spacing, radius, borders, shadows — plus ready-to-install Tailwind components. Everything lands in your Winspect library, and each component installs into a project with one line.

Setup

Get a key from your dashboard, then:

Claude Code

claude mcp add winspect -e WINSPECT_MCP_KEY=wmk_your_key -- npx -y winspect-mcp

Cursor (.cursor/mcp.json) or Claude Desktop

{
  "mcpServers": {
    "winspect": {
      "command": "npx",
      "args": ["-y", "winspect-mcp"],
      "env": { "WINSPECT_MCP_KEY": "wmk_your_key" }
    }
  }
}

Then ask your agent:

Capture the design at https://linear.app

Tools

| Tool | What it does | | --- | --- | | capture_site_design | Extract a page's design system and components into your library | | list_captured_designs | List designs you have already captured | | get_captured_design | Full token set and section outline for one capture | | build_component_from_capture | MCP-native DOM/CSS + visual generation brief; your agent writes the component | | search_design_references | Find patterns by intent ("pricing like Linear") | | get_design_reference | Full description, tokens, and structure for one pattern | | build_component_from_reference | Generation brief — your agent writes the component | | save_component | Upload a finished component to your library | | list_my_components | Browse saved components (names/tags, no code) | | get_my_component | Pull one saved component, code included, into the project | | delete_my_component | Remove a component from your library |

The library syncs through your account: capture on your laptop, pull it into another repo on another machine tomorrow.

CLI

The same binary is also a CLI. Pull a saved component straight into a project:

npx winspect-mcp add <component-id>
npx winspect-mcp add <component-id> --out src/ui/pricing.tsx

Component ids come from each component's dashboard page, or from list_my_components. Run with no arguments and it starts the MCP server over stdio instead — which is what an editor launches.

Environment

| Variable | Default | Purpose | | --- | --- | --- | | WINSPECT_MCP_KEY | — | Long-lived key (wmk_…) from the dashboard. Required for the capture and library tools; pattern search works without it | | WINSPECT_API_URL | https://trywinspect.com | API origin (http://localhost:3500 for local dev) |

MCP keys never expire on their own — revoke them from the dashboard. Activation tokens from the Winspect browser extension are 7-day device credentials and will not work here.

How generation works

Capture is deterministic parsing, not generation: a page's stylesheets are read and its tokens derived, so no model is billed for it.

For components, this server returns a generation brief and your own agent writes the code, in your repo's conventions, on your own Claude or Cursor plan. Browser-extension captures can include a bounded full-height overview at the captured viewport width plus native MCP image blocks correlated to their DOM/CSS samples, so the caller's multimodal agent gets screenshot-to-code visual context without Winspect calling a model API. Nothing is generated on Winspect's servers.

The reference screenshots show the page as it renders — Winspect's own panel is hidden, nothing else is. They are stored privately to the capturing account and reach an agent only through short-lived links. The stored capture row still holds design decisions rather than markup: sample text is placeheld and asset URLs stripped, so what you install is a reusable shape and the screenshots are what you compare against.

Pass scope: "page" to build_component_from_capture to rebuild a whole captured layout section by section instead of one component. Either way the brief asks your agent to render its result, compare it to the overview screenshot, and fix the difference — the loop is what gets a screenshot-to-code build close.

License

MIT