综合介绍

Kombai是一个为前端开发设计的AI代理工具。 它专门处理从设计到编码的复杂任务，旨在提升开发人员的效率和代码质量。 与通用的AI模型不同，Kombai利用特制的上下文引擎和工具，能够更准确地理解和实现前端开发需求。 它的核心功能是解读Figma设计文件，并将其自动转换成高质量、可用于实际生产的前端代码，支持React、Vue、Angular等多种框架。 Kombai的AI经过专门训练，能够像经验丰富的开发者一样理解UI设计，自动生成包含逻辑结构、循环和条件的JavaScript代码，以及响应式的CSS。 该工具不需要用户在设计稿中进行特殊标记或分组，简化了从设计到开发的工作流程。

功能列表

• 设计稿转代码: 能将Figma设计文件一键转换为高质量的React、HTML及CSS代码。
• AI设计解读: Kombai的AI能够像人类开发者一样理解UI设计，无需对设计稿的图层进行预处理、命名或分组。
• 高质量代码输出: 生成的代码具有清晰的逻辑结构，并且在CSS中采用Flex布局以实现响应式设计。
• 支持多种UI框架: 支持包括MUI、Ant Design在内的超过30种流行的前端库和框架。
• JavaScript代码生成: 除了结构和样式，Kombai还能生成包含循环、条件判断和模拟数据的JavaScript代码。
• 邮件模板生成: 提供专门针对电子邮件的HTML代码生成功能，确保代码在不同邮件客户端的兼容性。
• IDE集成: 可作为插件直接在开发者的集成开发环境（IDE）中使用。
• 代码库理解: 能够索引和搜索开发者的代码库，从而复用已有组件，保持代码风格的一致性。

使用帮助

Kombai旨在简化从设计到代码的转换过程，让开发者可以专注于业务逻辑而非重复的UI编码工作。 以下是使用Kombai的基本流程和主要功能的操作方法：

安装Kombai主要作为一个VS Code插件在你的集成开发环境中使用。

1. 打开VS Code。
2. 前往扩展市场。
3. 搜索 Kombai。
4. 点击“安装”按钮。安装完成后，你就可以在VS Code中直接使用Kombai的功能了。

核心功能操作

1. 从Figma设计稿生成代码这是Kombai最核心的功能。你只需要提供Figma设计稿的链接，Kombai就能自动分析并生成代码。

• 准备Figma设计: 在Figma中打开你的设计稿，确保设计是你期望的最终样式。Kombai的AI足够智能，不需要你对图层进行特殊的命名或分组。
• 获取Figma链接: 选中你想要转换的Figma画板（Frame）或组件，点击分享按钮，复制链接。
• 在Kombai中生成代码:
  • 在VS Code中打开Kombai插件。
  • 将Figma链接粘贴到指定的输入框中。
  • Kombai会开始分析设计稿。分析完成后，它会展示一个预览，让你可以在保存前查看生成的代码。
  • 你可以选择生成的代码框架，例如React或HTML/CSS。
  • 确认无误后，即可将代码插入到你的项目中。

2. 增加或修改功能Kombai不仅仅是初次生成的工具，它还能理解你的指令，对现有组件进行修改或添加新功能。

• 选中组件: 在你的代码文件中，选中你想要修改的组件代码。
• 使用自然语言描述: 打开Kombai的聊天或指令窗口，用简单的自然语言描述你的需求。例如，你可以输入：“给这个表单增加一个密码确认字段”或“将这个列表的点击事件改为双击事件”。
• 预览与应用: Kombai会根据你的描述生成修改后的代码。你可以先预览更改，确认后一键应用到你的代码库中。

3. 理解和复用现有代码库Kombai能够学习你项目中的编码规范和组件库，使得新生成的代码与项目整体风格保持一致。

• 项目索引: 首次在项目中使用时，Kombai会自动索引你的代码库，识别出可复用的组件和代码风格。
• 智能推荐: 当你从Figma生成一个新组件时，如果你的代码库中已经有类似的组件（例如按钮或输入框），Kombai会优先使用你自己的组件，而不是重新生成一个。这保证了项目的一致性。

4. 生成电子邮件模板对于需要兼容各种邮件客户端的HTML邮件，Kombai提供了专门的优化。

• 选择邮件模板模式: 在从Figma生成代码时，选择“Email”模式。
• 生成表格布局代码: Kombai会自动生成基于<table>的HTML代码，这是确保邮件在Outlook、Gmail等主流客户端中正确显示的最可靠方法。
• 内联CSS: 所有样式都会自动转换为内联CSS，以适应邮件客户端的限制。

5. 预览和计划对于复杂的任务，Kombai会先生成一个执行计划，让你了解它将如何操作，然后才开始编写代码。

• 任务计划: 在执行例如“构建一个完整的用户管理页面”这类复杂指令时，Kombai会先列出它将要创建的文件、组件以及它们之间的关系。
• 代码预览: 在代码最终写入文件之前，你可以随时预览完整的代码输出，确保一切尽在掌控。

通过以上步骤，开发者可以极大地减少在UI开发上花费的时间，将精力更多地投入到创造性的工作中。

应用场景

1. 快速原型开发对于需要快速将设计想法转化为可交互原型的团队，Kombai可以大大缩短开发周期。 设计师完成Figma设计后，开发者可以立即生成前端代码，快速搭建出应用框架，用于演示和收集用户反馈。
2. 前端界面开发在正式的项目开发中，前端开发者可以使用Kombai来处理大部分的UI编码工作。 它可以直接从Figma设计稿生成高质量、符合团队编码规范的组件代码，让开发者可以专注于实现复杂的业务逻辑和状态管理。
3. 设计系统维护对于拥有自己设计系统和组件库的公司，Kombai可以学习并应用这些规范。 当生成新组件时，它会自动复用设计系统中已有的元素，确保新旧界面的视觉和代码风格统一，降低维护成本。
4. 营销邮件制作营销团队经常需要创建兼容性强的HTML邮件模板。使用Kombai，设计师在Figma中完成设计后，可以一键生成能在各种邮件客户端中正常显示的HTML代码，无需手动编写和调试表格布局。
5. 学习与教育对于正在学习前端开发的初学者来说，Kombai是一个很好的辅助工具。 他们可以通过观察Kombai如何将一个可视化设计转化为结构清晰的HTML和CSS代码，来更直观地理解前端开发的基本原理。

QA

1. Kombai支持哪些前端框架？Kombai目前主要支持React，同时也能生成通用的HTML和CSS代码。 官方表示其对超过30个常用库提供了支持，例如MUI、Ant Design等，并且计划在未来支持更多框架，如Vue和Angular。
2. 使用Kombai是否需要在Figma中遵循特殊的规范？不需要。 Kombai的AI模型经过训练，能够像人类开发者一样理解没有经过特殊分组或命名的Figma图层。你只需要按照正常的设计习惯进行设计即可。
3. 生成的代码可以直接用于生产环境吗？Kombai生成的是高质量的前端代码，可以直接用于生产环境。 它生成的代码注重逻辑结构和可维护性，避免了硬编码尺寸等不良实践。 当然，对于复杂的业务逻辑部分，仍需要开发者进行后续的开发和集成。
4. Kombai如何处理响应式设计？Kombai在生成CSS时，会智能地使用Flexbox布局，而不是写死的像素值。 这使得生成的组件默认就具有良好的响应式特性，能够在不同尺寸的屏幕上正常显示。
5. Kombai是免费的吗？Kombai为个人开发者提供了免费的公开研究预览版。 对于企业级用户，Kombai提供付费方案，包括更强的定制化能力和技术支持。