Recto
Recto is a desktop application that provides a visual canvas for running coding agents locally. It detects installed agents (Claude Code, Codex, Cursor, OpenCode) and executes their CLI directly inside the canvas, allowing designers to see generated UI, motion, SVG, and 3D designs in real-time. Designers can edit any element visually by dragging, resizing, and styling without touching code, or pin comments to elements and send them back to the agent as prompts. Recto maintains a design system with tokens that agents read before generating, and exports finished designs as HTML/CSS, SVG, PNG, video, or 3D files.
Recto is a desktop application, integrating with Claude Code, Codex, Cursor and OpenCode. InnovaAI rates it 4.6 of 10 for agency adoption, best for Designer, Project Manager and Founder roles.
Agency Audit
Recto is a local visual canvas that runs coding agents (Claude Code, Codex, Cursor, OpenCode) and lets designers edit their output in real-time without switching windows or terminals. Designers can drag, resize, style, and animate agent-generated UI, motion, SVG, and 3D directly on the canvas, then pin comments back to the agent for revisions. Web design and product design teams benefit most, especially those already using AI coding agents and spending significant time translating agent output into production-ready designs.
3recommended
24/mo
No paid plan published
Low
Illustrative scenario. Not a guarantee. Net capacity needs a verified paid base plan, and none is published for this service, so it is not modeled. Hours saved come from the service estimate; implementation, taxes, and unprovided usage charges are excluded.
- Designer handling agent-generated design iteration
- Project Manager handling design feedback consolidation
- Founder handling design system token enforcement
- Your agency does not currently use Claude Code, Codex, Cursor, or OpenCode; Recto's value depends entirely on having a coding agent to direct, and setup friction outweighs benefit for teams still evaluating agents.
- Your design workflow is primarily Figma-to-handoff with no live agent iteration; Recto is built for real-time agent-designer collaboration, not static design-to-dev handoffs.
- Your team works asynchronously and rarely has designers and agents working on the same project in parallel; Recto's payoff comes from compressed feedback loops, which require synchronous or near-synchronous iteration.
Internal Adoption Path
No paid plan published
24 hr/mo
3 seats × 8 hr each
$1,800/mo
modeled at $75/hr labor rate
No paid plan published
Illustrative scenario. Not a guarantee. No verified paid base plan is published for this service, so subscription cost and net capacity are not modeled. Implementation, taxes, and unprovided usage charges are excluded.
Platform Features
Core capabilities of Recto
Local agent detection and CLI integration
Recto automatically detects Claude Code, Codex, Cursor, and OpenCode installed on your machine and runs their CLI directly inside the canvas. Designers and project managers no longer switch between terminal, browser preview, and design tool to iterate with an agent.
Real-time visual editing of agent output
Drag, resize, style, and animate any element the agent generates without touching code. Designers can make quick adjustments on the canvas and re-prompt the agent for larger changes, compressing the feedback cycle from minutes to seconds.
Pinned comments to agent prompts
Attach comments directly to design elements and send them to the agent as part of the next prompt. Project managers and stakeholders can annotate the canvas without writing new prompts, and the agent reads the context automatically.
Design system token management
Define colors, typography, spacing, and other tokens in Recto; agents read these tokens before generating designs, ensuring consistency and reducing rework cycles. Syncs with Figma design systems for teams already using tokens there.
Multi-format export
Export designs as production-ready HTML/CSS, SVG, PNG, video, or .glb (3D). Designers can hand off to developers or share motion/3D previews with clients without additional rendering or conversion steps.
Website import and re-editing
Import any live website as editable HTML into Recto, then direct agents to modify it. Useful for rapid competitor analysis, client redesign iterations, or converting static mockups into interactive prototypes.
What Makes Recto Different
Unique advantages vs similar tools in this niche
Visual canvas specifically designed for coding agents
vs Traditional code editors and terminalsRecto provides a real-time visual workspace where agents can build and designers can edit, eliminating the need to switch between terminal, browser preview, and screenshots.
Local operation without API or MCP configuration
vs Cloud-based AI design tools requiring setupRecto runs entirely on the user's machine, automatically detecting installed agents and requiring no network round-trips or API keys.
Design system tokens that agents understand
vs Manual design system documentationEvery project includes a DESIGN.md and theme.css tokens that agents read before designing, ensuring consistency across all generated designs.
Latest Updates
Recent releases and improvements for Recto
Grok Build agent support
NewGrok Build, xAI's own coding agent, joins Claude Code, Codex, Cursor and the rest.
Agent installation from Recto
NewInstall agents from Recto on a brand-new computer: no terminal, no Homebrew. Node.js comes along when an agent needs it.
Browser panel
NewA browser beside your canvas, in a panel or a window of its own. Pick any part of a website and copy it to your canvas as editable HTML.
Zen mode and ⌘K
NewZen mode (⇧⌘\) puts only your design and your agent on screen. ⌘K opens any page, frame, layer, tab or command from anywhere.
Tabs and Assets library
NewTabs: a row for each space, each tab with its own Back and Forward. An Assets library: bring many files in at once. Rename or move one and every page that uses it follows, in one undo.
Value Equation
Outcome-likelihood-time-effort assessment for Recto
Value math requires real pricing
The Value Equation (dream outcome × likelihood ÷ time × effort) feeds directly into ROI math. Recto has no published pricing, so we hold this section until real numbers are available.
Contact RectoPricing
Pricing data not yet available for Recto.
Reality Check
Recto requires designers to adopt a new workflow centered on the canvas rather than traditional design tools or code editors. Payoff is highest when your team runs coding agents 5+ hours per week; smaller teams or those not yet using agents will see minimal ROI.
Low effort: self-service setup with guided onboarding
How This Accelerates White-Label Services
Who It's For
- ✓web-design-agencies
- ✓product-design-teams
- ✓agencies-using-ai-coding-agents
Acceleration Steps
- 1Sign up and connect your account
- 2Configure provide a visual canvas for coding agents to build ui, motion, svg, and 3d designs
- 3Connect Claude Code
- 4Launch your first client project
Academy for Recto
Work through it in order: the course for this service first, then the modules behind it.
Course for this service
Recto Agency Implementation, Productizing AI-Driven Design Delivery
Learn how to build a design delivery service around Recto's local agent canvas, from setting up design system tokens that agents follow to packaging exports as client-ready assets. This course covers pricing your AI-assisted design work, managing client feedback loops through pinned comments, and scaling production across multiple projects without hiring additional designers.
Open the courseNo Academy modules are published for this service yet. Browse the full Academy
Core concepts
The mental model you need to price and scope the work.
- Scaffold Versus Steward SplitConcept
AI code tools compress the cost of producing a first working version, but they do not compress the cost of owning it. The Scaffold Versus Steward Split separates two jobs agencies have historically billed as one: scaffolding (generating a full-stack app, wiring auth and payments, standing up a prototype) and stewardship (architecture decisions, review, and keeping consumer code in sync when contracts change). Scaffolding is where the speed advantage lives. Stewardship is where retainer value and liability live. Verdent illustrates the first half, turning a plain-English description into a working product with authentication, payments, and an admin dashboard. Ripple illustrates the second, detecting a breaking API change and opening pull requests across every affected repository. Agencies that price both halves at the same rate give away the margin on scaffolding and undercharge for stewardship. Split the two in your statements of work, and staff them differently.
- Agent Output Liability LineConcept
The Agent Output Liability Line is the boundary between code an agency can ship under its own name and code that still needs a human signature. Agentic tools now generate full-stack applications from prompts and auto-fix breaking API changes across repositories, which moves the liability question from 'did we write it' to 'who reviewed it.' Agencies that blur this line absorb client risk without pricing it. A practical test: if an agent opens a pull request at 2am and no human reads the diff before merge, that code sits above the line and belongs in a maintenance retainer, not a fixed-scope build. Tools like Agent Monitor and Agent Desk exist specifically to make that review boundary visible by surfacing per-file risk levels and session histories. The framework matters because delivery speed without a defined liability line converts margin into unpaid warranty work.
- Verification Debt CompoundingConcept
Verification Debt Compounding treats every unreviewed agent-generated commit as a small loan against future delivery capacity. The interest rate is set by how far the code drifts from the architecture a human would have chosen. Agencies that ship agent output straight to client repos accumulate this debt quietly, then pay it back in emergency debugging during a retainer sprint. The category description warns that over-reliance risks code quality inconsistency, and the operational evidence supports it: Agent Desk launched as an open-source macOS app specifically so teams can browse and review sessions across Claude Code, Cursor, Codex, and GitHub Copilot, which only matters if review is a scheduled step rather than an afterthought. A 10 MB in-browser model from GenClass now flags silent CSS and race-condition bugs that never throw errors, the exact class of defect that passes agent self-tests and lands in production. Budget review time as a line item, not a contingency.
Decision and risk
How to judge the fit, and the ways it goes wrong.
- When Agent Output Ships Unreviewed, Cap the Blast Radius FirstEvaluation Rule
Set a hard blast-radius limit per agent run, then require a named human reviewer before any change merges into a client branch.
- AI Code Tools Rule: Price the Maintenance Tail Before the ScaffoldEvaluation Rule
Before committing a client retainer to AI-generated code, estimate the 12-month maintenance cost of that code and confirm the tooling or team can absorb it.
- The Silent Regression Trap: Why AI Code Tools Pass Review and Fail in ProductionFailure Pattern
- The Scaffold-Without-Owner Trap: Why AI Code Tools Stall After the First SprintFailure Pattern
8 modules selected for Recto
Frequently Asked Questions
Answers about pricing, setup
Recto is a visual canvas that runs coding agents (Claude Code, Codex, Cursor, OpenCode) locally on your machine. Designers can see agent-generated UI, motion, SVG, and 3D designs in real-time, edit them directly by dragging and styling, and send feedback back to the agent via pinned comments. It eliminates the need to switch between terminal, browser preview, and design tools.
Recto is free to download and use locally. There is no per-seat pricing or subscription model.
Designers see the largest payoff, especially those iterating on agent-generated HTML/CSS and motion designs. Project managers benefit by consolidating design feedback into pinned comments instead of managing scattered Slack threads and email. Strategists and account executives can use the canvas to prototype and present interactive designs to clients faster. Founders of web design and product design agencies gain visibility into agent-designer collaboration and can reduce design-to-handoff time.
Conservative estimate: 4 to 8 hours per designer per month, assuming 5+ hours per week spent editing agent output or coordinating feedback across tools. Payoff scales with team size and agent usage frequency. Teams running agents fewer than 5 hours per week will see minimal time savings.
Designers benefit most if they can read basic HTML/CSS and understand how to direct agents via prompts. Recto is not a no-code tool; it assumes visual comfort with markup. Teams without this skill set will face a steeper learning curve.
Recto reads design tokens (colors, typography, spacing) from Figma design systems, so agents generate designs that respect your brand guidelines. You can also import Figma designs into Recto as a starting point, though Recto itself is not a Figma plugin.