Bring your codebase. Shape the real prototype.

Connect the local project you already have to an open canvas. Design on its running interface, test real interactions, and direct your coding agent without creating a separate design artifact.

Start building

Use your own agentCodexClaude CodeCursor

The canvas is the product

Not anotherdesign editor.

Visual Wizard begins with your existing codebase and the real prototype it already renders. You change that working reality—not a disconnected mockup—and your coding agent receives the exact source context when a direction is ready to apply.

Visual changeExplored on the running prototype

Code changeApplied with your coding agent

One live prototype

RenderedEditable

An Open Menu button selected directly on the Visual Wizard canvas

Live interface

frames/Home.jsx

1import React, { useState } from 'react';

2import { Menu, X } from 'lucide-react';

3export default function Home() {

4 const [menuOpen, setMenuOpen] = useState(false);

5 return (

6 <main className="flex bg-[#f4f1ea] p-6">

7 <div className="relative">

8 <button

9 type="button" aria-expanded={menuOpen}

10 aria-label="Toggle navigation menu"

11 onClick={() => setMenuOpen(!menuOpen)}

12 className="group flex rounded-full bg-[#262722] px-6 py-3"

13 ><span>Open Menu</span>

14 {menuOpen ? <X size={15} /> : <Menu size={16} />}

15 </button>

16 {menuOpen && (

17 <nav className="absolute mt-3 grid w-52 rounded-2xl bg-[#262722] p-3">

18 <a href="/work">Selected work</a>

19 <a href="/studio">Studio</a>

20 </nav>

21 )}

22 </div></main>

23 );

24}

JSX syntaxSave

Start with what already exists

Bring the project you already have.

Visual Wizard opens your local app as a connected preview. The repository remains the source of truth while the canvas gives you room to inspect, compare, and shape a direction before it becomes a source change.

01Connect

Ask your MCP-connected agent to place the running local project on the canvas.

02Explore

Select the rendered interface and try layout, style, and structure changes in context.

03Apply

When the direction is ready, let the agent translate the exact visual intent into source.

Give your agent a real place to work.

Connect Codex, Claude Code, Cursor, or any MCP-compatible agent to the live Visual Wizard canvas. It can read explicit frame and selection context, create directions beside the current work, and edit the prototype code behind what you see.

Build with your agent

Connect your agent

One canvas. Your preferred workflow.

Ready

CodexOpenAI01

Claude CodeAnthropic02

CursorAI code editor03

Canvas contextFrame toolsLive selectionPrototype source

Source of truth01

A working prototype underneath

Every frame is backed by editable application code, not a flattened mockup or an export copy.

Direct manipulation02

Design on the rendered interface

Select, move, resize, nest, reorder, and style the exact elements your application renders.

Agent context03

Point your agent at the canvas

Give a built-in or MCP-connected coding agent the active frame, selection, and real source.

Runtime04

See every change live

Visual edits, code changes, and agent work return to the same running prototype without a handoff step.

Multiple directions, one canvas

Keep product states and directions side by side.

A board can hold complete pages, reusable components, and alternate directions at once. Every frame runs independently, while Layers and source stay tied to the exact frame you select.

Boards and framesParallel alternativesLayers tied to real DOMStyle in context

Visual Wizard canvas showing three working interface frames with Boards, Layers, and Style panels

Visual Wizard Edit Code modal showing the source of a selected prototype frame

Source when you need it

Open the code behind what you see.

Move from a selected element to its JSX without switching mental models. Edit the component, save it, and return to the same live frame. There is no one-way export and no generated copy to merge.

Full JSX accessEditor with syntax supportSource for each frameSave back to canvas

Open the workspace

Connected design tokens

Reuse decisions without hiding the code.

Define typography, color, and spacing tokens that remain real Tailwind-facing decisions. Connected elements can evolve as a system while every frame keeps readable source underneath.

TypographyColorsSpacingStable token links

Visual Wizard design tokens panel with typography, color, and spacing tokens

Currently free in beta

Point, prompt, or type. Keep one prototype.

Work directly on a running prototype with visual tools and the coding agent you already trust. Every change lands in the product you are actually shaping.

Start building