Onlook

一、产品定位

Onlook 是一款开源、AI 驱动的可视化代码编辑器，被誉为“设计师的 Cursor"。其核心理念是打通设计与开发的壁垒，允许用户直接在真实 React 代码库中进行可视化编辑，并实时生成可运行的代码。

• 核心理念：设计即代码，代码即真相。
• 核心价值：基于真实 React 项目构建，消除“设计稿转代码”的损耗，实现所见即所得。

二、主要功能

• 可视化实时编辑提供类 Figma 的直观界面。
• 支持拖拽组件及直接修改样式（布局、颜色、间距等）。
• 所有修改实时写入 React 及 Tailwind 代码。
• AI 辅助设计开发利用自然语言生成组件、页面或交互逻辑。
• AI 能够理解项目结构，智能生成生产级代码。
• 支持通过对话快速调整样式或逻辑。
• 代码即源码（Single Source of Truth）设计直接基于真实源代码，无需中间转换。
• 支持导入现有的 React / Next.js 项目直接编辑。
• 设计系统管理集中管理品牌色、字体及设计令牌（Design Tokens）。
• 支持全局样式一键同步，保持 UI 一致性。
• 团队协作与版本控制支持多人实时在线协作。
• 提供历史记录回溯与版本管理功能。
• 支持团队项目共享。
• 部署与发布支持自定义域名部署。
• 提供一键部署功能，支持云端托管或自托管。
• 桌面端应用提供 Mac 和 Windows 客户端。
• 支持本地运行，确保代码安全可控。

三、适用人群

• 设计师（具备基础网页知识）：无需从零写代码，直接在真实代码层做设计，产出可直接交付的开发代码。
• 前端开发者（React/Next.js）：利用可视化调试、AI 生成组件来加速开发流程，提升编码效率。
• 产品经理/创业者：快速制作可交互的原型，基于代码进行 MVP 验证与迭代。
• 小团队/初创公司：弥合设计与开发团队间的鸿沟，降低沟通成本，实现一人多岗。

四、免费与付费模式

1. 免费版（开源自托管）

• 授权方式：MIT 开源协议。
• 部署方式：支持 GitHub 免费部署。
• 功能限制：无功能限制，代码完全自主掌控。
• 适合场景：个人开发者、对数据隐私敏感或希望完全控制部署环境的团队。

2. 付费版（云端托管企业版）

• 服务模式：提供云端托管服务，需联系团队预约演示。
• 核心权益：
• SSO（单点登录）支持。
• 审计日志与安全合规保障。
• 企业级安全策略。
• 专属技术支持。

五、如何使用（快速上手）

• 环境准备安装 Node.js 环境。
• 推荐安装 Bun 运行时以提升性能。

1. 自托管部署（免费）bash

git clone https://github.com/onlook-dev/onlook.git
cd onlook
bun install
bun run setup:env
bun run start
git clone https://github.com/onlook-dev/onlook.git
cd onlook
bun install
bun run setup:env
bun run start

• 导入现有项目进入任意现有的 React / Next.js 项目根目录。
• 运行 npx onlook 即可启动编辑器。
• 可视化编辑打开桌面端，新建空白项目或导入代码。
• 通过拖拽组件、调整样式或 AI 对话生成内容。
• 所有改动均实时同步到代码文件。
• 协作与发布在项目设置中邀请成员协作。
• 完成开发后，可直接导出代码或部署上线。

六、避坑点（关键限制与注意）

• 技术栈限制仅支持：React 与 Tailwind CSS。
• 暂不支持：Vue、Angular、Sass 等非主流或特定前端框架。
• 上手门槛虽为低代码工具，但用户需具备基础 React 知识与网页布局常识。
• 纯视觉设计师若无代码结构概念，可能难以理解底层代码逻辑。
• AI 能力边界复杂交互、高级动画、第三方 API 集成通常需要手动补全代码。
• AI 更适合用于生成基础组件、修改样式及常规逻辑。
• 移动端适配响应式断点需开发者手动精细调整。
• 系统自动适配能力相对有限，无法完全替代专业开发。
• 免费版局限自托管需用户自行维护服务器。
• 无官方云端协作功能（如实时多人编辑需自建或付费）。
• 企业级安全审计功能仅在付费版提供。
• 数据安全若使用云端托管，需上传代码，敏感项目应优先选择本地自托管模式。