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

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/ 就能进入刚刚生成的网站了。

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

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

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

原创 逛逛 逛逛GitHub

2025年06月03日 15:04 北京 4人

今天逛 Github 的时候，发现今日开源热榜第一是叫做 Onlook 的开源项目。

号称专门为设计师准备的 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 助手呢。

已关注

关注

重播 分享 赞

关闭

观看更多

更多

退出全屏

切换到竖屏全屏退出全屏

逛逛GitHub已关注

分享视频

，时长00:22

0/0

00:00/00:22

切换到横屏模式

继续播放

进度条，百分之0

播放

00:00

/

00:22

00:22

弹幕

倍速

全屏

倍速播放中

0.5倍 0.75倍 1.0倍 1.5倍 2.0倍

超清 流畅

继续观看

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

观看更多

转载

,

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

逛逛GitHub已关注

分享赞72在看34

已同步到看一看写下你的评论

视频详情

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