开源Cursor，零代码实现网站可视化编辑，拖拉拽就能做个网站。

面向设计师的开源Cursor，零代码实现网站可视化编辑并且实时更新代码，拖拉拽就能做个网站。

图片

在Cursor出来之前，我一直在等Figma的一个功能，但是到现在也没等到。

Figma如果能把UI稿直接转前端代码，那是最好的。

今天突然发现一个开源项目Onlook，可以一定意义上解决这个问题。

这个项目是面相设计师的Cursor，可以让你直观的编辑React网站，并且能实时的根据编辑修改代码。

这样很爽了，拖拉拽随时调整页面。

项目简介

Onlook 是一个开源桌面应用，能让你对本地运行的 React 应用进行可视化编辑，并实时将更改写回代码。它可以让你可视化开发 UI，本地运行。用 Onlook 可像设计工具一样编辑 React 应用、实时写回代码、无需迁移即可处理现有项目且本地安全运行。它解决了 UI 编码繁琐及无代码工具的诸多问题，通过浏览器编辑 UI、注入追踪器和使用标准解析器来实现功能。

DEMO

，时长02:41

功能特点

一、设计与开发一体化

图片

代码生成与实时同步：Onlook 能够在设计过程中实时生成可靠的代码，并将代码放置在正确的位置，实现“边设计边写代码”，让设计师无需手动编写大量代码，即可将设计转化为可运行的前端代码，大大提高了开发效率。
交互设计能力：利用 AI 技术，设计师可以通过简单的提示（prompt）让 Onlook 的 AI 帮助构建、设计和实验各种想法，使前端界面不仅美观，还具备交互性。例如，可以指定某个按钮被点击时显示地图卡片，并设置其激活状态下的背景样式，轻松实现复杂的交互效果。

二、设计系统与组件管理

图片

Figma 风格界面：提供类似 Figma 的界面，方便设计师使用已有的设计系统，将代码与设计系统相结合，实现设计的规模化和一致性。设计师可以将自己已有的项目导入 Onlook，或者从 Onlook 开始一个新的 React 项目，快速搭建出符合设计规范的界面。
组件复用与管理：支持将设计好的组件进行复用，减少重复工作，提高开发效率。同时，Onlook 还提供了组件库管理功能，方便设计师对组件进行分类、查找和更新，确保组件的版本控制和一致性。

三、开发环境与安全性

图片

本地开发与代码安全：所有代码都存储在本地设备上，不会离开用户的机器，确保了代码的安全性和隐私性。设计师可以在本地环境中自由地进行开发和调试，无需担心代码泄露或被第三方访问的风险。
版本控制与回滚：提供版本控制功能，设计师可以随时回滚到之前的版本，不用担心因误操作而导致代码丢失或损坏。Onlook 不会将代码自动部署到生产环境，设计师可以完全掌控代码的发布流程，确保代码的稳定性和可靠性。

四、易用性与兼容性

图片

无需复杂配置：无需进行繁琐的设置和配置，设计师可以快速上手并开始使用。无论是调整布局、改变颜色、修改文字等操作，都可以轻松完成，无需额外的学习成本。
兼容现有开发流程：Onlook 可以很好地与现有的开发流程和工具链集成，无需添加新的组件或进行迁移。设计师可以继续使用自己熟悉的开发工具和流程，无缝切换到 Onlook，提高开发效率和团队协作的便利性。

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～