设计师专属的 Cursor —— 一款开源、视觉优先的代码编辑器

使用 AI 在 Next.js + TailwindCSS 中构建网站、原型和设计。通过可视化编辑器直接在浏览器 DOM 中进行编辑。实时用代码进行设计。这是 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等产品的开源替代方案。

🚧 🚧 🚧 Onlook for Web 仍在开发中 🚧 🚧 🚧

我们正在积极寻找贡献者，帮助将 Onlook for Web 打造成卓越的"提示即构建"体验。查看待解决问题获取完整的功能提案（和已知问题）列表，并加入我们的Discord与数百名其他构建者协作。

使用 Onlook 可以实现的功能：

• 几秒内创建 Next.js 应用
  • 从文本或图片开始
  • 使用预制模板
  • 从 Figma 导入
  • 从 GitHub 仓库开始
• 可视化编辑应用
  • 使用类 Figma 界面
  • 实时预览应用
  • 管理品牌资产和设计令牌
  • 创建和导航至页面
  • 浏览图层 —— 原功能位于Onlook Desktop
  • 检测和使用组件 —— 原功能位于Onlook Desktop
  • 管理项目图片 —— 原功能位于Onlook Desktop
• 开发工具
  • 实时代码编辑器
  • 保存和恢复检查点
  • 通过 CLI 运行命令
  • 连接应用市场
  • 本地编辑代码 —— 原功能位于Onlook Desktop
• 几秒内部署应用
  • 生成可分享链接
  • 链接自定义域名
• 与团队协作
  • 实时编辑
  • 添加评论

Onlook for Desktop（即 Onlook Alpha）

我们正在早期预览 Onlook Web 版本。如果您需要可下载的桌面 Electron 应用，请移步至Onlook Desktop。

为何我们要转向网页版？阅读我们的决策：从 Electron 迁移至 Web

快速开始

即将通过托管应用或本地运行提供。

使用方法

Onlook 可运行于任何 Next.js + TailwindCSS 项目，将您的项目导入 Onlook 或在编辑器中从头开始创建。

使用 AI 聊天功能创建或编辑您正在开发的项目。任何时候，您都可以右键点击元素以在代码中精确定位该元素的位置。

绘制新的 div 元素并通过拖放在其父容器内重新排列它们。

与网站设计并排预览代码。

使用 Onlook 的编辑器工具栏调整 Tailwind 样式、直接操作对象并试验布局。

文档

完整文档请访问 docs.onlook.com

贡献指南请参阅文档中的为 Onlook 做贡献。

工作原理

1. 创建应用时，我们将代码加载至 Web 容器
2. 容器运行并服务代码
3. 编辑器接收预览链接并在 iFrame 中显示
4. 编辑器读取并索引容器中的代码
5. 我们检测代码以将元素映射至其在代码中的位置
6. 编辑元素时，我们先在 iFrame 中编辑，再修改代码
7. AI 聊天也具备代码访问权限和工具来理解并编辑代码

理论上，此架构可扩展至任何以声明方式显示 DOM 元素的语言或框架（如 jsx/tsx/html）。目前我们专注于使其在 Next.js 和 TailwindCSS 上良好运行。

完整流程请查看我们的架构文档。

技术栈

前端

• Next.js - 全栈框架
• TailwindCSS - 样式设计
• tRPC - 服务端接口

数据库

• Supabase - 认证、数据库、存储
• Drizzle - ORM

AI

• AI SDK - LLM 客户端
• Anthropic - LLM 模型提供商
• Morph Fast Apply - 快速应用模型提供商
• Relace - 快速应用模型提供商

沙盒与托管

• CodeSandboxSDK - 开发沙盒
• Freestyle - 托管服务

运行时

• Bun - 单体仓库、运行时、打包工具
• Docker - 容器管理

贡献指南

如有改进建议，请 fork 仓库并创建 pull request。您也可以提交问题。

贡献指南和行为准则详见 CONTRIBUTING.md。

贡献者

联系方式

• 团队：Discord - Twitter - LinkedIn - Email
• 项目： https://github.com/onlook-dev/onlook
• 官网：https://onlook.com

许可证

基于 Apache 2.0 许可证分发。详见 LICENSE.md。