Banani翻译站点

Banani是什么

Banani 是一款 AI驱动的 UI/UX设计平台，支持通过文字描述、产品需求文档（PRD）、截图和参考图片快速生成网页及移动端界面。平台提供多页面设计、交互原型、AI界面编辑和设计系统管理能力，并支持导出至 Figma、HTML/CSS 及通过 MCP 对接 AI编程工具，帮助用户快速完成从产品构思到界面设计的过程。

Banani核心功能

1. AI UI界面生成

通过自然语言描述产品需求，自动生成网页和移动端 UI界面。

2. AI多页面生成

根据产品描述生成多个关联页面，支持不同布局和视觉方案探索。

3. AI UX设计

根据用户需求和产品功能生成页面结构、用户流程及交互设计。

4. AI线框图生成

通过文字、截图或手绘草图生成可编辑线框图，快速确定页面布局。

5. AI原型生成

自动连接多个设计页面，生成可点击的交互原型，用于产品演示和体验测试。

6. PRD转UI设计

上传产品需求文档，将功能描述转换为多页面产品界面。

7. 图片转UI设计

上传截图或参考图片，识别页面布局和视觉风格，生成可编辑界面。

8. AI截图转线框图

将现有网站或应用截图转换为线框图，方便重新规划页面结构。

9. AI界面编辑

通过自然语言对话修改页面布局、颜色、字体、组件和内容，也支持手动编辑。

10. AI设计系统生成

根据品牌规范和设计要求生成统一的颜色、字体、组件及设计令牌。

11. 品牌风格识别

上传品牌Logo、颜色和其他视觉素材，让AI在生成界面时保持品牌风格一致。

12. AI响应式设计

支持移动端与桌面端界面生成及相互转换，辅助制作不同屏幕尺寸的页面。

13. AI暗黑模式设计

将现有界面转换为暗色主题，辅助生成不同主题风格的产品界面。

14. UI设计灵感库

提供优秀网站和应用的界面案例，方便浏览、参考和二次创作。

15. Figma设计导出

支持将生成的界面直接复制到 Figma，保留可编辑图层和 Auto Layout。

16. HTML/CSS代码导出

支持导出网页界面代码，方便前端开发人员继续实现和调整。

17. AI截图编辑器

支持对截图及界面参考素材进行编辑，辅助调整视觉内容。

18. AI UI Agent

通过自主规划和多步骤推理，根据 PRD、提示词和参考素材生成完整界面，并保持多页面设计的一致性。

19. Banani MCP

支持通过 MCP 连接 Claude Code、Cursor、Codex 等 AI编程工具，让 AI Agent 获取设计内容并用于代码开发。

20. 团队协作与设计分享

支持共享项目、预览链接和团队设计协作，方便产品、设计及开发人员共同评审。

Banani产品优势

1. 自然语言生成界面

无需从空白画布开始，通过文字或PRD即可快速生成产品界面。

2. 多页面设计一致性

支持统一规划多个页面的布局、配色和组件，减少页面风格差异。

3. AI与人工编辑结合

既可以通过AI对话修改设计，也可以手动调整组件和视觉细节。

4. Figma无缝衔接

支持直接导出可编辑设计图层，减少从AI生成结果重新绘制的工作量。

5. 设计与开发协同

提供HTML/CSS导出和MCP集成，连接界面设计与AI编程工作流。

6. 支持品牌设计规范

可以导入品牌素材和设计系统，让生成结果更符合产品视觉规范。

Banani应用场景

1. SaaS产品设计

快速生成后台管理系统、数据管理平台和企业级应用界面。

2. Web网站设计

制作企业官网、产品展示页、营销落地页和在线服务平台。

3. 移动端App设计

生成 iOS、Android 应用页面及完整交互流程。

4. 产品原型设计

将PRD转换为可交互原型，辅助产品需求评审和方案展示。

5. UI设计方案探索

快速生成多种视觉方向，比较不同页面布局和设计风格。

6. 旧网站界面改版

上传现有网站截图，参考原有布局生成新的UI设计方案。

7. 企业设计系统建设

统一品牌颜色、字体、组件和页面设计规范。

8. AI辅助前端开发

通过Figma导出、代码导出和MCP集成，将AI生成的界面交付给开发工具。

Banani使用教程

第一步：注册账号

进入 Banani 官网，注册账号并登录。

第二步：创建设计项目

选择新建设计项目，确定 Web 或 Mobile 设计类型。

第三步：输入产品需求

通过自然语言描述产品功能、页面结构、目标用户和设计风格，也可以上传PRD。

第四步：上传参考素材

可以上传网站截图、手绘草图、Figma链接或品牌Logo，作为设计参考。

第五步：生成UI界面

提交需求，由AI自动生成页面布局和多种设计方案。

第六步：编辑与优化

通过AI聊天修改页面颜色、字体、组件和布局，也可以直接手动编辑。

第七步：制作交互原型

连接不同页面，形成可点击的产品交互流程。

第八步：导出设计成果

将界面复制到Figma，或导出HTML/CSS代码，也可以通过MCP连接AI编程工具。

Banani收费标准

Banani 采用免费版与付费订阅相结合的模式，提供 Free、Plus、Pro 和 Enterprise 套餐。

套餐权益说明

1. Free： 提供基础AI设计功能，支持私人项目，适合个人体验。
2. Plus： 提供Agent模式、更多生成积分、无限Figma导出和3倍生成速度。
3. Pro： 提供无限积分、最高生成速度和优先客服支持。
4. Enterprise： 面向大型团队，支持企业身份认证、设计系统导入及定制集成。

积分使用说明

• AI生成和编辑根据任务复杂度消耗积分。
• Free每月提供12积分，并每日补充3积分。
• Plus每月提供100积分，并每日补充10积分。
• Pro提供无限积分。
• MCP功能支持连接AI编程工具，具体套餐权限以账户页面为准。

注：以上为官网展示的美元价格，Plus和Pro的年付折算月价分别为12美元和30美元，年付可节省约40%。

Banani常见问题（FAQ）

1. Banani是什么工具？

Banani 是一款AI UI/UX设计平台，支持通过文字、PRD和图片生成网页及移动端界面，并提供原型制作和Figma导出。

2. Banani可以免费使用吗？

可以。免费版提供每月12积分和每日3积分补充，无需绑定信用卡即可开始体验。

3. Banani支持中文吗？

可以使用中文描述设计需求和生成中文界面内容，适合中文网站和App原型制作。

4. Banani支持哪些设计类型？

支持网页、移动端App、SaaS后台、营销落地页、产品原型和设计系统等。

5. Banani支持导出Figma吗？

支持。付费套餐提供Figma导出，可以将设计转换为可编辑图层，并保留Auto Layout。

6. Banani可以生成完整网站吗？

可以生成多页面网站UI和交互原型，并支持导出HTML/CSS代码，但完整网站的业务逻辑和后端功能仍需进一步开发。

7. Banani支持上传截图生成UI吗？

支持。可以上传网站截图、App截图或手绘草图，让AI识别布局和视觉风格并生成可编辑界面。

8. Banani支持AI编程工具吗？

支持。通过MCP可以连接Claude Code、Cursor和Codex等AI编程工具，将设计内容用于后续开发。

9. Banani适合哪些用户？

适合UI/UX设计师、产品经理、独立开发者、创业团队、前端工程师和SaaS产品团队。