App Onlook 可视化用AI改React与Next.js代码的开发工具

前端开发里有个长期割裂：设计师在画布上拖拽出界面，开发者再手写代码还原，两边对不上就要反复返工。更糟的是，设计稿里的间距、配色、断点，落到代码里常常走样，最后谁都不满意。Onlook 想抹平这条鸿沟——它让你在可视化画布里直接改 React、Next.js 代码，AI 改动会实时落回真实源码，所见即所得，设计与开发第一次共享同一份真相。它把“设计”重新定义为“直接编辑真实代码”，而非生成一份会过期的图片。

项目基本信息

一、项目介绍

Onlook 定位为“视觉工程师的开发工具”，强调“用真实代码设计”。它不是又一个生成静态图的工具，而是把 React/Next.js 项目加载进可视化编辑器，你在界面上拖拽、改样式、加组件，底层直接修改对应源代码。当前版本 v0.2.33，已支持 Tailwind、Supabase 等技术栈，并可作为 VS Code 扩展使用。它的核心理念是“design with Real Code”，让非开发者也能参与真实工程。

Onlook 把“设计稿改代码”这件事变得直接：你在画布里选中一个元素，右侧就是它对应的 React 组件与 Tailwind 类名，改动会实时写回源文件，不需要在设计工具与编辑器之间来回导出导入。它面向的是 React 与 Next.js 项目，运行在本地，用 Bun 作为运行时与打包器，启动后直接在浏览器里打开工作台。对不熟悉构建配置的设计师，它隐藏了工程细节；对开发者，它保留了完整的代码控制权，因为所有改动最终都落在你的项目里，而不是一份需要同步的副本。

二、核心优势

一是代码即真相。所有可视化编辑都映射回真实文件，不生成黑盒产物，版本管理依旧可用。二是 AI 辅助。可用自然语言让 AI 调整布局、生成组件，结果仍是人类可读的代码。三是设计系统对齐。支持导入设计稿与 design token，减少还原偏差，保持团队视觉一致性。四是面向协作，设计师与开发者共用同一份代码源，减少交接损耗。五是 AI 优先，把“用话改界面”变成日常操作。

第六，它的元素定位能力比较准确，画布里点中的节点能对应到代码里的具体 JSX 片段，反向定位同样顺畅。第七，样式编辑面板直接操作 Tailwind 类名，不生成难维护的内联样式。第八，支持图层管理与多选批量调整，处理复杂页面时效率提升明显。第九，它是本地优先的工具，项目文件不上云，适合有合规要求的团队。第十，开源意味着可以自己改造工作流，比如接入内部的组件库规范。

三、适用场景

适合 React/Next.js 团队做快速原型与 UI 迭代；设计师希望参与真实代码而非交付切图；以及想要“所见即所得”地维护前端项目的独立开发者。当你厌倦了“设计稿—还原—再改”的循环，Onlook 能把反馈周期压到分钟级，让产品外观的打磨成本大幅下降，尤其利于早期快速试错。

最直接的场景是落地页与营销页面：改文案、调间距、换配色，过去要走一遍设计流程，现在产品经理自己就能在画布里完成。其次是组件调试：把页面某个区块拆出来单独调整，边看边改。对于接需求频繁的乙方团队，它还能显著减少“设计稿与实现不一致”的返工。需要注意的是，目前对非 Next.js、非 Tailwind 项目的支持仍在推进，选用前最好确认技术栈匹配。

四、安装教程

最轻量的方式是直接体验托管版本，无需安装。若要自托管：

git clone https://github.com/onlook-dev/onlook.git
cd onlook
pnpm install
pnpm dev

也可在 VS Code 中安装 Onlook 扩展，把编辑器与可视化画布联动起来，在熟悉的环境里获得可视化编辑能力。由于它本质是加载你的真实项目，建议在 git 仓库中使用，方便随时对比与回退。

五、使用示例

在 Onlook 画布中打开你的 Next.js 项目，选中一个按钮，直接改圆角与配色，或输入：

把这个卡片改成两列网格，并在移动端堆叠成单列

AI 修改对应 TSX 与 Tailwind 类，保存后项目源码同步更新，刷新页面即可看到效果。整个过程无需手写样式，改动却留在真实代码里，团队其他人正常 git 协作即可，不会引入额外的文件格式。

克隆项目后本地启动：

git clone https://github.com/onlook-dev/onlook
cd onlook
bun install
bun run dev

首次运行需要 Docker 用于容器管理。启动后在浏览器里打开本地工作台，选择你的 React 项目目录，画布会加载真实页面，点击元素即可开始编辑，保存后改动直接同步到源文件。

六、常见问题

问：只支持 React 吗？当前主打开 React/Next.js，Tailwind 体验最佳，其他框架在路线图中。问：会破坏我的现有代码吗？编辑映射真实源文件，建议配合 git 使用以便随时回退。问：需要联网吗？本地项目编辑不需联网，AI 功能需要模型接口。问：适合生产项目吗？适合迭代与维护，重大重构仍建议人工 review 生成代码。

值得一提的是，Onlook 并不试图取代你的代码编辑器，而是补足“从设计到代码”的最后一公里。它和 Figma 这类纯设计工具的最大区别在于：设计稿在 Onlook 里就是真实代码，不存在二次还原的损耗，设计师的每一次微调都能立刻在前端跑起来，开发只需 review 而非重写。

问：支持 Vue 或 Svelte 吗？当前面向 React 生态，其他框架在路线图中。问：需要设计基础吗？不需要，改类名和文本不需要专业设计知识。问：和 Figma 冲突吗？不冲突，它可以作为从设计到代码之间的加速层。

七、总结

Onlook 用 Apache-2.0 协议把“可视化”与“真实代码”重新缝合，缓解了设计与开发对立的顽疾。对 React 技术栈团队，它是提升 UI 迭代速度的实用工具，让“改外观”不再是开发者的专属负担。

Onlook 代表的趋势是“代码即画布”。当改动界面不再依赖中间产物，设计与开发之间的损耗会进一步降低。对 React 团队来说，这是目前值得投入学习的工具之一。