Oikonです。
今回はFigma to CodeのフロントエンドAIツールのKombaiを使ってみたので紹介します。
KombaiはProduct Huntで過去に１位を獲ったことがあり、2025年7月31日にリリースされました。
個人的な総評としては以下のとおりです
- VSCodeやCursorのプラグインとして使いやすい
- SandboxでUIが確認できるのがとても良い
- UIのコンパイル成功率が高めなのが結構えらい
- Figma to CodeはPixel Perfectではないが、叩き台としては優秀
Claude CodeなどのAIコーディングツールは、フロントエンドやUIのコーディングが苦手な印象があるので、フロントエンド特化のAIは個人的に興味深いです。
Kombaiについて
Kombaiは、フロントエンド開発に特化したAIエージェントであり、AIによる開発支援ツールとして注目されています。2023年にはProduct Huntの最もUpvoteされたツールとして選ばれました(link)。Kombaiはフロントエンド開発のAI自動化を目指しています。
At Kombai are building a developer tool for web app developers which takes away their mundane automatable tasks like writing and maintaining CSS and other boilerplate JS code. Our vision is to automate all the mundane tasks a frontend dev team has to do today, accounting for 60-70% of their work.
製品ページではフロントエンド開発についてのベンチマークが公開されています。Code Review、Featureの実装、コンパイル成功の3つにおいて、Kombaiは一般的に使用されているAIコーディングエージェントよりも良い性能を出していると報告しています。
価格はFreeプランからあり、クレジットが付与されます。後述しますが、Figma一つ読み込んでUIを作るのに大体20 ~ 40クレジットでした。
Kombaiを使ってみる
インストール
Kombaiは現在以下のマーケットプレイスで公開されています
今回はCursorにKombaiをインストールする流れを説明します。
プラグインの検索に”Kombai”を入力すると、犬のアイコンのKombaiが表示されます。
インストールするとSign inの画面がエディタのViewに表示されます。アカウントを作成していない場合はSign upを選択します。
サインインに成功すると以下のような画面になります。
自然言語でUIを作成
まず自然言語でUIの作成を指示してみました。以下のプロンプトを入力しています。
ポケモン図鑑を作りたい。第一世代の151匹まで全て見れるようにする。
チャットを実行すると、どのような技術スタックを使用してフロントエンドを設計するかリストされます。
- フレームワーク: React 19 TypeScript
- APIフレームワーク: RTK, RTK Query
- ルーター: React Router v7 (declarative mode)
- コンポーネントライブラリ: MUI v7
- スタイル: Emotion
技術スタックの選択肢として提供されているものは日本で好まれているものと少し違う印象です。必要に応じてConfigure stackから使用する技術スタックを変更できます。
項目としては以下のようなものがあります:
- Framework
- API & State Management
- Router
- Components
- Styling
- Icons
- Global Instructions
- Advanced Configurations
詳しい技術スタックは以下のドキュメントに載っています
技術スタックを決定したら、Planning Phaseに移行します。Planning PhaseではどのようなViewやコンポーネントを作成するかリストしてくれます。問題があれば編集したり口を出したりすることも可能です。
Planning Phaseの内容に問題がなければ実行します。実行が終わると以下の画像のように、Run in Sandboxというボタンが表示されます。
Run in Sandboxを実行すると、localhostで実際に作成したフロントエンドを表示・操作することが可能です。Sandbox内でAIが生成したフロントエンドの確認ができる点が、Kombaiの強みだと思います。
今回作成してもらったポケモン図鑑は以下です。MUIっぽいUIですね。
5つのMockデータを用意してくれました。
試しに追加で以下のプロンプトを追加指示してみました。
ポケモンを151種類にして。あとUIの言語は全て日本語で。
追加指示によって生成されたポケモン図鑑は以下の画像です。ちゃんと日本語対応と151種のMockデータが用意されました。
Sandbox内ではUI操作も可能でした。例えばポケモンを選択すると、個別のポケモンの詳細を確認できました。
これ以外にも検索やフィルターも正しく使用できることをSandbox内で確認できました。
Sandbox内の変更に問題がなければ、変更を保存できます。逆に言うと変更を採用しない限りKombaiはローカルの作業環境に変更を反映しません。Sandbox内で開発したものは、チャット内のチェックポイントまでRestoreも可能です。
今回のポケモン図鑑のフロントエンド生成物は以下のとおりです。
Kombaiはコンポーネントの作成だけでなくフロントエンドのフォルダ分けもしてくれました。
FigmaからUIを作成する
KombaiはFigmaを取り込んでUIにする「Figma to UI」の機能も提供しています。チャットの右下のAdd Figma linkから追加できます
Figma URL入力用のダイアログが表示されます。Figma URLの取得の仕方もDialogに書いてあります。
フレームを右クリック > "Copy/Paste as" > "Copy link to selection"
初回はFigmaとKombaiを繋ぐ認証が必要になります。
Figma URLが正しく読み込まれると以下の画像のように、Figmaのデザインがプロンプトに表示されます。このデザインは@のリソース扱いなので、複数のFigmaデザインを読み込むことも可能でした。
実際にいくつかFigmaのデザインからUIを作らせてみたものを紹介します。参考までに全てOne-shot Promptです。
例を3つ紹介するので、FigmaデザインとKombaiの生成物を見比べてみてください。ちなみに１つあたり、20 ~ 40クレジットほど消費しました。
例1
Figmaデザイン(link):
Kombaiの生成物:
例2
Figmaデザイン(link):
Kombaiの生成物:
例3
Figmaデザイン(link)
Kombaiの生成物:
所感は以下のとおり:
- Pixel Perfect（ピクセル再現）ではない
- 最初のMockとしては十分
- 透過系が少し苦手そう
- Few-shot Promptで改善可能
Kombaiの公式からデザインの参考例も紹介されているので、どのようなUIが生成できるか参考になると思います。
まとめ
今回はFigma to CodeのAIツール「Kombai」を紹介しました。
- VSCodeやCursorのプラグインとして使いやすい
- SandboxでUIが確認できるのがとても良い
- UIのコンパイル成功率が高めなのが結構えらい
- Figma to CodeはPixel Perfectではないが、叩き台としては優秀
今回はフロントエンド用のAIツールでしたが、今後はドメイン特化のコーディングツールもさらに出てくるのではないかと思います。
興味がある人の参考になれば幸いです。
(余談)
タスクバーに動物アイコンが増えてきた…。
𝕏フォローしてくれると嬉しいです！
𝕏でも情報発信しているので、フォローしていただけると励みになります！
参考文献
Views: 0
