Navify AI

Navify AI

关于
Onlook

Onlook

面向设计师的可视化代码编辑器——以可视化方式编辑生产代码。

设计人工智能编程效率工具开发者工具免费增值

Onlook 是一款面向设计师和产品经理的可视化代码编辑器——可以说是设计界的 Cursor。它让你以可视化方式创建、编辑和发布网页体验，同时底层生成真实代码。直接编辑生产环境的 React 组件，实时查看变化，无需切换上下文即可推送到生产环境。

onlook.com
访问官网
Onlook
onlook.com

核心功能

  • 可视化 React 编辑器

    点击生产应用中的任意 React 组件进行可视化编辑——样式、内容和布局的修改立即生效。

  • AI 设计转代码

    用自然语言描述你想要的效果，Onlook 自动生成对应 UI 代码，并集成到你现有的组件结构中。

  • 实时编辑

    在已上线的网页上直接修改——编辑文字、颜色、间距和布局，无需打开代码编辑器或搜索文件。

  • 实时预览

    每次修改立即看到效果。不再需要在编辑器和浏览器之间来回切换来检查效果。

  • 响应式设计

    通过可视化断点控制为每种屏幕尺寸调整设计。确保桌面、平板和手机上的像素级完美布局。

  • 发布到生产

    将视觉修改推送到生产环境，无需写代码或创建 PR。Onlook 在背后自动提交真实的代码变更。

优点

  • 连接设计与开发——无需交接
  • 直接编辑生产应用，无需手动写代码
  • AI 将设计意图转化为真实 React 组件
  • 设计师和开发者实时协作

注意点

  • 目前仅支持 React 项目
  • 较新的工具，生态和集成仍在发展
  • 高级定制可能仍需手写代码

适用场景

设计师

搜索 / 总结 / 日常

产品经理

搜索 / 总结 / 日常

前端开发者

编码 / 调试 / 自动化

设计工程师

搜索 / 总结 / 日常

相关工具

继续看看这些相近工具