# Kombai

AI 设计工程师，用于设计网站和产品 UI，并在现有代码库中交付可用于生产的前端。

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

## 什么是 Kombai？

Kombai 是面向团队和个人的 AI 设计工程师，可帮助设计网站和产品界面，并在不切换工具的情况下将这些设计转化为可投入生产的前端。该网站将其定位为端到端的前端工作流，使画布设计、渲染后的 UI 和仓库代码保持同步。

其核心目标是帮助用户在同一循环中从视觉概念走向可运行的 UI。产品网站强调基于画布的编辑、面向生产的代码生成以及浏览器上下文，让用户能够细化设计细节、在真实浏览器中检查结果，并将这些变更带回代码中。

## Kombai 能做什么？

### 基于画布的可视化设计

在交互式画布上创建网站和产品 UI 概念，然后通过直接编辑元素进行细化，而不是从头重写提示词。

### 前端代码生成

在你现有的技术栈中生成可用于生产环境的前端代码，首页说明支持复用组件、tokens、hooks 以及代码库中的其他上下文。

### 设计-代码同步工作流

让设计与代码保持关联，这样你在画布、浏览器或代码仓库中的编辑都能在工作过程中同步。

### 感知浏览器上下文的编辑

使用浏览器上下文进行已渲染 UI 的编辑，并支持类似 DevTools 的检查、多标签页、截图、网络数据以及自动化测试/调试。

### 来自技术栈和来源的上下文

导入或引用设计系统、代码、Figma 文件、Storybook、npm 包，甚至网页，以便让新工作建立在现有上下文之上。

### IDE 安装

在 IDE 扩展中工作，安装页面显示支持 VS Code 和其他受支持的编辑器。

## 使用场景

### 设计到代码的页面创建

在画布上设计落地页或产品页，然后无需切换到单独的交付步骤即可将其转化为可投入生产的前端。

### 视觉 UI 迭代

在浏览器中通过编辑文本、样式或布局来优化现有 UI，同时查看已渲染页面和相关浏览器上下文。

### 在现有技术栈中构建

在现有代码库中添加新界面时，复用仓库组件、hooks、tokens 和设计系统模式。

### 视觉增强工作

当页面需要的不只是简单的布局调整时，创建或调整精美资源、动画和视觉处理效果。

### 团队前端工作流

为需要集中使用、规则和 credits，同时又要协同交付前端工作的团队，设置共享访问和账单。

## 常见问题

### Kombai 是什么？

Kombai 被定位为一款 AI 设计工程师，可帮助设计出色的网站和产品 UI，并在同一工作流中交付可直接上线的前端。

### Kombai 有免费方案吗？

是的。定价页面包含免费方案，以及付费的 Pro、Team 和 Enterprise 方案。

### 我可以在哪里使用 Kombai？

Kombai 可在 VS Code 中使用，安装页面还列出了 Cursor、Antigravity IDE、Trae 和 Kiro。

### Kombai 生成设计还是可运行的代码？

该网站将 Kombai 描述为同时处理设计和生产前端代码，并让两者保持同步。

### 我可以将它用于现有代码库吗？

可以。首页说明你可以基于现有代码库进行构建，安装页面则显示它可在 VS Code 中运行。

## 快速信息

- **类别**: AI 设计工程师
- **平台**: Web 应用和 IDE 扩展
- **主要用户**: 个人、团队和前端构建者
- **网站**: kombai.com
- **定价**: 提供免费方案；付费方案包括 Pro、Team 和 Enterprise
- **安装位置**: VS Code 和其他列出的编辑器