Onlook：AI 可视化代码设计编辑器

项目简介

Onlook 是一个开源的、视觉优先的代码编辑器，面向希望在真实代码上进行设计的设计师和视觉工程师。它支持 Next.js + TailwindCSS 项目，可以通过 AI 对话创建或修改项目，也可以像使用 Figma 一样在浏览器中直接拖拽、调整样式和布局。README 将其定位为 Bolt.new、Lovable、v0、Replit Agent、Figma Make、Webflow 等产品的开源替代方案。

项目由 TypeScript 编写，采用 Next.js、TailwindCSS、tRPC、Supabase、Drizzle、AI SDK 等技术栈，基于 Apache-2.0 许可证开源。

主要功能

• 快速创建 Next.js 应用：支持从文本或图片开始，也可使用预置模板。
• 可视化编辑：提供类似 Figma 的界面，实时预览应用，管理品牌资产与 design tokens，创建和跳转页面，浏览图层，管理项目图片。
• 组件识别与使用：可检测并使用项目中的组件（该能力此前在 Onlook Desktop 中提供）。
• 分支实验：通过 Branching 尝试不同设计方案。
• 开发工具：内置实时代码编辑器，支持保存与恢复检查点、通过 CLI 运行命令，并可连接应用市场。
• 部署：生成可分享链接，绑定自定义域名。
• 实时协作：支持实时编辑（评论功能尚未完成）。
• AI 能力：支持一次排队多条消息，通过 AI 对话理解并修改代码。
• 元素定位：右键点击页面元素，可直接打开该元素在代码中的对应位置。
• 拖拽布局：可绘制新的 div，并在父容器内拖拽调整排列。
• 并排预览：代码与页面设计可以并排查看。
• 样式调整：通过编辑器工具栏修改 Tailwind 样式、直接操作对象并试验布局。

安装与使用

可以直接使用托管版本：https://onlook.com。如需在本地运行，README 指向官方文档：https://docs.onlook.com/developers/running-locally。

Onlook 可运行在任何 Next.js + TailwindCSS 项目上。你可以把已有项目导入 Onlook，也可以在编辑器内从零开始。使用 AI 聊天创建或编辑项目时，随时可以右键点击元素，跳转到代码中的精确位置。

注意事项

• 当前重点支持 Next.js 与 TailwindCSS 项目，非 Next.js 和非 Tailwind 项目尚在计划中。
• README 中的功能清单显示，部分能力尚未完成，例如拖拽组件面板、评论、将图片作为参考或资产、在项目中配置和使用 MCP、让 Onlook 将自身作为工具调用进行分支创建与迭代等。
• 托管产品处于 early access 阶段，README 提供了 waitlist 链接。
• 完整文档见 docs.onlook.com。

本作品整理自 GitHub 开源项目 onlook-dev/onlook，原作者 @onlook-dev，许可证 Apache-2.0。中文介绍由 AI 根据项目 README 整理，以原仓库为准。