Vibe Codingができない？VibeHubがその裏側を暴く

著者注：VibeHub Skill は話し言葉をエージェントがそのまま実行できる要件に変換し、1回につき最大3つの関連用語だけを補足します。本記事では、そのインストール方法、2つの機能の使い方、Token が実際にどこで消費されるのか、そしてモデルリクエストを APIYI にどう接続するかを説明します。

まず結論から。VibeHub はあなたの話し言葉を正確に整える役割を担い、Token はエージェントが呼び出すモデル側で消費され、VibeHub 自身のクエリでは消費されません。

エージェントで Vibe Coding を行う際、よくある状況は2つあります。1つ目は、「このボタンはマウスを乗せると色が変わり、クリック時にも反応を示してほしい」と伝えたのに、エージェントの理解がずれて、出来上がったものが意図と合わないケースです。2つ目は、エージェントの返信にツールチップ、ホバー、楽観的更新といった言葉が出てきて、意味がわからず、次に何と返せばよいかわからないケースです。VibeHub Skill が扱うのはこの2つの問題で、しかも明確な境界があります。1回につき、本当に関連する用語を最大3つだけ補足します。

フロントエンドの授業を開くわけではありません。 リポジトリの README には、学習ロードマップ、カリキュラム、ローカル演習は提供しないと明記されており、簡単な要件をチュートリアルに膨らませることもありません。

本記事を読み終えると、次のことが得られます：エージェントにそのまま送れるインストール用の一文。2つの機能それぞれの使い方と適用範囲。「この Skill 自体は APIキーを受け取らない」と「それを導入したエージェントは依然としてモデルの Token を消費する」の違い。そして、エージェントの Token を APIYI に接続する際、OpenAI 互換と Anthropic ネイティブでそれぞれどのアドレスを使うか、です。

Table of Contents

VibeHubとは：Agentに口語を理解させるためのVibe Coding用語図鑑

VibeHubのサイトはvibe-hub.orgで、中国語トップページでは「Vibe Coding用語図鑑。わかりやすい言葉でフロントエンド・バックエンド・AI用語を的確にとらえる」と位置づけられています。ナビゲーションバーには、用語、練習、コース、AIっぽさ防止、更新、Skill、交流グループの入口があります。作者はOilで、個人サイトとGitHubプロフィールは文末の参考資料に記載しています。

サイト内にはVibe Coding自体の用語解説もあります。自然言語でAIに要望を伝え、AIがコードを書き、実行結果に応じて継続的に改善するというものです。中国語では「氛围编程（雰囲気プログラミング）」「凭感觉编程（感覚でプログラミング）」ともよく呼ばれます。用語解説には覚えておくべき一文があります。「動くからといって信頼できるとは限らず、本番公開前にはコード、テスト、権限を確認する必要がある」というものです。この言葉は、後述するすべてのAgentワークフローにも当てはまります。

ポイント	説明	あなたにとっての価値
サイト	vibe-hub.org。可視化された用語図鑑（Skill紹介ページの原文：360個の可視化用語）	見慣れない概念に出会ったとき、平易な説明を調べられる
Skillリポジトリ	GitHub `oil-oil/vibe-hub-skill`、MITライセンス	Agentが会話中に用語ルールを自動で使えるようにする
機能1	表現の標準化：口語の要望を、そのまま送信できる形に書き換える	Agentの理解のずれを減らす
機能2	能動的な提示：1回につき最大3つの関連用語を指摘する	返答を理解でき、次にどう言えばよいかわかる
コストの範囲	Skill自体はアカウントやAPIキーを設定しない	TokenはAgentが呼び出すモデルにのみ消費される

VibeHub SkillとVibeHubサイトの役割分担

両者の役割分担はリポジトリのREADMEに明確に書かれています。用語コンテンツはvibe-hub.orgが管理し、リポジトリには表現ルールと用語パーサーのみを保持します。 つまり、サイトは「この言葉はどういう意味か、どの図を組み合わせるか」を担当し、Skillは「いつその用語を出すべきか、あなたの言葉をどう書き換えるか、リンクをどこから取得するか」を担当します。

