Screen2prompt — AI skill for Claude Code

Screen2Prompt

A free, open source dev-only widget that overlays any web app — letting developers annotate UI elements, place wireframe components, and generate structured markdown prompts for AI coding agents.

Instead of typing _"change the blue button on the sidebar"_, you click the element, write the feedback, and Screen2Prompt generates a structured markdown block with the exact CSS selector, React component tree, computed styles, and your feedback — everything an AI agent needs to act correctly.

**Works with:** Claude Code, Cursor, Codex, Windsurf, and any AI tool that accepts text prompts.

---

Modes

Mode	Description
Annotation	Click any element on the page and annotate it
Layout	Drag wireframe components over the existing page
Wireframe	Blank canvas to design new screens from scratch

All modes are free and open source.

---

Quick Start

CDN (any framework)

Next.js (App Router)

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        {children}
        {process.env.NODE_ENV === 'development' && (
          
        )}
      
    
  )
}

Vite + React

// src/main.tsx
if (import.meta.env.DEV) {
  const script = document.createElement('script')
  script.src = 'https://cdn.screen2prompt.supalab.dev/v1/screen2prompt.js'
  document.head.appendChild(script)
}

Once loaded, a floating toolbar appears at the bottom of the page. Use **Cmd+Shift+F** (or **Ctrl+Shift+F**) to toggle it.

---

npm

bun add screen2prompt   # or npm / yarn / pnpm

// Next.js
import { Screen2Promp