ScreenToPrompt

About

Stop struggling to describe UI changes in words. ScreenToPrompt lets you show your AI exactly what you mean.

Capture any webpage, mark it up with visual tools, and generate a precise AI prompt — all without leaving Chrome. Copy the result and paste it into any AI coding assistant that accepts text or images.

HOW IT WORKS

1. Click the extension icon and choose a capture mode: Current View, Full Page (with pan & zoom), or Selected Area.
2. Annotate your screenshot using arrows, rectangles, text, comments, sketches, blur, erase, numbered markers, and an eyedropper.
3. Click "Prompt" — AI analyzes your annotations and generates a structured, copy-ready instruction.
4. Paste into your favorite AI coding tool and watch it understand exactly what you meant.

ANNOTATION TOOLS

Arrows — Point from A to B. AI interprets this as "move this element here."
Rectangles — Highlight areas with stroke, filled, or dashed outlines.
Text labels — Write instructions like "remove," "bigger," or "change to blue" directly on the screenshot.
Comments — Attach detailed instructions to specific elements.
Curved comments — Figma-style comments with bezier connectors and independent text positioning.
Sketch / Freehand — Draw circles to highlight, X marks to delete, or lines to connect elements.
Blur — Pixelate API keys, passwords, and personal data before sharing with AI.
Erase / Cover — Hide content with a solid fill. Use the eyedropper to match the background color.
Number markers — Place numbered crosshair markers for step-by-step instructions.
Eyedropper — Pick any color from the screenshot to match your design system.

AI PROMPT GENERATION

When you click "Prompt," your chosen AI provider analyzes the screenshot with all your annotations:
- Text labels become direct instructions
- Arrows become movement directives
- Sketch marks (X = delete, circle = highlight) are interpreted automatically
- Comments provide detailed context tied to specific areas
- Number markers create ordered step-by-step sequences

The generated prompt is editable — tweak it before copying. You can copy as text or as a combined image (screenshot + prompt merged together).

SUPPORTED AI PROVIDERS

Choose from OpenAI (GPT-4o) or Google (Gemini). Google offers a free API key — no credit card required. Bring your own key and communication goes directly from your browser to the provider. ScreenToPrompt has no server in the middle.

PRIVACY FIRST

- No data collection, no analytics, no tracking
- No user accounts or sign-ups
- Screenshots never leave your browser until you copy them
- Your API key is stored locally in Chrome's sandboxed storage
- All processing happens in your browser
- We have no servers — zero data is transmitted to us

ADDITIONAL FEATURES

- Full Page capture with scroll-stitching and pan & zoom navigation
- Layers panel (Figma-style) to reorder, toggle visibility, or delete individual annotations
- Screenshot selection tool with rectangle and freeform lasso modes
- Keyboard shortcuts: Ctrl+Z to undo, arrow keys to nudge, Delete to remove
- Copy annotated screenshot to clipboard as an image
- Color palette with 8 swatches plus eyedropper
- Works on any webpage

Perfect for developers, designers, and product managers who use AI coding assistants to implement UI changes. Instead of writing paragraphs describing what to change, just show it.