# Verbatim

> Verbatim copies the real CSS of any element on any website by resolving the
> cascade rather than dumping computed styles, and hands the same extraction to
> coding agents over MCP. A free Chrome extension plus an optional MCP server.

Two products, one engine:

- The Chrome extension is free forever with no account. Twelve tools on a
  toolbar that lives in the page, not in a popup.
- The MCP server gives Cursor, Claude Code, Claude Desktop, Codex CLI,
  Windsurf and VS Code eight tools. Free for 24 hours, then a one time 29 USD
  key. `npx -y verbatim-mcp`

## What makes the output different

Most tools in this category read `getComputedStyle` and dump the result, which
discards the five things that decide what you actually see. Verbatim resolves
the cascade:

- Matched rules with their original selectors, specificity, layer, source order
  and importance.
- `@layer` precedence, which specificity alone cannot explain. An unlayered
  `.btn` correctly beats a `@layer base` rule of higher specificity.
- Cross-origin stylesheets. `sheet.cssRules` throws on them, so the service
  worker refetches and reparses the text.
- Native CSS nesting, with `&` resolved against the parent selector list.
- Shadow DOM and `adoptedStyleSheets`, walked recursively.
- Interactive states found by matching selectors, including ancestor triggers,
  rather than by whatever the mouse happens to be doing.
- Breakpoints as breakpoints, including queries that do not currently apply.
- `var()` both ways: the token name and the literal value.
- Shorthands as authored, because Chrome leaves longhands empty when the
  shorthand contains `var()`.

It then checks itself: `verify_extraction` renders what was copied in an
isolated frame and reports every computed style that differs from the live
page.

## Element scope and component scope

Element scope answers "what styles this element". Component scope answers "what
do I need to rebuild this". A section like `.hero` may declare nothing but
padding and text-align, while everything that makes it look like anything lives
in its descendants and in what it inherits. Component scope collects every rule
touching the subtree, keeps cascade order, and adds the inherited context, the
`@font-face` and `@keyframes` actually used, and the `:root` custom properties
the rules read.

## The twelve extension tools

Point: pick element (P), measure (M), design system (D).
Take one thing: sample a colour (C), fonts in use (F), images and SVGs (I).
Change the page: edit text (E), hide elements (X), move elements (V).
Take it away: screenshot (S), save page HTML (W), send to agent (G).

Five outputs from one pick: CSS, Tailwind v3 or v4, a component in React, Vue,
Svelte, Astro, Angular or HTML, a written brief for an AI chat, and a raw
inspection with matched selectors sorted by specificity.

## The eight MCP tools

- `get_design_context` buildable markup, every rule in cascade order, tokens,
  states, per-breakpoint behaviour, contrast.
- `get_component` one part of a page as HTML and CSS or as a framework
  component, optionally converted to Tailwind.
- `get_design_system` palette ordered by on-screen area, type scale, spacing,
  radii, shadows, breakpoints, custom properties. Emits Tailwind `@theme`, CSS
  variables or W3C DTCG tokens.
- `verify_extraction` renders the extraction in isolation and reports every
  property that differs from the live page.
- `get_assets` every image, SVG, CSS background and video poster, largest
  first, oversized sources flagged.
- `screenshot` a page or one element as PNG.
- `list_handoffs` and `get_handoff` read captures sent from the browser
  extension, for pages a headless browser cannot reach: anything behind a
  login, and elements that exist only while a menu is held open.

## Privacy

No account, no analytics, no telemetry, and no server of ours for anything to
be sent to. Nothing is injected into a page until the user asks. The only
outbound requests are stylesheet refetches to the origin that already served
them, loopback to the user's own machine, and, if the user sets their own AI
key, that provider on that key. Licence keys are Ed25519 signatures verified
offline, so activation contacts nothing.

The handoff bridge listens on loopback and authorises the browser extension by
its Origin, which a web page cannot set, so no page can post to it or read from
it. A token at ~/.verbatim/token exists for callers with no origin, like a
script.

## Links

- Homepage: https://verbatim.design/
- MCP server, setup per client and all eight tools: https://verbatim.design/mcp
- Full documentation for language models: https://verbatim.design/llms-full.txt
- Privacy policy: https://verbatim.design/privacy
- About, and who makes it: https://verbatim.design/about
- Contact: https://verbatim.design/contact
- Refunds, 14 days no questions: https://verbatim.design/refund
- MCP server on npm: https://www.npmjs.com/package/verbatim-mcp