VISUAL CONTEXT FOR Claude Code Cursor Codex Gemini Qwen █

Click, tweak, and annotate any webpage, then export a runnable context pack your agent can apply to your codebase.

TRY_LUMI STAR_ON_GITHUB
generated-context.md
Preview_Mode
100%
h1
Lumi is the Visual Prompt Layer for Coding Agents
16px
You
# User Intent
@h1 @shot 1
# Context
Target 1:h1 Selector:h1
# Visual Edits
I have applied the following visual changes. Please update the code to match:
## Edit 1: h1
Selector: h1
Changes:
-text-content:"Lumi is the Visual Prompt Layer..."
-padding-bottom:"16px"
-color:"#3B82F6"
# Screenshots
1 screenshot(s) captured.
CONTEXT READY
VISUAL DIFF
Compatible Agents
Claude Code
Cursor
Codex
Gemini
Qwen
Trae
Amp
01

VISUAL_
EDITOR

Change text, spacing, and styles directly on the real page. Lumi turns every tweak into precise instructions for coding agents.

FIG. 01
T
div.hero

Build faster with Lumi

Ship pixel-perfect code without leaving the browser.

font-size:24px
padding:16px 20px
color:#1a1a1a
|<
800px
>|
02

ANNOTA-
TIONS

Draw, highlight, and comment right on the interface to show what you want. Lumi captures your intent, not just pixels.

FIG. 02
Make this heading bolder and blue
Reduce spacing here to 8px
|<
800px
>|
03

CONTEXT_
EXPORT

One click exports diffs, screenshots, and intent into a portable context block you can drop into any agent.

FIG. 03
Context Pack
context.md 2.4 KB
shot-1.png 148 KB
diff.patch 892 B
COPY_PROMPT
# Visual Edits
Please update the code:

## Edit 1: h1
- font-weight: 800
- color: #3B82F6
- margin-bottom: 8px

# Screenshots
1 screenshot(s)
|<
800px
>|
Process

HOW IT WORKS

1
CLICK
Select any element on a live webpage. Lumi identifies the component and its properties.
——>
2
TWEAK
Edit text, adjust spacing, change colors. Every modification is tracked as a structured diff.
——>
3
EXPORT
Copy the context pack. Drop it into Claude Code, Cursor, or any coding agent. Done.

START SEEING.

Be first to experience Lumi AI.