v0.10.0 — Tester round-trip + auto test steps

Annotate your running app.
Let an agent do the edits.

Circle a button. Point at a heading. Type “make this tonal”. Pinta hands the annotation to your coding agent — Claude Code, Cursor, Aider, or any MCP-compatible tool — which edits the matching source files for you.

Install for Chrome View on GitHub
Works with Claude Code Cursor Cline Continue Zed Windsurf Aider MCP · HTTP
How it works

Point at the pixel. Ship the change.

The extension talks only to the companion. The companion talks to any agent. Nothing is hard-wired to a vendor.

1

Annotate

Open the side panel. Press Alt+S to pick an element, or Alt+P to draw — arrow, rect, pen, pin. Type a comment per annotation.

2

Submit

Selectors and nearby text are usually enough — screenshot is opt-in (auto-on for drawings). The session is posted to the companion at localhost:7878.

3

Edit & reload

Your agent (woken via push) presents a per-file plan, applies after you confirm, and the side panel auto-reloads the tab once HMR detects the changes.

What Pinta includes · v0.10.0

The whole loop, shipped.

The core annotate → submit → edit loop plus the polish phases (inline editing, protocol, standalone, share files) — and eight built-in modules: GitLab Issues, Test Pilot, AuditFlow, Chat, Report, Design Variants, Code Review, and Devices (plus opt-in Voice Command dictation). See the spec for the phase-by-phase breakdown.

Tester round-trip

Email a tester sheet that writes its own steps, let a tester run it in Pinta with no companion, and get ONE file back — signed-off Pass/Fail marks overlay your catalog, and annotated bugs file straight to GitLab with your assignee and labels. v0.10

Devices, Design Variants + Code Review

See your app in many live device frames and annotate inside one; get on-system design variants with a match check after apply; review your own diff card by card. Plus a hardened companion: nothing is trusted automatically, so an unpacked build needs a one-time npx pinta-companion trust <id>. v0.9

Floating toolbar + Free Transform

A draggable on-page palette with Ctrl+Alt shortcuts — and a Free Transform toggle that batches move, resize, edit, and delete of one element into a single annotation. Undo / redo included. v0.8

Task notifications

The companion watches your tracker with a plain poll — no agent, zero Claude tokens — and fires a Chrome notification + badge when new tasks land, even with the panel closed. Module-scoped and opt-in. v0.8

Chrome MV3 extension

Svelte 5 + CRXJS. Side panel, popup, content-script overlay. Drawing canvas isolated in a Shadow DOM root so host CSS can't leak in.

Element selection

Hover-highlight, click-to-lock, computed selector, captured outerHTML, computed styles, and nearby text for grep fallback.

Drawing tools

Arrow, rectangle, pen, pin. Page-relative coords; drawings translate with scroll. Edge-aware comment popup positioning.

Full-page screenshots — opt-in

Scroll-and-stitch capture, composited with annotations baked in. Off by default to save ~1.5–2k vision tokens; auto-locks-on the moment a drawing lands in the batch.

Companion server

Node 20+. Native HTTP, WebSocket via ws, MCP via the official SDK. Sessions persisted as JSON in .pinta/sessions/. npx pinta-companion . — no clone needed.

Agent-agnostic

Claude Code skill ships with the repo. MCP server for Cursor / Cline / Continue / Zed / Windsurf. Aider poll script. Copy-to-clipboard for claude.ai web / ChatGPT. HTTP API is the floor.

HMR auto-reload

Side panel detects Vite, Webpack/Next.js, and Parcel HMR clients on the active tab and offers to refresh once the agent's edits land. Each annotation card flips to ✓ as it's applied.

Dark mode

Popup, side panel, and this landing page. Clean paper by day, charcoal by night, brand pink on either. Picks up prefers-color-scheme on first run; one-click toggle thereafter.

Push or poll handoff

The Claude Code skill defaults to push (/pinta) — wakes the agent the moment the companion has a session. Sandboxed setups can fall back to long-poll with /pinta --polling.

Multi-project routing

