Question 1

什么是Onlook？

Accepted Answer

**Onlook – Cursor for Designers** 是一款全新一代的视觉代码编辑器，专为设计师和产品经理打造。它让你可以直接在 React 网站上进行设计和编辑，所有改动实时同步到代码中。借助 AI 助力，快速迭代和实验，打造更棒的网页体验。

Question 2

Onlook的核心功能有哪些？

Accepted Answer

* **实时代码编辑**：直接在网站上修改设计，代码自动更新，无需手动切换。  
* **AI 设计助手**：内置 AI，帮你快速生成设计方案和代码建议。  
* **拖拽与调整**：支持元素拖拽、缩放和重新排列，操作直观简单。  
* **组件复用**：自定义组件，轻松在多个项目间替换和复用。  
* **导入多种格式**：支持导入 Next.js、React 代码库和 Figma 设计稿。  
* **版本管理**：自动保存历史版本，随时回退，避免丢失进度。  
* **本地代码所有权**：所有代码写入本地文件，确保隐私和控制权。  
* **开源透明**：开放源码，开发者可以自由查看和贡献。

Question 3

Onlook的使用案例有哪些？

Accepted Answer

* 快速搭建和迭代网站原型。  
* 设计师与开发者无缝协作，减少沟通成本。  
* 产品经理直接参与设计和调整。  
* 制作视觉演示、网页mockup或复杂的交互页面。  
* 将 Figma 设计转化为真实可用的 React 代码。

Question 4

如何使用Onlook？

Accepted Answer

* 打开 Onlook，选择“开始空白项目”或导入已有 Next.js 应用。  
* 使用拖拽和编辑工具调整页面布局和样式。  
* 利用 AI 聊天功能获取设计建议和代码帮助。  
* 保存并查看实时生成的 React 代码。  
* 通过版本管理随时回退或比较修改。  
* 发布项目，绑定自定义域名，分享给用户。

Question 5

Onlook 可以设计哪些类型的项目？

Accepted Answer

你可以用 Onlook 原型设计、构思和创建完整网站，也能做演示和视觉mockup。

Question 6

为什么选择 Onlook 而不是其他设计工具？

Accepted Answer

Onlook 以代码为唯一真实来源，设计即是产品，改动实时同步到代码，省去重复工作。

Question 7

我用 Onlook 写的代码归谁所有？

Accepted Answer

代码完全属于你，写入本地文件，不会上传或托管到云端。

Question 8

Onlook 和其他设计工具有什么区别？

Accepted Answer

它是一个视觉代码编辑器，设计和代码同步，支持无限制的视觉创作，不仅限于网页。

Question 9

为什么 Onlook 是开源的？

Accepted Answer

为了让开发者和设计师平等参与设计过程，提供透明度和社区贡献机会。