PixelPrompt

PixelPrompt — A Chrome extension for selecting UI elements and copying their code.

**Point at your UI. Describe the change. Let AI do the rest.** Editing frontend code with AI is powerful — but describing *which* part of the UI you want changed is surprisingly hard. You're stuck typing things like "the card in the second row" or "the button next to the search bar" into a prompt box that has zero visual context. PixelPrompt fixes this. It's a Chrome extension that lets you **visually select** any region of your running application, write a prompt describing what you want changed, and copies a rich, structured context bundle — complete with the **original source file paths and code** — straight to your clipboard. Paste it into any AI assistant (ChatGPT, Claude, Copilot, Cursor, etc.) and get back a precise edit against the right files. ## How It Works 1. **Click the PixelPrompt icon** in your Chrome toolbar. The page dims and your cursor becomes a crosshair. 2. **Click and drag** to draw a selection rectangle around the part of the UI you want to change. 3. **Write your prompt** in the popover that appears (e.g. *"Make this card's border thicker and add a hover shadow"*). 4. **Hit Copy.** PixelPrompt resolves the selected elements back to their original source files, bundles everything into a Markdown document, and copies it to your clipboard. 5. **Paste into your AI tool** of choice. The AI now has the exact source code, file paths, and your visual intent — no guesswork.