Onlook：设计师的AI画板，用嘴也能设计React应用-壹联网络

有没有想过，设计师不需要写代码，也能直接”指挥”AI完成React应用的设计和修改？Onlook这个开源项目就实现了这个愿景——它是一个AI优先的设计工具，被誉为”设计师的Cursor”。

Onlook最大的创新在于：它打通了设计稿和代码之间的壁垒。设计师可以直接在可视化界面上操作，AI会自动生成对应的React代码。修改设计时，代码也会同步更新，真正实现了”所见即所得”的设计开发模式。

核心功能

双向代码同步：Onlook最核心的功能是设计稿和React代码的实时双向同步。你在设计上做的任何修改——移动元素、调整颜色、修改文字——都会即时反映到代码中。反过来，修改代码，设计界面也会同步更新。

AI自然语言改稿：你可以用自然语言描述想要的修改，比如”把这个按钮改成蓝色，放在页面右侧”。AI会自动理解你的意图，找到对应的组件，完成修改。这种交互方式特别适合设计评审时的快速迭代。

组件级控制：不像传统设计工具只能画方块，Onlook中的每个元素都对应真实的React组件。你可以直接操作组件的属性——props、state、样式——而设计工具会自动生成正确的代码。

多框架支持：目前支持React，未来还将支持Vue、Svelte等主流框架。

实时预览：内置浏览器预览，设计的每个细节都能实时看到最终效果。

Onlook目前提供macOS桌面应用下载，安装非常简单：

方式一：直接下载安装包
访问 https://github.com/onlook-dev/onlook/releases
下载最新版本的.dmg文件，双击安装即可。

方式二：源码构建
git clone https://github.com/onlook-dev/onlook.git
cd onlook
pnpm install
pnpm dev

首次运行需要选择要编辑的React项目目录。Onlook会自动分析项目结构，识别现有组件。

第一步：打开项目
启动Onlook，点击”Open Project”，选择你的React项目文件夹。工具会自动扫描项目中的页面和组件。

第二步：进入编辑模式
选择一个页面进入编辑。你会看到设计画布和右侧的属性面板。

第三步：AI辅助修改
在底部的AI输入框中输入你的需求，比如：”把这个Hero区域的标题改成’欢迎使用我们的产品’，背景改成渐变色”

AI会自动解析你的指令，定位到对应的DOM元素和代码位置，完成修改。你可以在右侧预览修改效果，确认无误后点击”Apply”正式应用。

第四步：手动微调
除了AI，你也可以直接用鼠标拖拽元素、调整尺寸、修改样式。所有修改都会同步更新到代码中。

• 设计评审：设计师快速验证想法，不需要开发介入
• 原型开发：产品经理快速搭建可交互原型
• 前端开发：辅助React开发者快速调整UI
• 设计移交：减少设计师和开发者之间的沟通成本

Onlook采用Apache-2.0开源协议，由Onlook团队开发维护。项目在GitHub上已获得超过2.5万颗星标，正在快速迭代中。

官网：https://onlook.com
GitHub：https://github.com/onlook-dev/onlook

服务支持：如有兴趣不会搭建，可以联系微信：WRYD6166，开源项目搭建10-50元。

文章版权归作者所有，未经允许请勿转载。

THE END