在无限画布上进行可视化编辑
在无限画布上编辑实时 React 组件，同时让代码库始终作为事实来源。
什么是 Onlook？
Onlook 是一款面向设计师和产品团队的可视化代码编辑器，适合希望直接在真实代码库中工作的团队。它将基于画布的编辑体验与代码优先的输出相结合，让项目代码始终作为事实来源，帮助团队进行设计、原型制作和迭代。
Onlook 专注于实时 React 组件、无限画布和 AI 辅助编辑。它还强调团队协作、Storybook 等真实设计系统的使用，以及开源可用性；同时，公司也通过销售流程提供托管选项。
Onlook 能做什么？
AI 辅助修改
使用聊天功能修改选中的元素，并直接在编辑流程中获得代码辅助。
团队协作
与团队成员实时协作，让工作始终基于同一底层产品代码。
与设计系统保持一致
引入团队实际使用的设计系统，包括基于 Storybook 的组件，让新工作符合现有模式。
分支与版本控制
管理分支和版本历史，帮助团队组织工作并跨项目审查更改。
代码所有权与导出选项
将工作导出到本地、发布到 GitHub，或通过链接托管；对于希望自定义工具的团队，还可使用开源版本。
使用场景
“网站与原型创建”
直接在真实代码库中创建网站和原型，让设计反映可实现的产品工作，而不是彼此割裂的设计稿。
“组件级迭代”
使用画布和聊天工作流迭代实时 React 组件，同时在工作过程中查看实现细节。
“设计系统驱动的协作”
将共享设计系统引入编辑器，让团队能够复用既有组件，并使新工作与现有 UI 模式保持一致。
“团队工作流与版本化编辑”
使用分支、版本历史和协作功能，与团队成员审查更改，并管理同一项目上的并行工作。
“自托管与代码所有权交付”
自托管开源产品，或将工作导出到本地计算机、GitHub 或托管链接，以便掌握代码所有权。
常见问题
Onlook 是什么？
Onlook 是一款用于网站的开源可视化编辑器。来源信息将其描述为一种让团队无需编码知识即可创建和设计原型及网站的方式，同时仍以代码作为事实来源。
我可以使用 Onlook 做什么？
来源信息显示，你可以使用 Onlook 创建网站、原型、用户界面，以及演示文稿和模型稿等其他视觉内容。它的定位是直接在真实代码库中进行设计。
Onlook 有免费版本吗？
有。Onlook 可通过 GitHub 免费自托管。对于托管云版本，网站要求用户联系团队或预约演示。
如何使用 Onlook？
Onlook 表示，你可以在无限画布上进行设计，选择单个元素，并使用聊天功能修改它们。产品强调，在整个工作流中，代码始终是事实来源。
Onlook 提供哪些定价选项？
定价页面列出了面向个人和小型团队的免费 Starter 版本，以及采用定制定价的 Teams 选项。页面还表示，现有付费方案用户可以继续使用 Onlook。
快速信息
- 类别
- 可视化代码编辑器
- 主要用户
- 设计师、产品团队和开发者
- 平台
- 网页
- 来源域名
- onlook.com
- 定价
- 免费自托管选项；Teams 采用定制定价
- 工作流
- 无限画布、元素选择和聊天驱动的编辑
Onlook 流量分析
流量数据仅供参考。
- 月访问量
- 15.9K
- 全球排名
- #1,565,492
- 用户跳出率
- 37.1%
- 平均访问时长
- 00:56
- 每次访问页数
- 1.97
- 域名评分
- 58
流量趋势
| 5月 | 17983 |
|---|---|
| 6月 | 11624 |
| 7月 | 15893 |
流量来源
暂无流量分析数据。
主要访问地区
未知34.1%
未知12.4%
未知11.5%
未知10.2%
未知8.5%
未知23.3%
Onlook 替代品
Aperture
github.com
一款遵循先规划后应用工作流的 AI 代码编辑器：规划变更、暂存差异，并在应用前进行检查。
AutonomyAI
autonomyai.io
面向产品经理、设计师和工程团队的原生 AI 产品交付平台，将想法转化为现有代码库中的可上线代码变更，并由工程师审核合并。
Heym
heym.run
Heym 是一个可查看源代码、可自托管的 AI 工作流自动化平台，提供可视化编辑器，用于构建和运行智能体工作流，帮助自动化、平台和 AI 团队在自有基础设施上编排智能体、RAG、审批流程并追踪执行过程。
Polygres
polygres.com
Polygres 是一个基于 PostgreSQL 的智能体工作流平台，将图遍历、向量搜索和混合检索整合在一个系统中。可自行托管或使用托管云服务，将实时数据库行转化为 AI 智能体可查询的上下文。
Zed
zed.dev
Zed 是一款面向 macOS、Linux 和 Windows 的高性能多人协作代码编辑器，支持智能体式 AI 工作流、实时协作，以及通过托管模型、自有密钥、订阅、网关或本地模型灵活使用模型。
Cline
cline.bot
Cline 是一款开源 AI 编程代理，可作为 VS Code 扩展、CLI 和企业版使用。它通过基于权限的操作帮助开发者创建、编辑和验证代码，并采用按使用量计费的 AI 推理定价。