# Onlook

面向设计师和产品团队的网页可视化代码编辑器，支持实时 React 编辑、AI 辅助修改与开源自托管。

- Findings24: <https://findings24.com/zh-CN/tools/onlook>
- 网站: <https://onlook.com>
- 价格: Freemium
- 分类: AI编程助手

## 什么是 Onlook？

Onlook 是一款面向设计师和产品团队的可视化代码编辑器，适合希望直接在真实代码库中工作的团队。它将基于画布的编辑体验与代码优先的输出相结合，让项目代码始终作为事实来源，帮助团队进行设计、原型制作和迭代。

Onlook 专注于实时 React 组件、无限画布和 AI 辅助编辑。它还强调团队协作、Storybook 等真实设计系统的使用，以及开源可用性；同时，公司也通过销售流程提供托管选项。

## Onlook 能做什么？

### 在无限画布上进行可视化编辑

在无限画布上编辑实时 React 组件，同时让代码库始终作为事实来源。

### AI 辅助修改

使用聊天功能修改选中的元素，并直接在编辑流程中获得代码辅助。

### 团队协作

与团队成员实时协作，让工作始终基于同一底层产品代码。

### 与设计系统保持一致

引入团队实际使用的设计系统，包括基于 Storybook 的组件，让新工作符合现有模式。

### 分支与版本控制

管理分支和版本历史，帮助团队组织工作并跨项目审查更改。

### 代码所有权与导出选项

将工作导出到本地、发布到 GitHub，或通过链接托管；对于希望自定义工具的团队，还可使用开源版本。

## 使用场景

### 网站与原型创建

直接在真实代码库中创建网站和原型，让设计反映可实现的产品工作，而不是彼此割裂的设计稿。

### 组件级迭代

使用画布和聊天工作流迭代实时 React 组件，同时在工作过程中查看实现细节。

### 设计系统驱动的协作

将共享设计系统引入编辑器，让团队能够复用既有组件，并使新工作与现有 UI 模式保持一致。

### 团队工作流与版本化编辑

使用分支、版本历史和协作功能，与团队成员审查更改，并管理同一项目上的并行工作。

### 自托管与代码所有权交付

自托管开源产品，或将工作导出到本地计算机、GitHub 或托管链接，以便掌握代码所有权。

## 常见问题

### Onlook 是什么？

Onlook 是一款用于网站的开源可视化编辑器。来源信息将其描述为一种让团队无需编码知识即可创建和设计原型及网站的方式，同时仍以代码作为事实来源。

### 我可以使用 Onlook 做什么？

来源信息显示，你可以使用 Onlook 创建网站、原型、用户界面，以及演示文稿和模型稿等其他视觉内容。它的定位是直接在真实代码库中进行设计。

### Onlook 有免费版本吗？

有。Onlook 可通过 GitHub 免费自托管。对于托管云版本，网站要求用户联系团队或预约演示。

### 如何使用 Onlook？

Onlook 表示，你可以在无限画布上进行设计，选择单个元素，并使用聊天功能修改它们。产品强调，在整个工作流中，代码始终是事实来源。

### Onlook 提供哪些定价选项？

定价页面列出了面向个人和小型团队的免费 Starter 版本，以及采用定制定价的 Teams 选项。页面还表示，现有付费方案用户可以继续使用 Onlook。

## 快速信息

- **类别**: 可视化代码编辑器
- **主要用户**: 设计师、产品团队和开发者
- **平台**: 网页
- **来源域名**: onlook.com
- **定价**: 免费自托管选项；Teams 采用定制定价
- **工作流**: 无限画布、元素选择和聊天驱动的编辑