# Banani

Banani 是一款 AI UI 设计工具，可根据提示、参考资料和 PRD 生成可编辑的设计与原型。

- Findings24: <https://findings24.com/zh-CN/tools/banani>
- 网站: <https://banani.co>
- 价格: Freemium
- 分类: AI平面设计, AI设计助手, AI 界面生成器

## 什么是 Banani？

Banani 是一款 AI UI 设计工具，可将提示、参考和产品需求转化为可编辑的 UI 设计与原型。该网站将其描述为一种无需从空白画布开始，就能创建线框图、多屏界面概念和高保真布局的方式。

其工作流程以从文本或设计输入生成 UI 为核心，然后通过聊天或直接编辑对结果进行优化。用户可以分享项目获取反馈，并导出到 Figma、HTML/CSS、图片或代码，同时还支持通过 MCP 将设计连接到编码代理。

## Banani 能做什么？

### 文本生成 UI

用自然语言描述一个想法，Banani 就会从文本生成可编辑的多屏原型。

### 基于参考生成

上传截图、图片或 Figma 链接，这样 Banani 就能从现有设计中提取风格和布局。

### 可编辑迭代

使用提示词或点击并聊天的交互方式调整屏幕，并微调颜色、字体和其他 token，以符合某种风格方向。

### 分享与导出

分享项目或页面链接供审阅，然后将完成的作品导出到 Figma、HTML/CSS 或图片。

### 自主 UI 代理

使用 AI 设计代理从提示词、PRD 或参考资料中进行研究、规划并生成完整的 UI 设计。

### 工作流工具集

探索该产品的 UI 工具，包括线框图、原型、设计系统、截图编辑和 Figma 转换工作流。

## 使用场景

### 早期产品探索

将产品想法或 PRD 转化为可点击原型，以便在实施前进行评审。

### 快速 UI 草稿

当团队需要在没有设计师在场的情况下传达概念时，快速生成线框图和更高保真的屏幕。

### 基于参考的重设计

从截图、图片或 Figma 链接开始，复刻或重组现有界面并探索变体。

### 团队评审与交接

与队友分享屏幕或项目，收集反馈，然后将结果导出到 Figma 或代码以便交接。

### 代理辅助的设计迭代

使用 AI UI 代理根据描述或 PRD 生成屏幕，然后在聊天中迭代调整结果。

## 常见问题

### Banani 是什么，它会生成什么？

Banani 是一款 AI UI 设计工具，可将提示、参考和 PRD 转化为可编辑的 UI 设计与原型。来源还说明它可以将设计导出为 Figma、HTML/CSS、图片或代码，并通过 MCP 连接，使编码代理能够访问设计。

### Banani 适合谁使用？

该网站将 Banani 定位为帮助需要快速交付 UI 的产品团队使用的工具，包括非设计师、PM、初创公司创始人、工程师和设计师，他们希望借助 AI 副驾驶处理重复性工作。

### 工作流程是怎样的？

你可以从提示词、设计参考或 PRD 开始。随后 Banani 会生成一个可点击的多屏 UI 原型，你可以在分享或导出前通过点击或与 AI 对话来继续完善。

### 有免费计划吗？

是的。定价页面显示 Free 计划永不过期，网站也提到付费计划会提供更多积分、更快的生成速度和更多导出选项。Figma 导出仅在付费计划中提供。

### 我可以将 Banani 导出或连接到哪些工具？

Banani 支持导出到 Figma、HTML/CSS 和图片，定价页面还说明它提供 MCP 访问，因此 Claude Code、Cursor 和 Codex 等 AI 编码代理可以连接到设计。

## 快速信息

- **类别**: AI UI 设计工具
- **主要用户**: 产品团队、PM、创始人、工程师、设计师
- **输入方式**: 文本提示词、PRD、图片、截图、Figma 链接
- **输出内容**: 可编辑的 UI 设计、多屏原型、Figma、HTML/CSS、图片、代码
- **计划结构**: 定价页面显示 Free、Plus、Pro 和 Enterprise 选项
- **来源域名**: banani.co