recto. download recto.

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.

Free download recto.
see how it works

one canvas. more ways to create.

UI SVG 3D Motion
01Create with AI AI builds. You direct.

your agent can code.
now it can design with you.

coding agents are great at building.

but designing with them still means jumping between terminals, browser previews, screen shots and prompts like:

[Image #1] Move the second card
a little to the left.

recto gives your agent a real visual canvas.

  • select the card instead.
  • move it yourself.
  • or tell your agent what you want changed.
See an agent at work
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 now Hero directionCodex · started just now Hero directionCursor · started just now Hero 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
onda Objects   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 project No MCP setup needed
03Local and fast Directly on your computer.

built locally.
built for speed.

recto and your coding agents work together directly on your computer.

just your agent, your canvas and your machine.

fast by design.

How it works Prompt, edit, prompt again.

from prompt to pixels.
together.

  1. 01Connect

    Configure your coding agent with Recto.

  2. 02Create

    Describe what you want and let your agent start building.

  3. 03Edit

    Change anything directly on the canvas.

  4. 04Reprompt

    Select what you want improved and ask your agent to take it further.

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

onda STUDIO

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

onda STUDIO

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

onda STUDIO

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

onda STUDIO

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

onda STUDIO

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

onda STUDIO

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.

unlimited frames. unlimited design.

bring your agent along
05Comments & handoff A 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.

  1. point to the detail

    use the comment tool and click the element.

  2. leave your direction

    add your words, an image or a drawing.

  3. send to your agent

    pass the comment and its context to the agent tab.

watch your comment become a change.

06Ways to create Alongside the rest of your design.

one canvas. more ways to create.

  1. UI

    Design interfaces, websites, landing pages, dashboards and product experiences.

  2. Motion

    Create interactions, transitions and animations with a visual timeline.

  3. SVG

    Create and edit scalable graphics without leaving your workspace.

  4. 3D

    Build and experiment with 3D elements alongside the rest of your design.

07Web import Bring 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.

  • 01

    Change the layout.

    311 × 48
  • 02

    Restyle it.

  • 03

    Animate it.

Or let your agent take it
somewhere completely different.

Figma import coming soon

08Design system Change 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.

09How it works Watch it build. Make it yours.

everything happens here.

real HTML & CSS
underneath.

every recto design is built
on HTML and CSS.

that means what you create isn't trapped inside recto.

  1. open recto

    your installed coding agents are detected automatically.

  2. start prompting

    choose an agent and describe what you want to create.

  3. watch it build

    see the design appear directly on the canvas.

  4. make it yours

    Edit visually, select and reprompt, or continue working with your agent.

  5. export

    take your HTML and CSS wherever you want.

  1. export it.
  2. use it.
  3. ship it.

your design is already
closer to production.

10Questions and answers Everything 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 Recto You both design.

Figma gave designers a canvas.
coding agents need one too.

recto brings visual control to the way software is being built now.

  • your agent writes.
  • you direct.
  • you both design.

Available for Mac, Windows and Linux

download recto

desktop app · free · v0.1.5

latest release today