dalao.ai

Onlook

给设计师用的 Cursor

关于 Onlook

Onlook 现在是一款面向 Visual Engineer 的 Mac 桌面应用：把团队真实的代码仓库跑在一张画布上，用对话让 AI 代理改代码，满意了再作为拉取请求交给工程师审。它出自 On Off, Inc.（YC 2025 冬季批次），现任 CEO 是联合创始人 Daniel Farrell。开发者文档写明，这款桌面应用和 GitHub 上的 onlook-dev/onlook 是两套不同的代码：截至 2026-10-26，那个约 2.7 万星、Apache-2.0 的仓库是早期的浏览器版编辑器，配套指南已经下线；新应用免费下载，源码要等「未来几周」开源时才公开。

编辑部更新于 阅读约 10 分钟

它解决什么问题

官网首页写的是 “No mockups to rebuild”（不用照着设计稿重做）和 “Your work never drifts from what ships”（设计不会和上线版本走样）。Onlook 让设计师直接在代码上工作。官网把目标用户叫做 Visual Engineer，文档的定义是：用可视化工具、AI 代理和工程体系，直接在代码里设计和构建生产软件的人。

当前的产品形态是一款 Mac 桌面应用，架构文档（截至 2026-10-26）写明它是面向 Apple 芯片 Mac 的 Electron 应用。按文档的架构说明，用户选一个本地代码文件夹，Onlook 用 git worktree 在自己的数据目录里复制一份，并从主分支拉出新分支；随后用项目自己的包管理器装依赖，用项目自己的开发命令启动，把运行中的页面以多个画框摆在画布上。用户在侧边对话框里提需求，由 Claude Code 或 ChatGPT 的代理去改这份副本的代码，改完在画布上立刻看到结果；顶栏的状态按钮再一步步引导提交、推送、开拉取请求。

这和 Onlook 早期的做法不同。GitHub 上的 onlook-dev/onlook 是它起家的开源编辑器：在浏览器里把 Next.js 加 Tailwind 的项目放进网页容器运行，用 iframe 展示预览，并给代码插桩，把画面上的元素对应回源码，拖拽和改样式会同时写回代码。开发者文档的原话是，这条线的指南「have been retired, because Onlook has moved on to the desktop app」，旧仓库仍然公开，README、Dockerfile 和 docker-compose.yml 都还在；「The new desktop app is a different codebase」，新应用的源码和开发指南要等它「in the coming weeks」开源后才会发布。

版本沿革：旧仓库最初是 Electron 桌面编辑器。2025 年 4 月，main 分支加入在浏览器里运行的网页编辑器；5 月，Electron 代码从 main 移出，另放进 onlook-dev/desktop 仓库，这个仓库建于 2025-05-15，最后一次推送在 2025-07-17。旧仓库 Releases 页上的版本，直到最后一版 v0.2.32（2025-07-18），附带的都是 Electron 安装包，覆盖 Mac、Windows 和 Linux。网页编辑器本身从没有安装包，文档提到的自部署方式只有仓库里的 Dockerfile 和 docker-compose.yml；官方文档现在说的「较早的浏览器版 Onlook」指的就是这个网页编辑器。现在的 Mac 应用按架构文档也是 Electron 应用，但和上面两条线都不是同一套代码。

谁做的：公司主体是 On Off, Inc.（官网页脚），2024 年成立，参加了 YC 2025 冬季批次。YC 页介绍，两位创始人是做了十多年设计的 Daniel Farrell 和前 Amazon、ServiceNow 工程师 Kiet Ho。Daniel 曾是共享滑板车公司 Bird 的前 100 名员工之一，联合创办过长途拼车项目 Wanderlift，也做过 DIMO 的增长负责人；Kiet 在 2024 年 1 月先开始做这家公司，随后在 YC 的联合创始人匹配平台上找到了 Daniel。GitHub 组织 onlook-dev 建于 2024-01-21，主仓库建于 2024-06-25。团队自称 The Odyssey，招聘流程里有一段付费试工。Daniel 的 GitHub 资料现在仍写着 Onlook.com；Kiet 的资料则已改为在做 Superset。

