{"slug": "show-hn-recto-a-visual-canvas-for-coding-agents", "title": "Show HN: Recto – A visual canvas for coding agents", "summary": "A developer released Recto, a locally running visual canvas that lets coding agents such as Claude Code, Codex, Cursor and OpenCode build UI, motion and 3D work in a shared workspace. Recto automatically detects coding agents installed on a user's computer, runs their CLIs directly inside the app, and requires no MCP setup, API configuration or network round-trips between Recto and the agent, according to the project's Show HN post. Users can watch each agent edit files, change elements directly on the canvas, or reprompt, and can run multiple agents on the same design.", "body_md": "the visual canvas for coding agents build ui, motion and 3D with Claude Code, Codex, Cursor and more.\n\nrecto 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.\n\n02bring your agentsYour tools, in the same workspace.\n\nrecto works with the tools you already use.\n\nrecto automatically detects the coding agents installed on your computer.\n\nuse their CLI directly inside recto.\n\ninstall another agent and it becomes available too.\n\nyou can even work with multiple agents on the same design.\n\nno switching windows. no extra setup.\n\nOnda\n\nOverview\nBrand\n+\n\n83%\nJ\n\nHero directionClaude Code · started just nowHero directionCodex · started just nowHero directionCursor · started just nowHero directionOpenCode · started just now\n\nClaude Code\n\n~/onda\n\n❯ Give this hero a warmer feel and more room to breathe.\n\n✻ Thinking…\n\n● Read(pages/index.html) ⎿ Read 86 lines\n\n● Update(pages/index.html) ⎿ Added 2 lines, removed 2 − A new perspective. + A softer kind of everyday.\n\n● A warmer headline, with more space around the hero.\n\n✻ Worked for 12s\n\n❯? for shortcuts\n\n>_ OpenAI Codex\n\ndirectory: ~/onda\n\n› Give this hero a warmer feel and more room to breathe.\n\n• Working…\n\n• Explored Read pages/index.html\n\n• Edited pages/index.html − A new perspective. + A softer kind of everyday.\n\n• Updated the headline and hero spacing.\n\n›? for shortcuts\n\nCursor Agent\n\n~/onda\n\n→ Give this hero a warmer feel and more room to breathe.\n\nThinking…\n\nRead pages/index.html Reviewing the hero styles.\n\nEdited pages/index.html − A new perspective. + A softer kind of everyday.\n\nThe headline and spacing are updated.\n\n→? for shortcuts\n\nopencode\n\nHero direction · ~/onda\n\nGive this hero a warmer feel and more room to breathe.\n\nThinking…\n\n→ Read pages/index.html\n\n← Edit pages/index.html − A new perspective. + A softer kind of everyday.\n\nUpdated the headline and spacing. Ready to review.\n\n›? for shortcuts\n\nDesktop / index560Ask an agent\n\nondaObjects About\n\nCONSIDERED OBJECTS. EVERYDAY JOY.\n\nA softer kind of everyday.\n\nThoughtful objects for a life that looks a little more like you.\n\nFind your everyday\n\nConsidered formEveryday ritualsA new perspective\n\nReal HTML. Still yours to edit.\n\nOne shared projectNo MCP setup needed\n\n03Local and fastDirectly on your computer.\n\nbuilt locally. built for speed.\n\nrecto and your coding agents work together directly on your computer.\n\nNo MCP setup.\n\nNo API configuration.\n\nNo network round-trips between recto and your agent.\n\njust your agent, your canvas and your machine.\n\nfast by design.\n\nHow it worksPrompt, edit, prompt again.\n\nfrom prompt to pixels. together.\n\n01Connect\n\nConfigure your coding agent with Recto.\n\nAgents2 ready\n\nClaude CodeReady\n\nCodexReady\n\nCursorSet up\n\nOpenCodeSet up\n\n02Create\n\nDescribe what you want and let your agent start building.\n\nClaude Code\n\n~/onda\n\n❯ A landing page for Onda. Considered objects, warm and quiet.\n\n● Write(pages/index.html) ⎿ Wrote 86 lines\n\n✻ Building the hero…\n\n❯\n\n03Edit\n\nChange anything directly on the canvas.\n\nDesktop / index\n\nondaObjects About\n\nCONSIDERED OBJECTS. EVERYDAY JOY.\n\nA softer kind of everyday.\n\n116 × 48\n\nThoughtful objects for a life that looks a little more like you.\n\n04Reprompt\n\nSelect what you want improved and ask your agent to take it further.\n\nondaObjects About\n\nCONSIDERED OBJECTS. EVERYDAY JOY.\n\nA softer kind of everyday.\n\nThoughtful objects for a life that looks a little more like you.\n\nFind your everyday\n\nAsk an agent\n\nWarmer, with more room.\n\nSend to agent\n\nrepeat until it feels right.\n\n04An open canvasRoom for every direction.\n\na canvas for every version of your idea.\n\nstart with a direction. explore it with your agent. keep every variation side by side, then make the details your own.\n\nOnda\n\nOverview\nBrand\n+\n\n83%\nJ\n\n01 / First thought560\n\nondaSTUDIO\n\nA NEW PERSPECTIVE\n\nObjects with another angle.\n\nConsidered objects. Unexpected perspectives.\n\nExplore the collection ↗\n\n01\n\nConsidered form\n\n02\n\nEveryday rituals\n\n03\n\nA new perspective\n\n02 / After hours560\n\nondaSTUDIO\n\nA NEW PERSPECTIVE\n\nA softer kind of everyday.\n\nConsidered objects. Unexpected perspectives.\n\nExplore the collection ↗\n\n01\n\nConsidered form\n\n02\n\nEveryday rituals\n\n03\n\nA new perspective\n\n03 / A fresh angle560\n\nondaSTUDIO\n\nA NEW PERSPECTIVE\n\nMade to stand apart.\n\nConsidered objects. Unexpected perspectives.\n\nExplore the collection ↗\n\n01\n\nConsidered form\n\n02\n\nEveryday rituals\n\n03\n\nA new perspective\n\n04 / Less, but better560\n\nondaSTUDIO\n\nA NEW PERSPECTIVE\n\nObjects with another angle.\n\nConsidered objects. Unexpected perspectives.\n\nExplore the collection ↗\n\n01\n\nConsidered form\n\n02\n\nEveryday rituals\n\n03\n\nA new perspective\n\n05 / New perspective560\n\nondaSTUDIO\n\nA NEW PERSPECTIVE\n\nA softer kind of everyday.\n\nConsidered objects. Unexpected perspectives.\n\nExplore the collection ↗\n\n01\n\nConsidered form\n\n02\n\nEveryday rituals\n\n03\n\nA new perspective\n\n06 / A new direction560\n\nExploring a new direction…\n\nondaSTUDIO\n\nA NEW PERSPECTIVE\n\nA warmer way to live.\n\nConsidered objects. Unexpected perspectives.\n\nExplore the collection ↗\n\n01\n\nConsidered form\n\n02\n\nEveryday rituals\n\n03\n\nA new perspective\n\nOne idea, ready to explore.Claude Code · Thinking…● Write(pages/warm-direction.html)Claude Code · New design ready.\n\n05Comments & handoffA conversation, right on the design.\n\npoint to it. make it better.\n\npin 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.\n\n01\n\npoint to the detail\n\nuse the comment tool and click the element.\n\n02\n\nleave your direction\n\nadd your words, an image or a drawing.\n\n03\n\nsend to your agent\n\npass the comment and its context to the agent tab.\n\nwatch your comment become a change.\n\nondaObjects AboutOBJECTS FOR LIVINGGood things. Made simply.Your everyday. A little brighter.1Thoughtful forms. A little more you.Considered form. Everyday rituals.\n\nCommentHero headline\n\nYou · just now\n\nMake this feel warmer and more personal. Keep thelayout as it is.\n\nAttachDrawDrawSend to agentSend to agentPost\n\nClaude Code · just now\n\nUpdated the headline. Ready for your review.\n\n06Ways to createAlongside the rest of your design.\n\none canvas. more ways to create.\n\n01\n\nUI\n\nDesign interfaces, websites, landing pages, dashboards and product experiences.\n\nDesktop / index\n\nonda\n\nObjects About\n\nA softer kind of everyday.\n\nThoughtful objects for a life that looks a little more like you.\n\nFind your everyday\n\n02\n\nMotion\n\nCreate interactions, transitions and animations with a visual timeline.\n\n0s1s2s3s4s\n\nLoop\n\nHeadline\n\nCamera\n\n03\n\nSVG\n\nCreate and edit scalable graphics without leaving your workspace.\n\n04\n\n3D\n\nBuild and experiment with 3D elements alongside the rest of your design.\n\n07Web importBring a design from the web into Recto.\n\ncopy anything. make it yours.\n\nfound an interface you like?\n\nbring a design from the web into recto and start editing it.\n\nhttps://example.com⌘V\n\nexample-com Imported\n\nondaObjects About\n\nCONSIDERED OBJECTS. EVERYDAY JOY.\n\nA softer kind of everyday.\n\n159 × 65\n\nThoughtful objects for a life that looks a little more like you.\n\nFind your everyday\n\n01\n\nChange the layout.\n\n311 × 48\n\n02\n\nRestyle it.\n\nFill\n\n03\n\nAnimateit.\n\nOr let your agent take it somewhere completely different.\n\nFigma importcoming soon\n\n08Design systemChange a token once.\n\none design system. every design consistent.\n\nevery recto project keeps its design system in one place: colours, type, spacing and components.\n\nyour agent reads it before it designs.\n\nchange a token once. every page follows.\n\nstart from an included system, capture one from a website, or build your own with your agent.\n\nPlain CSS variables underneath.\n\ntheme.css:root\n\n--color-surface: #faf9f6;\n\n--color-ink: #29251f;\n\n--color-brand: #e5a171;\n\n--font-display: Georgia, serif;\n\n--text-heading: 40px;\n\n--space-md: 24px;\n\n--radius-md: 12px;\n\nDesktop / index\n\nonda\n\nA softer kind of everyday.\n\nFind your everyday\n\nDesktop / objects\n\nonda\n\nObjects for slow mornings.\n\nSee all objects\n\nDesktop / about\n\nonda\n\nMade slowly, by hand.\n\nVisit the studio\n\n09How it worksWatch it build. Make it yours.\n\neverything happens here.\n\nreal HTML & CSS underneath.\n\n<h3>Real HTML & CSS underneath.</h3>\n\nevery recto design is built on HTML and CSS.\n\nthat means what you create isn't trapped inside recto.\n\n01\n\nopen recto\n\nyour installed coding agents are detected automatically.\n\n02\n\nstart prompting\n\nchoose an agent and describe what you want to create.\n\n03\n\nwatch it build\n\nsee the design appear directly on the canvas.\n\n04\n\nmake it yours\n\nEdit visually, select and reprompt, or continue working with your agent.\n\n05\n\nexport\n\ntake your HTML and CSS wherever you want.\n\nexport it.\n\nuse it.\n\nship it.\n\nyour design is already closer to production.\n\n10Questions and answersEverything remains editable on the canvas.\n\nFAQ\n\n01\n\nWhat is Recto?\n\nRecto 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.\n\n02\n\nIs Recto an AI model?\n\nNo. Recto works with the coding agents already installed on your computer instead of replacing them.\n\n03\n\nWhich coding agents does Recto support?\n\nRecto automatically detects supported coding agents installed on your system and lets you use them directly inside Recto. You can also work with multiple agents.\n\n04\n\nCan I edit what my agent creates?\n\nYes. Everything remains editable on the canvas. You can drag, resize, style, animate and modify elements directly, then continue prompting from where you left off.\n\n05\n\nDoes Recto generate real code?\n\nYes. Recto uses HTML and CSS underneath your designs, making them easy to export and use outside Recto.\n\n06\n\nDoes Recto require MCP or an API?\n\nNo. Recto works locally with your coding agents without requiring MCP, API configuration or additional network calls between Recto and the agent.\n\n07\n\nCan I import existing designs?\n\nYou can bring designs from websites into Recto. Figma import is coming soon.\n\n08\n\nHow much does Recto cost?\n\nRecto is free.\n\n09\n\nWhich platforms are supported?\n\nRecto is available for Mac, Windows and Linux.\n\n11Download RectoYou both design.\n\nFigma gave designers a canvas. coding agents need one too.\n\n1050 × 208\n\nrecto brings visual control to the way software is being built now.", "url": "https://wpnews.pro/news/show-hn-recto-a-visual-canvas-for-coding-agents", "canonical_source": "https://recto.design", "published_at": "2026-10-29 16:11:14+00:00", "updated_at": "2026-10-29 16:16:50.515324+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "ai-products"], "entities": ["Recto", "Claude Code", "Codex", "Cursor", "OpenCode"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-recto-a-visual-canvas-for-coding-agents", "markdown": "https://wpnews.pro/news/show-hn-recto-a-visual-canvas-for-coding-agents.md", "text": "https://wpnews.pro/news/show-hn-recto-a-visual-canvas-for-coding-agents.txt", "jsonld": "https://wpnews.pro/news/show-hn-recto-a-visual-canvas-for-coding-agents.jsonld"}}