Onlook
Cursor for Designers
Explore the docs »
👨💻👩💻👨💻 We're hiring engineers in SF! 👩💻👨💻👩💻
View Demo · Report Bug · Request Feature
中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어
设计师专属的 Cursor —— 一款开源、视觉优先的代码编辑器
使用 Next.js + TailwindCSS 结合 AI 技术构建网站、原型和设计。通过可视化编辑器直接在浏览器 DOM 中进行编辑。实时编码设计。作为 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等产品的开源替代方案。
🚧 🚧 🚧 Onlook 网页版仍在开发中 🚧 🚧 🚧
我们正在积极寻找贡献者，共同将 Onlook 网页版打造成为卓越的"提示即构建"体验。查看待解决问题获取完整的功能提案（及已知问题）列表，并加入我们的Discord与数百名开发者协作。
使用 Onlook 可以实现的功能：
- 数秒内创建 Next.js 应用
- 从文本或图片开始
- 使用预制模板
- 从 Figma 导入
- 从 GitHub 仓库开始
- 可视化编辑应用
- 使用类 Figma 界面
- 实时预览应用
- 管理品牌资产与设计变量
- 创建并跳转至页面
- 浏览图层 - 原功能位于 Onlook Desktop
- 检测并使用组件 - 原功能位于 Onlook Desktop
- 管理项目图片 - 原功能位于 Onlook Desktop
- 开发工具
- 实时代码编辑器
- 保存与恢复检查点
- 通过 CLI 运行命令
- 连接应用市场
- 本地代码编辑 - 原功能位于 Onlook Desktop
- 数秒内部署应用
- 生成可分享链接
- 绑定自定义域名
- 团队协作
- 实时协同编辑
- 添加批注
Onlook 桌面版（又称 Onlook Alpha）
当前 Onlook Web 处于早期预览阶段。如需下载桌面版 Electron 应用，请移步至 Onlook Desktop。
为何转向网页版？了解我们的决策过程：从 Electron 迁移至网页版
快速开始
使用方法
Onlook 可运行于任何 Next.js + TailwindCSS 项目，您可以将现有项目导入 Onlook 或在编辑器内从零开始创建。
通过 AI 聊天功能创建或编辑项目。任何时候，您都可以右键点击元素直接定位到对应代码位置。
通过拖拽操作绘制新的 div 元素并在父容器中重新排列布局。
在网站设计界面并排预览代码效果
使用 Onlook 的编辑器工具栏调整 Tailwind 样式、直接操控对象并尝试不同布局
文档
完整文档请访问 docs.onlook.com
贡献指南详见文档中的 为 Onlook 做贡献
工作原理
- 创建应用时，我们会将代码加载至网页容器
- 容器运行并托管代码
- 编辑器接收预览链接并在 iFrame 中显示
- 编辑器读取并索引容器中的代码
- 通过代码插桩实现元素与源代码位置的映射
- 编辑元素时，先在 iFrame 中修改，再同步至源代码
- AI 聊天功能同样具备代码访问与编辑能力
该架构理论上可扩展至任何以声明式呈现 DOM 元素的语言/框架（如 jsx/tsx/html）。目前我们主要聚焦 Next.js 与 TailwindCSS 的深度适配
完整流程解析请参阅 架构文档
技术栈
前端
- Next.js - 全栈框架
- TailwindCSS - 样式方案
- tRPC - 服务端接口
数据库
AI
- AI SDK - 大语言模型客户端
- Anthropic - 大语言模型供应商
- Morph Fast Apply - 快速应用模型供应商
- Relace - 快速应用模型供应商
沙盒与托管
- CodeSandboxSDK - 开发沙盒
- Freestyle - 托管服务
运行时
参与贡献
如果您有改进建议，欢迎 Fork 本仓库并提交 Pull Request。您也可以直接提交问题。
请参阅 CONTRIBUTING.md 了解贡献指南和行为准则。
贡献者
联系我们
- 团队联系： Discord - Twitter - LinkedIn - Email
- 项目主页： https://github.com/onlook-dev/onlook
- 官方网站： https://onlook.com
许可协议
基于 Apache 2.0 许可证分发。详见 LICENSE.md 获取更多信息。