Which AI assistants work with it?

Any client that speaks MCP over stdio. Claude Code, Cursor, Windsurf, VS Code and Claude Desktop have one-line setup on the extension's setup page; anything else can run the package directly as a stdio command.

Send to AI

Q: Does anything leave my machine?

The connection between the extension and the MCP server is a WebSocket on 127.0.0.1, which never leaves the loopback interface. Your AI assistant sends whatever it reads to its own model, exactly as it does with the files in your project — that part is between you and your assistant.

Q: Why does it say not connected?

The MCP server only runs while your AI client is running, because the client starts it. Open the client first, then check the status on the setup page. If it still fails, another process may be holding port 7331.

Q: Does this need extra browser permissions?

No. The extension connects out to a local socket, which needs no host permission, so enabling this adds no new permission warning to the install.

Your assistant stops guessing at a screenshot and reads the real numbers off the page — the spacing, the type, the colours with their alpha, the hover states and the animation timings.

Documentation · Updated September 2026

In one paragraph

Design Toolkit runs a small MCP server on your machine. Your AI client starts it, the extension connects to it over a local socket, and whatever you capture in the browser becomes available to the assistant as structured data. Nothing is pasted, nothing is screenshotted, and the connection never leaves 127.0.0.1.

Why a screenshot is not enough

An image tells a model roughly what something looks like. It does not carry a single number. The assistant has to infer that a gap is "about 24 pixels", that a font is "some geometric sans", that a card is "slightly transparent" — and each inference is a place where the rebuild drifts.

What actually determines whether the result matches is the set of values behind the image: the exact gaps, the rendered font family with its weight and tracking, the background as rgba() with the alpha intact, the border radius, the shadow, the transition duration and easing curve, and what changes on hover. Send to AI hands over that set.

Setup

Open the setup page

Click the Design Toolkit icon, then Send to AI → Set up. The page lists one command per client and shows the live connection status at the top.

Add the server to your client

For Claude Code, one line in any terminal:

claude mcp add designtoolkit -- npx -y @designtoolkit/mcp

For Cursor, Windsurf and Claude Desktop, paste this into the client's MCP config:

{
  "mcpServers": {
    "designtoolkit": {
      "command": "npx",
      "args": ["-y", "@designtoolkit/mcp"]
    }
  }
}

VS Code takes it from the Command Palette: MCP: Add Server → Command (stdio), with npx and -y @designtoolkit/mcp.

Restart the client, then check the status

The server runs only while your AI client runs, because the client is what starts it. Once it is up, the setup page turns green.

Using it

Inspect any element on any page and press Send to AI. The capture goes to the local server and stays there until you overwrite it. Then in your assistant, just ask:

Rebuild the section I just captured, in React and Tailwind.

The assistant calls get_selection, receives the values, and builds from them. You do not paste anything and you do not describe anything.

The server keeps the last 20 captures, so you can grab a header, a card and a footer in sequence and then ask for all three. Captures are listed with the page they came from and a short label.

What the assistant actually receives

A compact, structured brief rather than a dump of computed styles. For the selected element and the meaningful elements inside it:

Layout — display, the flex or grid setup, gaps, padding, margins, size, and the position relative to its parent
Type — the family that actually rendered, weight as a number, size, line height, letter spacing, transform
Colour — text, background, border and shadow colours with alpha as authored, plus what a translucent surface composites to
Effects — radius, shadows, filters, backdrop filters, opacity, transforms
States — what changes on hover and focus, read from the rules rather than by forcing the state
Motion — transition properties, durations and easing curves, and any running animation with its keyframes
Breakpoints — the media and container queries that apply, with the values at each
Font metrics — enough measurement of the rendered face that the assistant can pick a close substitute and tune it if the original is not available to you

Properties sitting at their browser default are left out deliberately. The brief says so explicitly, so the assistant treats absence as "default" rather than "unknown" — which keeps it short without losing anything.

The five tools

Tool	What it does
`get_selection`	The most recent capture, in full
`list_captures`	Everything captured this session, with ids and labels
`get_capture`	One earlier capture by id
`get_page_palette`	The colours and type scale of the captured page
`compare_captures`	The differences between two captures — useful for before and after, or two variants of a component

Privacy and security

Loopback only. The bridge listens on 127.0.0.1:7331. Connections carrying a non-local Host header are rejected, so nothing on your network can reach it.
Origin allowlist. Only the Design Toolkit extension may connect. Another extension, or a web page, cannot.
No new permissions. Connecting out to a local socket needs no host permission, so turning this on does not change the extension's install warning.
Nothing persisted. Captures live in memory, capped at 20, and disappear when the server stops.
Your assistant is your assistant. Once the data reaches your AI client, it goes wherever that client sends it — the same as the files in your project. That relationship is unchanged by this feature.

Troubleshooting

The status says not connected

The server only exists while your AI client is running. Open the client first. If the client is running and the status is still red, check whether something else is holding port 7331.

The assistant says it has no tools

Most clients need a restart after the config changes. In Claude Code, claude mcp list shows whether the server registered.

The values look wrong on a page with a side panel

They should not — the capture measures with any panel of ours removed, so you get the page's real width. If you see something that disagrees with DevTools, that is a bug worth reporting.

The rebuild still does not match

Usually the font. If the original face is licensed and you do not have it, no set of values will reproduce it exactly. The brief includes measurements of the rendered face so the assistant can pick a close substitute and adjust size and tracking to match its metrics — ask it to do that explicitly if it did not.

Give your assistant the real numbers

Capture any section of any page and hand it over as structured values. Included with Design Toolkit — free for 7 days.

Add to Chrome — free trial

Common questions

Does anything leave my machine?

The extension-to-server connection is a WebSocket on 127.0.0.1 and never leaves the loopback interface. What your AI client then does with the data is between you and that client, exactly as with the files in your project.

Why does it say not connected?

The MCP server runs only while your AI client runs — the client starts it. Open the client, then re-check. If it still fails, something else may be holding port 7331.

Does this need extra browser permissions?

No. Connecting out to a local socket needs no host permission, so enabling it adds no new warning to the install.

Which assistants work with it?

Any MCP client over stdio. Claude Code, Cursor, Windsurf, VS Code and Claude Desktop have one-line setup on the setup page; anything else can run the package as a stdio command.