Banani
从文本提示、参考图或 PRD 生成可编辑 UI 设计与多屏可点击原型
工具介绍
Banani 是一款面向产品团队的 AI UI 设计工具，核心能力是把文本提示、参考素材或 PRD 转化为可直接编辑的界面设计与原型。它不只输出静态图片或代码文件，而是生成可在画布上继续修改的 UI，并支持多屏可点击原型。用户可以用自然语言描述产品，也可以拖入图片、截图或 Figma 链接，让 Banani 提取视觉风格与布局，用于生成新方案或复刻现有界面。设计完成后，可通过 AI 对话或手动调整颜色、字体与设计令牌来细化风格，再通过项目或屏幕链接分享给团队收集反馈，并导出到 Figma、HTML/CSS、图片或代码，或通过 MCP 让编码代理直接访问设计。
核心功能
- 文本生成 UI：用自然语言描述产品，即可生成可编辑的界面设计，而非静态图片或代码文件。
- 线框图与高保真设计：支持从文本提示快速生成线框图和完整的高保真界面。
- 多屏可点击原型：根据提示或设计参考生成多屏、可点击的 UI 原型，用于展示完整流程。
- 参考图生成设计：可拖入图片、截图或 Figma 链接，提取其视觉风格与布局，用于生成新创意或 1:1 复刻界面。
- AI 与手动样式调整：可通过 AI 对话调整设计风格，也可手动微调颜色、字体和其他设计令牌。
- 分享与导出：支持发送项目或屏幕链接收集反馈，并导出到 Figma、HTML/CSS、图片或代码，还可通过 MCP 让编码代理访问设计。
使用方法
- 1进入 Banani 官方产品，用自然语言描述你的产品需求，或提供图片、截图、Figma 链接等设计参考。
- 2由 Banani 根据提示或参考生成可编辑的 UI 设计、线框图或多屏可点击原型。
- 3在画布上直接编辑生成结果，通过 AI 对话调整风格，或手动微调颜色、字体与设计令牌。
- 4将项目或屏幕链接分享给团队成员收集反馈，并按需导出到 Figma、HTML/CSS、图片或代码。
常见问题
Banani 能根据什么输入生成 UI 设计？
Banani 支持从文本提示、图片、截图、Figma 链接以及 PRD 生成可编辑的 UI 设计和原型。
Banani 生成的是静态图片还是可编辑的设计？
Banani 生成的是可编辑的 UI 设计，用户可以在画布上直接编辑，而不是只得到静态图片或代码文件。
Banani 支持多屏可点击原型吗？
支持。Banani 可以根据提示或设计参考生成多屏、可点击的 UI 原型。
Banani 的设计可以导出到哪些格式？
Banani 支持导出到 Figma、HTML/CSS、图片或代码，也可以通过 MCP 连接让编码代理访问设计。
如何调整 Banani 生成设计的风格？
可以通过 AI 对话调整设计风格，也可以手动微调颜色、字体和其他设计令牌，以匹配目标风格。
