它是什么
onlook 是 Onlook 团队(GitHub 组织 onlook-dev)开源的可视化代码编辑器,用来做 Next.js 加 Tailwind CSS 的网站、原型和设计。你可以从一段文字、一张图或现成模板开始,用 AI 聊天来建项目、改项目,也可以在页面上直接拖动、调样式。它特别的地方是每个元素都对应到代码里的具体位置,右键就能跳过去看,在画面上改了,代码也跟着改。README 说,团队接下来做的托管版产品正在抢先体验,要先登记候补名单。
亮点:
- 有类似 Figma 的界面,能看图层、管理品牌素材和设计变量
- 可以开分支试不同设计,也能保存和恢复检查点
- 能一键部署、生成分享链接、绑自己的域名
- README 里拖放组件面板、评论等功能还标着没完成。
怎么用:
- 先打开托管版 onlook.com,或者按 docs.onlook.com 的说明在本地运行
- 再导入一个 Next.js 加 Tailwind CSS 项目,或者从头新建
- 最后用 AI 聊天或工具栏来改页面。
适合谁:
用 Next.js 和 Tailwind CSS 做网站、想边看画面边改代码的设计师和开发者。
使用前提:
- 目前只支持 Next.js 加 Tailwind CSS 项目。
- README 说,项目代码会加载进一个网页容器里运行,AI 聊天可以读取和修改你的代码;技术栈里用到 CodeSandbox SDK 做开发沙箱、OpenRouter 提供模型。
- 本地运行需要配置相关服务的 key,具体见官方文档。
- 费用以官网为准。
- 许可证是 Apache 2.0。
以上根据项目公开说明整理,本站没有实际测试。