English | 繁體中文
redpen
Mark up your AI's UI with a red pen.
Paste a screenshot into VS Code, mark what needs to change, and hand it to your coding agent.
Lightweight and local. No account or AI API key required. Just paste and start editing.
Install
Install from the VS Code Marketplace, or search for yunn030123.redpen-ui-markup in Extensions (⌘⇧X / Ctrl+Shift+X). No manual VSIX installation needed.
Getting started
- Open a canvas: press ⌘⇧P / Ctrl+Shift+P, then run redpen: Open Canvas. Tabs are named redpen Canvas 1, redpen Canvas 2, and so on within the current window session. No need to name or save a draft first.
- Paste a screenshot: click the canvas and press ⌘V / Ctrl+V, or click Import to choose a PNG, JPEG, or WebP. You can also right-click an image in Explorer → redpen: Open Canvas.
- Describe a change: select Annotate, drag a box around the area, and type your request in the floating comment. Use covers, arrows, text, icons, and copied regions to sketch the result.
- Export: click Export for Agent, choose a location, and save one SVG.
- Hand it to your agent: click Copy handoff prompt in the VS Code success notification, then paste into your agent chat. The prompt includes the saved SVG path. If your agent cannot access that path, attach the SVG too.
On first use, a notification offers Open guide. Reopen this guide anytime with redpen: Show Getting Started.
English demo with the real canvas; the final agent handoff is illustrated.
One file, three layers
Each SVG contains original, modified, and annotations layers, with numbered requests beside the image.
Import it back into redpen to keep editing. The export expands to fit your objects, with transparent space outside the screenshot.
Quick tips
Floating controls: drawing tools sit at the top left; undo, import, export, and the Requests toggle sit at the top right. Requests starts collapsed.
Comments on the canvas: hover an object or its numbered comment icon to read a request; click the text field to edit. While typing, the comment stays open. Press Escape or leave the field to apply changes; More options opens the sidebar.
Paste another image: adds a movable object. Double-click the background before pasting to replace it while keeping existing objects in place.
Select and edit: drag with Select to select multiple objects; ⌘/Ctrl-click to toggle selection. Drag arrow endpoints to change direction or length. Press Delete to remove objects.
Use the sidebar: rotate or flip images, or click ＋ beside Requests to add a general request.
Undo / redo: ⌘/Ctrl Z / ⌘/Ctrl Shift Z. New canvases autosave locally.
Notifications & saved work
- Notifications start with redpen:. Export success offers Copy handoff prompt; errors explain what to fix. Canceling the save dialog does not export a file.
- Missed the export notification? Open the canvas Settings → Copy handoff prompt. You can also edit the prompt there;
{svgPath} inserts the exported file path.
- New canvases autosave locally. The internal
.redpen.json file is a draft; share the exported SVG with your agent.
- Use Import to reopen a redpen SVG and continue editing. If an older draft opens as JSON, use Reopen Editor With… → redpen Canvas.
Development
Requires Node.js 24+. Run npm run build, then press F5 to test the extension; use npm run dev for the browser preview.
Checks: npm run typecheck, npm test, npm run test:e2e, and npm run test:vscode (requires a local VS Code installation).
License
MIT · Third-party notices
