A configurable workstation for design engineers & their agents.
Design, prototype, build and implement in one tool. A canvas made of the React components you already ship, with your agent beside you.
- 01 · DesignOn a canvas made of your real components, with your agent.
- 02 · PrototypePresent real screens, share a link, collect comments.
- 03 · BuildProps, states and motion on the actual React code.
- 04 · ImplementSave to your codebase and iterate from what shipped.
Your agent works on your canvas.
Point at what to change and describe it. Chat, comment, or send the request from the agent you already use. The edit happens on the canvas while you watch.
Comment, and the agent replies
Pin a comment where the change belongs and mention @Agent. The edit and the reply land in the same thread.
Bring your own agent
Claude Code, Codex or Cursor connect over MCP and work on the canvas, on the plan you already pay for.
Agents work in parallel
Open projects in tabs and let an agent run in each one. The tab strip shows who is still working.
Start from what you already have.
Your codebase, a live page, or a Figma frame. Each one lands on the canvas as editable layers.
Import your design system
Open a folder or connect GitHub. Your agent scans the repo and draws the reference page: tokens, icons and every component, ready in the Assets panel.
Capture from the browser
A live preview frame on the canvas, or the Chrome extension on any site. Pick an element, paste it as layers.
Paste from Figma
Copy a frame, paste it here. Auto layout, text, vectors and effects stay editable.
A full design canvas.
Layout is real CSS. The styles inspector covers everything from gradients to filters. And when you make your own components, they bring their own controls too.
Your fonts, shared with the team
Pick a font installed on your Mac. Lunagraph adds it to the project, so teammates design with it without installing anything.
Custom controls, if you want them
Components you make show their props as controls in the inspector: a dithering slider, a palette, a toggle. Variants are the real variants.
From shadcn to three.js. Design any experience.
Components run as real React on the canvas. A shadcn form, a checkout flow, a motion sequence, a WebGL scene: if it renders in your app, you design with it here, and you hand it off whole.
Start from shadcn, or from your repo
Add the shadcn set to an empty project in one click, or import the components you already ship.
States are real states
Switch to Interact mode and click the component. Hover, open and loading states come from its code, not from a copy you drew.
Hand off the whole experience
Copy any frame as React, nested component code included, or read its CSS in the Inspect tab. The handoff is the design.
Prototype on the same canvas, share a link with one click.
Ask chat to wire your screens into a flow, present it full screen at any viewport, and send the link. Every component stays live, so people click the real thing. No deploy, no pull request.
Ask chat to prototype the flow
Select the screens or states in your flow and ask your agent to connect them. It writes the real navigation into the components.
Present it, then send the link
Present steps through the frames on a page at any viewport size. Share the file link and your team opens the same player.
Design on the canvas, ship it back to the repo.
Your components come in from the codebase once. When a design is done, your agent writes it back into the same files. Review the diff, commit from the Git panel, and the next design starts from what shipped.
Import a local codebase
Open a project folder from your computer. Its components and styles come onto the canvas, and your agent can edit the files in it.
Implement from the chat
Ask your agent to implement a design. It edits the real files in your repository and opens a pull request, right from the canvas.
Import your design system
Your agent scans the repo and draws a reference page: tokens, icons and every component, ready in the Assets panel.
New here? Get set up in three steps.
Connect your agent, connect your codebase, import your design system. Each guide takes a few minutes and includes a video.