Plan 1
免费
O
访问官网Onlook
Onlook 是面向设计师和前端开发者的开源、视觉优先代码编辑器，用于在真实代码库之上制作网站、原型和界面。
AI 设计品牌与平面设计原型设计完全免费
套餐与价格
- 使用门槛
- 完全免费
- 付费版起价
- $0.18
- 计费方式
- 免费
Plan 2
$0.18
Plan 3
$5/月
$ 0
$0
DevPrice 只整理公开信息，不销售 Onlook 订阅；价格与可用性以 Onlook 官方为准。
Onlook 是什么
Onlook 是面向设计师和前端开发者的开源、视觉优先代码编辑器，用于在真实代码库之上制作网站、原型和界面。它把类似设计工具的画布、实时预览与 AI 对话放在一起，视觉修改会映射回项目代码，而选中页面元素时也能定位到对应代码位置。团队可以从模板或文本、图像开始新项目，也可以导入已有项目继续编辑。
编辑器把项目代码载入网页容器，在 iframe 中显示运行结果，并通过索引与插桩建立界面元素和源代码之间的联系。使用者能够并排查看设计与代码，调整 Tailwind 样式、拖放页面结构，并让具备代码访问能力的 AI 修改项目。当前开源编辑器重点支持 Next.js 与 Tailwind CSS；其他框架仍属于扩展方向，而新托管产品处于需要加入候补名单的早期访问阶段。
Onlook 的主要功能
可视化代码编辑
编辑器允许直接选择运行页面中的元素，调整样式、移动结构或绘制新的容器，并把修改同步到源代码。它用于处理声明式 DOM 界面，当前重点是采用 Next.js 与 Tailwind CSS 的项目。
代码感知 AI 对话
AI 对话能够访问项目代码和编辑工具，可依据文本要求创建应用或修改正在开发的界面，也能将图像作为参考或项目资产。它的作用范围由已载入项目及可用工具决定，生成的代码仍需在实时预览和代码视图中检查。
界面与源码映射
Onlook 对容器中的代码建立索引并进行插桩，将 iframe 里的页面元素关联到其源码位置。设计人员可从画布中的元素直接打开对应代码，开发人员则能并排核对视觉结果与实现细节。
项目迭代与组织
项目工作区提供页面与图层浏览、组件识别、品牌资产和设计令牌管理，并可通过检查点恢复先前状态或通过分支试验不同方案。这些能力服务于持续迭代，但导入现有项目时仍需满足当前重点支持的技术栈条件。