Onlook开源AI可视化代码编辑器，让设计师像用Figma一样构建Next.js应用

Onlook：面向设计师的 AI 优先、可视化代码编辑器

你是否曾为设计师与开发者之间的协作鸿沟而烦恼？是否希望像在 Figma 中设计一样直观地构建和编辑网页？Onlook 的出现，旨在彻底弥合设计与代码之间的界限。它是一个开源的、AI 优先的可视化代码编辑器，允许开发者与设计师在 Next.js + TailwindCSS 项目中，通过类似设计工具的界面直接构建、样式化和编辑 React 应用。

截至收录：
Onlook项目stars数：24424
Onlook项目forks数：1801

Onlook项目目录截图

Onlook项目核心亮点

• 🎨 可视化优先的代码编辑：提供类似 Figma 的 UI，支持在浏览器 DOM 中直接拖拽、绘制和编辑元素，所见即所得，极大降低了前端开发的门槛。
• 🤖 深度集成的 AI 辅助：内置强大的 AI 聊天功能，可以通过文本或图像提示快速生成、迭代和修改应用界面，并支持使用图像作为参考和项目资产。
• 🚀 端到端的工作流：从导入 Figma 设计稿或 GitHub 仓库开始，到实时预览、代码编辑、分支实验，再到一键部署和生成可分享链接，提供完整的应用构建与协作体验。
• 🔧 强大的开发工具：支持实时代码编辑器、检查点保存与恢复、组件检测与管理、品牌资产与设计令牌管理，以及通过 CLI 运行命令，兼顾了设计的灵活性与开发的严谨性。

Onlook项目快速开始

你可以选择使用托管服务或本地运行，快速体验 Onlook 的强大功能：
1. 访问托管应用：直接访问 Onlook 官网 开始使用。
2. 本地运行（针对开发者）：
bash
# 克隆仓库
$ git clone https://github.com/onlook-dev/onlook.git
# 进入项目目录
$ cd onlook
# 安装依赖（使用 Bun）
$ bun install
# 启动开发服务器
$ bun run dev
3. 开始你的第一个项目：在编辑器内，你可以从零开始创建，或导入现有的 Next.js + TailwindCSS 项目，然后使用 AI 聊天或可视化工具进行编辑。

Onlook项目应用场景

• 快速原型与 MVP 开发：产品经理或设计师可以绕过繁琐的编码，直接通过 AI 提示和可视化编辑快速将想法转化为可交互的网页原型，加速产品验证。
• 设计师与开发者协作：设计师可以在更接近真实代码的环境中（Next.js + Tailwind）进行高保真设计，并直接生成可用的代码片段，开发者则能轻松定位和修改对应代码，提升团队效率。
• 前端开发教育与学习：初学者可以通过直观的可视化操作理解 HTML 结构、CSS 样式（特别是 Tailwind 类名）与 React 组件之间的关系，是学习现代前端技术的绝佳辅助工具。
• 现有项目的可视化维护：开发者可以导入已有的 GitHub 仓库，利用 Onlook 的可视化编辑器快速调整布局、修改样式，而无需在代码文件中反复查找和猜测。

Onlook项目链接

onlook-dev / onlook项目地址：https://github.com/onlook-dev/onlook

本文地址：https://www.tgoos.com/45161