Onlook

Onlook 是一款面向设计师与产品经理的可视化代码编辑器，把设计、预览和改代码放在同一个界面里完成。它的思路是“设计即代码”：在无限画布上拖拽布局、调整组件，改动会同步落到底层代码上，不写代码的人也能参与网页开发，写代码的人则可以直接接手同一份工程继续迭代。它既支持从 Figma 导入设计稿，也能接入已有的 Next.js、Tailwind 项目，在真实代码库上做视觉调整。

• Onlook官网入口

主要能力

• AI设计助手：按需求生成布局、组件或响应式方案，编辑过程中也会给出调整建议。
• 可视化改代码：拖拽元素、管理图层时底层代码同步变化，支持版本回溯和组件复用，改错了能退回去。
• 品牌规范统一：颜色、字体等设计变量集中管理，多个页面保持一致，不必逐处手改。
• 一键发布上线：从多端适配调试到部署发布，整条链路在同一工具内走完。

适合谁用

• 设计人员：不用等开发排期，在 Onlook 里就能把设计稿变成能跑起来的页面。
• 产品团队：做网页原型、协作看板或版本迭代时，讨论的是可点击、可修改的实物，而不是静态截图。
• 前端开发者：项目开源，代码所有权归用户自己，数据本地化存储，兼容 React / Next.js 技术栈。
• 个人创作者：有免费入门选项，不需要信用卡即可试用。

目前已有数万开发者采用，Adam Argyle 等业界人士也公开推荐过。官方展示的 Villainterest 这类趣味案例，能看出它在个性化定制上留了不小余地。把设计工具和代码编辑器揉在一处、让两拨人共用一份文件，正是它值得一试的地方；如果你正为设计和开发之间的来回沟通头疼，可以从免费版本开始上手看看。