Onlook

Onlook 的自我定位是「The Developer Tool for Visual Engineers」——给那些既做设计又写代码的人一把顺手的工具。它是免费、本地优先的编辑器，画布上看到的就是真实页面，不是设计稿的截图：改一个间距，动的是组件里的样式；拖一个区块，改的是代码。官方反复强调一句话：设计的地方就是上线的地方，中间没有「照着稿子重做一遍」的环节。

核心能力

• 画布即应用：官方称每个画框都是能跑的页面，不是图片，所见即用户所得。
• 与代码同步：直接在设计好的真实产品上改，避免设计与实现越走越远。
• 可视化改设计系统：token、组件、样式都能可视化调整，团队共用同一套。
• 多方向探索：在画布上生成多个变体，挑出可用的再合并。
• 参考图驱动：把截图、情绪板拖到实时页面旁边，用来给 agent 定方向。
• 自带 AI 订阅：可用已有的 Claude 或 ChatGPT 套餐，官方称后续还会接入更多模型来源。
• 贴合现有技术栈：支持 Next.js、React、Vite、Storybook、shadcn/ui，沿用团队原有组件与流程。
• 以代码交付：交付方式是分支或产物，代码可直接评审、合并；也可导出到本地、推到 GitHub 或托管到链接。
• 开源可自托管：GitHub 上可免费自托管；托管云版仍在闭测，需联系团队。

适合谁

• 前端工程师兼设计：不想在设计工具与编辑器之间来回搬样式。
• 有自己设计系统的产品团队：组件与 token 已经在代码里，缺一个可视化入口。
• 用 React 与 Next.js 的创业团队：改落地页与产品界面不必等排期。
• 想用 AI 改界面但不愿交出代码的团队：可自托管，代码与数据留在自己环境。
• 纯小白不适合：它默认你懂组件、分支与构建。

使用建议

• 先在分支上试：官方交付就是分支，改坏了回滚成本低，别直接在主分支上让 agent 大改。
• 自托管是免费路径：官方问答写明可自行托管，云版要预约演示，团队要先评估运维成本。
• AI 订阅自带更划算：如果你已有 Claude 或 ChatGPT 套餐，接进来比另买额度更省。
• 先把设计系统喂进去：token 与组件越完整，生成结果越贴近品牌，返工越少。
• 代码归属清楚：官方称产出的代码归用户，可导出、推 GitHub 或自行托管；商用前仍要过一遍团队的许可证与合规检查。