Design the real thing.
A visual development environment to edit
production UI and ship changes as PRs.
1
Inspect your live app
Hover any element to see computed styles, dimensions, and hierarchy.
Get Started
<button>
LayoutFillBorder
Sizing
W120
H32
Padding
T6
R16
B6
L16
2
Refine visually
Drag to adjust padding, radius, colors. Changes happen in real time.
24
24
8
Button
<button>
LayoutRadiusColors
Padding
H24
V8
Radius
6
3
AI writes the code
Claude Code translates visual edits into clean, minimal code changes.
Agent
button.tsx
4 className="btn-primary"
- padding: "8px 12px"
+ padding: "8px 24px"
7 borderRadius: "20px"
+ borderRadius: "6px"
9>
10 Button
+3 additions-1 deletion
4
Ship as a pull request
Review the diff, merge when ready. No terminal, no context switching.
Refine button padding and radius
#42ready to mergevisual-edit
button.tsx
+3-1
- padding: "8px 12px"
+ padding: "8px 24px"
+ borderRadius: "6px"
Endless control.
Built for production.
Measure
20
24
Get Started
24
Refine
<button>
LayoutRadiusBorderShadowColors
Layout
Padding
24
8
Radius
16
Border
Shadow
Inspect
Button
<button>
LayoutFillBorder
Sizing
W120
H32
Padding
T6
R16
B6
L16
Colors
text
subtext0
overlay0
surface0
mantle
base
mauve
blue
green
red
#8839ef
Works with your stack.
Drop it into any modern web project — no lock-in, no rewrites.
FrameworkReact
FrameworkNext.js
FrameworkRemix
BuildVite
StylingTailwind CSS
Componentsshadcn/ui
ComponentsRadix UI
EditorVS Code
EditorCursor
AIClaude Code
Version ControlGitHub
Version ControlGit
+ more
Visual Editing
Point-and-click interface for real production codeReal Code Output
Every change maps to clean, readable code diffsNo Terminal Required
Ship changes without touching the command lineBuilt-in AI Agents
Claude Code handles generation, builds, and fixesGit-Native Workflow
Create pull requests directly from the visual editorLive on Production
Edit your actual running application, not a mockupSafe by Design
Scoped style changes, no arbitrary code execution