在AI赋能设计的时代，设计师与开发者愈发期望能在视觉化的界面中直接操控代码，实现真正的“所见即所得”。今天介绍的 Onlook，正是这样一个充满潜力的开源项目。它被誉为 “设计师的光标” ，是一个由AI驱动、在浏览器中运行的崭新可视化 React 应用编辑器，让你能够边操作画面，边实时修改代码。
一、什么是 Onlook？
Onlook 是一个开源的、以视觉为主导的代码编辑器。它的核心理念在于为设计师和开发者构建一个统一的协作环境，通过AI来生成、编辑乃至部署 React 应用。你可以使用自然语言描述设计需求，让AI自动生成基于 Next.js + TailwindCSS 架构的网站；也可以在画布上实时调整UI，Onlook 会同步更新代码，让创意瞬间落地。
它被视为 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等现有AI建站工具的、更贴近 React 生态的自由开源替代方案。
目前 Onlook 仍处于积极迭代阶段，但已能实现从“文本/图片 → 网页”的完整工作流，是AI真正融入设计与开发流程的原型级产品。
二、用 Onlook 能做什么？
Onlook 融合了AI对话、前端代码生成、视觉编辑与即时预览，几乎覆盖了从构想到上线的全流程。以下是其主要功能亮点：
1. 一键创建Next.js应用
- 直接从文本或图片生成页面；
- 可使用预设模板快速启动；
- 支持从Figma或GitHub导入项目（未来功能）；
- 能将修改直接提交PR到GitHub仓库。
2. 可视化编辑体验
这是 Onlook 最具特色的部分。它提供了一个类似 Figma 的操作界面，可以：
- 实时预览网站；
- 管理品牌素材、色彩、字体等设计 Token；
- 浏览图层与组件树；
- 拖拽新增 div 或组件；
- 分支管理：轻松尝试不同设计版本；
- 支持项目图片批量管理。
3. 强大的开发者工具集成
- 实时代码编辑器，代码与画面双向联动；
- 设置检查点（Checkpoints），随时恢复修改；
- 命令行工具（CLI）集成；
- 一键连接应用市场，获取额外模块支持。
4. 秒级部署
Onlook 支持生成可分享链接，也能绑定自定义域名发布，是原型展示与快速迭代的利器。
5. 实时协同与AI辅助
- 多人实时编辑；
- 未来将支持团队评论与AI智能审查；
- AI可以理解并修改代码，实现自然语言到真实界面的转化。
6. AI 创意扩展计划
Onlook 正在开发更多AI辅助能力：
- 多轮异步消息任务；
- 图像识别与素材自动提取；
- 通过 MCPs 插件体系扩展AI工具调用；
- 支持AI创建设计分支，自动生成不同版本。
三、快速上手：从0到你的第一个AI网页
1. 在线或本地运行
你可以直接访问 onlook.com 使用云端版本，或根据官方文档在本地部署。
2. 简单的使用流程
- 新建一个基于 Next.js + TailwindCSS 的项目；
- 进入 Onlook 编辑器；
- 打开AI对话区，用自然语言指令创建页面；
- 右键点击任何元素，能立即跳转到对应的源代码；
- 拖拽布局、调整样式，AI实时同步代码。
3. 可视化操作示例
直接在画布中拖出新的 div 模块，通过拖拽调整布局结构。
代码与UI实时联动，可以并排预览：
使用工具栏调整 Tailwind 样式，随时尝试新排版：
四、Onlook 的技术架构
Onlook 背后是一套完整的全栈架构，从运行环境到AI模块都经过精心设计。
- 用户创建应用后，代码被加载进独立的 Web 容器；
- 容器运行并生成预览链接；
- 编辑器在 iFrame 中展示预览；
- Onlook 会自动读取并索引项目代码；
- 系统建立 DOM 元素与代码的对应关系；
- 当用户在可视化界面修改元素时，对应代码实时更新；
- AI 模型也可以访问并理解这些代码，进行编辑与优化。
这种架构不仅适用于 React（JSX/TSX/HTML）开发，未来也能扩展到更多前端框架，实现跨语言的 AI 可视化编程。
五、技术栈解读
Onlook 采用了前沿的前端与 AI 技术组合：
前端技术：
- Next.js（全栈框架）
- TailwindCSS（样式系统）
- tRPC（服务端接口）
后端与数据库：
- Supabase（数据库与认证）
- Drizzle（ORM层）
AI层：
- AI SDK（LLM客户端）
- OpenRouter、Morph Fast Apply、Relace（模型提供方）
沙盒与部署：
- CodeSandbox SDK（云端开发隔离环境）
- Freestyle（服务器托管）
运行时与打包：
- Bun（高性能运行时与打包器）
- Docker（容器化管理）
这样的架构让 Onlook 既能高效运作，也便于开发者完全自定义与扩展其 AI 能力。对于想要深入实践这类前沿工具的前端开发者，可以多在云栈社区与同行交流。
六、Onlook 的应用场景
- AI辅助前端开发：让开发者更专注于业务逻辑，视觉层交由AI自动生成；
- 设计师代码化创作：让设计师在不深入 React 语法的前提下进行视觉化操作，并能直接导出可用代码；
- 快速原型展示：适合初创团队或产品经理用于快速演示产品概念；
- 前端教育：用于教学，直观展示“视觉元素如何映射为代码”；
- AI驱动的网页构建实验：探索AI与Web开发深度融合的应用研究。
七、同类项目比较
在AI建站或AI前端编辑器领域，目前有几个热门项目值得对比：
- Bolt.new：OpenAI支持的AI建站平台，功能强大但闭源；
- V0.dev（Vercel推出）：面向 Next.js 的AI页面生成器，专注生产力；
- Lovable：主打“像ChatGPT一样生成网站”的体验；
- Replit Agent：更偏向AI生成代码逻辑层；
- Figma to Code工具（如Figma Make）：强调设计稿到开发代码的转换路径；
- Webflow：经典的视觉网页构建器，但自动化程度相对有限。
与这些工具相比，Onlook 最大的优势在于其开源、自由且可扩展的特性。它融合了 Figma 的视觉流畅性与 Replit 的开发可控性，是一个面向未来的 AI 与代码深度融合平台。
参考地址：
| 
发表于 15 小时前
|
查看: 1|
回复: 0
