Onlook

Onlook是什么？

Onlook是一款专为React/前端使用的开源可视化编辑工具。它将设计与代码生成紧密结合，使得设计师和开发者能够在浏览器中通过直观的拖拽、调整和编辑方式对网页或应用界面进行实时修改，而这些修改会自动同步成高质量的 React 代码。Onlook 支持 TailwindCSS 等现代前端技术，让从视觉设计到代码实现的过程更加高效、无缝，并大大提升团队的协作效率。

核心能力：设计即编码，代码即设计

• 可视化实时编辑：像 Figma 一样直接在线编辑。随时更改布局（自动布局、堆叠方向、间距等）、样式（颜色、字体、边框、透明度等）和交互逻辑，不用写代码就可以自由拖拽或修改参数；更改内容和效果会实时显示在 TypeScript 的源文件里面 (.tsx)，真的能实现所见即所得。
• AI 驱动的智能开发：输入指令比如“点击按钮后展示地图卡片并改变背景色”，让 AI 来搭建页面结构和交互动效，甚至是一个复杂的页面构建过程，都可以极大地提升编程效率，不仅可以用于原型辅助验证，也能独自完成整个前端界面的构建！
• 灵活的组件与样式管理
  • 支持自定义 CSS 及 tailwindcss 类，可随意设置丰富多样的颜色（blue-100~blue-800）、文本样式（标题、文字等），能够快速简易地创建一个可扩充的设计系统。
  • 层次功能对网页进行细致设计，配合响应式设计使界面更加贴近使用者的喜好与审美；兼容现有 React 项目（需使用 Tailwind 样式），或重新新建 Project 开始。（无额外费用）

核心优势：效率、安全与协作的三重升级

• 设计开发一体化工作流：设计师不用学代码就能输出前端组件，开发者写业务逻辑再也不需要样式调试！不再有「设计 – 切图 – 开发」的繁杂过程，让你瞬间实现创意落地！
• 本地安全与版本控制：你所有的源码都在自己的本地设备上，不用担心被盗取，随时可以回滚任意一个版本，甚至一键撤销改变。你再也不会担惊受怕地寻找完美的构建步骤，安心编码的日子终于来了！
• 开源社区与生态支持：使用开源的GitHub仓库，可查可核，透明放心；加入活跃的 Discord 社区，与全球开发者、设计师交流经验，获取官方更新与技术支持。

适用场景

• 设计师：快速生成交互原型，直接导出 React 交付代码，无需经过开发人员二次开发。
• 开发者：快速生成视图界面，在 AI 的加持下，快速生成基础代码框架，在核心功能点上快速开发。
• 团队协作：打破设计与开发壁垒，在一个工具里完成了设计方案从源稿到最终可运行代码的传递，不再有需求误差、重复返工的问题。

为什么选择 Onlook？​​

• ​​效率革命​​：从设计到可交互原型的时间缩短 50% 以上。
• ​​精准还原​​：代码与设计完全同步，避免开发阶段的视觉偏差。
• ​​开源生态​​：参与社区共建，持续迭代新功能与插件。

使用教程指南

1. 前期准备
   • 环境与项目要求：运行的项目是 React，且如果有样式方案是 TailwindCSS 的需提前安装好相应样式。如果是 Next.js 则请先通过使用 npm包管理器进行运行（npm i –save-dev @onlook/nextjs），接着编辑 next.config.mjs 或 next-configs 对应文件对 SWC 插件配置加入 (“@onlook/nextjs”, {projectRoot: path.resolve(‘.’)}) 。
   • 下载与安装：Onlook 桌面版应用可通过官网 (https:// onlook. com / ) 进行下载与安装心仪的系统版本。
   • 登录注册：启动 Onlook 应用，通过 GitHub 或 Google 账号进行注册或登录。
2. 创建或导入项目
   • 新建项目：登录后，在应用里点击新建项目按钮，创建一个名字与存放夹用来放置文件。
     
   • 导入现有项目：如果有自己之前的 React 项目的话就可以导入 Onlook，要符合项目结构和依赖要求；导入之后就会加载项目的代码以及项目组件。
3. 可视化编辑
   • 界面操作：进入项目编辑界面，中间的组件画布是实时显示组件效果；右边属性和 AI 聊天面板用来编辑当前元素的属性，同时可以与 AI 聊天获取设计建议；左边组件树导航查看和管理应用；底部有选择元素、插入对象、启动应用等工具按钮。
   • 组件编辑：点击组件画布上要编辑的组件，可以通过右边的属性面板来更改样式的颜色、字体、布局等等，并进行拖放调整大小。也可以进行响应式设计，在拖动元素大小的时候可以看到不同断点下呈现的效果。还可以通过聊天窗口向 AI 输入需求，获取灵感和代码生成。
4. 实时预览与代码同步：在编辑过程中 Onlook 实时预览设计结果，如果修改了设计，会自动更新到 React 代码中。反之也一样，可以在 VS Code 中编辑代码，VS Code 的代码修改也会立刻反应到 Onlook 界面的设计中，确保实时的双向同步。
5. 创建拉取请求（Pull Request）：编辑完成之后，单击 Onlook 扩展程序上的 Review 按钮，进入项目仪表板，仪表板上的 Share-Pull Request，按照上面的指示将 Onlook 和您的 GitHub 仓库关联起来（选择相应的仓库），设置好的分支名以及代码根目录都是默认的。（一般情况保持默认即可）。然后在发布标签页处输入变更标题和描述并点击发布(Publish) 按钮 ，得到链接后发送给其他成员（工程师）审批合并你的代码即可。