caliper

DenDiem/caliper

★ 2 stars TypeScript AI/LLM Updated today

Design Mode & UI annotation for AI coding agents. Mark up any web page — click, strike, or lasso an element — and hand Claude Code or Cursor a precise, element-pinned change list. Chrome extension + MCP server, both directions.

View on GitHub → 🔍 Audit Wallet Slippage →

Quick Install

Copy the config for your editor. Some servers may need additional setup — check the README.

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "caliper": {
      "command": "npx",
      "args": [
        "-y",
        "DenDiem/caliper"
      ]
    }
  }
}

README Excerpt

<p align="center"> <img src="docs/media/icon.png" width="96" alt="Caliper" /> </p> <h1 align="center">Caliper</h1> <p align="center">Design Mode & UI annotation for AI coding agents — precise, element-pinned hand-offs between you and Claude Code / Cursor, in both directions.</p> <p align="center">

Topics

ai-agentschrome-extensionclaude-codecoding-agentcursordesign-modedesign-reviewdeveloper-toolsdevtoolsfrontendhuman-in-the-loopmcpmodel-context-protocolpreactqa

caliper

Quick Install

README Excerpt

Topics

Related AI/LLM Servers