设计师不写代码也能做出可上线的网站!这个开源神器凭什么暴涨22000+星?
- 2026-09-25 08:25:58
当Figma遇上AI，设计稿直接变成可运行代码，设计-开发的世纪鸿沟终于被填平了
你有没有经历过这种绝望：
设计 vs 开发，这对欢喜冤家斗智斗勇了几十年，今天终于有人站出来说：
"够了，我全都要。"
这就是今天要聊的 Onlook —— 一款被称为"设计师的Cursor"的开源神器，正在GitHub上以22,000+ Stars的速度疯狂吸粉。
一句话说清楚：
像Figma一样拖拽设计，直接生成可上线的React代码。
不是那种"导出代码还要开发改三天"的玩具，而是——
设计即代码，所见即所得。
Onlook 的定位非常清晰：The Cursor for Designers（设计师的Cursor）。如果说Cursor让程序员用自然语言写代码，那Onlook就是让设计师用可视化方式直接"写"代码。
不需要懂React、不需要懂Tailwind、不需要懂Git。
只要你会用Figma，你就能用Onlook：
设计师终于可以掌控最终产物了，而不是把"设计稿"丢给开发后听天由命。
Onlook内置AI助手，支持自然语言生成：
"给我做一个 SaaS 产品的定价页，要有三个套餐对比"
30秒后，一个专业的定价页就出现在你面前——
你甚至可以上传一张参考图，让AI照着"抄"一个出来。
这是Onlook最革命性的地方。
传统的流程是：
设计师Figma → 开发手动还原 → 反复对稿 → 上线后发现像素级偏差
Onlook的流程是：
设计 canvas 上拖拖拽拽 = 代码实时生成
**你在画布上看到的，就是最终上线的。**没有"还原度"的问题，因为设计稿本身就是代码。
更狠的是——你可以直接把Figma设计稿导入Onlook，让它自动转换成React代码。
Onlook完全开源（Apache 2.0），你可以：
对比之下：
| Onlook | 免费 | ✅ | ✅ |
做完了？直接点部署：
从"想法"到"可访问的网站"，最短只需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建议：先用它做官网、落地页、简单后台，验证完可行性后再考虑更复杂的场景。
Onlook的出现，让我想起了Figma当年颠覆Sketch的时刻。
它解决的不是"怎么让设计师学会写代码"，而是**"让设计本身变成代码"**。
设计与开发的鸿沟，不是因为设计师不够努力学编程，也不是因为开发不够用心还原——而是工具本身的割裂。
Onlook用AI和可视化，把这条鸿沟填平了。
GitHub地址：github.com/onlook-dev/onlook
在线体验：onlook.com
如果你也受够了"设计稿和上线效果不符"的折磨，不妨试试看。
觉得有用？点个⭐收藏，下次找得到！
有使用心得？欢迎在评论区聊聊～
END.
本文项目信息截至2026-06-14，Star数持续增长中
内容仅供技术交流，请遵守开源协议使用
