设计师不写代码也能做出可上线的网站！这个开源神器凭什么暴涨22000+星？当Figma遇上AI，设计稿直接变成可运行代码，设计-开发的世纪鸿沟终于被填平了
你有没有经历过这种绝望：
设计师在Figma里调了三天三夜的完美界面，交给开发后完全走样开发说"这个效果实现不了"，设计师说"这么简单都做不出？"产品上线了，设计师看着"实物"叹气——这和我的设计稿差了一个银河系设计 vs 开发，这对欢喜冤家斗智斗勇了几十年，今天终于有人站出来说：
这就是今天要聊的 Onlook —— 一款被称为"设计师的Cursor"的开源神器，正在GitHub上以22,000+ Stars的速度疯狂吸粉。
一句话说清楚：
像Figma一样拖拽设计，直接生成可上线的React代码。
不是那种"导出代码还要开发改三天"的玩具，而是——
你在画布上拖了一个按钮 → 真实的React组件就生成了你调了颜色和间距 → Tailwind代码实时同步你跟AI说"给我做个登录页" → 30秒后页面就出现在你面前设计即代码，所见即所得。
Onlook 的定位非常清晰：The Cursor for Designers（设计师的Cursor）。如果说Cursor让程序员用自然语言写代码，那Onlook就是让设计师用可视化方式直接"写"代码。
不需要懂React、不需要懂Tailwind、不需要懂Git。
只要你会用Figma，你就能用Onlook：
🎨 拖拽组件、调整样式——和Figma一模一样的操作逻辑📐 可视化调整布局，Flexbox和Grid再也不用脑补设计师终于可以掌控最终产物了，而不是把"设计稿"丢给开发后听天由命。
Onlook内置AI助手，支持自然语言生成：
"给我做一个 SaaS 产品的定价页，要有三个套餐对比"
30秒后，一个专业的定价页就出现在你面前——
你甚至可以上传一张参考图，让AI照着"抄"一个出来。
这是Onlook最革命性的地方。
传统的流程是：
设计师Figma → 开发手动还原 → 反复对稿 → 上线后发现像素级偏差
Onlook的流程是：
**你在画布上看到的，就是最终上线的。**没有"还原度"的问题，因为设计稿本身就是代码。
更狠的是——你可以直接把Figma设计稿导入Onlook，让它自动转换成React代码。
Onlook完全开源（Apache 2.0），你可以：
对比之下：
做完了？直接点部署：
从"想法"到"可访问的网站"，最短只需5分钟。
如果你厌倦了"设计稿很漂亮，上线后完全变形"的无力感，Onlook让你直接产出可运行的代码，无需再看开发脸色。
需要快速验证一个想法？用Onlook 5分钟搭出原型，生成的代码干净利落（Next.js + Tailwind + TypeScript），可以直接在此基础上迭代。
不会设计？没关系。描述一下你想要什么，AI帮你生成。一人搞定设计+开发+部署，省下的钱够你多喝半年咖啡。
# 克隆仓库
git clone https://github.com/onlook-dev/onlook.git
# 安装依赖
cd onlook && npm install
# 启动开发环境
npm run dev
输入："帮我做一个个人作品集首页，要有头像、简介和三个项目展示"不满意？直接说"换个暗色主题"或"把头像放大一点"
技术栈绑定：目前主要优化Next.js + TailwindCSS项目，Vue/Angular支持还在完善中复杂交互有限：简单页面和组件无敌，但复杂状态管理（如购物车、实时协作）仍需手动编码桌面应用：需要下载安装（支持Windows/macOS/Linux），不能纯浏览器使用还在快速迭代：作为较新的开源项目，API和界面可能会有breaking changes建议：先用它做官网、落地页、简单后台，验证完可行性后再考虑更复杂的场景。
Onlook的出现，让我想起了Figma当年颠覆Sketch的时刻。
它解决的不是"怎么让设计师学会写代码"，而是**"让设计本身变成代码"**。
设计与开发的鸿沟，不是因为设计师不够努力学编程，也不是因为开发不够用心还原——而是工具本身的割裂。
Onlook用AI和可视化，把这条鸿沟填平了。
GitHub地址：github.com/onlook-dev/onlook
在线体验：onlook.com
如果你也受够了"设计稿和上线效果不符"的折磨，不妨试试看。
觉得有用？点个⭐收藏，下次找得到！
有使用心得？欢迎在评论区聊聊～
END.
本文项目信息截至2026-06-14，Star数持续增长中
内容仅供技术交流，请遵守开源协议使用
