Onlook是什么？
一款可像 Figma 那样以可视化操作编辑 React 等 Web 应用、并将改动实时反映到真实代码的设计与开发工具（"面向设计师的 Cursor"）。还具备从提示词生成/编辑应用的 AI 功能，并以开源（Apache 2.0，免费）版与托管版（封闭测试）的混合形式提供。支持 Next.js、React、Tailwind；GitHub Star 超 2.6 万。
可解决的业务课题
「Onlook」的服务详情
Onlook 是什么
Onlook（オンルック）是一款可以像 Figma 那样以可视化操作编辑 React 等 Web 应用、并将改动实时反映到真实代码的设计与开发工具。它以"面向设计师的 Cursor"为口号，当你直接拖拽或点击元素时，对应的代码会随之改写。近来它还具备从提示词生成、编辑应用的 AI 功能，并以开源（Apache 2.0）版与浏览器托管版（onlook.com）的混合形式提供。GitHub Star 超过 2.6 万。
来源: Onlook（GitHub）
Onlook 提供两种形式：开源版（免费、可自托管）与托管版（onlook.com）。托管版目前为抢先体验（封闭测试），面向个人的具体价格尚未公开（截至 2026 年 8 月）。
设计操作即是代码
Onlook 的特点在于产物不是黑箱——你直接编辑真实代码库。在浏览器中拖拽、缩放元素或调整 Tailwind 样式时，改动会反映到代码。与从提示词生成应用的"vibe coding"工具不同，它力求兼顾可视化编辑与真实代码。
功能
01可视化编辑
- 直接操作元素 — 拖放、缩放、排序
- Tailwind/CSS 调整 — 用样式工具栏编辑外观
- 代码↔元素映射 — 改动实时反映到代码
02用 AI 生成与编辑
- AI 聊天 — 从提示词生成、编辑应用
- Design Branching 与 Checkpoint — 分支实验、保存/恢复
- 支持 MCP — 支持 Model Context Protocol
03发布与集成
- 部署 — 通过分享链接与自定义域名发布
- GitHub 集成 — 将代码导出到本地或 GitHub
- 团队协同编辑 — 实时协作
使用方法
-
选择开源版或托管版
想免费即刻体验就从 GitHub 自托管开源版；想省事就用托管版（抢先体验）。
-
打开或生成项目
打开已有的 React/Next.js 项目，或从提示词生成新项目。
-
用可视化与 AI 编辑
直接操作元素，或用 AI 聊天下达指令来构建。
-
发布或导出
以自定义域名发布，或将代码导出到 GitHub。
价格
开源版基于 Apache 2.0 许可免费（自托管）。浏览器托管版目前为抢先体验（封闭测试），面向个人的具体价格未公开，团队价格需咨询（截至 2026 年 8 月）。
与其他 UI 生成／开发工具的区别
该领域从提示词生成应用的工具越来越多。Onlook 的特点在于开源，并兼顾可视化编辑与对真实代码的直接编辑。
| 维度 | Onlook | 提示词生成型（v0／bolt.new） | 无代码 UI |
|---|---|---|---|
| 编辑方式 | 可视化＋AI＋真实代码 | 以提示词为主 | 以可视化为主 |
| 代码 | 真实代码为 source of truth | 导出生成的代码 | 依赖产物 |
| 提供 | 开源＋托管 | 封闭（托管） | 封闭 |
若以提示词生成为主，可看 v0 或 bolt.new；Google 的 UI 生成可看 Stitch；无代码网页设计可看 STUDIO AI。对想在保留真实代码的同时进行 Figma 式可视化编辑的设计师与开发者而言，Onlook 是有力的选择。
本页信息基于官方网站与 GitHub 在 2026 年 8 月公开的内容。托管版的提供情况与价格可能变动，最新信息请以官方网站为准。