リポジトリのskills/vibehub/ディレクトリには4つのファイルがあります。SKILL.mdは表現ルールを定義し、agents/openai.yamlはAgentホスト向けの設定、scripts/vibehub.mjsは用語解析スクリプト、vibehub.config.jsonはパーサー設定です。Skill全体にはモデル呼び出しロジックが含まれておらず、この点が後述するTokenの帰属を決めています。

VibeHub Skill を1分でインストールする方法

インストールにはアカウント登録もキーの入力も不要です。README に示された設定条件では、次の2つの前提を満たすだけで済みます。ローカル環境に Node.js 20 以上 があること、そしてネットワークに接続できることです。

VibeHub Skill の2つのインストール方法

方法1：Agent に一文を直接送る（Skill 紹介ページの原文）：https://github.com/oil-oil/vibe-hub-skill 帮我安装这个仓库里的 skills/vibehub Skill。
方法2：skills コマンドでインストール（リポジトリ README の原文）：npx skills add oil-oil/vibe-hub-skill
インストール後：Agent ホスト側で Skill を再読み込みすると、新しい会話から有効になります。

1つ目はターミナルを触りたくない人向けで、文全体を Agent のチャット欄に貼り付けるだけです。あとは Agent が取得と配置を自動で行います。2つ目はコマンドラインに慣れたユーザー向けで、結果は同じです。どちらの方法でも APIキーの入力は求められません。この Skill が実行するのは、同梱の用語解析スクリプトだけだからです。

設定項目	VibeHub Skill の要件	出典
実行環境	Node.js 20 以上	リポジトリ README の原文
ネットワーク	ネット接続が必要（vibe-hub.org の用語を検索）	リポジトリ README の原文
アカウント / APIキー	アカウントやAPIキーの設定は不要	リポジトリ README の原文
ライセンス	MIT	リポジトリ README の原文
解析コマンドの形式	`node skills/vibehub/scripts/vibehub.mjs resolve`、1つ以上の `--query` を追加、`--compact` は任意	リポジトリ README の原文

VibeHub の用語検索はどのように送信されるのか

リゾルバーは、要求文全体をそのまま検索インターフェースに投げることはありません。処理の流れはこうです。まず Agent が現在の文脈から候補となる用語を推測し、その後、1回のバッチクエリで名称とリンクを検証します。確信度が高い場合は1つだけを検索し、曖昧な場合は最大3つを比較します。

リンクのルールは厳格です。リゾルバーが返した URL のみを使用し、自分で連結したり偽造したりしません。一致するものがない場合はそのまま説明し、用語やリンクを捏造しません。そのため、返信に表示される VibeHub リンクは、すべてクエリインターフェースが実際に返したものです。

🚀 クイックスタートのヒント：VibeHub を導入すると、Agent は書き換えや説明を行うたびに、大規模言語モデルを1回呼び出します。複数の Agent 間で同じキーを共有し、請求を一元管理したい場合は、まず APIYI apiyi.com でアカウントを登録し、登録後の少量の試用枠でフローを一通り動かしてみるとよいでしょう。

VibeHub の2つの機能：口語を正確に整え、用語は最大3つまで補足

Skill の紹介ページでは、機能を2つの中核的な機能にまとめています。以下ではそれぞれ、紹介ページにある1つの例だけを使って説明し、余計な補足はしません。

機能1：VibeHub は口語を Agent がそのまま実行できる要件に変える

元の言葉はこうです。「このボタン、マウスを乗せると色が変わって、クリックしたときにも反応がほしい。」

書き換え結果はこうなります。「ボタンに Hover 状態と Active 状態を追加し、Transition を使って状態変化をより自然にします。」3つの用語はそれぞれ、ページ内で vibe-hub.org の /hover、/active、/transition の項目にリンクされています。

このステップの要点は元の意図を保つことです。Skill は勝手にフレームワークやパラメータ、実装案を追加したりはしません。たとえば色の値やアニメーションの長さを決めたり、別の UI ライブラリに変えたりはしません。あなたが受け取るのは、そのまま Agent に送れる要件です。意味はもともと伝えたかったことと同じで、言葉だけが Agent に誤解されにくい表現に置き換わっています。

