the visual canvas for coding agents build ui, motion and 3D with Claude Code, Codex, Cursor and more.
recto runs locally, giving your coding agent a visual workspace to build in, while you see every change, edit anything directly, or simply reprompt. all without leaving recto.
02bring your agentsYour tools, in the same workspace.
recto works with the tools you already use.
recto automatically detects the coding agents installed on your computer.
use their CLI directly inside recto. install another agent and it becomes available too.
you can even work with multiple agents on the same design.
no switching windows. no extra setup.
Onda
Overview Brand +
83% J
Hero directionClaude Code · started just nowHero directionCodex · started just nowHero directionCursor · started just nowHero directionOpenCode · started just now
Claude Code
~/onda
❯ Give this hero a warmer feel and more room to breathe.
✻ Thinking…
● Read(pages/index.html) ⎿ Read 86 lines
● Update(pages/index.html) ⎿ Added 2 lines, removed 2 − A new perspective. + A softer kind of everyday.
● A warmer headline, with more space around the hero.
✻ Worked for 12s
❯? for shortcuts
_ OpenAI Codex
directory: ~/onda
› Give this hero a warmer feel and more room to breathe.
• Working…
• Explored Read pages/index.html
• Edited pages/index.html − A new perspective. + A softer kind of everyday.
• Updated the headline and hero spacing.
›? for shortcuts
Cursor Agent
~/onda
→ Give this hero a warmer feel and more room to breathe.
Thinking…
Read pages/index.html Reviewing the hero styles.
Edited pages/index.html − A new perspective. + A softer kind of everyday.
The headline and spacing are updated.
→? for shortcuts
opencode
Hero direction · ~/onda
Give this hero a warmer feel and more room to breathe.
Thinking…
→ Read pages/index.html
← Edit pages/index.html − A new perspective. + A softer kind of everyday.
Updated the headline and spacing. Ready to review.
›? for shortcuts
Desktop / index560Ask an agent
ondaObjects About
CONSIDERED OBJECTS. EVERYDAY JOY.
A softer kind of everyday.
Thoughtful objects for a life that looks a little more like you.
Find your everyday
Considered formEveryday ritualsA new perspective
Real HTML. Still yours to edit.
One shared projectNo MCP setup needed
03Local and fastDirectly on your computer.
built locally. built for speed.
recto and your coding agents work together directly on your computer.
No MCP setup.
No API configuration.
No network round-trips between recto and your agent.
just your agent, your canvas and your machine.
fast by design.
How it worksPrompt, edit, prompt again.
from prompt to pixels. together. 01Connect
Configure your coding agent with Recto.
Agents2 ready
Claude CodeReady
CodexReady
CursorSet up
OpenCodeSet up
02Create
Describe what you want and let your agent start building.
Claude Code
~/onda
❯ A landing page for Onda. Considered objects, warm and quiet.
● Write(pages/index.html) ⎿ Wrote 86 lines
✻ Building the hero…
❯
03Edit
Change anything directly on the canvas.
Desktop / index
ondaObjects About
CONSIDERED OBJECTS. EVERYDAY JOY.
A softer kind of everyday.
116 × 48
Thoughtful objects for a life that looks a little more like you.
04Reprompt
Select what you want improved and ask your agent to take it further. ondaObjects About
CONSIDERED OBJECTS. EVERYDAY JOY.
A softer kind of everyday.
Thoughtful objects for a life that looks a little more like you.
Find your everyday
Ask an agent
Warmer, with more room.
Send to agent
repeat until it feels right.
04An open canvasRoom for every direction.
a canvas for every version of your idea.
start with a direction. explore it with your agent. keep every variation side by side, then make the details your own.
Onda
Overview Brand +
83% J
01 / First thought560
ondaSTUDIO
A NEW PERSPECTIVE
Objects with another angle.
Considered objects. Unexpected perspectives.
Explore the collection ↗
01
Considered form
02
Everyday rituals
03
A new perspective
02 / After hours560
ondaSTUDIO
A NEW PERSPECTIVE
A softer kind of everyday.
Considered objects. Unexpected perspectives.
Explore the collection ↗
01
Considered form
02
Everyday rituals
03
A new perspective
03 / A fresh angle560
ondaSTUDIO
A NEW PERSPECTIVE
Made to stand apart.
Considered objects. Unexpected perspectives.
Explore the collection ↗
01
Considered form
02
Everyday rituals
03
A new perspective
04 / Less, but better560
ondaSTUDIO
A NEW PERSPECTIVE
Objects with another angle.
Considered objects. Unexpected perspectives.
Explore the collection ↗
01
Considered form
02
Everyday rituals
03
A new perspective
05 / New perspective560
ondaSTUDIO
A NEW PERSPECTIVE
A softer kind of everyday.
Considered objects. Unexpected perspectives.
Explore the collection ↗
01
Considered form
02
Everyday rituals
03
A new perspective
06 / A new direction560
Exploring a new direction…
ondaSTUDIO
A NEW PERSPECTIVE
A warmer way to live.
Considered objects. Unexpected perspectives.
Explore the collection ↗
01
Considered form
02
Everyday rituals
03
A new perspective
One idea, ready to explore.Claude Code · Thinking…● Write(pages/warm-direction.html)Claude Code · New design ready.
05Comments & handoffA conversation, right on the design.
point to it. make it better.
pin a comment to any part of your design. send it straight to your agent with the selected element and your feedback. see the change, right where you asked for it.
01
point to the detail
use the comment tool and click the element. 02
leave your direction
add your words, an image or a drawing.
03
send to your agent
pass the comment and its context to the agent tab.
watch your comment become a change.
ondaObjects AboutOBJECTS FOR LIVINGGood things. Made simply.Your everyday. A little brighter.1Thoughtful forms. A little more you.Considered form. Everyday rituals.
CommentHero headline
You · just now
Make this feel warmer and more personal. Keep thelayout as it is.
AttachDrawDrawSend to agentSend to agentPost
Claude Code · just now
Updated the headline. Ready for your review.
06Ways to createAlongside the rest of your design.
one canvas. more ways to create.
01
UI
Design interfaces, websites, landing pages, dashboards and product experiences.
Desktop / index
onda
Objects About
A softer kind of everyday.
Thoughtful objects for a life that looks a little more like you.
Find your everyday
02
Motion
Create interactions, transitions and animations with a visual timeline.
0s1s2s3s4s
Loop
Headline
Camera
03
SVG
Create and edit scalable graphics without leaving your workspace.
04
3D
Build and experiment with 3D elements alongside the rest of your design.
07Web importBring a design from the web into Recto.
copy anything. make it yours.
found an interface you like?
bring a design from the web into recto and start editing it.
https://example.com⌘V
example-com Imported
ondaObjects About
CONSIDERED OBJECTS. EVERYDAY JOY.
A softer kind of everyday.
159 × 65
Thoughtful objects for a life that looks a little more like you.
Find your everyday
01
Change the layout.
311 × 48
02
Restyle it.
Fill
03
Animateit.
Or let your agent take it somewhere completely different.
Figma importcoming soon
08Design systemChange a token once.
one design system. every design consistent.
every recto project keeps its design system in one place: colours, type, spacing and components.
your agent reads it before it designs.
change a token once. every page follows.
start from an included system, capture one from a website, or build your own with your agent.
Plain CSS variables underneath.
theme.css:root
--color-surface: #faf9f6;
--color-ink: #29251f;
--color-brand: #e5a171;
--font-display: Georgia, serif;
--text-heading: 40px;
--space-md: 24px;
--radius-md: 12px;
Desktop / index
onda
A softer kind of everyday.
Find your everyday
Desktop / objects
onda
Objects for slow mornings.
See all objects
Desktop / about
onda
Made slowly, by hand.
Visit the studio
09How it worksWatch it build. Make it yours.
everything happens here.
real HTML & CSS underneath.
<h3>Real HTML & CSS underneath.</h3> every recto design is built on HTML and CSS.
that means what you create isn't trapped inside recto.
01
open recto
your installed coding agents are detected automatically.
02
start prompting
choose an agent and describe what you want to create.
03
watch it build
see the design appear directly on the canvas.
04
make it yours
Edit visually, select and reprompt, or continue working with your agent.
05
export
take your HTML and CSS wherever you want.
export it.
use it.
ship it.
your design is already closer to production.
10Questions and answersEverything remains editable on the canvas.
FAQ
01
What is Recto?
Recto is a visual design canvas for coding agents. It lets you create UI, motion, SVG and 3D designs with agents such as Claude Code and Codex while keeping everything directly editable.
02
Is Recto an AI model?
No. Recto works with the coding agents already installed on your computer instead of replacing them.
03
Which coding agents does Recto support?
Recto automatically detects supported coding agents installed on your system and lets you use them directly inside Recto. You can also work with multiple agents.
04
Can I edit what my agent creates?
Yes. Everything remains editable on the canvas. You can drag, resize, style, animate and modify elements directly, then continue prompting from where you left off.
05
Does Recto generate real code?
Yes. Recto uses HTML and CSS underneath your designs, making them easy to export and use outside Recto.
06
Does Recto require MCP or an API?
No. Recto works locally with your coding agents without requiring MCP, API configuration or additional network calls between Recto and the agent.
07
Can I import existing designs?
You can bring designs from websites into Recto. Figma import is coming soon.
08
How much does Recto cost?
Recto is free.
09
Which platforms are supported?
Recto is available for Mac, Windows and Linux.
11Download RectoYou both design.
Figma gave designers a canvas. coding agents need one too.
1050 × 208
recto brings visual control to the way software is being built now.