Plan 1
免费
O
访问官网Onlook
开源AI视觉编辑工具，设计修改自动同步代码
AI 设计品牌与平面设计原型设计有免费版
套餐与价格
- 使用门槛
- 有免费版
- 付费版起价
- $0.18
- 计费方式
- 订阅 + 点数
Plan 2
$0.18
Plan 3
$5/月
$ 0
$0
DevPrice 只整理公开信息，不销售 Onlook 订阅；价格与可用性以 Onlook 官方为准。
Onlook 是什么
Onlook 是面向 AI 原生设计工作的开源视觉设计工具，将 React 应用的界面与代码放在同一套编辑流程中。用户可以从文字或图片开始创建项目，也可以导入现有项目，在浏览器预览中直接调整页面元素、样式和布局。它适合需要快速制作原型、迭代网页界面，并希望设计修改能够落回代码的设计师与前端开发者。
Onlook 当前重点支持 Next.js 与 TailwindCSS 项目，同时提供实时预览、代码编辑和 AI 对话等工作方式。编辑器会把预览中的元素映射到代码位置，使视觉调整与代码修改保持关联。对于需要在设计探索和工程实现之间频繁切换的个人开发者或小型团队，它提供了较直接的协作界面。
Onlook 的主要功能
可视化编辑 React 项目
在浏览器预览中选择页面元素，直接调整样式、属性和布局，并将改动同步回项目代码。适合快速修改正在运行的 React 界面。
AI 创建与修改
通过 AI 对话描述新项目或现有项目的修改意图，AI 可读取代码并参与创建和编辑。适合把自然语言想法转化为网页界面调整。
实时设计预览
编辑器把项目运行结果显示在预览窗口中，视觉调整可以即时观察，并可与代码并排查看。适合检查布局变化和快速比较设计方向。
代码位置映射
Onlook 会索引项目代码并把预览元素映射到对应位置，用户可通过元素定位相关代码。适合设计师理解实现位置，也适合开发者继续维护修改结果。
布局与组件操作
工具支持拖放新增或重新排列元素，并提供组件面板与图层浏览来组织页面结构。适合原型制作、组件调整和页面层级探索。
开发与项目迭代
项目工作区包含代码编辑、命令行、检查点以及分支实验等开发工具，便于保存和尝试不同方向。适合需要边设计边运行项目的开发流程。