高保真 UX/UI 设计、流程图、思维导图
一块画布,完成设计全流程

yoyoo 是一款免费开源的高保真 UI/UX 设计工具:拖拽组件快速产出高保真页面设计稿,连线绘制流程图与思维导图, 用自然语言让 AI 直接生成界面,支持多人实时协作与一键导出图片。

立即开始设计 查看快速上手
高保真 UX/UI 设计 流程图 · 思维导图 AI 对话生成页面 实时预览 多人实时协作 多页面管理 组件模板 · 引用模板 素材资源库 一键导出图片 免安装 · 免注册可用
yoyoo 高保真 UI/UX 设计工具编辑器界面截图

四大能力,覆盖从想法到产出的全过程

所见即所得:拖拽搭建原型、连线绘制结构、AI 对话生成页面、多人实时协作。

高保真 UX/UI

拖拽组件,搭出接近成品的页面

文本、按钮、表单、图表、表格、图片、图标等 30+ 内置组件拖入即用;位置、尺寸、背景、边框、圆角、阴影、动画逐项可视化配置,双击直接编辑内容。多页面独立尺寸与背景,对齐参考线、吸附、框选批量操作,画出的是可交互的设计稿,不是示意线框。

  • 30+ 内置组件,表单与数据图表开箱即用
  • 背景 / 边框 / 圆角 / 阴影 / 动画全属性编辑
  • 多页面管理,一屏所见即所得
yoyoo 拖拽组件编辑高保真页面原型截图
流程图 · 思维导图

连线自动避障,专注内容与结构

内置 13 种流程图形状:判断菱形、起止胶囊、输入输出平行四边形、数据库圆柱、人员节点……双击即可写标签。连线提供贝塞尔曲线与直角折线两种线型,直角折线自动绕开画布上所有组件,箭头永不穿内容;组件移动、缩放,连线实时跟随。流程图、架构图、思维导图,都是拖节点 + 连线两件事。

  • 13 种流程图形状 + 双击编辑标签
  • 直角折线全局避障路由,线不穿组件
  • 连线零同步成本,移动缩放自动跟随
yoyoo 绘制思维导图与流程图连线效果截图
AI 生成

一句话描述,AI 直接生成页面

登录后在 AI 助手对话框里描述需求——「做一个登录页」「加一张柱状图展示近六个月销量」——助手直接创建页面、添加组件、修改属性,生成结果就在画布上继续编辑。页面数据是纯 JSON(组件树 + 属性 + 连线),任何 AI 工具按数据结构文档也能生成页面导入。

  • 自然语言创建页面、增删改组件
  • 生成结果落画布,可继续手动微调
  • 开放 JSON 数据格式,外部 AI 同样可生成
yoyoo AI 助手对话生成页面截图
实时协作

一个项目,多人协作实时同步

登录后创建项目并邀请成员,分配所有者 / 编辑 / 只读三种权限,多人同屏编辑实时同步,字段级增量合并互不覆盖。无需注册,游客模式直接进入编辑器,本地数据完整可用,登录后一键迁移进协作项目。协作服务支持自行部署,数据保存在你自己的服务器上。

  • 成员邀请 + 角色权限 + 只读模式
  • 多人在线同屏编辑,实时同步
  • 游客免登录先用,登录后数据无缝迁移
yoyoo 多人实时协作与项目工作台截图

适合谁用

从想法到交付,为每个角色提供合适的工具

🧑‍🎨

产品 / 设计师

快速产出高保真页面原型与流程图,和团队讨论交互与信息架构,导出图片直接放进文档与评审。

🧑‍💻

前端开发者

用可视化方式搭页面骨架,连线表达模块依赖,图表与表格直接配置数据,设计稿即结构图。

🎓

教学 / 演示

画架构图、思维导图、数据看板原型,零安装零成本上手;写文档配图无需切换多个工具。

开始创作

无需安装、无需注册即可开始。数据保存在浏览器本地,随时回来继续编辑。

打开编辑器 →