Pinta

Pinta — annotate your running app and hand the changes to a coding agent.

Pinta lets developers annotate their running web app and have an AI coding agent apply the changes to source files. ▸ DRAW or SELECT Circle a button, point at a heading, drag a rectangle around a section. Or click an element to capture its selector + outerHTML + nearby text. Add a comment in plain English ("make this tonal", "tighten this spacing", "use the brand pink"). ▸ INLINE EDIT (optional) Pick an element and tweak it directly — Font, Sizing, Spacing, Grid, or raw CSS. The page updates live as you type. Pinta captures the diff as a structured CSS payload the agent can translate to your project's framework (Tailwind, styled-components, vanilla-extract, plain CSS). ▸ HAND IT TO YOUR AGENT - Claude Code: install the /pinta skill, click Submit - Cursor / Cline / Continue / Zed: install via MCP config - Aider: shell adapter - Or hit COPY for any agent that doesn't speak Pinta's protocol ▸ STANDALONE MODE (no agent required) Testing a deployed staging URL with no project on disk? Pinta runs fully locally. Annotations stay in your browser; Copy to clipboard or Download a zip of Markdown + screenshots to share anywhere. ▸ MULTI-PROJECT Run pinta-companion in each project root — they auto-allocate ports, register themselves, and the side panel auto-routes the active tab to the right project via URL patterns. ▸ HOW IT WORKS 1. Install the extension (this one). 2. Run `npx pinta-companion .` in your project root (Node 20+). 3. Open the side panel → annotate → Submit. 4. Your agent picks up the session and edits the matching source files. GitHub: https://github.com/kevzlou7979/pinta Spec: https://github.com/kevzlou7979/pinta/blob/main/spec/SPEC.md Single-user, single-machine. Annotations never leave your machine. The companion runs on localhost only. Open source (MIT).