機能2：VibeHub はあなたが知っておくべき用語を自分から指摘する

元の言葉はこうです。「この設定は変更したらすぐ反映されてほしい。もう一度保存を押したくない。」

Skill は Switch を提示します。オンとオフの2つの状態しかなく、変更後すぐに反映される場面に向いています。複数の項目を変更してからまとめて確認したい場合は、この設計にすべきではありません。この説明は今のタスクに密着したもので、いつ使うべきか、いつ使うべきでないかを教えてくれます。百科事典のような定義ではありません。

自分から提示する際のルールは3つです（Skill 紹介ページの原文）。

用語が初めて出たときに VibeHub へリンクする
説明は今のタスクに密着させ、百科事典的な定義はしない
毎回、本当に関連する用語を最大3つまで提示する

比較項目	機能1：表現の標準化	機能2：自分からの提示
発動のタイミング	あなたの要件表現が曖昧なとき	要件の背景に、言葉にしていない設計概念があるとき
出力内容	そのまま送れる、書き換えた要件	1〜3個の用語 + タスクに即した説明
例となる用語	Hover、Active、Transition	Switch
しないこと	勝手にフレームワーク・パラメータ・実装案を追加する	百科事典的な定義をする、用語集を全部説明する
次のステップ	確認してそのまま Agent に送る	案が適切か判断してから、どう伝えるかを決める

Agent の返信がわからないときは、VibeHub で重要な概念だけを解説してもらう

Agent の返信に Tooltip や楽観的更新といった言葉が突然出てきたら、元の文章をそのまま貼り付けます。README によれば、次の判断に最も影響する概念だけを説明し、段落全体を逐語訳したり、勝手に講義を始めたりはしません。

README の作業原則は4つにまとめられます。まずそのまま使える結果を出し、そのあとで用語を説明する。ユーザーの意図を保つ。毎回、用語は最大1〜3個まで。表現がすでに正確なら無理に解説を足さない。最後の項目は実用的で、もともと明確に伝えていれば、余計な口出しはしません。

VibeHub Skill の Token は結局どのステップで消費されるのか

ここが最も混同しやすいポイントです。VibeHub Skill 自体は APIキーを受け取らず、用語検索も大規模言語モデルの呼び出しではありません。 解析スクリプトは vibe-hub.org に対して一括クエリを1回送り、用語名とリンクを取得するだけです。

実際に Token を消費するのは、この Skill を導入した Agent です。あなたの口語的な表現を書き換え、用語を平易な言葉で説明し、そのうえでページを作成する——この3ステップはいずれもモデル呼び出しです。Skill はこうした呼び出しの入出力をより正確にしますが、費用を肩代わりすることはなく、呼び出し自体もなくなりません。

ステップ	実行主体	大規模言語モデルを呼び出すか	モデル Token を消費するか
候補用語を推定	Agent	はい	はい
用語とリンクを一括検索	VibeHub 解析スクリプト → vibe-hub.org	いいえ	いいえ
口語の要件を書き換え	Agent	はい	はい
用語を平易な言葉で説明	Agent	はい	はい
要件に沿ってコードを書き、ページを修正	Agent	はい	はい

つまり、チャージやモデル選択の対象は Agent の背後にあるモデルサービスであり、VibeHub のサイトに口座を開くことではありません。help-apiyi にはすでに「Agent の長タスクにおける Token 請求はどこから来るのか」という記事があり、長タスクでプレフィックスキャッシュが請求にどう影響するかを詳しく解説しています。ここでは繰り返しません。

上の図から導かれる結論は、Agent のモデルリクエストを APIYI apiyi.com に向けられるということです。1つの Key と同一の残高で Claude 系と GPT 系のモデルを同時にカバーでき、VibeHub 側には何の変更も必要ありません。

APIYI でモデルを確認し、価格を照合して、Agent のリクエストを振り向ける

