Software 2.0

Kombai：真正理解前端的AI工具

admin -

上个月，我开始构建展示我的第一个开源包 mentis 的模板。我的目标是为现实世界的例子创建有用的模板。

我发现了一个可以帮助加快前端应用程序开发的工具，感觉就像 我在笔记本电脑上有随时可用的初级前端开发者。

介绍 Kombai，一个专为前端开发而构建的AI代理。

1、前端AI的问题

前端AI工具 (以Figma集成为目标) 通常会忽略你的正确技术栈。它们经常写出糟糕的代码，或者更糟的是，忽略你的组件，每次都重新构建自己的。

我理想的流程是一个专家UI/UX AI工具 (只处理非常简单的逻辑)，然后我想把它交给专业人士 (Cursor/Claude Code)。

我如何构建前端：

  • 首先设计不带逻辑 (Kombai)。
  • 模拟数据/动作的逻辑 (Cursor/Claude)。
  • 连接API (Cursor/Claude 再次)。

Cursor 和 Claude Code 在处理逻辑时非常出色，但在实现设计方面却有很多不足 (感觉像那些假装是前端专家的后端开发人员)。

2、使用 Kombai 构建示例

为了展示 Kombai 如何帮助我，我将为 mentis 创建一个 GitHub 模板 仓库。

该模板将使用 Next.js & Shadcn。它将基于 Figma 设计构建，因此可以轻松地用不同的堆栈重现。

3、Figma 设计

我首先浏览了 Figma 的 10,000 多个免费模板，这些模板是使用 AI（从 Figma 到代码）构建的绝佳资源。

我选择了这个 免费 AI 聊天机器人应用 UI 模板，修改了logo、头像和应用名称。

4、构建 Next.js Shadcn 应用

我将采用一种非常标准的方法，这个仓库旨在作为 GitHub 上的模板来构建。

5、Kombai 技术栈设置

在创建基本项目后，你需要配置 Kombai 与你的技术栈。我喜欢这种方法/体验，希望其他工具能更多地采用这种方式。

Kombai 提示中悬停的“技术栈”按钮
Kombai 技术栈使用的对话框，带有编辑按钮
Kombai 技术栈分解与扫描工作区
Kombai 代码扫描技术栈与AI

你可以手动输入你的技术栈，或者使用方便的AI扫描工作区工具 (对于标准设置效果很好)。

我只有一个项目是手动输入的 (由于处于设计系统迁移过程中)。

6、Kombai Figma 集成

我最喜欢的部分是使用 Figma 链接作为上下文，让它实际上在检查你现有的组件时使用你的技术栈。

Kombai 提示中添加 Figma 链接
Kombai 提示中使用 Figma 组件作为上下文
Kombai 实现组件分解
Kombai 实现摘要包括描述和文件更改
Kombai 实现结果在本地主机上

结果相当不错（当然不是完美），但相比其他工具已经有所改进（通常不遵循正确的技术栈）。

我有一些个人技巧来提高输出，我倾向于使用（了解Figma的工作方式有助于生成更好的组件）。

7、我的个人建议

首先，一次性生成更大的组件会给我较差的结果。

7.1 如何拆分组件

Figma 类似于 React，设计师拆分可重用的组件。

Figma 组件并不总是与 React 一一对应（与设计师合作有助于改善这一点）。

Figma 示例，展示了不同的组件拆分方式

菱形表示一个 Figma 组件。这不会很好地工作，所以我将使用突出显示的 Frame。

大多数 Figma 项目可以通过右键单击复制为链接。

附注：我不得不谷歌菱形是什么形状，并找到了这个有趣的 分解 by 一名学生，我不确定是否完全正确，但我喜欢它。所以我决定称它为菱形。

7.2 我拆分组件的例子

按回车或点击以全屏查看图片！

回到例子，我想改进标志的实现。

  • 左上角: Kombai 的第一代。
  • 右上角: LogoWithText Figma 设计。
  • 中间: Logo Figma 设计。
  • 底部: 包含两个 Figma 上下文链接的 Kombai 提示。

带有提示和 Figma 上下文的 Kombai 聊天消息分解。

另一个例子，展示了一个不良的实现。

  • 顶部: Kombai 的第一代。
  • 中间: ChatMessage Figma 设计。
  • 底部: 包含聊天消息 Figma 链接的 Kombai 提示。
Kombai 新的聊天消息生成

最后，这显示了 Kombai 通过正确拆分组件所能实现的改进。

8、它不是骗人的（有其问题）

我不想试图向你兜售骗人的东西，我确实遇到了一些问题：

  • 随机安装包 (特别是使用 Shadcn)。
  • 奇怪的配置文件/更改 (我注意到 eslint)。
  • Shadcn 它不必要的添加了所有组件和 radix 组件。
  • 它承诺一次完成，但实际上永远不会。
  • Figma 的组件分解不是最好的 (我没有找到任何工具能很好地做到这一点)。
  • 有时它似乎有自己的想法，应该如何使用你的堆栈 (不遵循你的约定)。

当我使用它时:

  • 将设计带到 90%。
  • 获取简单的逻辑。

当我不使用它时:

  • 项目刚开始的时候。
  • 复杂的状态情况。
  • 处理错误修复。

9、竞争对手

我会使用这个工具吗:

  • 替代 Cursor — 不。
  • 替代 Claude Code — 绝对不。
  • 替代 V0 — 有时是。
  • 替代 Builder.io 的 Figma 集成 — 目前是。
  • 替代 Lovable — 演示不是，MVP 是。

我发现最接近我用例的竞争对手是 Builder.io 的 Figma 集成。

我发现 Builder.io 的 Figma 集成的问题:

  • 它不适用于你的技术栈。
  • 它不能很好地重用组件。

我发现其他工具的常见问题是:

  • 它们有自己的堆栈 (除了 Cursor 和 Claude Code)。
  • 它们没有良好的 Figma 集成。
  • 它们经常完全重写而不是编辑。

所以这并不是某种 Cursor/Claude Code 的前端杀手，实际上，在我看来，没有这些工具你会遇到困难。

10、结束语

我使用 Kombai 的主要用例是使用 Figma 集成帮助达到 90%，然后接管。

与其他工具相比，我发现它做得更好，但它不应该取代大多数其他工具。

看到他们如何成长和演变是很令人兴奋的，他们的基础非常稳固。

它有一个免费计划，所以你不妨试试！

原文链接：The AI Tool That Actually Understands Frontend (Most AI Tools Don’t)

汇智网翻译整理，转载请标明出处