产品路线大致可以分成三段：2024 年先做开源的 Electron 桌面编辑器；2025 年转成浏览器里的网页编辑器，加上 AI 对话和一键托管，YC 发布帖当时的介绍就是「可以从提示生成新应用，或导入现有的 NextJS/Tailwind 应用」；到 2026 年，又改成现在这种本地运行的 Mac 应用，AI 部分交给用户自己的 Claude Code 或 ChatGPT 代理。

Onlook 是一款免费、本地优先的编辑器，设计师可以在代码里打磨出色的体验。

Onlook 官网首页

核心能力

在真实应用上设计。画布上每个画框都是本地开发服务器的一个实时页面，不是截图。官网原话是 “What you design on is what users get.”（你在什么上面设计，用户拿到的就是什么。）

副本加分支的安全模型。按文档，Onlook 在 ~/Library/Application Support/Onlook Studio/workspaces 下为每个项目建一个 git worktree，代理只能在这里运行，Onlook 拒绝在其他位置启动代理；如果复制失败就直接停下，不会退回到用户的原始文件夹里操作。仓库已经忽略的 .env 文件会被复制进副本，方便应用正常启动，但依然不会进入提交。

自带 AI 账号。支持两种代理：Claude Code 内置在应用里；ChatGPT 的代理在首次设置时下载，约 111 MB。两者都在本机运行，使用用户自己的账号。登录 ChatGPT 会覆盖这台 Mac 上已保存的其他 OpenAI 凭据。

分级权限。使用 Claude 时有 Auto、Ask、Accept edits、Plan 四种模式，默认 Auto；无论哪种模式，推送到 GitHub、创建或合并拉取请求、强制推送、删分支、硬重置每一步都要用户单独确认。使用 ChatGPT 时只有 Full access 一种模式，不会停下来询问，但所有操作仍限于副本内。

交接就是普通的拉取请求。分支名带团队或设计师的前缀，比如 acme/pricing-hero；提交署名是设计师本人的 git 身份。仓库里已有的 AGENTS.md 或 CLAUDE.md 会被遵守。检查没通过时可以点 Fix Checks，让代理读取失败信息并尝试修复。

Artifacts 草图。还不到改代码的阶段时，画布上可以先画一页草图，存在仓库之外，可以导出 HTML 或 PDF；定稿后再让代理把它做进应用。

和同类比

旧 README 把 Onlook 定位为 Bolt.new、Lovable、V0、Replit Agent、Figma Make 和 Webflow 的开源替代品；新文档则强调，多数 AI 原型工具从一句提示开始生成一个独立原型，而 Onlook 从团队已有的代码、组件和样式出发。

Lovable、Bolt.new、v0：从零生成一个能跑的新应用或新页面，面向还没有代码库、要先验证想法的个人和早期团队。Onlook 面向已经有成型产品、改动要经过工程评审的团队。

Figma 及 Figma Make：Figma 在设计稿和团队设计系统上工作；Onlook 让设计改动直接落到生产代码里。

直接用 Claude Code、Cursor 或 Cline：这些代理本身就在终端或 IDE 里运行，不受 Onlook 的平台限制，面向会读代码的开发者。Onlook 在同样的代理外面加了一层可视化画布、副本隔离和图形化的 git 流程，主要是为不想碰终端的设计师准备的。

Webflow：把营销站的托管和 CMS 放在一起。Onlook 不托管网站，产出只是用户仓库里的普通代码。

谁在用，适合谁

采用情况多为厂商口径：官网称在 GitHub 上越过 2.7 万星，About 页写着 100 位开源贡献者；YC 页称它两次登上 GitHub 趋势榜第一、登上过 Hacker News 第一。截至 2026-10-26，按 GitHub API，onlook-dev/onlook 有 27,002 星、2,136 个复刻。这些数字都属于旧版浏览器编辑器。