APIYI（APIYI）は API ゲートウェイであり、モデルのホスティング事業者ではありません。1つのキーと同一の残高で、複数ベンダーのモデルを呼び出せます。アカウントは手動での登録が必要で、登録後には少量のトライアル枠が付与されますが、プラットフォームに無料のモデルルーティングはありません。モデルと価格の一覧はモデル総合表 docs.apiyi.com/models にあり、データの出所はシステムのリアルタイム価格設定インターフェースです。

エンドポイントはモデルではなく SDK で選ぶ

Agent のリクエストを APIYI に向ける際は、まずお使いの Agent がどの SDK を使っているかを確認し、それに応じたアドレスを設定してください。

OpenAI 互換：base_url には https://api.apiyi.com/v1 を設定します。Chat Completions は /v1/chat/completions、Responses は /v1/responses を使用します。
Anthropic ネイティブ：base_url にはルートドメイン https://api.apiyi.com を設定し、/v1 を追加しないでください。追加すると /v1/v1/messages に連結され、404 が返ります。Messages エンドポイントは /v1/messages です。
ノードの選択：api.apiyi.com がデフォルトノードです。b.apiyi.com は予備系および企業向けシナリオで使用します。api-cf.apiyi.com はテキストのみの対応で、タイムアウトの上限は約 100 秒のため、長時間かかるタスクには向きません。

ドキュメントではまた、OpenAI GPT-5 以降のモデルは Responses を優先して利用することを推奨しています。Claude Code や Codex など複数の Agent を同時に使っている場合は、help-apiyi の「手取り足取り教程：1つの Key で全 Agent をつなぎ、オープンソースの magpie で API ゲートウェイに統合接入する」で統一接入の方法が解説されています。

Vibe Coding でよく使うモデルの価格（料金表原文）

次の表のデータは 2026-11-13 12:57（UTC+8） 時点の更新で、単位は 100 万 tokens あたりの米ドル、APIYI apiyi.com のモデル一覧表の原文からの抜粋です。チャージは 1:7 の固定レートで換算します。グループごとの実際の割引後価格はログイン後のコンソールでご確認ください。今回のモデル群は「最安値」列がすべて「—」です。

モデル ID	入力	出力	キャッシュ読み取り	エンドポイント	グループ
`claude-opus-5-5`	$4	$20	$0.2	chat、messages	ClaudeCode、Claude_Reverse、Claude_Enterprise、Default、SVIP
`claude-sonnet-5-5`	$2	$10	$0.1	chat、messages	ClaudeCode、Claude_Reverse、Claude_Enterprise、Default、SVIP
`claude-fable-5-2`	$8	$40	$0.2	chat、messages	ClaudeCode、Claude_Enterprise、Default、SVIP
`gpt-6.1-sol` †	$2	$10	$0.1	responses（推奨）、chat	CodexResponses、Codex_Reverse、Default、SVIP
`gpt-6.1-terra`	$1	$5	$0.05	responses（推奨）、chat	CodexResponses、Codex_Reverse、Default、SVIP

いくつか補足を、ID ごとに分けて説明します。

claude-opus-5-5、claude-sonnet-5-5、claude-fable-5-2 には、それぞれ同価格の -thinking バージョンがあります。
claude-fable-5-2 は料金表上のグループに Claude_Reverse が含まれていません。グループを選ぶときは注意し、上の 2 つの Claude モデルのグループをそのまま当てはめないようにしてください。
gpt-6.1-sol は † 付きで、段階的な従量課金です。料金表原文：0〜272,000 tokens の入力は $2/1M、272,000 tokens を超える入力は $4/1M。
gpt-6.1-sol と gpt-6.1-terra は /v1/responses の利用が推奨で、ツール呼び出しも Responses 経由になります。

💡 選び方のヒント：VibeHub の書き換えや用語解説は短いやりとりのため、モデル能力への要求は高くありません。本当に Token を消費するのは、その後に続くコードを書く長いタスクです。APIYI apiyi.com で同じキーを使い、いくつかのモデルをそれぞれ試して、同じ要件での結果と請求額を比べたうえで、日常使いのモデルを決めるとよいでしょう。

