免费的双向 Figma MCP 服务器，让编码智能体既能把设计转为代码，也能把代码写回 Figma 画布。
110363TypeScriptMIT更新于 前天
- Star
- 26,962
- Fork
- 2,792
- 未关闭 Issue
- 382
- 最近提交
- 2个月前
这是什么？
Onlook 是一款面向 Next.js 与 TailwindCSS 项目的可视化代码编辑器，用于搭建网站和界面。你可以直接在应用的实时预览中选中并修改元素，这些修改会同步写回源代码，也可以通过 AI 对话创建或修改项目。
编辑器会将项目加载到 Web 容器中运行，以 iframe 显示预览，并对代码建立索引，使每个元素都能对应到源码中的位置。右键元素即可定位到代码行，侧边的代码视图与设计保持同步。用户还可以拖拽绘制和调整 div、通过工具栏修改 Tailwind 样式、保存和恢复检查点，并生成可分享的部署链接。
目前仅支持 Next.js 和 Tailwind，其他框架和样式方案在规划中。
核心功能
- 01在实时浏览器预览中直接编辑元素，修改同步写回代码。
- 02右键元素即可定位到源码中的对应位置。
- 03通过 AI 对话创建或修改项目。
- 04借助可视化工具栏调整 Tailwind 样式和布局。
- 05支持保存和恢复检查点，并可生成可分享的部署链接。
适用场景
- 在 Next.js 与 Tailwind 项目中快速原型化落地页或营销网站。
- 让设计师直接做视觉调整，并生成可审查的真实代码。
- 在提交修改前借助 AI 探索多种布局方案。
快速上手
- 1
使用官方托管应用 onlook.com
- 2
或查阅文档中的本地运行指南
使用前须知
- 仅支持 Next.js 和 Tailwind CSS 项目,暂不支持其他框架。
- 托管产品目前处于抢先体验阶段,需要加入等候名单。
- 本地运行的说明位于文档站点,而非 README 中。
标签
常见问题
- onlook 是什么？
- 一款开源可视化编辑器，可在浏览器中用 AI 辅助直接设计和编辑 Next.js + Tailwind 代码。 Onlook 是一款面向 Next.js 与 TailwindCSS 项目的可视化代码编辑器，用于搭建网站和界面。你可以直接在应用的实时预览中选中并修改元素，这些修改会同步写回源代码，也可以通过 AI 对话创建或修改项目。
- onlook 可以免费使用吗？用的什么许可证？
- onlook 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。
- onlook 还在维护吗？
- 半年内有更新。onlook 最近一次提交是在 2026年8月25日。
- onlook 适合用来做什么？
- 在 Next.js 与 Tailwind 项目中快速原型化落地页或营销网站。 让设计师直接做视觉调整，并生成可审查的真实代码。 在提交修改前借助 AI 探索多种布局方案。
- onlook 怎么安装和运行？
- 使用官方托管应用 onlook.com 或查阅文档中的本地运行指南
- 在哪里获取 onlook？
- 源代码和安装说明在 GitHub 上：https://github.com/onlook-dev/onlook
概要由 AI 根据项目 README 生成；GitHub 数据每日更新。
相关项目
专为 AI 编程打造的轻量级跨平台 IDE，可在一个窗口中并行管理多个项目的 Claude Code 与 Codex 会话。
1907180TypeScriptGPL-3.0更新于 上个月
一个开源的 React 可视化拖拽编辑器，可使用你自己的组件和数据构建页面。
1.3万1001TypeScriptMIT更新于 4天前
开源免费的 Splitwise 替代品，用于与朋友家人共享群组费用并计算余额。
3001516TypeScriptMIT更新于 昨天
面向 React 与 Next.js 的光标动画组件库，提供可复用的跟随光标特效。
2116102TypeScript无许可证更新于 7个月前
一款自托管的网页应用，借助 Firecrawl 和 DataForSEO，对网站至多 500 个页面进行 74 项页面内 SEO 指标审计。
26957TypeScriptMIT更新于 5个月前