onlook-dev/onlook

项目概览

它支持在浏览器 DOM 上可视化编辑并与真实代码保持同步，可从文字或图片提示创建 Next.js 应用，并作为 Bolt.new、Lovable、V0 等产品的开源替代方案提供。

项目类型

AI 编程

应用场景

编程开发

部署方式

查看项目说明

License

Apache-2.0

适合谁

• 使用 Next.js + TailwindCSS 的开发者，尤其是想在真实代码之上进行可视化设计的人。
• 需要从文字或图片提示快速起步制作网站或原型的用户。

核心能力

• 可以从文字提示、图片提示或预置模板出发，快速创建一个 Next.js 应用。
• 在可视化编辑器中直接编辑浏览器 DOM，右键可导航到该元素在代码中的确切位置。
• 通过 AI 对话创建或编辑项目，AI 拥有代码访问权限以及用于理解和编辑代码的工具。

限制与风险

• 目前专注于 Next.js 和 TailwindCSS，其他声明式 DOM 框架仅是理论上的可能性。
• 数据边界与成本依赖情况尚不明确；运行涉及 Supabase、CodeSandboxSDK、Freestyle 等外部服务以及通过 OpenRouter 接入的 LLM 等模型服务，采用前建议确认这些依赖对数据和成本的影响。

如何开始

• 可使用 onlook.com 上的托管应用，或按照 docs.onlook.com/developers/running-locally 的文档在本地运行；README 未包含本地安装步骤，本地部署难度尚不明确。

核验依据

• README: <strong>The design tool for AI-native designers — now in early access.</strong>
• README: Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make edits directly in the browser DOM with a visual editor. Design in realtime with code. An open-source…
• README: - [x] Create Next.js app in seconds - [x] Start from text or image - [x] Use prebuilt templates
• README: Use our [hosted app](https://onlook.com) or [run locally](https://docs.onlook.com/developers/running-locally).
• README: Onlook will run on any Next.js + TailwindCSS project, import your project into Onlook or start from scratch within the editor.

来源更新时间：2026-10-04T18:22:04Z

打开原始 GitHub 项目