Onlook 是什么？
Onlook 的定位是“给设计师用的 Cursor”。它不是传统图片设计工具，而是让设计师和产品经理直接在真实代码库上预览、编辑 React 组件和网页体验，AI 辅助生成和修改，代码仍是最终来源。对于设计工程、前端团队和需要把 Figma/原型推进到真实页面的团队，Onlook 能减少设计与开发之间的反复翻译。
核心能力
真实代码编辑
直接面向 React 组件和代码库工作，而不是只输出静态稿。
视觉画布
在可视化界面中查看、选择和调整组件布局。
AI 辅助
用自然语言修改页面、生成组件或迭代设计。
Storybook 衔接
适合连接团队已有组件库和设计系统。
适合 / 不适合
适合
- 设计工程师、前端团队、产品经理和懂基础 Web 概念的设计师。
- 已有 React、Tailwind 或 Storybook 工作流，希望让设计直接作用到代码的人。
- 需要快速把网页原型推进到可运行页面，并保持代码可追踪的团队。
- 希望开源、自部署或对代码所有权有更高要求的团队。
不适合
- 只想生成海报、插画、Logo 或社媒图片的人。
- 完全不了解前端项目、组件和 Git 工作流，却希望零门槛上线复杂网站的人。
- 使用非 Web 技术栈且无法提供 React 组件环境的项目。
- 没有代码评审和测试流程，却让 AI 直接修改生产项目的人。
产品信息
开发方
Onlook
产品形态
网页端、开源自部署；特殊形态：视觉代码编辑器、React 组件画布、Storybook 设计系统协作。
价格状态
部分免费：开源与基础使用方式可用，托管服务、团队协作、AI 额度和企业能力以 Onlook 当前定价为准。
关键标签
部分免费、开源、视觉代码编辑器、AI编程、React、Storybook、设计到代码
注意事项
Onlook 能直接影响代码库，建议始终在分支、测试和代码评审流程中使用，避免 AI 修改未经检查就进入生产。
适用场景
怎么用更好
1
先在独立分支或示例项目中使用 Onlook，确认生成代码风格和团队规范一致。
2
把 Storybook、组件命名、设计 token 和 Tailwind 配置整理好，AI 修改会更稳定。
3
任何 AI 生成的代码都应经过 lint、测试、视觉回归和人工 code review。
典型使用场景
网页原型
在真实组件上快速搭建和迭代页面体验。
设计到代码
减少静态设计稿和前端实现之间的断层。
组件库协作
围绕 Storybook 和团队组件做可视化调整。
快速交付
让产品、设计和开发更快验证网页方案。
设计工具的其他工具
F
Figma AI
Figma AI 是 Figma 工作流中的 AI 能力，用于快速生成界面初稿、查找资产、编辑图片、整理图层和辅助设计协作。
燕
燕雀光年
燕雀光年 是 AI LOGO 与品牌视觉设计平台，可智能生成品牌 Logo，并支持在线编辑、VI 品牌套装和模板化视觉输出。
F
Framer AI
Framer AI 是 Framer 的智能建站能力，可生成网站布局、创建交互组件、自动翻译网站，并通过 AI 插件扩展无代码工作流。
C
Calicat
Calicat 是一站式产设研协作平台，整合 AI 产品原型设计、AI 需求设计、需求管理和任务管理，帮助团队推进产品交付。
星
星流AI
星流AI 是面向设计师和创作者的设计 Agent，可围绕灵感板、品牌视觉、海报插画和产品设计生成可继续迭代的视觉方案。
L
Lovart
Lovart 是 AI Design Agent，可从一句设计需求出发完成参考搜索、品牌视觉、产品页素材、海报、视频和多格式设计资产生成。
即
即时AI
即时AI 当前库内 jsai.cc/ai/create 入口跳转到域名出售页面，无法访问原产品，应按入口异常和待复核条目处理。
H
Holopix AI
Holopix AI 是面向游戏美术的 AI 设计平台，支持角色、场景、三视图、风格模型和从 2D 概念到 3D 建模转换的辅助流程。
M
Microsoft Designer
Microsoft Designer 是微软的 AI 图形设计应用，可从想法生成社媒帖子、邀请函、数字明信片、图片和其他视觉内容。
堆
堆友AI
堆友AI 是阿里巴巴设计生态中的 AI 设计平台，面向图像生成、商品图、营销素材、字体、模板和设计灵感社区。