如何开始使用 Onlook？

你可以通过下载桌面应用（适用于 Apple Silicon 和 Windows）并使用单个命令将 Onlook 链接到你的 React 项目来开始使用：在项目根文件夹中运行 'npx onlook'。

Onlook 支持哪些框架和样式？

目前，Onlook 支持使用 Tailwind CSS 的任何 React 应用。对其他框架和样式的支持计划在未来的版本中推出。

我的代码在 Onlook 中安全吗？

是的，Onlook 是本地优先的，这意味着你的所有代码都保留在你的设备上，不会离开你的机器。你完全控制版本控制和开发环境。

Onlook 提供哪些功能？

Onlook 提供的功能包括调整布局、更改颜色、修改文本、使用设计系统、使用自定义变量和组件管理等，所有这些都在一个类似于 Figma 的界面中，直接将可靠的代码写入你的项目。

Onlook 的价格是多少？

Onlook 是 GitHub 上的开源软件，但提供的资料中未提及具体的定价细节。

Onlook

WebsiteFreeAI Code Assistant AI Website Builder No-Code & Low-Code

Onlook 是一个开源的、本地优先的视觉编辑器，允许你实时编辑 React 应用程序并将更改写回代码，类似于 Figma 但直接集成到你的代码库中。

社交和电子邮件：

访问网站

推广此工具

https://onlook.dev/?ref=aipure&utm_source=aipure

概述
分析
官方帖子
视频
替代方案

产品信息

更新于：2025年02月16日

Onlook 月度流量趋势

Onlook 上个月收到了 3.0k 次访问，显示出 -78.3% 的显著下降。根据我们的分析，这一趋势与人工智能工具领域的典型市场动态相符。

查看历史流量

什么是 Onlook

Onlook 是一个旨在弥合 React 应用程序设计和开发之间差距的开发工具。它提供了一个类似于 Figma 的界面，让你可以视觉编辑 React 应用程序，同时自动生成和更新相应的代码。Onlook 专为使用 Tailwind CSS 的 React 应用程序构建（计划支持其他框架和样式），作为一个桌面应用程序在本地机器上运行，确保代码的安全性和私密性。

Onlook 的主要功能

Onlook 是一个用于 React 应用程序的开源可视化编辑器，允许设计人员和开发人员直接在浏览器 DOM 中进行实时编辑，并实时将更改写回代码。它与 React + TailwindCSS 项目集成，使用户能够在不编写代码的情况下可视化编辑布局、样式、组件和文本，同时保持版本控制并保留所有代码的本地性。

可视化实时编辑: 使用类似 Figma 的界面直接在浏览器中编辑 React 组件、布局和样式，实时查看更改

代码生成: 根据视觉更改自动生成并写入可靠的 React 代码，并将其精确放置在代码库中需要的位置

设计系统集成: 使用代码库中现有的设计系统组件和变量，与当前设置无缝集成

本地优先架构: 所有代码都保留在您的设备上，不会离开您的机器，确保在使用现有构建过程时的安全性和隐私性