Onlook 专为产品经理、设计师准备的 Cursor 开源了，斩获 12K Star！

今天逛 Github 的时候，发现今日开源热榜第一是叫做 Onlook 的开源项目。号称专门为设计师准备的 Cursor。

Cursor 可能是目前世界上最火爆的 AI 代代码编辑器，你提需求，它帮你写代码、改 Bug。Onlook 号称是专为设计师、产品经理，非技术人员准备的 Cursor。提供一个可视化的编辑器，使用 AI 以可视化方式开发 React 应用。

01 Onlook 简介

Onlook 项目目前已经在 GitHub 上获得 12.4K 的 Star。和 Cursor 相比，Onlook 面向的是设计师、产品经理用户群体，可能不懂代码。如果对 AI 生成的应用、网站进行优化，使用 onlook 可以直接在浏览器中像使用 Figma 一样拖拽调整页面元素（如边距、颜色、布局）

比如你有一个网站是使用  Next.js + TailwindCSS 开发的，就能使用这个开源的可视化 AI 代码编辑器进行辅助编程。你直接让 AI 帮你写一个新的网站，或者导入你已有的网站代码。这样你使用 Onlook  就能左侧预览，右侧编辑代码了。

网页中的元素或者 Dom 直接右键就能定位到代码中对应的那一行，很效率。

你还能直接点击网页中的元素，在编辑器中通过组件的方式修改它的颜色、内容，甚至可以直接和 AI 对话让它直接对这个 Dom 进行编辑。

02 实战体验

当你部署完 Onlook，打开后只需要一句话你想要生成的网站。比如我丢给 Onlook 一段乔布斯相关的材料，让他基于这些材料生成一个美观的乔布斯生平介绍网站。

点击确定好后，大概一分钟这个网站就生成好了。非常惊艳，自动适配移动端。而且生成完后，直接访问 http://localhost:3000/ 就能进入刚刚生成的网站了。

对于网页中不满意的部分，可以直接在侧边栏进行调整。很像 Figma 中对设计稿的操作，所以很适合设计师使用。

当你觉得调整成满意的效果，还能一键发布网站。

03 如何使用

你可以直接访问 onlook.com 进行使用，当然也可以通过如下的方式进行本地部署。

安装依赖

确保已安装 Node.js，然后克隆项目并安装依赖：

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

启动应用

使用如下命令运行，访问 http://localhost:3000 即可开始可视化编辑

npm run start
编辑与同步
在 Onlook 界面中调整 UI，保存后修改会自动写入代码文件（如 JSX 或 CSS）。支持版本控制（Git），确保变更可追溯。

转自：https://mp.weixin.qq.com/s/keYFKHqovmXCmuSOmXg-5w