Onlook官网入口在哪？

Onlook 的官网入口是 https://onlook.dev，这是目前唯一官方入口，直接浏览器打开即可。如果你是想找网页版在线体验，需要先明确一点：Onlook 目前主要提供的是桌面客户端（支持 Mac 和 Windows），官网首页提供下载按钮，并没有一个像 Figma 那样打开即用的纯网页编辑器。下面我把入口、产品定位和实际使用体验一次说清楚。

Onlook 是什么？先搞清楚它和 Cursor、v0 的区别

Onlook 是一款视觉优先的 AI 代码编辑器，核心逻辑是“你在界面上直接改，AI 在背后写 React/Tailwind 代码”。它不像 Cursor 那样以对话和代码补全为主，也不像 v0 那样纯生成落地页。Onlook 主打的是“可视化编辑 + 实时同步代码”——你在画布上拖拽、改颜色、调间距，底层代码文件会同步变化，反之你手写代码，画布也会即时刷新。

它本质上是把“设计工具”和“代码编辑器”合并成一个双向绑定的工作台，目标用户是前端开发者和独立开发者，尤其是那些不想在 Figma 和 IDE 之间反复切换、又希望保留代码控制权的人。

官网入口与下载渠道（含避坑提示）

官方唯一入口就是 https://onlook.dev。打开后你会看到首页有一个很显眼的 Download for Mac / Windows 按钮，点击后会跳转到对应的安装包下载。这里有几个容易踩的坑：

• 不要通过第三方下载站搜索“Onlook 下载”，目前网上有一些挂着 Onlook 名字的捆绑安装包，来源不明，建议只认准 onlook.dev 域名。
• 官网首页底部有 GitHub 链接，项目是开源的（仓库名是 onlook-dev/onlook），如果你喜欢自己编译或者想看看更新计划，可以直接去 GitHub 仓库 看。
• 网页版入口目前没有开放。官方文档里提到过“Web Preview”功能，但那是你本地项目启动后的实时预览地址，不是公网在线编辑器。别被搜索引擎里某些“Onlook 在线版”的广告误导。

核心功能拆解：它到底能做什么？

安装之后，你会发现它不是一个简单的“截图生成代码”工具，而是一个完整的本地开发环境。它的核心能力可以归纳为四点：

1. 可视化点击编辑（Visual Editing）

打开任意 React 项目（支持 Next.js、Vite 等），Onlook 会启动一个实时预览画布。你可以像在 Figma 里一样直接点击画布上的元素，右侧面板会显示出该元素对应的 Tailwind 类名和样式属性。改颜色、改字体、调内边距，所有操作都会直接写回源文件（比如 className 或 style 属性），不需要你手动定位代码行。

2. AI 辅助修改（Ask AI）

在画布上选中一个区块，按 Cmd+K 可以呼出 AI 对话框。你可以输入自然语言，比如“把这个按钮改成圆角并加阴影”、“把整个卡片背景换成渐变”。Onlook 会直接修改代码并刷新画布。这一点和 Cursor 的 AI 对话不同，Onlook 的 AI 操作是绑定在具体视觉元素上的，不会给你一堆代码让你自己粘贴。

3. 代码与画布双向高亮

你在代码编辑器里点击某个组件，画布上会高亮对应区域；反之在画布上点击元素，左侧代码面板会自动滚动到对应行。这个功能对于理解陌生项目结构特别有用，尤其是接手他人代码时。

4. 本地优先，隐私安全

所有代码和操作都在本地运行，AI 请求会发送到云端（默认使用 OpenAI 或 Anthropic 的模型），但你的代码文件不会上传到 Onlook 服务器。这一点比那些在线代码生成工具更让开发者放心。

收费情况与免费额度

Onlook 目前处于免费公开测试阶段，下载后无需付费即可使用全部核心功能。不过要注意两点：

• AI 功能需要你自带 API Key（OpenAI 或 Anthropic），也就是说模型调用费用由你自己承担，Onlook 本身不抽成，也不提供免费 AI 额度。
• 官方在 Discord 里提到过，未来可能会推出 Pro 版本（面向团队协作），但截至目前（2025 年 5 月）还没有任何强制收费功能。

适合谁用？和同类工具的横向对比

为了让你更清楚它的定位，我拿它和另外两款热门工具做个简单对比：

简单说：如果你需要对已有项目做像素级视觉调整，Onlook 比 Cursor 更直观；如果你要从零生成一套完整页面，v0 更快，但 v0 生成的代码你需要自己接入项目，而 Onlook 是直接改你本地的真实代码。我个人体验是，Onlook 最适合“设计走查后的修改”这个环节——设计师说“这个间距不对”，你直接在画布上拖一下，代码就改好了，不用再去找对应的 class。

上手建议与常见问题

如果你是第一次用，我建议按这个顺序走一遍：

1. 官网下载安装，打开后选择“Open Existing Project”，选一个 React 项目（最好是有 Tailwind 的）。
2. 先别急着用 AI，手动点击几个元素改改颜色，感受一下代码同步的速度。
3. 在设置里填入 OpenAI API Key（或者 Anthropic 的），然后试着选中一个卡片，按 Cmd+K 输入“改成毛玻璃效果”。
4. 如果项目没有 Tailwind，Onlook 也支持纯 CSS 文件，但可视化编辑的体验会打折扣，建议新项目直接用 Tailwind。

常见问题一： 打开项目后画布空白？检查一下项目是否是 React 且已安装依赖，Onlook 不支持纯 HTML 或 Vue 项目（目前只认 React 生态）。

常见问题二： AI 改代码时把样式弄乱了？不用担心，Onlook 每次 AI 操作都会在本地生成一个快照，你可以在右侧历史记录里一键回滚到之前的状态。

相关问题

Onlook 和 Cursor 能同时用吗？ 完全可以，很多人用 Cursor 写逻辑，用 Onlook 调样式，两者不冲突，但要注意别同时打开同一个文件，避免冲突。

Onlook 支持 Vue 或 Svelte 吗？ 目前官方明确只支持 React 和 Next.js，Vue 支持在 GitHub 的 Roadmap 里，但短期不会上线。

Onlook 的 AI 可以训练自己的设计系统吗？ 可以，你可以在设置里上传你的设计令牌（颜色、字体变量），AI 在生成样式时会优先匹配你的设计规范。

用 Onlook 改完代码后，能直接部署吗？ 当然可以，它改的是你本地真实文件，之后用你自己的部署流程（Vercel、Netlify 等）即可，不锁定平台。

Onlook 有中文界面吗？ 目前界面是英文的，但 AI 对话支持中文输入，你直接用中文说“把标题改成蓝色”也能识别。