Media
5 items
Description
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. ▸ PER-PAGE ANNOTATIONS (new in v0.3.0) Annotate across multiple SPA routes in one session — pins stick to their pages, the side panel filters to your current page, and a chip surfaces siblings on other pages. One Submit ships the whole multi-page batch. ▸ BUILT-IN MODULES (new in v0.3.0) Per-submit integrations that run after source edits land. First module: GitLab Issues — files one issue per annotation via your local glab CLI (no tokens stored). Screenshot upload to project /uploads endpoint, full body in each issue. ▸ MARKDOWN IMPORT + LOCATED PILL (new in v0.3.0) Import button now accepts both .pinta share files AND markdown exports. Imported sessions show an "N of M located" pill so you instantly know if you're on the right route for the share file. ▸ v0.3.1 PATCH (bug fixes) - Per-page annotation URLs now survive hash-routed SPAs (e.g. /#claims/active routes that don't reload the page). - Pin badges persist through SPA re-renders via a 3-tier element resolver (selector → outerHTML → nearbyText) and a MutationObserver that follows the element when the DOM swaps it out. - Badges no longer flash and vanish on navigation. - Clear button now truly clears everything. ▸ 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).