▦ vibe-coder · ai-pair · ide mockup · v1.0
カフェ / 配信背景 / 動画素材 / プロフィール写真 用の、 「すごい人ぽく見える」 AI コーディング 画面 ジェネレーター。 4 ペイン IDE (ファイルツリー / コード自動タイピング + シンタックスハイライト / ML 推論 (tokens/s + loss curve + 8×8 アテンション ヒートマップ) / Agent thought stream) + コミット & テスト & デプロイ 通知 を 5 シーン 自動ループ。 cyber neon / VS Code / Dracula / Matrix / GitHub の 5 テーマ。 入力なし、 サーバー送信ゼロ、 完全無料。
[ ./how_it_works ]
step / 壱
5 シーン (React リファクタ / LLM ファインチューン / テスト自動生成 / 本番障害デバッグ / canary デプロイ) が 自動ループで 流れ始める。 何も入力しなくていい、 開いただけで 「AI と ペアコーディング中」 の 4 ペイン IDE が動き出す。
step / 弐
Cyber Neon (デフォルト ピンク + シアン) / VS Code Dark / Dracula / Matrix / GitHub Dark の 5 テーマ。 speed 0.5× 〜 3× で タイピング速度調整。 loop OFF にすると 1 シーンずつ手動切替。 撮影 / 配信用には Matrix + 2× が 鉄板。
step / 参
全画面ボタン or f キー で 画面いっぱい IDE モック。 在宅 / カフェ / コワーキング で 開いておくだけで 「AI と ペアプロ中の人」 に見える。 VTuber 配信背景 / 動画素材としても切り抜き使用 OK。 入力もデータ送信も無し、 完全クライアント完結。
[ ./faq ]
「画面に AI コーディング中ぽい絵を 表示するだけ」 のショーケース ツールです。 実際に コードを書くツールでも、 AI を呼ぶツールでもなく、 IDE っぽい 4 ペイン (ファイルツリー / コードエディタ / ML 推論パネル / Agent thought stream) を 自動再生で動かす 「映え画面」 のジェネレーター。 用途は カフェドヤ / 配信背景 / VTuber 画面 / 動画素材 / プログラマー風 写真撮影 / 在宅ワーカー風 / 体験イベント など。 ターミナル単体ではなく、 modern IDE + AI agent + ML inference panel の合体形なので、 ハッカー画面より さらに 「すごそう」 に見える設計です。
2024 年に Andrej Karpathy が広めた言葉で、 「コードを 1 行ずつ書くのではなく、 AI に 「こういう感じで」 と 雰囲気 (vibe) で指示して、 出てきたものを そのまま走らせる コーディングスタイル」 のこと。 GitHub Copilot / Cursor / Claude Code / Codex などで主流になりつつある 開発体験を象徴する言葉です。 VibeCoder は その vibe coding を まさに 「やってる風」 に見せる ためのデモ画面ジェネレーターで、 サービス名もそこから取りました。
(1) **React リファクタ** = UserCard.tsx を Server Component に書き換え + type check + vitest 通る + commit。 (2) **LLM ファインチューン** = llama-3.2-1B + LoRA + SFTTrainer で 3000 step、 loss 2.84 → 1.08 を 滑らかな曲線で可視化、 tokens/s + GPU + VRAM がリアルタイム揺らぐ。 (3) **テスト自動生成** = payment.ts の Vitest スイートを 6 ケース 生成、 1 ケースずつ ✓ が流れ cov 94.3% まで到達。 (4) **本番障害デバッグ** = api.prod で 503 スパイク → PagerDuty → ログ grep → pg pool 20 → 50 修正 → kubectl rollout → p95 4.2s → 0.18s。 (5) **canary デプロイ** = git tag → docker build → argocd sync → e2e → canary 5% → 100% rollout の 7 ステージ。 各シーン 20-30 秒、 終わると自動で次へ。
(1) **Cyber Neon** (デフォルト) = ピンク #ff4dd2 + シアン #22d3ee + 紫 #a78bfa の cyberpunk 配色、 一番 「未来っぽい」。 (2) **VS Code Dark** = #1e1e1e 黒 + #569cd6 青、 普段 VS Code 使ってる人に既視感 = 信頼感。 (3) **Dracula** = #282a36 紫黒 + #ff79c6 ピンク + #50fa7b 緑、 開発者人気テーマで 「分かってる人」 感。 (4) **Matrix** = ほぼ黒 + #39ff70 緑のみ、 古典ハッカー映画 (マトリックス / 攻殻機動隊) 風。 (5) **GitHub Dark** = #0d1117 紺黒 + #58a6ff 青、 GitHub 公式配色で 「コミット中」 感が一番出る。 配信 / 撮影 / 用途で使い分ける。
(1) **カフェドヤ** = 在宅 / カフェ で 開いておくだけで 周囲から 「すごい人ぽい」。 集中力ブースト 効果も期待できる (自己暗示)。 (2) **配信 / VTuber 背景** = OBS の Window Capture / Browser Source で取り込んで 配信背景にする。 (3) **動画素材** = YouTube サムネ / TikTok / Reels / Shorts の B-roll として 「AI が動いてる風」 シーン挿入。 (4) **写真撮影** = PC に映してる画面の写真を SNS プロフィール写真 / 名刺 / ポートフォリオに。 (5) **イベント / プレゼン** = 「AI 活用してます」 的説明シーンの 背景デモとして流す。 入力なし・データ送信ゼロ・完全無料なので 商用利用も OK。
**いいえ、 すべて事前にスクリプト化された 「演出」 です**。 タイプアニメで流れているコードも、 流れる loss 曲線も、 アテンションヒートマップも、 ファイルツリーの編集マークも、 PagerDuty / 「commit pushed」 通知も、 すべて data.ts に 書かれた 台本通りに再生されているだけ。 ただし、 シンタックスハイライトは ライブの ミニトークナイザで色付けしていて、 ヒートマップ / loss curve は 数学関数で生成しているので 「動く絵」 としては リアルです。 「実際に AI が動いてる風に見える静的演出」 を 純 JS + React + CSS で どこまで作れるかの実験でもあります。
ツールバー右端の ⛶ ボタン または f キー で 全画面トグル。 配信 / 撮影 / カフェ用途は 全画面が前提。 スペースキー / k で 一時停止、 ← / p で 前のシーン、 → / n で 次のシーン。 ループ オフ にして スペース連打すると 好きなシーンで止めて見栄えのいい瞬間を 撮影できる (loss が下がりきった瞬間、 deploy 完了通知が出た瞬間、 など)。
**プライバシー**: 入力 UI は存在せず、 ユーザーからの入力をサーバーに 送る経路がそもそも無い。 サードパーティ呼び出しもゼロ。 完全クライアント完結で動く。 **動作環境**: モダンブラウザ (Chrome / Edge / Safari / Firefox 最新) で動作。 軽量実装なので低スペック PC でも 60fps 動く。 **商用利用**: 出力された画面のキャプチャ / 動画は 商用利用可。 ただし VibeCoder のサイト URL を画面外に 入れるか クレジット明記してくれると 助かります。
ラボ 45本目で **シミュレーター thesis 5本目** (pile-park 物理 / doodle-drop お絵描き / frac-cast 数学 / cell-drift セルラー進化 / vibe-coder 演出 sim、 「物理 / 描く / 数 / 細胞 / 演出」 5 本柱)。 visual は cyberpunk neon palette (cyan + magenta + amber on near-black) + scanline + grid background + IDE 4 pane motif で、 既存 44本柱と完全別軸 (既存サービスに pure dark cyberpunk テーマ無し、 唯一の 「IDE モック」 motif)。 ラボ全体は 「AI と どう付き合うか」 を実験する場なので、 vibe-coder は 「AI コーディング のイメージ」 という メタ的な題材に当たる 1 本です。