项目预览
项目数据
项目介绍
Star 增长趋势
本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整
数据来源：GitHub API 逐日快照 · 收录于 2026-11-04 · 当前星标 ★ 27098
技术标签
使用教程
⚠ 本教程由 AI 依据该项目 README 整理；原始文档不完整，部分步骤为通用流程推断，实际安装请以项目官方文档为准。
⚠ 该项目 README 未提供完整安装说明，以下步骤为通用流程，请以官方文档为准。
环境要求
- Node.js 环境（项目为 TypeScript / Next.js 技术栈）
- Bun 运行时：README 中标注为 monorepo、运行时与打包工具
- Docker：README 中标注用于容器管理
- Supabase 账号或实例（项目技术栈包含 Supabase）
安装与启动步骤
-
1阅读官方运行文档
README 未列出具体安装命令，本地运行步骤以官方 Getting Started 中链接的 running-locally 文档为准，先通读再动手。
-
2准备 Bun 运行时
README 将 Bun 标注为 monorepo 运行与打包工具，需先在本机安装 Bun 并确认版本可用。
-
3准备 Docker 环境
README 的 Runtime 章节列出 Docker 用于容器管理，本地启动前需确保 Docker 服务已运行。
-
4获取项目代码
从 GitHub 仓库获取源码，仓库地址见项目信息中的 github.com/onlook-dev/onlook。
-
5按文档完成本地启动
依 running-locally 文档的说明安装依赖并启动开发服务，注意终端提示的本地访问地址。
-
6导入项目开始使用
导入已有的 Next.js + TailwindCSS 项目，或直接在编辑器里从零新建项目。
关键配置
| 配置项 | 必填 | 说明 | 示例 |
|---|---|---|---|
Supabase 连接信息 | 否 | 项目技术栈包含 Supabase，本地运行时按 running-locally 文档填写对应连接参数 | 以运行文档中的示例为准 |
如何确认成功
按 running-locally 文档执行后，终端输出本地访问地址，浏览器打开可看到 Onlook 编辑器界面即启动成功。
常见问题
Q：README 里为什么没有直接的安装命令？
A：README 只给出指向 running-locally 文档的链接，具体命令以该文档为准，避免照抄过时指令。
Q：可以在线直接用吗？
A：可以，README 提供托管版本 onlook.com，需先通过 waitlist 申请访问；也可本地运行。
Q：对导入的项目有什么要求？
A：README 说明 Onlook 可运行在任何 Next.js + TailwindCSS 项目上，其他技术栈未作说明。
Q：如何定位页面元素对应的代码？
A：在编辑器中右键任意元素，即可打开该元素在源码中的确切位置。
注意事项
- README 节选未包含安装命令、端口、路径等细节，实际执行前务必阅读官方 running-locally 文档。
- 托管版本处于 early access，需申请 waitlist，不是开箱即用的公开服务。
- 项目为 monorepo 结构，安装与启动方式可能与传统单包项目不同。
核心亮点
- 设计操作直接作用于真实 React 代码，避免设计稿与实现两套资产脱节
- 内置 AI 对话式编辑，可用自然语言生成页面、改样式、调整布局
- 基于 Next.js 与 Supabase，本地可跑，便于二次开发和接入自有设计系统
不足之处
- 项目迭代较快，部分功能与文档可能不同步，上手需一定前端基础
- 对非 React 技术栈支持有限，复杂业务逻辑仍需开发者介入
适用场景
- 设计师直接产出可运行的前端页面原型
- 前端团队用可视化方式快速调整样式与布局
- 创业团队用 AI 快速搭建产品界面初稿
替代项目
Builder.io、Penpot、Webstudio
上一篇：hallmark
下一篇：ai-design-check
同类项目推荐
desert
开源
快速生成随机艺术图案，几行代码出图
A fast (?) random sampling drawing library
opendesign
开源
让AI编码有审美，从真实设计系统中学习
从真实网站提取设计系统，并通过 MCP 把设计规范交给 AI 编程 Agent。 | Extract design s···
dimensional-drawing
开源
把普通 UI 组件一键画成苹果风立体插画
Create Apple style dimensional drawings of UI components.
presenta-lib
开源
用代码批量生成演示文稿和图片，自动化视觉内容生产
The javascript presentation library for the automation era.
onlook
开源
在真实代码上做设计，AI 帮你直接改界面
The Developer Tool for Visual Engineers • An Open-Source AI-First Design tool • Vi···
artblocks-docs
开源
生成艺术创作者的一站式链上开发文档，快速上手部署与铸造。
Art Blocks Docs, powered by Retype
guizang-material-illustration
开源
让AI生成带中文标注的材质感插画和美化图表
归藏的材质插画 skill：生成带字解释图、图表美化和参考辅助配图。
ai-design-check
开源
给 AI 写的界面做设计体检，零依赖直接跑
Design rules and a zero-dependency checker for interfaces built with AI coding agent···
FlowerJS
开源
用代码快速生成花朵形状和动画，创意视觉轻松搞定。
JavaScript Framework for Flower Shapes and Animation extended CreateJS on HTML5 Canv···