Vibe Sketch

Visual prompts for AI coding agents, right inside VS Code.

Vibe Sketch helps you explain by sketching UI ideas and changes to Claude Code, Codex, Cursor, Copilot, and other AI coding agents.

Some AI coding tools are great when your product is a live web page that can be inspected or clicked. But not every product is in a web browser, or it's not on any platform yet!

Vibe Sketch is for the moments when you need to show visual intent from anywhere:

• a native iOS app screenshot
• an Android app screenshot
• a simulator screenshot
• a blank idea before the screen exists
• a rough layout you do not want to explain in paragraphs

Draw it. Explain it briefly. Send it to your coding agent.

Why Vibe Sketch?

AI coding agents can understand visual context, but creating that context is still annoying.

Usually you have to:

1. Take a screenshot.
2. Open another app to mark it up.
3. Save the image.
4. Find the file path.
5. Write a prompt.
6. Add code context manually.
7. Send everything to your agent.

Vibe Sketch keeps that workflow inside VS Code.

It turns:

screenshot or sketch
+ your short explanation
+ current file
+ selected code

into a structured prompt package your agent can use.

Built for UI Work Beyond the Browser

Live browser tools are useful when the UI already exists as a web page.

Vibe Sketch is useful when the visual context is harder to inspect directly:

• native mobile UI
• simulator screenshots
• design screenshots
• product references
• rough interface ideas
• visual bugs that are easier to show than describe
• early screens before implementation exists

Instead of relying on clickable DOM elements, Vibe Sketch lets you create a portable visual prompt from any screenshot or sketch.

What You Can Do

• Paste or upload a screenshot.
• Draw from a blank canvas.
• Mark up UI with pen, boxes, arrows, text notes, pins, and X marks.
• Write what you want the agent to do in plain language.
• Include the current file path.
• Include selected code from your editor.
• Save a reusable .png + .md prompt package.
• Copy a ready-to-send prompt for Claude, Codex, or Cursor.

Main Workflow

Open Vibe Sketch
→ paste/upload screenshot or draw from blank
→ mark up the UI
→ explain what you want the agent to do
→ include current file or selected code
→ copy prompt for Claude, Codex, or Cursor

Not Just a Drawing Tool

Vibe Sketch is not trying to replace Figma, Excalidraw, tldraw, or browser inspectors.

It is a lightweight visual prompt composer for AI coding workflows.

The value is not the canvas itself. The value is the handoff:

visual context
+ user intent
+ repo context
+ agent-ready prompt

Save Prompt Packages in Your Repo

When you save or copy a prompt, Vibe Sketch creates files in your workspace:

.vibe-sketches/
├─ checkout-cta-fix.png
└─ checkout-cta-fix.md

This makes your visual prompts reusable, shareable, and easy to reference later.

Agent Handoff

Vibe Sketch can generate prompt formats for:

• Claude Code
• Codex
• Cursor
• other AI coding agents

For Codex, it can create a command-style handoff with the image path included.

For Claude and Cursor, it creates paste-ready instructions with the visual prompt path, user note, current file, and selected code context.

Best For

• AI-assisted frontend development
• native iOS or Android UI iteration
• React Native / Expo UI work
• Flutter UI screenshots
• mobile simulator screenshots
• UI bug explanation
• Figma or product screenshot feedback
• rough screen ideas before implementation
• fixing generated UI that is close, but not quite

Example

You paste a mobile app screenshot, draw an arrow, mark an area, and write:

Move the CTA under the summary card, remove the empty right panel, and keep the current design system styling.

Vibe Sketch turns that into a structured prompt with:

• visual prompt image path
• user intent
• prompt mode
• current file
• selected code, if enabled
• implementation guardrails

Then you paste it into your coding agent.

Positioning

Stop describing UI changes. Draw them.

Vibe Sketch is for moments when you know what you want visually, but explaining it in text would take too long.

It helps your AI coding agent understand layout, hierarchy, spacing, flow, and UI intent faster — especially when the UI is not a clickable web page.