Run a companion per project — each picks the next free port (7878, 7879, …) and registers in ~/.pinta/registry.json. Side panel auto-routes the active tab via .pinta.json URL patterns; the /pinta skill finds the companion whose root matches the agent's pwd. No more wrong-project submits.

Share files for collaboration v0.2.0

Export any session as a single .pinta file — title, author, accent color, screenshots inlined. Drop it into another teammate's extension and it opens in a read-only viewer with a metadata pill on the page itself, accent-colored numbered halos at each target, and three actions in the footer: Send to agent (submits to their connected companion, your machine stays out of the loop), Copy (markdown for claude.ai web / ChatGPT), and Fork (clone into their own editable draft).

Per-page annotations across navigation v0.3.0

Review a multi-route flow as one session. Annotations stay pinned to the page they were drawn on; the side panel filters to your current page and shows a chip "N on M other pages" with Open buttons to jump between routes. Pin badges repaint automatically on reload / SPA nav via an overlay.ready handshake. One submit covers the whole batch — each annotation carries its own url so the agent files / groups output per page.

Built-in modules — GitLab Issues v0.3.0

Tick Create GitLab issues next to Submit and the agent files one issue per annotation via your glab CLI. No tokens stored anywhere — auth comes from glab auth login on your machine. Each issue body embeds the full-page screenshot (uploaded to the project's uploads endpoint), the selector, source file, and the annotated page URL. Before filing, the agent prompts in chat for batch metadata: domain (client / server / shared → domain:<choice> label), extra tags, assignees, or later to defer entirely.

Test Pilot — interactive UAT module new

Open the Test Pilot tab in the side panel: import a hand-written markdown UAT spec or let the agent generate one from your project context. Step through the resulting catalog row-by-row, marking each Pass / Fail / Untested. Click the ? on a row and the agent walks the tester through step-by-step instructions — short tester-friendly steps by default, or deeper technical context (curl, payloads, env vars) when you flip the Detailed help steps setting. Steps render with inline code, syntax-highlighted fenced blocks, and per-block copy-to-clipboard. Export the whole catalog as a markdown report with pass/fail/total tallies — pipe through pandoc for PDF.

Built-in modules

Pinta speaks more than annotations.

Modules ride along on a session or run interactively from their own tab — tick a checkbox, grant whatever setup the module needs once, and the agent handles the rest. Eight ship today — GitLab Issues, Test Pilot, AuditFlow, Chat, Report, Design Variants, Code Review, and Devices — plus an SDK for writing your own.

GitLab Issues

Per-submit

Tick Create GitLab issues next to Submit and the agent — after the source edits land — files one issue per annotation via your glab CLI. No tokens stored, transmitted, or written to disk by Pinta. Auth comes from glab auth login on your own machine.

  • One ticket per annotation, with selector + source file + page URL
  • Full-page screenshot uploaded to the project's uploads endpoint
  • Chat-based metadata prompt — domain label, tags, assignees, or later
  • Screenshot auto-locks ON when the module is ticked

Test Pilot

Interactive

A UAT module that lives in its own side-panel tab. Import a hand-written markdown test spec or let the agent generate one from project context, then step through the catalog row by row. Per-row ? asks the agent for step-by-step instructions with verbosity you can flip on the fly.

  • Pass / Fail / Untested marking, with per-section tallies
  • Inline Details checkbox — short tester-friendly steps or deep technical context per Re-ask
  • Steps render with inline code, fenced blocks (Prism syntax-highlighted), and > Note: callouts
  • Smoke or Thorough generation depth; file failed tests as GitLab issues in one click
  • Tester sheets (.md / .docx) generate any missing steps before they download, and can be emailed to the tester
  • Tester round-trip: signed-off results or one .pinta bundle come back and overlay your catalog read-only
  • Export the catalog as markdown for sharing or pandoc → PDF

AuditFlow

Interactive

Lighthouse-style audits inside Pinta — five built-ins (security, performance, accessibility, mobile, cross-browser) plus user-defined custom checks. Every finding is one click from Fix with agent, which now fixes the code in place — a per-finding loader, concurrent fixes, and Fix All on the category.

  • Five built-in audits — security, performance, accessibility (now with eight localization checks), mobile, cross-browser
  • Define your own audits with a markdown spec — same format the built-ins use
  • Per-finding Fix with agent edits the source in place — runs concurrently, with Fix All per category
  • Pass/fail summary per audit, re-run on demand, results persist per project

Chat

Always-on

Three-tier chat that follows you across Pinta. A global tab for free-form questions, a Just Ask on every Annotate session, and per-row chat on Test Pilot — one wire, one UI, three entry points. Threads attach selector, screenshot, and surrounding context automatically.

  • Global header tab — ask anything about the project, threads persist per workspace
  • Just Ask on any Annotate session for a quick clarification before submitting
  • Per-row chat on Test Pilot — drill into a specific test without leaving the catalog
  • Auto-attaches the right context: selector, outerHTML, screenshot, current module state

Report

Interactive

Turn shipped work into a standup-ready summary. The Report tab merges your git + GitHub activity with Pinta sessions and lays them out as clean day cards — for a day, a week, a 10-day sprint, or any custom window.

  • Daily / weekly / sprint ranges, plus arbitrary custom windows
  • Multi-project — combine extra repos, grouped by project per day
  • Read-mode day cards with weekend-fold
  • One-click Markdown export per day, or an invoice-ready summary for the whole range

Design Variants

Interactive

Pick an element (or the whole page) and the agent returns 1–5 variants that stay inside your design system. Preview one on the page, refine it in chat, then Use this — and a match check confirms the page now looks like the card.

  • Optional art direction, or paste a reference screenshot of the look you want
  • Preview on page swaps the live element; Esc restores
  • Automatic match check after apply (zero agent tokens); Fix differences sends only the gaps
  • Agent markup runs through a strict sanitizer before it reaches the panel or page

Code Review

Interactive

A game-style review of your own change. The agent deals your uncommitted diff (or the last commit, or a topic you name) as one card per logical change — you Pass, Fail, or Learn each one, and fix what failed in one click.

  • Pass / Fail / Learn with P / F / L keys and a streak counter
  • Learn opens a read-only chat that explains the code
  • End card grades the run S–D and lists failed cards
  • One-click Fix per failed card — the only action that edits code

Devices

Interactive

Your running app in many live, clickable device frames in one tab — phones, tablets, laptops, desktops, or custom sizes. The canvas needs no agent; annotations you draw inside a device go to the agent scoped to that breakpoint.

  • Add single devices, whole groups, or a custom Width × Height
  • Drag frames anywhere, Rearrange to re-pack, expand one to full window
  • Sync — navigate in one frame and the others follow
  • Annotate inside a device; screenshots crop to its viewport
Architecture

Three boundaries that matter.

Extension knows nothing about agents. Companion knows nothing about specific agents. Agents know nothing about the extension. That separation is the entire point.

Annotate
Chrome extension Overlay
Side panel
WebSocket
Capture
Pinta companion Local server port 7878
HTTP / MCP
Edit
Editors Claude Code
Cursor · Zed
Aider
writes
Session storage
{id}.jsonannotations
{id}.pngscreenshot
.pinta/sessions/
  • Extension Companion WebSocket · JSON sessions

    The extension only knows about the companion.

  • Companion Agents HTTP API · MCP server

    The companion is generic — no agent-specific logic.

  • Agents Project files Read · Plan · Edit

    Agents read sessions, present plans, then edit. HMR closes the loop.

Adapters

One companion. Every agent.

Each integration below works against the same running companion — no extension changes, no rebuild.

Agent Integration Status
Claude Code Skill (~/.claude/skills/pinta/) — push by default (/pinta), long-poll fallback (/pinta --polling) Reference, V1
Cursor / Cline / Continue / Zed / Windsurf MCP stdio server (pinta-mcp) proxies the companion Shipped V1
Aider Poll script under adapters/aider/ Shipped V1
claude.ai web / ChatGPT / etc. Side-panel Copy button — formats the session as markdown for paste-into-chat Shipped V1
Anything else HTTP API (/v1/sessions/poll, /v1/sessions/:id/status) Universal floor
Install & run

Two steps.

Install the Chrome extension, run the companion in your project, annotate. Node 20+ and Chrome (or any Chromium-based browser).

1. Install for Chrome 
~/your-project  —  zsh# 1. Install the extension from the Chrome Web Store (button above)

# 2. Run the companion in your project root
npx pinta-companion .

# 3. Install the /pinta skill, then fully restart Claude Code
npx pinta-companion@0.10.0 install-skill

# 4. Open Pinta in your browser, annotate, hit Submit
#    Then in Claude Code:  /pinta

For Cursor / Cline / Continue / Zed, add the MCP bridge to your agent's config: 

~/.cursor/mcp.json  —  json{
  "mcpServers": {
    "pinta": {
      "command": "npx",
      "args": ["-y", "-p", "pinta-companion", "pinta-mcp"]
    }
  }
}

Contributing to Pinta? See Development in the README — clone, npm install, npm run build, load unpacked.

What's next

Roadmap

V1 covers the core loop end-to-end. Shipped phases are marked; the rest is genuine upcoming work.

Phase 7

Polish

Drag-to-reorder annotations, group by file in the side panel, undo via git, plan-then-execute toggle.

Phase 13

Test Pilot catalog editing

Delete, add, edit, rename, and reorder sections + tests from the side panel. The on-disk spec stays in sync so the agent's "?" works on rows you added yourself.

Shipped
Phase 14

Inquiry mode

A shared chat sheet for asking the agent questions — global header icon, "Just Ask" on Annotate, and per-row chat on Test Pilot. One wire, one UI, three entry points.

Shipped
Phase 15

AuditFlow

Lighthouse-style audits inside Pinta — security, performance, accessibility, mobile, and cross-browser out of the box, plus user-defined custom audits. Every finding is one click from "Fix with agent," which fixes the code in place.

Shipped
Phase 16

Report

A built-in Report tab — merged git + GitHub activity and Pinta sessions laid out as day cards across a day, week, or 10-day sprint, with clean Markdown export. Multi-project aware, custom ranges supported.

Shipped
Phase 17

Claude Design

Bring your design system into Pinta as an ambient module. Annotated edits conform to your component patterns automatically instead of free-styling — strict by default, configurable per project.

Exploring
Phase 18

Agent role routing

Open several /pinta terminals, give each one a job. --annotate, --test-pilot, --audit, --chat, --variants, --review flags dedicate each Claude Code window to its own workload so a long audit run doesn't block your next annotation. Companion-enforced via 403 on cross-role claims — agents can't cross lanes even if they try.

Shipped
Phase 19

Importable modules

A Module SDK — third parties ship their own Pinta module as a single .pinta-module.json (manifest + agent instructions). Consent dialog with per-capability grants, default-deny gating, and the agent treats module instructions as data, never as a system prompt.

Shipped
Phase 20

Floating toolkit

A draggable Photoshop-style palette on the page itself — every tool one keystroke away (Ctrl+Alt), plus Free Transform: batch move / resize / edit / delete of one element into a single annotation, with undo / redo.

Shipped
Phase 21

Annotation toolset + Drift Check

Move, Text, Delete, Resize, Paint, and Scale tools that combine losslessly on one element; Drift Check verifies each applied change landed; Voice Command dictation; board modules with batch actions and inline "How to test" steps.

Shipped
Phase 22

Design Variants

1–5 on-system variants for an element or page — previewed on the page, refined in chat, and applied to source, then an automatic match check with Fix differences. Paste a reference image to steer the look.

Shipped
Phase 23

Code Review

Your diff (or a topic) as a deck of review cards: Pass / Fail / Learn, a graded run, a read-only Learn chat, and one-click Fix for failed cards.

Shipped
Phase 24

Devices

A multi-device live canvas: device groups and custom sizes, drag / masonry / rearrange, expand, nav Sync, and annotating inside a device frame.

Shipped
Made by

Mark Kevin Baldemor

Designed and built Pinta because the gap between “I can see what’s wrong on this page” and “the agent edits the right file” was bigger than it had to be.

GitHub →  ·  Pinta on GitHub →