Cursor Onlook是一款开源的设计工具，专为设计师和开发者打造，允许用户直接在运行的 React 应用中进行设计，并将设计修改转换为代码。以下是关于Cursor Onlook的详细介绍：


核心功能

• 实时设计修改：在浏览器中直接修改 React 应用的 UI，实时查看效果。

• 代码转换：将设计修改转化为相应的代码，直接推送至代码库。

• 多框架支持：目前支持 React 和 TailwindCSS，未来计划扩展到更多框架。

• 本地操作：所有操作在本地进行，保障数据安全和隐私。

• 开源社区：丰富的社区支持和贡献，持续的功能更新和改进。


安装与配置

• 下载 Onlook：

• 访问 Onlook 的 GitHub 页面。

• 点击右上角的“Code”按钮，选择“Download ZIP”来下载源码，或者直接克隆仓库到本地：

    git clone https://github.com/onlook-dev/onlook.git
    

• 设置开发环境：

• 确保你已经安装了 Node.js（推荐使用最新稳定版本）。

• 进入克隆的目录或解压的文件夹：

    cd onlook
    

• 安装依赖：

    npm install
    

• 如果有.env.example，请复制并重命名为.env，根据需要填写 API 密钥。

• 启动 Onlook：

• 运行开发服务器：

    npm run dev
    

• 这将启动 Onlook，允许你在本地浏览和编辑。


使用方法

• 启动你的 React 项目：

• 确保你的 React 项目正在本地运行（例如，使用npm start）。

• 配置项目：

• 在你的next.config.mjs或next.config.js中添加 Onlook 插件：

    import path from "path";
    const nextConfig = {
      experimental: {
        swcPlugins: [
          ["@onlook/nextjs", { projectRoot: path.resolve(".") }]
        ]
      }
    };
    export default nextConfig;
    

• 如果使用其他框架，查阅 Onlook 的文档以获取特定的配置指南。

• 使用 Onlook 编辑：

• 打开 Onlook 应用，它会识别并加载你的 React 项目。

• 你可以像使用 Chrome 开发者工具一样，通过点击、拖拽来编辑 UI。

• 使用右键菜单选择元素以查看或编辑其代码位置。

• 发布更改：

• 完成设计修改后，点击“发布”按钮，Onlook 会生成一个 Pull Request，将修改的代码推送到你的 GitHub 仓库。


项目地址

• GitHub：[]()

• 官网：[]()

Cursor Onlook通过提供直观的视觉编辑体验，帮助设计师和开发者更高效地协作，简化了设计到开发的流程，适用于 React 和 TailwindCSS 框架的项目。

GitHub

GitHub - onlook-dev/onlook: The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your…

The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI - onlook-dev/onlook