Onlook

Onlook 工具定位是什么：先看最大局限

Onlook 是一款开源的视觉优先代码编辑器，专为 React 应用设计，尤其针对 Next.js + TailwindCSS 技术栈。新用户试用前必须知道：该工具目前只支持这套框架组合。用 Vue、Svelte 或 Angular 的项目无法直接使用。

在这个限制下，Onlook 做对了一件事：把 Figma 式拖拽和 VS Code 式代码编辑放进同一个浏览器窗口。左侧是可视化画布，右侧是实时代码视图。设计师拖拽调整样式，代码同步变化。开发者修改代码，画布即时更新。

根据 2025 年 12 月 GitHub 公开数据，该项目已获得超过 22.5K 星标。2025 年 2 月时星标数为 8,204，9 个月增长约 14.3K。这个增速说明社区认可其方向。但框架限制仍是最大门槛。

Onlook 主要特点：四个功能模块拆开看

AI 驱动项目创建：从文本到 Next.js 应用

用户输入一段文本描述、上传图片或导入 Figma 文件，AI 可生成完整 Next.js 项目结构。实测案例：输入乔布斯生平材料，约 1 分钟生成响应式网站，自动适配移动端。生成后直接访问本地 3000 端口即可预览。

可视化编辑：拖拽修改布局和样式

界面类似 Figma。点击元素即可拖拽调整边距、修改颜色、编辑文本。所有操作无需手写 CSS。右侧代码视图实时显示对应的 TailwindCSS 类变化。

实时代码同步：双向映射引擎

设计变更自动转换为 React 和 TailwindCSS 代码。技术实现依赖 iframe 将 DOM 元素映射到源代码位置。右键点击网页元素，可直接定位到代码中对应行。

协作与部署：本地优先的团队功能

支持多人实时编辑和评论，类似 Google Docs。一键部署可生成分享链接。核心原则是本地优先：代码保留在用户设备上，不经过云端托管。

Onlook 使用方法：从安装到第一次拖拽

桌面客户端安装：一条命令连接 React 项目

下载安装客户端后，通过一条命令将 Onlook 连接到现有 React 项目。无需迁移代码或重写组件。支持 Mac、Windows、Linux 三个平台。

本地部署：开源代码库自托管

从 GitHub 克隆代码库，使用 Node.js 和 Docker 运行。环境要求 Node.js v18+、Bun 运行时。适合需要完全控制代码的团队。本地部署需自行配置 AI 模型 API 密钥。

核心操作流程：从导入到生成代码

导入现有项目或 AI 生成新项目。拖拽修改 UI，查看实时代码变化。最后推送代码到仓库。整个流程在浏览器内完成，无需切换工具。

Onlook 和同类差在哪：三个替代品对比

对比 Figma：设计稿到代码的鸿沟

Figma 是纯设计工具，导出代码需要插件或手动实现。Onlook 直接修改 React 组件，跳过设计交付环节。设计师在 Figma 里画完，开发者还要重新实现一遍。Onlook 省掉这一步。

对比 Cursor：设计师与开发者的分工

Cursor 是 AI 代码编辑器，面向开发者。Onlook 面向设计师和产品经理，提供可视化界面而非纯代码编辑。两者用户群体不同。Onlook 自称"设计师的 Cursor"，但实际定位更接近 Figma 与 VS Code 的混合体。

对比 Builder.io：开源与商业化的取舍

Builder.io 是商业化无头 CMS，提供可视化编辑但代码托管在云端。Onlook 开源且本地运行，代码完全归用户所有。Builder.io 适合企业级内容管理，Onlook 适合需要代码控制权的团队。

Onlook 适合什么人用：五个实际场景

快速 UI 原型设计：设计师直接操作 React 环境

设计师在实时 React 环境中拖拽调整界面，无需等待开发人员实现设计稿。原型可直接用于用户测试。

设计开发协作：减少沟通成本

设计师和开发者同时编辑项目，评论功能支持异步沟通。有案例显示视觉-代码往返效率提升 2 倍以上。

产品经理独立建页面：非技术人员可用

产品经理通过 AI 聊天和拖拽创建页面，无需编写代码。案例显示可独立完成简单页面。

开源项目贡献：可视化降低门槛

开源项目贡献者无需熟悉代码结构，通过可视化界面修改 UI 并提交代码。降低首次贡献难度。

教学演示：快速生成示例网站

教师或演讲者用一句话生成网站，作为教学或演示素材。实测约 1 分钟生成响应式页面。

Onlook 的核心亮点解析：三个具体收益

降低技术门槛：设计师无需写代码

设计师通过拖拽和 AI 聊天操作组件，无需理解 React 语法。产品经理可独立创建页面。非技术人员能直接修改生产代码。

提升协作效率：视觉-代码往返缩短

设计变更实时同步为代码，减少设计稿到代码的转换时间。有案例显示效率提升 2 倍以上。协作不再依赖截图和标注。

保证代码质量：生产级 React 代码

AI 生成代码基于 Next.js + TailwindCSS，通过 Prettier 格式化，可直接用于部署。非黑箱输出，用户可审查每一行代码。

Onlook 版本变化：近 6 个月的关键更新

2025 年 9 月发布的 v0.1.27 引入智能组件功能，自动识别项目中的可复用组件。同时增强 AI 项目创建，支持更复杂的自然语言描述。

GitHub 星标从 2025 年 2 月的 8.2K 增长至 12 月的 22.5K。9 个月增长约 14.3K，月均约 1.6K。这个增速在开源设计工具中属于较快水平。

Onlook 总体评价：开源社区的真实反馈

综合 GitHub 星标、社区讨论和实测体验，Onlook 适合 Next.js 项目。框架支持有限是主要短板。

优点：开源免费、本地优先、代码可控。缺点：仅支持 Next.js + TailwindCSS，其他框架无法使用。

社区反馈集中在两点：一是可视化编辑确实降低门槛，二是框架限制让很多团队无法采用。目前尚无公开数据表明官方有明确的多框架支持时间表。

Onlook 适用人群画像：谁该用谁不该用

适合人群：React 生态内的设计与开发

Next.js + TailwindCSS 项目团队。需要快速原型的设计师。希望减少沟通成本的产品经理。重视代码控制权的开发者。

不适合人群：非 React 技术栈与纯小白

使用 Vue/Svelte/Angular 的团队。完全没有技术背景的用户。需要复杂后端逻辑的项目。纯设计工具用户可能觉得代码视图干扰。

Onlook 国内可用性：访问与中文支持

官网 onlook.com 可正常访问。桌面客户端支持中文界面。该工具完全免费开源，无需付费。

国内访问速度暂无公开测试数据。本地部署需要访问 GitHub 和 Docker Hub，可能受网络环境影响。AI 功能依赖外部模型 API，国内用户需自行解决网络问题。

尚无官方中文文档。社区讨论以英文为主。中文用户可能遇到学习成本较高的问题。