Agent 自身に接続方法を理解させたい場合は、APIYI の接続スキルパッケージを Agent に組み込めます：npx skills add https://docs.apiyi.com。スキルパッケージの説明は docs.apiyi.com/skill.md にあります。

VibeHub 使用時のプライバシーとリスクの境界

リスクは二つの層に分けて考える必要があります。一つは VibeHub の用語クエリ、もう一つは Agent 自体のモデル呼び出しです。

VibeHub の用語クエリの層：リポジトリの README によると、用語クエリはプログラムでマスキング（脱敏）された短い説明だけを送信します。よくあるAPIキー、URL、メールアドレス、ローカルパス、コードブロックは送信前に除去され、ソースコードや顧客情報、要件の全文は送信されません。vibe-hub.org に送られるのは「ボタンのホバー状態」のような短い用語だけです。

Agent とモデルの層：Agent がすでに読み取ったプロジェクトのコンテキストは、利用している製品とモデルサービスプロバイダーのプライバシー設定に引き続き縛られます。VibeHub のマスキングは自分が送信する用語クエリだけを対象とし、Agent がモデルへ送る内容には及びません。

APIキーを会話に貼り付けないでください。キーはチャット内容としてモデルに送るのではなく、Agent の設定や環境変数に書くべきです。
APIYI の位置づけは API ゲートウェイです。アカウントプールではなく、ログインを回避するツールでもありません。呼び出しは通常の API 課金経路を通ります。
リリース前に自分で確認しましょう。Vibe Coding の項目でも述べたように、動作することは信頼できることと同じではありません。コード、テスト、権限にはやはり目を通す必要があります。

よくある質問（FAQ）

Q1：VibeHub とは何ですか？

VibeHub（vibe-hub.org）は、作者 Oil が運営する Vibe Coding 用語図鑑で、フロントエンド・バックエンド・AI の用語をわかりやすい言葉で解説しています。付属の VibeHub Skill を Agent にインストールすると、あなたの口語表現を正確な要件に書き換え、毎回最大 3 つまでの関連用語を指摘してくれます。

Q2：VibeHub Skill には API Key の入力が必要ですか？

いいえ、必要ありません。リポジトリの README には「アカウントや API Key の設定は不要」と明記されており、Node.js 20 以上とネットワークに接続できる環境があれば使えます。Key が必要なのは、あなたの Agent が呼び出す大規模言語モデルです。その Key には APIYI apiyi.com のトークンを使えますが、VibeHub とは関係ありません。

Q3：VibeHub と、Agent に直接用語を説明させるのとでは何が違いますか？

Agent に直接説明させると、一度にたくさん語ってしまったり、自分で組み立てたリンクを出したりすることがあります。VibeHub は 1 回につき最大 1〜3 個の用語に限定し、説明は現在のタスクに密着させ、リンクは解析器が返した url のみを使います。見つからなければその旨を伝え、創作はしません。表現がすでに正確なときは、無理に解説を付け加えることもありません。

Q4：VibeHub はどんな場面に向いていますか？

– インタラクションの効果を説明したいけれど、Hover や Active といった名称が出てこない；
– ある設定を即時反映の Switch にすべきか、まとめて保存するべきか迷う；
– Agent の返答にわからない概念があり、次の返信の仕方に影響する。

学習ロードマップやコースは提供していません。体系的に学びたい場合は、サイトのコースと演習の入口をご利用ください。

Q5：VibeHub を入れた後、Agent のモデル呼び出しを APIYI に接続するには？

1. APIYI apiyi.com で手動でアカウント登録し、API Key と少量のトライアル枠を取得する；
2. OpenAI 互換 SDK の base_url には `https://api.apiyi.com/v1` を設定する；
3. Anthropic ネイティブ SDK にはルートドメイン `https://api.apiyi.com` を設定し、`/v1` は付けない。

VibeHub 側では設定を一切変更する必要はありません。

Q6：VibeHub は私のコードを外部に送信しますか？