适合谁

已经在一个 React、Next.js 或 Vite 代码库里协作、工程师习惯用 GitHub 拉取请求审代码的产品团队里的设计师。文档写明，最适合的用法是克隆团队的 GitHub 仓库，再在 Onlook 里打开。

已经付费订阅 Claude 或 ChatGPT 的人。Onlook 不另收 AI 费用，直接调用用户自己的套餐；Claude 也可以改用 Anthropic API 密钥。

对代码安全比较敏感的团队。文档承诺项目文件不会上传到 Onlook 服务器，代理只在副本里干活，推送和合并都要经过确认。

想在真实设计系统上快速做几个变体再挑一个的人。画布上可以并排开多个探索，每个都有自己的分支，留下合适的那个再合并。

不适合谁

用 Windows、Linux 的人。Windows 和 Linux 版要排候补名单；Mac 方面，install 页 FAQ 称支持 Intel Mac，文档写仅支持 Apple 芯片。

手上没有代码库、只想从一句话生成一个新原型的人。Onlook 针对的是修改现有代码；从零起步也可以。

项目只能在容器里跑的团队。FAQ 说只在容器里运行的应用暂时不能显示在画布上。

看重开源、要求能审计和修改客户端源码的人。文档写明新 Mac 应用会在未来几周开源。

上手路径

按文档，需要一台 Apple 芯片（M1 或更新）的 Mac、一个 Claude 或 ChatGPT 账号，以及项目运行所需的工具，例如 Node.js。两处官方说法不一致：install 页 FAQ 称支持 Intel Mac，文档写仅支持 Apple 芯片；同一 FAQ 还写明需要 macOS 13 或更高、约 1 GB 磁盘空间。

安装分三步。第一步，应用从 onlook.com/install 下载，放进「应用程序」文件夹，放在其他位置无法自动更新。第二步，应用打开后要求邮箱登录并连接 AI：Claude 会检查本机是否已有 Claude Code 登录，ChatGPT 则会下载自己的代理。第三步，选定团队仓库的本地克隆作为项目。从没用过 git 的 Mac 会弹窗提示安装命令行开发者工具，安装不需要 Xcode。

项目左下角的 Tips 按钮和快捷键 ⌘/ 会列出内置的示例请求和全部快捷键。Plan 模式下代理只读代码、给出方案；切回 Auto 后，代理按方案改代码。改动完成后，顶栏的状态按钮按顺序引导提交、推送和开拉取请求。旧仓库里仍有 Dockerfile 和 docker-compose.yml，可用于自部署旧版浏览器编辑器。旧版网页应用有过已公开的安全漏洞，修复在 2025-12-14 合入 main。

定价与许可证

截至 2026-10-26，Mac 应用免费，AI 用量计入用户自己的 Claude 或 ChatGPT 套餐，Onlook 不另收费。For Teams 为定制报价，宣传的功能包括项目模板、分支和版本历史、主题与品牌管理，以及 SSO（SAML/OAuth）、审计日志和管理控制。定价页 FAQ 仍写着「可以在 GitHub 上免费自托管，托管云版请联系团队」，这是旧产品的说法。

许可证要分开看。截至 2026-10-26，旧版浏览器编辑器仓库 onlook-dev/onlook 按仓库 LICENSE 以 Apache-2.0 开源；开发者文档称新 Mac 应用是「a different codebase」（另一套代码），并写团队「preparing to open-source it in the coming weeks」（正准备在未来几周开源）。

风险与局限

