Visual Prompt Generation for Agents.

Create and tweak screens 2x faster in Claude Code, Cursor, Codex, or any other AI tool using Screen2Prompt.

How it works

Screen2Prompt converts UI feedback into structured markdown that AI coding agents can use precisely. Click any element, add annotations, drag in wireframe components, or sketch a new screen, then paste the output into Claude Code, Codex, or any other AI tool.

Install the widget

Install the Screen2Prompt widget in your dev environment. It works with any web-based UI. No code changes needed.

Activate on your screen

Click the Screen2Prompt icon in the corner of your dev environment. The annotation layer loads without touching your codebase.

Click, annotate, wireframe

Click any element to annotate it. Drag wireframe components to show where new UI belongs. Or open a blank canvas to sketch a new screen from scratch.

Copy the structured output

Hit Copy. Screen2Prompt generates a precise markdown block with the exact CSS selector, React component tree, computed styles, and your feedback — all at once.

Paste into your AI agent

Drop it into Claude Code, Codex, or any AI tool. No more vague descriptions — the agent knows exactly which element, where it lives, and what to change.

Prompt Setup

One script tag. Dev-only. Free and open source.

paste into Claude Code, Codex, or any AI agent

# About Screen2Prompt

Screen2Prompt is a free, open source, development-only widget that overlays the user's app
and lets them communicate visual UI changes to AI agents with precision. Instead of typing
vague descriptions like "change the blue button on the sidebar", the user clicks the element,
writes the feedback, and Screen2Prompt generates a structured markdown block containing the
exact CSS selector, React component tree, computed styles, and the feedback — everything an
AI agent needs to act correctly.

All three modes are available with no license required:
- Annotation Mode: click any element and annotate it.
- Layout Mode: drag wireframe components over the existing page.
- Wireframe Mode: blank canvas for designing new screens from scratch.

It is installed as a single CDN script tag and must never run in production.

---

# Setup Instructions

Set up Screen2Prompt in this workspace.

1. Find the framework (Next.js App Router, Pages Router, Vite, Nuxt, etc.)
2. Add a dev-only script tag — it must never run in production:
   - Next.js App Router: add a next/script tag in app/layout.tsx wrapped in
     {process.env.NODE_ENV === 'development' && (...)}
   - Vite / React: inject dynamically in src/main.tsx inside if (import.meta.env.DEV)
3. CDN URL: https://cdn.screen2prompt.supalab.dev/v1/screen2prompt.js
4. Start the dev server. A floating toolbar should appear in the bottom-right corner.
5. If the toolbar is missing, check the browser console for errors containing "screen2prompt".

All three modes — Annotation, Layout, and Wireframe — are free and open source.