Item logo image for Caliper QA — UI Marks & Bug Traces for AI Coding Agents

Caliper QA — UI Marks & Bug Traces for AI Coding Agents

5.0(

1 rating

)
Item media 5 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 1 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 2 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 3 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 4 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 5 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 1 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 1 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 2 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 3 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 4 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents
Item media 5 (screenshot) for Caliper QA — UI Marks & Bug Traces for AI Coding Agents

Overview

Mark up any web UI or record a bug trace — DOM, console, network and store — and hand it to Claude Code, Cursor or any AI agent.

Visual bug reporters give you a screenshot and a sentence. Someone then has to open devtools, find the element, guess which component owns it and which design token that colour came from. Caliper skips that step. Click an element while the picker is armed, type what is wrong, and it records: • a stable CSS selector, with an honest confidence level — it tells you when the selector is brittle instead of pretending otherwise • the owning application component, looked past design-system wrappers like ion-* or mat-* • the computed styles that the element actually sets, matched against your design tokens, so a padding of 20px is reported as --offset-20px rather than a bare number • a screenshot cropped to the element, captured at the moment you clicked it Three ways to mark what you mean: click an element to annotate it, strike one through to flag it for removal, or lasso an area when no single element is the right target. Export the session as TOON (a compact, token-efficient format built for AI agents), as JSON, or as a zip holding both plus the screenshots. Paste it into Claude Code, Cursor or any coding agent and it can go straight to the file and the variable. Everything stays on your machine. No account, no backend, no telemetry. Keyboard: Alt+Shift+C toggles the picker, Alt+Shift+P opens the panel, Escape steps back. Open source, MIT: https://github.com/DenDiem/caliper

Details

  • Version
    1.3.5
  • Updated
    September 4, 2026
  • Size
    488KiB
  • Languages
    English
  • Developer
    Email
    365denedge@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

ProjectX

0.0

Capture any UI element from the web, extract its code, and generate AI-ready prompts

DESIGN.md extractor by getdesignsystem.io

5.0

Extract design systems from any website. Get tokens for Claude, Cursor, and other AI coding agents.

uiClone

5.0

Clone any website's design system - Extract colors, fonts, components and export to Markdown or JSON to feed your AI assistant.

CSS Inspector & Color Picker — MimicKit

5.0

Inspect any website. Copy CSS as Tailwind, extract colors, fonts, SVGs and images. Paste into Cursor, v0 or Claude.

DESIGN.md Inspector

5.0

Auto-generate DESIGN.md and SKILL.md from any page's design system and use it with Claude, Codex and Cursor.

Markagent: UI/Web Feedback Annotator for AI Agents

5.0

Vibe coding feedback. Annotate webpages, screenshot & export agent prompts for Claude Code, Cursor, Codex, OpenCode, Antigravity.

Repro — Capture & replay frontend bugs

5.0

Capture a frontend bug once, then replay it. One click records screen, console, network, actions and storage to find the bug.

DesignDNA

0.0

Extract any website's design system into a markdown file for AI coding agents.

Agentation Vue

5.0

Turn UI annotations into coding-agent instructions. Click any element, add a note, and paste into any AI tool.

BugGenius - AI Bug Capture & Defect Reporter

5.0

One-click bug capture for QA teams. Auto-captures screenshots, console logs, network requests and steps to reproduce.

VibeDesign

5.0

Extract any website's design system into DESIGN.md, agent Skills and design tokens for AI coding tools.

Prompt Picker - Pick element, annotate and get prompt

5.0

Pick and annotate elements on any web page, then copy as structured prompts for AI coding agents like Claude Code, Codex & Cursor.

ProjectX

0.0

Capture any UI element from the web, extract its code, and generate AI-ready prompts

DESIGN.md extractor by getdesignsystem.io

5.0

Extract design systems from any website. Get tokens for Claude, Cursor, and other AI coding agents.

uiClone

5.0

Clone any website's design system - Extract colors, fonts, components and export to Markdown or JSON to feed your AI assistant.

CSS Inspector & Color Picker — MimicKit

5.0

Inspect any website. Copy CSS as Tailwind, extract colors, fonts, SVGs and images. Paste into Cursor, v0 or Claude.

DESIGN.md Inspector

5.0

Auto-generate DESIGN.md and SKILL.md from any page's design system and use it with Claude, Codex and Cursor.

Markagent: UI/Web Feedback Annotator for AI Agents

5.0

Vibe coding feedback. Annotate webpages, screenshot & export agent prompts for Claude Code, Cursor, Codex, OpenCode, Antigravity.

Repro — Capture & replay frontend bugs

5.0

Capture a frontend bug once, then replay it. One click records screen, console, network, actions and storage to find the bug.

DesignDNA

0.0

Extract any website's design system into a markdown file for AI coding agents.

Google apps