Asdesigned MCP server

asdesigned

Is it as designed? Diff a rendered UI component against its Figma source and see exactly what drifted. Built for coding agents: give Claude Code or Cursor the tool and they can check their own work against the design.

<!-- demo gif: run vhs demo/demo.tape and commit demo/asdesigned.gif -->

asdesigned compare https://www.figma.com/design/<key>/<file>?node-id=12-345 \
      --url http://localhost:3000 --selector .btn-primary

design   figma  Button / Primary  1:4
rendered dom  <button class="btn-primary">  .btn-primary

box
  ✗ width          design 120px → rendered 112px (−8px)
padding
  ✗ left           design 16px → rendered 12px (−4px)
  ✗ right          design 16px → rendered 12px (−4px)
border
  ✗ color          design #1d4ed8 → rendered #2563eb (Δ29.43)
typography
  ✗ fontFamily     design "Inter" → rendered "Arial"
  ✗ fontWeight     design 600 → rendered 500 (−100)

6 drift · 20 match
FAIL  (tolerance ±1px, color Δ≤4)

That output is real — examples/button.html against a real Figma component. Five of those six were planted. The sixth wasn't: elements don't inherit font-family, so the page quietly fell back to Arial. Nobody sees that in a screenshot review. The diff does.

Figma gives you the intent. The browser gives you the reality. asdesigned compares the two — and your coding agent can call it to check its own work.

Status: v0.2 — early, usable. Figma → spec, DOM → spec, diff, terminal + HTML report, MCP server, interaction states. One viewport per run — see what it doesn't cover.

Install

npx asdesigned --help            # no install
npm i -g asdesigned              # or install the `asdesigned` command globally
npx playwright install chromium   # one-time: the browser used to render pages

Set FIGMATOKEN (a Figma personal access token with file content: read*) in your environment or a .env file.

Use it from an agent (MCP)

asdesigned ships an MCP server so Claude Code, Cursor, and other MCP clients can call it directly. Tools: comparedesign, inspectelement, inspectfigma. All three understand states: comparedesign takes states: ["default","hover","focus"], inspectelement takes a single state, and inspectfigma takes variants: true to list what a component set designs.

Claude Code — .mcp.json in your project:

{
  "mcpServers": {
    "asdesigned": {
      "command": "npx",
      "args": ["-y", "asdesigned", "asdesigned-mcp"],
      "env": { "FIGMA_TOKEN": "figd_…" }
    }
  }
}

Cursor — .cursor/mcp.json, same shape.

A skill file describing when and how an agent should reach for the tool lives in skills/asdesigned/SKILL.md — drop it into your agent's skills folder.

Use it from the terminal

asdesigned compare <figma-url> --url http://localhost:3000 --selector .btn-primary
asdesigned compare <figma-url> --url … --selector … --states hover,focus  # interaction states
asdesigned compare <figma-url> --url … --selector … --html report.html   # self-contained visual report
asdesigned compare <figma-url> --url … --selector … --json               # for CI / scripts
asdesigned inspect http://localhost:3000 --selector .btn-primary
asdesigned inspect http://localhost:3000 --selector .btn --state hover   # one rendered state
asdesigned inspect <figma-url> --variants                                # what states are designed

Interaction states

--states hover,focus,active,disabled (or --states all) compares each state as its own section.

Shortened. The full README is on GitHub.