前端、产品、设计师神器推荐——Onlook

设计师专属的 Cursor ------ 一款开源、视觉优先的代码编辑器，斩获了20k+ star

一、简介

附上GitHub地址：github.com/onlook-dev/... 使用 Next.js + TailwindCSS 结合 AI 技术构建网站、原型和设计。通过可视化编辑器直接在浏览器 DOM 中进行编辑。实时编码设计。作为 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等产品的开源替代方案。

二、使用 Onlook 可以实现的功能

✅ 数秒内创建 Next.js 应用

复制代码

 ✅ 从文本或图片开始
 使用预制模板
 从 Figma 导入
 从 GitHub 仓库开始

✅ 可视化编辑应用

复制代码

 ✅ 使用类 Figma 界面
 ✅ 实时预览应用
 ✅ 管理品牌资产与设计变量
 ✅ 创建并跳转至页面
 浏览图层 - 原功能位于 Onlook Desktop
 检测并使用组件 - 原功能位于 Onlook Desktop
 管理项目图片 - 原功能位于 Onlook Desktop

✅ 开发工具

objectivec 复制代码

 实时代码编辑器
 保存与恢复检查点
 通过 CLI 运行命令
 连接应用市场
 本地代码编辑 - 原功能位于 Onlook Desktop

数秒内部署应用

复制代码

生成可分享链接
绑定自定义域名

团队协作

复制代码

 实时协同编辑
 添加批注

三、快速开始

你需要什么

现代网络浏览器（Chrome、Firefox、Safari 或 Edge）对 React 和 TailwindCSS 有基本的了解（有帮助但不是必须的）一个 GitHub 账号（可选，用于保存和部署项目）

步骤 1：克隆仓库

首先克隆 Onlook 仓库：

bash 复制代码

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

步骤 2：安装依赖项

Onlook 使用 Bun 作为其包管理器：

bash 复制代码

bun install --frozen-lockfile

第 3 步：启动 Onlook

运行以下命令在本地启动 Onlook：

bash 复制代码

bun dev

如果本地没有bun需要安装一下：安装命令如下：

bash 复制代码

curl -fsSL https://bun.sh/install | bash

安装成功的结果如下：

这将启动位于 http://localhost:3000 的 Onlook。

步骤 4: 创建你的第一个项目

在浏览器中打开 Onlook
点击 "新建项目" 按钮
选择一个模板或从空白开始
给你的项目命名，然后点击"创建" 在 Onlook中创建新项目

第 5 步：开始编辑

创建项目后，你将被带到 Onlook 编辑器。在这里你可以：

从组件库中添加组件
编辑文本和图片
使用样式面板调整样式
实时预览您的更改

第 6 步：部署您的项目（可选）

当你准备好分享你的项目时：

点击顶部工具栏中的"部署"按钮
选择你的部署选项
点击"立即部署" 您的项目将被部署，您将收到一个 URL 用于分享。

附上文档链接：https://docs.onlook.com/docs/user-guide/quickstart#what-youll-need

四、使用方法

Onlook 可运行于任何 Next.js + TailwindCSS 项目，您可以将现有项目导入 Onlook 或在编辑器内从零开始创建。

通过 AI 聊天功能创建或编辑项目。任何时候，您都可以右键点击元素直接定位到对应代码位置。通过拖拽操作绘制新的 div 元素并在父容器中重新排列布局。

在网站设计界面并排预览代码效果

使用 Onlook 的编辑器工具栏调整 Tailwind 样式、直接操控对象并尝试不同布局