Onlook：设计师的光标

什么是Onlook

Onlook是一款开源的、以视觉为先的代码编辑器，专为设计师打造，被称为"设计师的Cursor"。它允许用户在Next.js + TailwindCSS环境中借助AI创建网站、原型和设计。用户可以通过可视化编辑器直接在浏览器DOM中进行编辑，并通过代码实时设计。它是Bolt.new、Lovable、V0、Replit Agent、Figma Make和Webflow等平台的开源替代方案。

主要功能

• 创建和管理Next.js应用
• 从文本或图像描述开始
• 使用预构建模板
• 从Figma导入

• 从GitHub仓库开始

• 可视化编辑工具

• 类Figma的UI界面
• 实时应用预览
• 品牌资产和标记管理
• 页面创建和导航
• 图层浏览
• 组件检测和使用

• 图像管理

• 开发工具

• 实时代码编辑器
• 检查点保存和恢复
• 命令行界面
• 应用市场集成

• 本地代码编辑

• 部署和协作

• 一键部署
• 可分享链接生成
• 自定义域名集成
• 实时协作编辑
• 评论功能

如何使用Onlook

Onlook适用于任何Next.js + TailwindCSS项目。用户可以：

1. 导入现有项目或在编辑器中从头开始
2. 使用AI聊天来创建或编辑项目
3. 右键点击元素以在代码中定位它们
4. 绘制新的div并通过拖放重新排列它们
5. 同时预览代码和网站设计
6. 使用编辑器工具栏调整Tailwind样式并操作对象

技术架构

在Onlook中创建应用时： 1. 代码被加载到Web容器中 2. 容器运行并提供代码服务 3. 编辑器接收并在iframe中显示预览链接 4. 代码从容器中被读取并索引 5. 代码检测将元素映射到它们在代码中的位置 6. 编辑元素时，更改同时应用于iframe和代码 7. AI聊天有代码访问权限和工具来理解和编辑代码

技术栈

• 前端：Next.js、TailwindCSS、tRPC
• 数据库：Supabase、Drizzle
• AI：AI SDK、Anthropic、Morph Fast Apply、Relace
• 沙箱和托管：CodeSandboxSDK、Freestyle
• 运行时：Bun、Docker

目标用户

• 寻求具有代码能力的可视化设计工具的Web设计师
• 偏好在代码旁边进行可视化编辑的开发人员
• 正在向开发过渡的UI/UX设计师
• 在Web项目上协作的团队
• Webflow、Figma或类似设计工具的用户

项目链接

• 网站：https://onlook.com
• 代码库：https://github.com/onlook-dev/onlook
• 文档：https://docs.onlook.com

使用场景和应用

• 快速原型设计：快速创建和可视化Web设计
• 从设计到代码：将设计模型转换为功能性代码
• 可视化编辑：通过可视化界面对网站进行更改
• 协作开发：通过实时编辑在团队中处理Web项目
• AI辅助开发：使用AI帮助生成和修改网站组件
• 教育目的：通过可视化界面学习Web开发
• 客户演示：创建并与客户分享互动原型

该项目目前正从基于桌面的Electron应用过渡到基于Web的应用程序，以提高可访问性和功能集。