【GitHub项目推荐--专为产品经理、设计师准备的 Cursor 开源了】

号称专门为设计师准备的 Cursor。

Cursor 可能是目前世界上最火爆的 AI 代代码编辑器，你提需求，它帮你写代码、改 Bug。

Onlook 号称是专为设计师、产品经理，非技术人员准备的 Cursor。提供一个可视化的编辑器，使用 AI 以可视化方式开发 React 应用。

01 Onlook简介

Onlook 项目目前已经在 GitHub 上获得 12.4K 的 Star。

和 Cursor 相比，Onlook 面向的是设计师、产品经理用户群体，可能不懂代码。

如果对 AI 生成的应用、网站进行优化，使用 onlook 可以直接在浏览器中像使用 Figma 一样拖拽调整页面元素（如边距、颜色、布局）

所有修改会通过 Tailwind CSS 自动转换为代码，无需手动编写 CSS。

比如你有一个网站是使用  Next.js + TailwindCSS 开发的，就能使用这个开源的可视化 AI 代码编辑器进行辅助编程。

你直接让 AI 帮你写一个新的网站，或者导入你已有的网站代码。这样你使用 Onlook  就能左侧预览，右侧编辑代码了。

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

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

02 实战体验

当你部署完 Onlook，打开后只需要一句话你想要生成的网站。

比如我丢给 Onlook 一段乔布斯相关的材料，让他基于这些材料生成一个美观的乔布斯生平介绍网站。

点击确定好后，大概一分钟这个网站就生成好了。

非常惊艳，自动适配移动端。而且生成完后，直接访问 http://localhost:3000/ 就能进入刚刚生成的网站了。

来看看生成的效果，非常棒呢，感觉还能做为一个 PPT 助手呢。

对于网页中不满意的部分，可以直接在侧边栏进行调整。很像 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），确保变更可追溯。

开源地址：onlook-dev/onlook: The Cursor for Designers • An Open-Source Visual Vibecoding Editor • Visually build, style, and edit your React App with AI 

原文链接：

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