Recto推出可视化画布工具，让用户直接编辑AI编程代理生成的界面

面向编程 agent 的可视化画布。用 Claude Code、Codex、Cursor 等构建 UI、动效和 3D。 Recto 在本地运行，为你的编程 agent 提供一个可视化的创作工作区；你既能实时看到每一处改动，也能直接编辑任何内容，或者干脆重新下指令。全程都不必离开 Recto。 下载 Recto。 看看它如何工作 你的浏览器不支持嵌入式视频。请观看 Recto 软件演示。 一块画布，更多创作方式。 UI SVG 3D 动效 01用 AI 创作 AI 负责构建，你负责指挥。 你的 agent 能写代码，现在它也能和你一起做设计。 编程 agent 很擅长构建。 但和它们一起做设计，仍然意味着要在终端、浏览器预览、截图和这样的提示词之间来回切换： ❯[图片 #1] 把第二张卡片稍微往左移一点。 Recto 给你的 agent 一块真正的可视化画布。 那就直接选中这张卡片。 自己动手移动它。 或者告诉你的 agent 你想改什么。 看看 agent 如何工作 02接入你的 agent你的工具，都在同一个工作区。 Recto 能配合你已经在用的工具。 Recto 会自动检测你电脑上安装的编程 agent。 Claude Code Codex Cursor OpenCode 直接在 Recto 里使用它们的 CLI。 再安装别的 agent，它也会自动可用。 你甚至可以让多个 agent 同时处理同一个设计。 概览 品牌 + 83% J 首屏方向Claude Code · 刚刚开始 首屏方向Codex · 刚刚开始 首屏方向Cursor · 刚刚开始 首屏方向OpenCode · 刚刚开始 Claude Code ❯ 给这个首屏加点暖意，让它更舒展一些。 › 给这个首屏加点暖意，让它更舒展一些。 • 已编辑 pages/index.html− 一种新的视角。+ 一种更柔和的日常。 → 给这个首屏加点暖意，让它更舒展一些。 读取 pages/index.html正在检查首屏样式。 已编辑 pages/index.html− 一种新的视角。+ 一种更柔和的日常。 给这个首屏加点暖意，让它更舒展一些。 ← 编辑 pages/index.html− 一种新的视角。+ 一种更柔和的日常。 已更新标题和间距。可以审阅了。 桌面端 / index560向 agent 提问 onda 物件 关于 经心之物，日常之喜。 为生活挑选的用心之物，让生活更像你自己。 同一个共享项目 无需 MCP 配置 03本地且快速 直接在你的电脑上运行。 本地构建，为速度而生。 Recto 和你的编程 agent 直接在你的电脑上协同工作。 Recto 和你的 agent 之间没有网络往返。 只有你的 agent、你的画布和你的机器。 工作方式 下指令，编辑，再下指令。 从提示词到像素，一起完成。 01连接 用 Recto 配置你的编程 agent。 Claude Code就绪 Codex就绪 Cursor去设置 OpenCode去设置 02创作 描述你想要什么，让你的 agent 开始构建。 ❯ 为 Onda 做一个落地页。经心之物，温暖而安静。 ● Write(pages/index.html) ⎿ 已写入 86 行 为生活挑选的用心之物，让生活更像你自己。 选中你想改进的地方，让你的 agent 继续深化。 为生活挑选的用心之物，让生活更像你自己。 从一个方向开始，和你的 agent 一起探索。把每个变体并排保留，再把细节改成你自己的。 概览 品牌 + 83% J 01 / 第一版想法560 经心之物。 意想不到的视角。 经心之物。 意想不到的视角。 经心之物。 意想不到的视角。 经心之物。 意想不到的视角。 经心之物。 意想不到的视角。 一个想法，随时可以展开。Claude Code · 思考中……● Write(pages/warm-direction.html)Claude Code · 新设计已就绪。 无限画框，无限设计。 05评论与交接 就在设计上展开对话。 指出来，让它更好。 把评论钉在设计中的任意位置。连同选中的元素和你的反馈一起直接发给 agent。在你指定的地方，看到改动发生。 使用评论工具，点击那个元素。 把评论及其上下文传给 agent 标签页。 让这里更温暖、更有人情味。布局保持不变。 已更新标题。可以审阅了。 一块画布，更多创作方式。 01 UI 设计界面、网站、落地页、仪表盘和产品体验。 为生活挑选的用心之物，让生活更像你自己。 用可视化时间轴创建交互、转场和动画。 无需离开工作区，即可创建和编辑可缩放图形。 04 3D 在设计的其余部分旁边，构建和试验 3D 元素。 07从网页导入 把网页上的设计带入 Recto。 复制任何东西，让它成为你的。 看到喜欢的界面？ 把网页上的设计带入 Recto，然后开始编辑。 为生活挑选的用心之物，让生活更像你自己。 或者让你的 agent 把它带向完全不同的方向。 每个 Recto 项目都把设计系统集中在一处：颜色、字体、间距和组件。 从内置系统开始，从网站捕获一套，或者和你的 agent 一起构建你自己的。 每个 Recto 设计都基于 HTML 和 CSS 构建。 这意味着你创作的东西不会被困在 Recto 里。 自动检测你已安装的编程 agent。 选择一个 agent，描述你想创作的内容。 看着设计直接出现在画布上。 可视化编辑、选中后重新下指令，或者继续和你的 agent 一起工作。 把你的 HTML 和 CSS 带到任何地方。 导出它。 使用它。 发布它。 你的设计已经更接近生产环境。 常见问题 01 Recto 是什么？ Recto 是面向编程 agent 的可视化设计画布。你可以配合 Claude Code、Codex 等 agent 创建 UI、动效、SVG 和 3D 设计，同时让所有内容都保持可直接编辑。 不需要。Recto 配合你电脑上已安装的编程 agent 工作，而不是取代它们。 Recto 会自动检测你系统中已安装的受支持编程 agent，并让你直接在 Recto 内使用它们。你也可以同时使用多个 agent。

（原文较长，此处译出前 6000 字，完整内容请点「打开原文」。）