### [Onlook](https://dkwy.com/)

**Published:** 2026-05-06T10:29:39

**Author:** 蛋壳

**Excerpt:** Onlook是一款专为使用Tailwind CSS样式的React应用程序设计的开源可视化编辑器。它通过提供类似Figma的界面来桥接设计和开发之间的差距，允许用户直观地编辑其React网站，同时自动将更改实时写回代码库。该平台保持完整的版本控制，并将所有代码保留在用户的本地环境中，确保安全性和开发工作流程的完整性。Onlook支持导入现有React项目和从头创建新项目。

## 产品概述

Onlook是一款专为使用Tailwind CSS样式的React应用程序设计的开源可视化编辑器。它通过提供类似Figma的界面来桥接设计和开发之间的差距，允许用户直观地编辑其React网站，同时自动将更改实时写回代码库。该平台保持完整的版本控制，并将所有代码保留在用户的本地环境中，确保安全性和开发工作流程的完整性。Onlook支持导入现有React项目和从头创建新项目。

## 主要功能

|     |     |
| --- | --- |
| **实时可视化编辑** | 通过直观的界面对React组件进行可视化编辑，同时自动将更改实时写入相应的代码文件中。 |
| **设计系统集成** | 自动检测并集成React代码库中现有的设计系统、色彩方案和文本样式，实现一致的设计工作流。 |
| **本地开发环境** | 所有代码都保留在用户设备上，并提供完整的版本控制支持，确保安全性并与现有开发工作流无缝集成。 |
| **Tailwind CSS支持** | 原生支持Tailwind CSS样式，提供可视化控件来调整布局、颜色、排版和跨多种屏幕尺寸的响应式设计。 |
| **交互式元素创建** | 直接在可视化界面中绘制新的div和元素，同时自动生成干净、可维护的React代码。 |

## 使用场景

-   **快速原型设计：**设计师和开发人员可以快速制作React界面原型，无需在设计工具和代码编辑器之间切换。
-   **设计-开发协作：**团队可以通过直接使用生产就绪的React组件来弥合设计和开发之间的差距。
-   **前端实验：**直接在现有React应用程序上测试不同的布局、样式和设计变体，无需手动更改代码。
-   **组件样式调整：**通过可视化控件微调现有React组件和Tailwind样式，同时保持代码质量和结构。
-   **响应式设计测试：**在可视化编辑环境中预览和调整跨多种屏幕尺寸和设备的React应用程序。



---