Onlook

Onlook是一款开源、本地优先的视觉编辑工具，专为React应用设计，让设计师和开发者能在运行中的网页上直接拖拽调整界面，并将修改实时写入代码库。它融合Figma式直观操作与AI辅助能力，支持通过自然语言生成布局、组件和样式，同时深度集成GitHub，一键创建Pull Request，确保所有代码处理在本地完成，兼顾效率与隐私安全。其跨平台桌面端与浏览器扩展形态，配合对Next.js、TailwindCSS等现代框架的开箱即用支持，显著缩短从设计到交付的周期。

• ✓ 实时视觉编辑：在浏览器中直接修改运行中的React页面并同步更新源码
• ✓ AI辅助设计：基于提示词生成响应式布局、Tailwind兼容组件及配色方案
• ✓ GitHub深度集成：自动生成带描述的Pull Request，支持审查与合并流程
• ✓ 本地优先架构：全部操作在用户设备完成，不上传代码或设计数据
• ✓ 跨平台支持：提供Apple Silicon/Windows桌面应用及浏览器扩展

1. 1 下载安装桌面端或浏览器扩展，并启动Onlook应用
2. 2 导入现有Next.js/React项目，按指引配置next.config.js等文件
3. 3 在本地服务（如localhost:3000）或已部署网站上启用编辑模式
4. 4 右键元素跳转对应代码，或使用AI输入提示生成新UI模块
5. 5 确认更改后，通过仪表盘发起GitHub Pull Request完成协作发布

• → 设计师无需写代码即可参与真实React项目的UI迭代与样式调试
• → 前端团队快速验证产品原型，用AI生成初稿再人工精调
• → 产品经理在评审阶段直接修改线上预览页，即时同步开发需求
• → 初创团队在资源有限情况下，由一人兼顾设计与基础前端实现
• → 开源贡献者基于本地环境调试、扩展Onlook功能并提交PR