Onlook 是一个开源的可视化编辑器，专为 React 应用设计，旨在桥接设计与开发之间的鸿沟。它提供了类似 Figma 的界面，使设计师和开发者能够在本地环境中实时编辑 UI，并将更改直接写入代码。
核心功能
可视化编辑器
- 拖放组件，调整大小和位置。
- 编辑文本和图像，应用 Tailwind CSS 样式。
- 实时预览应用，支持多屏幕尺寸。
代码集成
- 实时同步设计更改到代码。
- 直接编辑代码，导入和导出组件。
- 与现有工作流程无缝集成。
AI 辅助
- 根据描述生成组件。
- 提供改进建议，将设计转换为代码。
- 辅助调试问题。
Figma 集成
- 从 Figma 导入设计，快速启动项目。
- 利用预构建模板或从 GitHub 仓库开始。
部署与协作
- 一键部署应用，生成可分享链接。
- 支持自定义域名绑定。
- 实时协作编辑，支持评论功能。
使用方式
-
支持在任何使用 Next.js 和 Tailwind CSS 的项目中运行。
-
通过命令行工具快速设置：
npx onlook -
提供桌面应用（适用于 Apple Silicon 和 Windows）和 Web 版本（仍在开发中）。(onlook.com)
开源与社区
- 许可证：Apache-2.0。
- GitHub 星标数：12k+。
- 贡献者：70+。
- 活跃的社区，欢迎贡献和反馈。