Onlook

Onlook 是一个开源的可视化代码编辑器，官网给自己的定位是「视觉工程师的开发工具」，源码放在 GitHub 的 onlook-dev/onlook 仓库，星标超过 2.6 万（取自仓库公开页面），采用 Apache-2.0 许可。 它处理的是设计与代码两头改的问题。项目跑起来之后，Onlook 会在浏览器里加载你的 Next.js + TailwindCSS 应用，界面元素可以直接点选、拖拽、调间距配色，右侧面板同步显示对应的 JSX 与样式，改动直接写回本地源码文件，不经过任何中间格式导出。整套流程跑在本机，代码不出本地环境；仓库标签里还挂着 supabase、typescript 一类的集成。 README 对两条产品线的关系写得很明确：这个开源仓库就是最早那个 Next.js + Tailwind 视觉编辑器本体，团队接下来做的是面向 AI 原生设计师的托管版本，目前处于 early access，需要排 waitlist。仓库标签同时列着 claude-code、codex、cursor、vibe-coding 这些词，说明它把自己摆在与 AI 编码工具配合的位置，而不是取而代之。 对做前端的人来说，比较实际的用法是拿它改既有项目的页面细节：调一段栅格、换一组配色、看某个组件在不同断点下的表现。改完就是能直接提交的 diff，不需要把设计稿再翻译一遍。