第250612期 - onlook
17.6k star，厉害坏了！设计人员的cursor
假如你是一名设计师或开发者，想要快速构建、样式化和编辑你的 React 应用程序，会遇到什么问题？
也许你厌倦了繁琐的代码编写，觉得在浏览器中直观调整布局和样式的能力受限？或是面对各种工具，需要频繁切换，难以找到一个真正高效、符合直觉的解决方案？Onlook，一款开源的视觉优先代码编辑器，正是为了解决这些痛点而生。
Onlook 简介
Onlook 是一款专为设计师打造的可视化编辑工具，它集成 AI 功能，使你可以直观地创建、编辑和样式化你的 React 应用。支持 Next.js 和 TailwindCSS，提供与 Figma 类似的 UI 体验，让你可以在浏览器 DOM 中直接操作代码，实现所见即所得的开发体验。作为 Bolt.new、V0、Replit Agent、Figma Make 和 Webflow 等工具的开源替代品，Onlook 让你可以轻松地在设计与代码之间切换，减少繁琐的手动调整，让创作更加高效。
功能特点
Onlook 提供了一系列强大的功能，助力开发者和设计师快速构建应用：
- 秒级创建 Next.js 应用：从文本、图像或预构建模板开始，甚至可以直接导入 Figma 设计文件或 GitHub 仓库。
- 可视化编辑：使用类 Figma UI 直观调整组件布局，实时预览应用，并管理品牌资产和代币。
- 开发工具：提供实时代码编辑器，支持从检查点保存和恢复，使用 CLI 运行命令，并可连接应用市场，实现快速部署。
- 团队协作：支持多人实时编辑，留下评论，使团队沟通更加高效流畅。
- AI 辅助开发：内置 AI 聊天功能，可以帮助创建、编辑项目，还能智能映射代码中的元素，使开发过程更轻松。
如何快速开始
Onlook 适用于任何基于 Next.js + TailwindCSS 的项目，用户可以选择导入现有项目或在编辑器内从零开始。以下是快速开始的步骤：
- 访问 Onlook 平台（未来将提供托管版本，也可选择本地运行）。
- 创建或导入项目：可以从文本、图片、Figma 文件或 GitHub 仓库开始。
- 使用 AI 进行优化：使用 AI 聊天创建或调整项目，右键单击元素可直接在代码中定位修改位置。
- 拖拽组件进行调整：在浏览器 DOM 中直接拖拽布局，调整 Tailwind 样式，并实时预览代码与设计同步变化。
- 代码与设计协同编辑：团队成员可以同时修改应用，发表评论，实现高效协作。
总结
Onlook 作为一款面向设计师和开发者的 AI 驱动代码编辑器，让应用创建和样式调整变得更直观、高效。它结合了视觉编辑与代码控制的优势，实现了在浏览器中构建和优化 React 应用的革新体验。如果你想在不牺牲可视化体验的情况下，提高开发效率，Onlook 绝对值得一试！