Onlook 介绍
Onlook 是一款面向设计师和产品经理的开源可视化代码编辑器,主打 AI 辅助开发 React 应用,尤其适配 Next.js + TailwindCSS 技术栈。
其核心功能丰富:可视化编辑支持拖拽调整页面元素的边距、颜色、布局等,修改实时同步到代码,无需手动编写 CSS;AI 辅助功能可通过自然语言生成代码或修改 DOM 元素,比如输入材料能快速生成网站框架;实时预览让左侧预览界面与右侧代码编辑器同步,修改后无需刷新即可查看效果;还支持导入 Figma 设计文件,便于设计与开发协作。
使用方式灵活,可本地部署,通过 git clone 项目后运行 npx onlook 启动,无需上传代码到云端;也能在线体验,直接访问onlook.com、下载桌面应用使用。该工具旨在提升前端开发效率,特别适合非技术人员通过可视化操作快速搭建响应式网站。