Kombaiは、Figmaのデザインリンク・テキスト・画像を入力すると、React/Next.jsとTailwind CSSをベースにしたレスポンシブなフロントエンドコードを生成するAIエージェントである。単なる「デザインからコードへの変換ツール」にとどまらず、デザイン案の生成、コード生成、ブラウザ上でのビジュアル編集、ユーザーフローの自動テストまでを一つのワークスペースにまとめている点が特徴。公式は自らを「世界水準のフロントエンドを作るためのオールインワンエージェント」と位置づけており、400以上のフロントエンドライブラリについて実践的なベストプラクティスを学習している。デスクトップアプリ（Windows / macOS / Linux）とIDE拡張の両方から利用できる。
主な特徴
- Figmaデザインからの高忠実度コード生成: Figmaのリンクを渡すだけで、レイアウト・余白・タイポグラフィを読み取り、React/Next.js + Tailwind CSSの構造化されたコードに変換する。テキストや画像を起点にした生成にも対応
- 400以上のライブラリに対応したコード生成: 既存のコードベースをスキャンし、そこで使われているコンポーネント・フック・ユーティリティ・デザイントークンを再利用する。npmパッケージやStorybookの内容も文脈として取り込める
- デザイン案そのものの生成: キュレーションされた参考事例をもとに、レイアウトの方向性を複数案提示する。デザイナー不在のチームでも「たたき台」から始められる
- ブラウザ内ビジュアルエディタ: レンダリングされたUIをクリックして、テキスト・スタイル・レイアウトをその場で編集できる。変更はコード側に同期される
- 自動テストとGit連携: ユーザーフローを自律的にテストし、生成結果をGitでバージョン管理できる。ターミナルコマンドの自律実行にも対応（Proプラン以上）
- MCPによる外部連携: Model Context Protocol（MCP）経由で外部システムやデータソースと接続でき、課題管理やブラウザ自動化などのツールと組み合わせられる
料金
| プラン | 料金 | クレジット | 主な特徴 |
|---|---|---|---|
| Free | $0 | 300/月（登録時150 + 毎日50） | 無限キャンバス、デザイン参考事例、HTML/画像エクスポート、コミュニティサポート |
| Pro | 月額$20（年払いで20%割引） | 2,000〜110,000/月 | Freeの全機能に加え、コードデザイン、Gitバージョニング、ターミナルコマンドの自律実行、SOC2対応、学習へのデータ非利用、メールサポート |
| Team | 1人あたり月額$40（最大20席） | 2,000〜110,000/月（共有プール） | Proの全機能に加え、外部パッケージのインデックス化、ルール/コマンドの共有、統合請求、チーム利用分析 |
| Enterprise | 要問い合わせ | 個別設定 | Teamの全機能に加え、カスタムコンテキストエンジン、専任サポート、導入支援、カスタムSLA |
料金は2026年8月時点の情報です。最新の料金は公式サイトをご確認ください。
メリット・デメリット
✅ メリット
- Figmaデザインを渡すだけで実装の初期工数を大きく圧縮できる
- 既存コードベースの規約やコンポーネントを踏まえた生成のため、生成物が浮きにくい
- デザイン生成・コード生成・ビジュアル編集・テストが1か所にまとまっており、ツールを行き来する必要がない
- 無料プランのクレジットが毎日補充されるため、試用の敷居が低い
- デスクトップアプリとIDE拡張の両方があり、既存の開発フローに寄せやすい
⚠️ デメリット
- クレジット制のため、大きな画面や反復修正の多い作業では消費が読みにくい
- 得意領域がフロントエンド（React/Next.js + Tailwind CSS系）に寄っており、バックエンドを含む全体構築には向かない
- 生成コードはそのまま本番投入せず、レビューとテストが前提になる
- Free プランではターミナルコマンドの自律実行など主要機能が制限される
- 日本語のドキュメント・情報が少なく、英語ベースでの利用が前提
類似サービスとの比較
| 比較項目 | Kombai | v0 (Vercel) | Lovable | Builder.io Visual Copilot |
|---|---|---|---|---|
| 主な入力 | Figmaリンク / テキスト / 画像 | テキスト / 画像 | テキスト | Figmaデザイン |
| 主な出力 | React/Next.js + Tailwind CSS | React/Next.js + Tailwind CSS | フルスタックWebアプリ | 各種フレームワーク向けコンポーネント |
| 既存コードベース連携 | スキャンして規約・部品を再利用 | 限定的 | プロジェクト単位で完結 | デザインシステムへのマッピング |
| ビジュアル編集 | ブラウザ内エディタあり | プレビュー中心 | プレビュー中心 | Figma/ビジュアル編集が主軸 |
| 提供形態 | デスクトップアプリ / IDE拡張 | Webサービス | Webサービス | Figmaプラグイン / Web |
こんな人におすすめ
- Figmaで作ったデザインの実装工数を削減したいフロントエンド開発者
- デザイナーとエンジニアの受け渡しで手戻りが多いと感じているチーム
- 既存のReact/Next.jsプロジェクトに、規約を守ったまま画面を追加していきたい開発者
- デザイナーが不在で、たたき台のUI案から自分で作る必要がある個人開発者
- 生成AIによるUI実装を、コードレビュー可能な形で開発フローに組み込みたいチーム
まとめ
Kombaiは、Figmaデザインやテキストからフロントエンドコードを生成するAIエージェントであり、既存コードベースの規約を踏まえた出力と、ブラウザ内でのビジュアル編集・自動テストまで含む点が他ツールと差別化される。無料プランは毎日クレジットが補充されるため、まずは手元のデザインを1画面渡して生成品質を確かめるのがよい。本格運用では、生成物をそのまま採用せず通常どおりレビューとテストを通す前提で、実装の初速を上げる用途に据えるのが現実的である。