第一，产品处在转型期。旧仓库最后一次发版是 v0.2.32（2025-07-18），此后主分支多是 README 和官网改动。截至 2026-10-26，main 分支最近一次提交是 7 月 22 日 10:07 (UTC+8) 的项目成员授权安全修复；仓库在 10 月 22 日 04:42 (UTC+8) 还有过推送，但没有进入 main。新应用仍标着 Beta，文档说有些功能显示为「即将推出」。官网、定价页和 GitHub 之间的说法也还没统一。

第二，旧版有过安全问题。NVD 在 2025-11-08 公布了针对旧版网页应用 0.2.32 的三个漏洞，CVSS 3.x 评分分别为 7.6（越权修改项目）、6.5（OAuth 开放重定向）和 6.1（DOM 型 XSS），修复在 2025-12-14 合入；2026-07-22 又合入一次全面的项目成员授权修复。v0.2.32 及更早的代码不包含 2025-12-14 的修复，2025-12-14 之后的 main 分支才包含。

第三，团队有变动。截至 2026-10-26，GitHub 贡献者接口中旧仓库排第一的是联合创始人 Kiet Ho（1,035 次提交），Kiet Ho 的 GitHub 简介已写明是「前联合创始人」。YC 页现在只列出 Daniel Farrell 一位在职创始人。

第四，平台和代理有限。install 页 FAQ 称支持 Intel Mac，文档写仅支持 Apple 芯片；代理只有 Claude Code 和 ChatGPT，Cursor、OpenCode 还在「即将支持」。使用 ChatGPT 时没有逐步确认。另外，应用会把使用事件发回 Onlook，并关联用户的登录邮箱；官方说明其中不含代码、文件路径和提示词。

我们的判断

Onlook 的特点是：在已有的 React 或 Next.js 代码库上工作，代理用用户自己的 Claude 或 ChatGPT 订阅，改动以可审查的拉取请求交付。它的限制：现在是一款 Beta 版 Mac 应用，文档写新应用源码要等「未来几周」开源时才公开；不跨平台，也不能自部署；它不是旧仓库 onlook-dev/onlook 那个 Apache-2.0 开源编辑器。

亮点

Onlook 最初是一个编辑器：设计师在运行中的 React 应用里选中一个元素，拖动它、改样式，再把改动作为规范的 Tailwind 修改写回源码。它能把一个实时的 DOM 节点精确映射回生成它的那段 JSX。

产品已经换了形态：如今的 Onlook 是另一套代码写成的 Mac 桌面应用，源码暂未公开（团队表示很快会开放）。Apache-2.0 的 onlook-dev/onlook 仓库，连同它的 2.7 万星标、0.2.32 版本和提交记录，属于早先基于 Next.js 和 Tailwind 的浏览器编辑器；针对这个旧版网页应用 0.2.32 报告的三个漏洞（CVE-2025-63783、CVE-2025-63784、CVE-2025-63785）已于 2025 年 12 月 14 日修复。

它让设计师直接在产品的真实代码上做设计：Mac 应用把代码仓库跑在画布上，由 AI 代理修改代码，结果作为拉取请求交给工程师审。早先的开源编辑器则把画面上的每个元素映射回生成它的 JSX。

资料来源

官方

  1. Onlook 官网首页onlook.com · 访问于 2026 年 10 月 26 日
  2. Download Onlook for macOS（官网下载页）onlook.com · 访问于 2026 年 10 月 26 日
  3. Onlook 定价页onlook.com · 访问于 2026 年 10 月 26 日
  4. Onlook About 页onlook.com · 访问于 2026 年 10 月 26 日
  5. Onlook 文档：Frequently asked questionsdocs.onlook.com · 访问于 2026 年 10 月 26 日
  6. Onlook 文档：Install Onlookdocs.onlook.com · 访问于 2026 年 10 月 26 日
  7. Onlook 文档：How Onlook keeps your code safedocs.onlook.com · 访问于 2026 年 10 月 26 日
  8. Onlook 文档：Connect your AI (Claude or ChatGPT)docs.onlook.com · 访问于 2026 年 10 月 26 日

动态与深度阅读