Onlook

Onlook 是什么

Onlook 是一款专为现代前端开发打造的开源 AI 视觉编辑器，它巧妙地在设计与编码之间架起了一座桥梁。通过直观的“所见即所得”可视化界面，用户可以直接对 React、Tailwind CSS 等项目进行拖拽和样式修改，而 Onlook 会在后台自动、无损地将这些视觉调整转化为干净、规范的真实代码。这极大地简化了前端还原设计的流程，让界面调整变得像编辑 Figma 一样简单高效。

适合谁

• 前端开发人员：希望摆脱繁琐的 CSS 调试，快速调整页面布局与样式，并保持本地代码库的整洁。
• UI/UX 设计师：渴望突破传统设计稿的限制，直接在真实运行的代码项目上进行视觉微调，实现完美的像素级还原。
• 独立开发者与初创团队：需要高频迭代产品界面，利用 AI 辅助设计能力快速构建和优化前端组件。

能不能用、怎么用（访问指南）

• 访问地址：官方网站为 onlook.com，开源代码及最新客户端版本亦可通过其官方 GitHub 仓库获取。
• 地区可用性：该工具主要以本地客户端形式运行，全球用户均可访问官网。中国大陆用户在访问官网、下载客户端或同步 npm 依赖包时，可能会因网络环境遇到延迟，建议在必要时使用网络加速工具。
• 注册：下载和使用本地开源核心功能通常无需强制注册账号。若需使用云端协作、团队同步或某些高级 AI 辅助功能，可能需要绑定 GitHub 账号或通过邮箱进行登录。
• 费用：其核心编辑器采用开源协议，本地个人使用基本免费。对于团队协作、高级云端托管及企业级 AI 功能，后续可能会推出相应的付费订阅计划，具体定价建议以官网最新公布的信息为准。
• 语言：软件的操作界面和官方文档目前主要为英文。由于其本质是直接编辑用户的本地项目代码，因此完全支持在中、英、日等多种语言的项目中部署和使用。

跨生态对比：Onlook vs 同类

维度	Onlook	Cursor	Builder.io
核心定位	React 视觉代码编辑器	AI 辅助代码编辑器（IDE）	视觉页面构建器与 CMS
工作流	在可视化界面直接修改 React 组件，自动重写本地代码	通过对话和代码补全，由 AI 辅助编写逻辑与结构	在云端平台可视化编辑，通过 API 渲染到现有网站
适用人群	偏向视觉的前端、UI 设计师	纯开发人员、程序员	运营、市场、产品经理及前端
开源属性	是（开源，支持本地运行）	否（闭源商业软件）	否（核心为 SaaS 服务，提供部分 SDK 开源）

选择建议：如果您正在寻找一款能够“像操作 Figma 一样直接修改 React 真实代码”的本地工具，并且看重开源与代码自主权，Onlook 是目前非常前沿的选择。如果您更侧重于通过文字对话让 AI 帮你编写复杂的业务逻辑代码，那么 Cursor 等 AI IDE 会更合适；而如果您的团队需要让非技术人员（如运营或市场）在不触碰核心代码库的前提下频繁更新网页内容，则 Builder.io 这种视觉 CMS 是更成熟的方案。