README によれば、用語検索では匿名化された短い説明のみを送信し、キー、URL、メールアドレス、ローカルパス、コードブロックは送信前に削除されます。ソースコードや要件全体は送信されません。ただし、Agent が見るプロジェクトのコンテキストは、選択したモデルサービスプロバイダーの規約に従って処理されるため、この部分は個別に評価する必要があります。

Q7：VibeHub にはどんな制限がありますか？

ネットワーク接続と Node.js 20 以上のバージョンが必要です。用語の範囲は vibe-hub.org に収録されているものに限られ、一致する語がない場合は無理に生成しません。表現と用語だけを扱うため、実装方針を決めてくれるわけではありません。また、Agent が書いたコードの信頼性も保証しません。

VibeHub Skill の核心ポイント Key Takeaways

ひとことで言えば：VibeHub は口語表現を正確な言葉に直し、Token は Agent が呼び出すモデルに使います。
2 つのインストール方法：Agent にインストールの指示を送る、または npx skills add oil-oil/vibe-hub-skill を実行します。
機能 1：表現を規範化し、元の意図を保ち、勝手にフレームワークやパラメータを追加しません。
機能 2：能動的にヒントを出し、毎回最大 3 つの本当に関連する用語だけを提示します。
費用の境界：Skill は APIキー不要で、用語検索では大規模言語モデルを呼び出しません。
APIYI への接続：OpenAI 互換は /v1、Anthropic ネイティブはルートドメインを使用します。
プライバシーの階層：用語検索はマスキングされ、Agent のコンテキストは選択したモデルサービスプロバイダーを経由します。

まとめ

VibeHub が解決するのは、Vibe Coding における「うまく伝えられない」と「理解できない」という 2 つの課題です：

口語表現を正確に：「マウスを乗せると色が変わり、クリックすると反応する」のような表現を、Hover、Active、Transition の 3 つの用語からなる要件に書き換えます；
必要な分だけ：毎回最大 3 つの用語を補い、説明は現在のタスクに密着させ、講義モードにはなりません；
費用を分けて考える：Skill 自体はキーを受け取らず、モデルも呼び出しません。Token は Agent の書き換え・説明・コード作成という 3 ステップに使われます。

インストールはひとことだけ。本当にあなたが決めるべきなのは、Agent の背後にどのモデルを接続し、どのエンドポイントを使うかです。APIYI apiyi.com で 1 つのキーを使って上記の表にあるいくつかのモデルを比較し、Agent のリクエストをそちらへ向けることができます。モデルと価格はプラットフォームのモデル一覧を基準にしてください。

📚 参考資料

VibeHub 公式サイト：Vibe Coding 用語図鑑
リンク：vibe-hub.org
説明：用語、演習、講座の入口。Vibe Coding の項目は vibe-hub.org/vibe-coding
VibeHub Skill 紹介ページ：2つの中核機能とインストール説明の原文
リンク：vibe-hub.org/vibehub-skill
説明：規範的な表現と能動的な提案のサンプル出典
GitHub – vibe-hub-skill：Skill リポジトリ
リンク：github.com/oil-oil/vibe-hub-skill
説明：README と SKILL.md。問い合わせ方法、プライバシー、設定の境界を含む
作者 Oil：個人サイトと GitHub
リンク：oiloil.org、github.com/oil-oil
説明：VibeHub 作者のホームページ
APIYI モデル一覧：モデル名、エンドポイント、グループ、価格
リンク：docs.apiyi.com/models
説明：データ更新日時 2026-11-13 12:57（UTC+8）、料金単位は100万トークンあたり米ドル
APIYI ドキュメント入口と接続用スキルパッケージ
リンク：docs.apiyi.com/llms.txt、docs.apiyi.com/skill.md
説明：エンドポイントの選択、ノードの説明、Agent の接続方法

著者：APIYI 技術チーム
技術交流：APIYI apiyi.com のサイトトップページからお気軽にお問い合わせください。その他の接続資料は docs.apiyi.com ドキュメントセンターでご覧いただけます

Vibe Codingができない？VibeHubがその裏側を暴く