Recto 发布桌面应用：用 AI 设计界面，用鼠标直接编辑

为编码智能体打造的可视化画布。用 Claude Code、Codex、Cursor 等工具构建 UI、动效和 3D。

Recto 在本地运行，为你的编码智能体提供一个可视化工作空间，让你看到每一处改动、直接编辑任何内容，或简单地再次提示。全程无需离开 Recto。

下载 Recto。

看看它如何工作

你的浏览器不支持嵌入式视频。请观看 Recto 软件演示。

一个画布，更多创作方式。

UI

SVG

3D

动效

01 用 AI 创作

AI 负责构建，你负责指挥。

你的智能体可以写代码，现在它也能和你一起做设计。

编码智能体很擅长构建。

但和它们一起做设计，仍然意味着要在终端、浏览器预览、屏幕截图和各种提示之间来回切换，比如：

❯[图片 #1] 把第二张卡片稍微向左移一点。

Recto 为你的智能体提供了一个真正的可视化画布。

改为选中这张卡片。

自己移动它。

或者告诉你的智能体你想改什么。

看看智能体如何工作

02 带上你的智能体。你的工具，在同一个工作空间里。

Recto 与你已经在用的工具配合工作。

Recto 会自动检测你电脑上安装的编码智能体。

Claude Code

Codex

Cursor

OpenCode

直接在 Recto 里使用它们的 CLI。

再安装一个智能体，它也会自动可用。

你甚至可以让多个智能体同时处理同一个设计。

概览

品牌

83%

J

主视觉方向Claude Code · 刚刚启动

主视觉方向Codex · 刚刚启动

主视觉方向Cursor · 刚刚启动

主视觉方向OpenCode · 刚刚启动

Claude Code

❯ 让这个主视觉感觉更温暖，留出更多呼吸空间。

› 让这个主视觉感觉更温暖，留出更多呼吸空间。

• 已编辑 pages/index.html− 一个新视角。+ 一种更柔和的日常。

→ 让这个主视觉感觉更温暖，留出更多呼吸空间。

读取 pages/index.html正在查看主视觉样式。

已编辑 pages/index.html− 一个新视角。+ 一种更柔和的日常。

让这个主视觉感觉更温暖，留出更多呼吸空间。

← 编辑 pages/index.html− 一个新视角。+ 一种更柔和的日常。

已更新标题和间距。可以查看了。

桌面 / index560询问智能体

onda

物件 关于

用心挑选的物件。日常的喜悦。

为生活增添一点更像你的物件。

一个共享项目

无需配置 MCP

03 本地运行，快速响应。

就在你的电脑上。

本地构建，为速度而生。

Recto 和你的编码智能体直接在你的电脑上协同工作。

Recto 和你的智能体之间没有网络往返。

只有你的智能体、你的画布和你的机器。

它如何工作

提示、编辑、再提示。

从提示到像素，一起完成。

01 连接

用 Recto 配置你的编码智能体。

Claude Code就绪

Codex就绪

Cursor设置

OpenCode设置

02 创作

描述你想要什么，让你的智能体开始构建。

❯ 为 Onda 做一个落地页。用心挑选的物件，温暖而安静。

● Write(pages/index.html) ⎿ 写入了 86 行

为生活增添一点更像你的物件。

选中你想改进的部分，让智能体继续完善。

为生活增添一点更像你的物件。

从一个方向开始，和你的智能体一起探索。把每个变体并排保留，然后把细节调整成你自己的。

概览

品牌

83%

J

01 / 第一个想法560

用心挑选的物件。

意想不到的视角。

用心挑选的物件。

意想不到的视角。

用心挑选的物件。

意想不到的视角。

用心挑选的物件。

意想不到的视角。

用心挑选的物件。

意想不到的视角。

用心挑选的物件。

意想不到的视角。

一个想法，准备好去探索。Claude Code · 思考中…● Write(pages/warm-direction.html)Claude Code · 新设计已就绪。

无限画框，无限设计。

05 评论与交接

直接在设计上对话。

点出来，让它变更好。

把评论固定到设计的任何部分。连同选中的元素和你的反馈一起直接发送给智能体。就在你要求的地方看到改动。

使用评论工具并点击该元素。

把评论及其上下文传递给智能体标签页。

让这里感觉更温暖、更有个性。保持布局不变。

已更新标题。可以查看了。

一个画布，更多创作方式。

01

UI

设计界面、网站、落地页、仪表盘和产品体验。

为生活增添一点更像你的物件。

用可视化时间线创建交互、过渡和动画。

无需离开工作空间即可创建和编辑可缩放图形。

04

3D

在设计的其余部分旁边构建和试验 3D 元素。

07 网页导入

把网页上的设计带入 Recto。

复制任何东西，让它变成你的。

发现了一个喜欢的界面？

把网页上的设计带入 Recto 并开始编辑。

为生活增添一点更像你的物件。

或者让你的智能体把它带到完全不同的方向。

每个 Recto 项目都把设计系统集中在一处：颜色、字体、间距和组件。

从内置系统开始，从网站捕获一套，或用你的智能体构建自己的。

每个 Recto 设计都基于 HTML 和 CSS 构建。

这意味着你创作的东西不会被锁在 Recto 里。

自动检测你安装的编码智能体。

选择一个智能体，描述你想创建的内容。

看着设计直接出现在画布上。

可视化编辑、选中并再次提示，或继续与你的智能体协作。

把你的 HTML 和 CSS 带到任何地方。

导出它。

使用它。

发布它。

你的设计已经离生产更近了。

常见问题

01

Recto 是什么？

Recto 是面向编码智能体的可视化设计画布。它让你用 Claude Code 和 Codex 等智能体创建 UI、动效、SVG 和 3D 设计，同时保持一切可直接编辑。

不需要。Recto 与你电脑上已安装的编码智能体配合工作，而不是取代它们。

Recto 会自动检测你系统中安装的受支持编码智能体，让你直接在 Recto 内使用它们。你也可以同时使用多个智能体。

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