--- title: "Kombaiとは？Figma連携とクレジット料金・Claude Code併用を実装目線で解説【2026年9月時点】" url: "https://www.issoh.co.jp/tech/details/8061/" published: 2025-08-06 updated: 2026-09-27 categories: ["AI"] publisher: "株式会社一創" --- # Kombaiとは？Figma連携とクレジット料金・Claude Code併用を実装目線で解説【2026年9月時点】 Kombaiは、公式サイトが「AI design engineer」と名乗るフロントエンド特化のAIエージェントです。Figmaの画面をReactコードに変換するだけの道具として紹介されることが多いものの、2026年9月時点の実体はデザイン生成・コード生成・ブラウザ上の目視修正・自動テストを1つのワークスペースに束ねたデスクトップアプリとIDE拡張です。本稿では公式ドキュメントとレジストリの実測値をもとに、できること、Figma連携でつまずく条件、クレジット制料金の実額、Claude CodeやCodexと併用する経路を整理します。 ## まとめ：Kombaiの現在地と使いどころ Kombaiはデスクトップアプリ（Windows・macOS・Linux）とIDE拡張（VS Code・Cursor・Antigravity・Windsurf・Trae・Kiro）で動き、Figmaプラグインではありません。料金はクレジット制で、無料プランは月300クレジット、Proは月20ドルで2,000クレジットから始まります。消費量は選んだモデルに掛かる倍率で決まり、公表されている倍率は最小のQwen 3.7 Flash（0.01倍）から最大のGPT 6 Astra（5倍）まで500倍の開きがあります。 Figma連携はMCPを介さない独自実装で、チャットに`@figma`と打ってOAuth接続し、フレームのURLを渡す方式です。ここに実務上の制約が2つあります。`node-id`を含まないプロジェクトURLやページURLは無効であること、そしてFigma Make・Figma Sitesで作った成果物のURLからは生成できないことです。手元にClaude CodeやCodexのサブスクリプションがあるなら、それをKombaiの実行エンジンとして使う経路も用意されています。以降で各論点を順に見ていきます。 ## Kombaiの現行形態：デザインエンジニアリングエージェント 提供元はKombai, Inc.です（プライバシーポリシーに記載の法人名）。公式ドキュメントの冒頭は、Kombaiを「a design engineering agent that lets you build standout designs, generate production-grade code, visually edit your frontend, and automate testing, all in one place」と定義しています。デザイン生成とコード生成が並列に置かれている点が、コード生成に寄ったAIコーディングツールとの違いです。無限キャンバス上で案を出して比較し、採用した案だけを実際のリポジトリへ落とし、Kombai Browserで見た目を直接いじって差分をコードへ戻す、という往復を想定しています。 配布規模は拡張機能レジストリのAPIで確認できます。2026年9月22日に取得した時点で、Open VSX Registryのkombai拡張は9月21日公開の2.0.121・累計ダウンロード575,218件、VS Code Marketplaceも同じ9月21日更新の2.0.121でインストール56,793件・評価5.0（18件）でした。公式トップページは「600K+ installs」と表示していますが集計方法は公開されておらず、しかもOpen VSXが返すのはダウンロード数、Marketplaceが返すのはインストール数で数え方が違うため、両者を単純に足した値として読まないほうが安全です。更新頻度は高く、公式changelogには2026年9月だけで2.0.103から2.0.120まで10本のリリースが並んでいます。 ### 4つのモードと、モード未選択時の既定挙動 | モード | 用途 | できること | | ------ | ----- | ------------------ | | Design | デザイン | Webサイトや画面のUIデザイン生成 | | Plan | 戦略 | 実装ロードマップの作成と承認 | | Ask | 調査 | 読み取り専用の質問とロジック確認 | | Debug | 不具合対応 | 複雑なフロントエンド不具合の切り分け | モードを選ばないときは、コードを自律生成・リファクタリングするエージェントとして動きます。Plan modeは質問に答えると`plan.md`という編集可能な計画ファイルを出し、承認した時点で初めてコード生成に入る仕組みです。Debug modeは11種類の切り分け手法（構造化ログ、コンポーネント隔離、API応答のモック、state/propsのハードコード、CSSの可視化など）を一時的に当て、その変更を`.kombai`フォルダの変更履歴に記録し、修正が済んだら記録を見て撤去します。デバッグ用の仮コードが本番に残る事故を、記録ベースで潰す設計です。 ### Context Graphsがベクトル検索と違う点 既存コードの再利用精度を支えるのがContext Graphsです。公式ドキュメントは、一般的なコーディングエージェントが使う埋め込みベクトル検索について「機械的な文字列の類似は見つけられるが、コンポーネントが実際にどう見えて何をするかという、フロントエンド固有の文脈を取りこぼす」と明言しています。そのうえでKombaiは、コンポーネント・フック・ストア・デザイントークン・型・定数といった再利用対象を先に特定し、用途・見た目・挙動・propsまで含めた理解をグラフとして保持します。 インデックス対象は現在のワークスペースのサブフォルダに加えて、NPMパッケージのソース（ローカルフォルダまたはGitリポジトリのURL）とStorybookです。社内共通UIライブラリを別リポジトリで持っているチームほど効きます。ただし外部パッケージのインデックスはTeamプラン以上の機能で、Proでは使えません。 ## Figmaデザインからコードを生成する手順と制約 ### @figma接続とフレーム単位URLの受け渡し 手順は、チャット入力で`@figma`と打ってEnterを押し、表示されたモーダルで「Connect Figma」からOAuth認可を通し、以降はFigmaのURLを貼るだけです。[Figma MCPサーバー](/tech/details/5892/)を別途立てる必要はなく、公式ドキュメントも「No MCP needed」と書いています。Auto layoutを整えていない、グルーピングが雑、不可視レイヤーが残っている、といったよくある汚れも取り込み側で吸収する設計です。 つまずくのはURLの粒度です。Kombaiはデザインの文脈を正確に取るためにフレームの参照を要求するので、`node-id`を含まないプロジェクト単位・ページ単位のURLは無効として弾かれます。Figma上で対象フレームを右クリックし、Copy/Paste asからCopy link to selectionで取得したURLを使ってください。 ``` 有効: https://www.figma.com/design//?node-id=123-456 無効: https://www.figma.com/design// # node-id が無い 無効: https://www.figma.com/make/... # Figma Make の URL 無効: https://www.figma.com/site/... # Figma Sites の URL ``` Figma MakeやFigma Sitesの成果物はURLのままでは扱えません。公式のFAQは、Figma Make側でデザインをクリップボードへコピーし、通常のFigmaデザインファイルへ貼り直してからリンクを取る手順を案内しています。[Figma MakeのAIクレジット](/tech/details/9048/)を消費して作った画面をKombaiへ持ち込むときは、この一手間が要ると覚えておくとよいでしょう。 ### Figma APIレート制限に当たったときの回避策 2025年11月17日から、FigmaのREST APIでは更新後のレート制限が全ユーザーに適用されています。Kombaiがデザイン取得に使うエンドポイントはFigmaの分類でTier 1に当たるため、連続して取り込むと制限に達します。Kombaiの[公式ドキュメント Figma to code](https://docs.kombai.com/features/figma-to-code)が挙げる回避策は次の3つです。 - 対象フレームをPNGで高解像度書き出しし、画像としてチャットに添付する - 接続しているFigmaアカウントのシートをDevまたはFullへ引き上げる - 誤ったアカウントを繋いでいる場合は、Reconnect Figmaから別アカウントへ切り替える ただしシートを上げるだけでは足りない場合があります。Figma公式のレート制限ドキュメントは、上限が「ユーザーのシート種別」「エンドポイントのTier」「要求するリソースが置かれているプラン」の3要素で決まると明記し、別のプランでFullシートを持っていてもStarterプランに置かれたファイルへの要求は月6回までになる例を挙げています。Tier 1（GET file・GET file nodes・GET image）はView・Collabシートだと全プランで月20回までです。トークンとシートの関係は[Figma APIのレート制限とトークン](/tech/details/2926/)で整理しています。導入前に、対象のFigmaファイルがどのプランのチームに置かれているかまで確認しておくほうが確実です。 ## クレジット制料金の実額と、消費量が決まる仕組み ### プラン別のクレジットとロールオーバー | プラン | 価格 | 月間クレジット | 繰り越し上限 | 席数 | | ---------- | ----------- | ------------------ | ------------ | ---- | | Free | 0ドル | 300 | 0.5倍（150） | 1 | | Pro | 20ドル/月から | 2,000から110,000 | 月払い5倍・年払い12倍 | 1 | | Team | 40ドル/ユーザー/月 | 2,000から110,000（共有） | 無制限 | 最大20 | | Enterprise | 要問い合わせ | カスタム | 無制限 | カスタム | 無料プランは登録時に150クレジットが入り、以後は1日50クレジットずつ補充されて月の上限が300クレジットです。まとめて大きな作業を流す使い方には向かず、1日分ずつ試す前提の枠と考えたほうがよいでしょう。Proは20ドルの2,000クレジットが最小で、そこから1,000ドルの110,000クレジットまで10段階あり、100ドル以上の段階では10%のクレジットが上乗せされます。足りなくなったときは1,000クレジット11ドル、10,000クレジット110ドルの単発パックを買い足せます。年払いは20%引きです。 Teamプランで実務的に効くのは、価格よりも共有クレジットプールと繰り越し無制限です。Proを人数分並べた場合も未使用分は繰り越せますが、月額枠の5倍（年払いなら12倍）という上限が各自に掛かり、枠は個人ごとに分かれたままです。Teamは全員分を1つのプールにまとめ、請求サイクルの更新まで上限なしで持ち越します。外部パッケージのインデックス、共有ルール・共有コマンド、利用状況の可視化もTeam以上の機能です（[出典：Kombai公式料金ページ](https://kombai.com/pricing/)）。 ### モデル倍率で決まる実効コスト [公式ドキュメント Models](https://docs.kombai.com/features/models)によると、クレジットは主にLLMのトークン消費で減り、完了したタスクの閲覧やブラウザでのプレビューでは減りません。重要なのは、選んだモデルやルーターに掛かる倍率で消費量がそのまま増減する点です。1倍のモデルで10クレジットの作業は、0.5倍のモデルなら約5クレジット、2.5倍なら約25クレジットになります。 | 区分 | 例 | 倍率 | | --------- | ------------------------------------ | -------- | | 最上位モデル | GPT 6 Astra / Claude Fable 5.1 | 5倍 | | 標準モデル | Claude Sonnet 5 / Grok 4.6 / Kimi K3 | 1倍 | | 軽量モデル | Gemini 3.8 Flash | 0.3倍 | | 最安モデル | Qwen 3.7 Flash | 0.01倍 | | ルーター（既定） | Kombai Auto | 0.1倍から1倍 | | ルーター（高品質） | Kombai Ultra | 2倍 | 既定のKombai Autoは、ターンごとに別のモデルへ振り分ける方式のため、倍率が0.1倍から1倍という幅で示されています。モデルは同じチャットの途中でも切り替えられるので、設計や難しいリファクタリングだけ上位モデルに当て、文言修正やスタイル調整は軽量モデルに落とす運用が現実的です。月2,000クレジットの枠をどこまで使えるかは、この選択に加えて、タスクの複雑さと長さ、やり直しの回数でも変わります。公式は、クレジットが主に処理中のトークン消費で減り、完了したタスクの閲覧では減らないとだけ説明しています（[出典：Kombai公式ドキュメント Credits](https://docs.kombai.com/account/credits)）。 ## Claude CodeやCodexと併用する2つの経路 すでにAIコーディングエージェントを契約しているなら、Kombaiを乗り換え先としてではなく、フロントエンド作業の受け皿として足す形が取れます。方向の違う経路が2つあり、どちらも2026年9月12日公開の2.0.113で同時に入った新しい仕組みです。 ### ローカルエージェントでの既存サブスク利用 Kombaiのモデル選択メニューには「Local Agents」という区分があり、手元にインストールしたCLIを呼び出して既存のClaude CodeやCodexのサブスクリプションで実行できます。Kombaiのクレジットを消費せずにタスクを回せるため、無料プランの300クレジットではすぐ枯れるという悩みに対する現実的な答えになります。必要な最小バージョンは公式ドキュメントに明記されています。次はmacOS・Linux・WSL向けの例で、Windows PowerShell用の手順は[公式ドキュメント Local agents](https://docs.kombai.com/features/local-agents)に別途用意されています。 ``` # Claude Code は 2.1.119 以上 curl -fsSL https://claude.ai/install.sh | bash claude update # Codex は 0.142.0 以上 npm install -g @openai/codex codex update ``` CLIが見つからない、古い、OSが起動を拒否した場合は、モデル一覧の該当行に「Not installed」「Update required」「Can’t start」のいずれかが表示され、ホバーすると修正コマンドが出ます。同一チャット内でKombaiエージェント・Claude Code・Codexを切り替えることもでき、切り替え時には直前の会話・ツール実行結果・ファイル変更が引き継がれます。デザインはKombai、実装はClaude Code、レビューはCodexという分担を1つのスレッドで回せます。両者の課金と使用量の違いは[CodexとClaude Codeの違い](/tech/details/17627/)で整理しています。 ### Kombai MCPサーバー経由の外部エージェント連携 逆方向もあります。Kombaiが内蔵するMCPサーバーを有効にすると、Claude CodeやCursorなど外部のエージェントからKombaiのチャットを起動し、走っている作業を追いかけ、キャンバス上のデザインを読み取れます。KombaiはVS Code（`Code/User/mcp.json`）、Cursor（`~/.cursor/mcp.json`）、Claude Code（`~/.claude.json`）、Codex（`~/.codex/config.toml`）、Antigravity、Gemini CLIを自動検出し、各クライアントの設定ファイルへ自身のエントリを書き込みます。 同時に`design-with-kombai`、`code-with-kombai`、`code-kombai-design`といったスキルが各クライアントのスキルフォルダへ配置され、普段使っているエージェントの中でスラッシュコマンドとして呼び出せます。サーバーはKombaiアプリの起動中だけ動き、個別のオン・オフスイッチはありません。クライアント側のトグルを切ると、設定エントリとスキルの両方が消えます。 ## 対応スタックと、Kombaiを選ばないほうがよい場面 ### 対応するプロジェクト種別とライブラリ 対応範囲は広く、[公式ドキュメント Supported tech stack](https://docs.kombai.com/features/supported-tech-stack)は400以上のライブラリについて人手で検証したRAGを持つとしています。プロジェクト種別はReact・Vue・Angular・Svelte・Solid・Preact・Vanilla JS・React Native・Flutter・Blazor・ASP.NET Razorまで、フレームワークはNext.js 14から16、Vite、Nuxt、SvelteKit、Astro、Rails、Laravel、Django、Expoなどが並びます。コンポーネントライブラリはMUI・Chakra・shadcn・Ant Design・Mantine・Vuetify・PrimeNGなど50種類以上、状態管理・APIクライアント・テスト・ORM・チャート・アニメーションまでカテゴリごとに選択できます。「Reactしか使えない」という旧来の理解は、現行の対応表とは合いません。 ### Kombaiを選ばないほうがよい場面 次の条件に当たるなら、見送る判断が妥当です。Figmaの契約を動かせず、Starterプランに置いたファイルから大量のフレームを取り込むしかないチームは、前述のレート制限で頭打ちになります。作業内容がフロントエンド以外に広がるなら、汎用のコーディングエージェントを主軸に据えたほうが素直です。デザイン案そのものを出させたいだけで実装リポジトリを持たない段階なら、[v0（Vercel）](/tech/details/3416/)のようなブラウザ完結型のほうが立ち上がりは速いでしょう。なお入力はFigmaに限られず、画像やプロンプトからも生成できるため、Figmaを使っていないこと自体は見送る理由になりません。 逆に、成熟したリポジトリに共通コンポーネントとデザイントークンが積み上がっていて、新しい画面をそれに沿って作りたいという条件なら、Context Graphsによる再利用が効く見込みがあり、試す価値はあります。評価するときは「ゼロから画面を作る速さ」ではなく「既にある決定にどこまで合わせられるか」を基準に置くことをすすめます。自社の共通コンポーネントを数点名指しして、手直しなしでそのまま再利用されるかを見るのが、いちばん短い判断材料になります。 ## よくある質問 ### KombaiはFigmaのプラグインですか？ いいえ。KombaiはWindows・macOS・Linux向けのデスクトップアプリと、VS Code・Cursor・Antigravity・Windsurf・Trae・KiroのIDE拡張として提供されます。Figmaのデザインはプラグインではなく、チャットで`@figma`と入力してOAuth接続したうえでURLを渡す形で取り込みます。 ### Kombaiは無料で使えますか？ 無料プランがあります。登録時に150クレジット、以後は1日50クレジットずつ補充され、月の上限は300クレジットです。未使用分は150クレジット（月間上限の0.5倍）まで繰り越せます。外部パッケージのインデックスや共有ルールなどはTeam以上の機能のため、無料プランでは使えません。 ### KombaiはReact以外にも対応していますか？ 対応しています。プロジェクト種別としてVue・Angular・Svelte・Solid・Preact・Vanilla JS・React Native・Flutter・Blazor・ASP.NET Razorが選べ、フレームワークやコンポーネントライブラリもそれぞれのエコシステム向けに用意されています。 ### Figma MakeやFigma Sitesで作った画面からコードを生成できますか？ URLを直接渡す方法では生成できません。公式ドキュメントは、Figma Make側でデザインをコピーし、新規のFigmaデザインファイルへ貼り付けてから、そのフレームのリンクを取得してKombaiへ渡す手順を案内しています。Figma Sitesも同じ流れです。 ### Claude CodeやCodexの契約をそのまま使えますか？ 使えます。Claude Code 2.1.119以上、Codex 0.142.0以上のCLIを手元に入れておくと、Kombaiのモデル選択から「Local Agents」として選べます。この経路ではKombaiのクレジットを消費せず、既存のサブスクリプションの枠で実行されます。 ## 関連記事 - [Figma MCPサーバーとは｜料金・レート制限・対応クライアント17種と使い方【2026年9月時点】](/tech/details/5892/) - [Figma APIの使い方｜レート制限・トークン・Variables APIのEnterprise条件](/tech/details/2926/) - [Figma Makeの料金・AIクレジットとは？プラン別の上限と消費量・使い方・エクスポートまで解説](/tech/details/9048/) - [CodexとClaude Codeの違い｜料金・使用量・設定と併用の判断【2026年版】](/tech/details/17627/) - [v0（Vercel）とは？料金・使い方・APIを2026年最新解説](/tech/details/3416/) --- 出典: [Kombaiとは？Figma連携とクレジット料金・Claude Code併用を実装目線で解説【2026年9月時点】]()（株式会社一創）