UStackUStack
Open Vibe icon

Open Vibe

Open VibeはMITライセンスの無料オープンソース教材。Claude Code(または対応エージェント)でSaaS/ウェブ開発を学び、ローカルで対話型図解と手順を提供します。

Open Vibe

Open Vibeとは?

Open Vibeは無料のオープンソース「vibe coding」カリキュラムで、Claude Code(または他の互換AIエージェント)を本物のウェブアプリとSaaS構築のためのステップバイステップのチューターに変えます。目標は、構築しながらその背後にある概念を学ぶことです。

ビデオのみや静的チュートリアルに頼るのではなく、Open Vibeはローカルで動作し、エージェントワークフロー内でインタラクティブなレッスンコンテンツ(スキル、指示、図解)を提供します。アプリ開発中、エージェントがガイドし、説明し、つまずいたときに学習をサポートします。

主な機能

  • ウェブアプリとSaaS向けエージェントベースのカリキュラム: エージェント内に存在するコース(ビデオやPDFライブラリではない)、コーディングしながら教える設計。
  • インタラクティブなライブ「裏側」図解: チュートリアルが実行中のアプリ上に図解をレンダリングし、タスク作成などのフロー(例: リクエストがルートにヒットしDB動作)を説明。
  • コードと一緒にローカル動作: コードが自分のマシンで実行され、エージェントが構築中にチューターとして機能し、リモート環境のサプライズを低減。
  • Claude Codeや他のエージェントで動作: インストールプロンプトが書かれており、Claude Code(またはOpen Vibeが参照する「対応エージェント」)にカリキュラムをドロップ可能。
  • MITライセンスで無料: Open Vibeは100%無料・オープンソース、MITライセンス。
  • SaaSスターターテンプレート(「Open SaaS」): 本番対応テンプレートで、auth、支払い、管理、メール、AI対応コンポーネントを含む。SaaSフェーズのベースとして言及。

Open Vibeの使い方

  1. インストールプロンプトをエージェントに貼り付け: curl -fsSL https://openvibe.sh/llms.txt を実行し、ファイルの指示に従ってClaude Code(または互換エージェント)にカリキュラムをロード。
  2. チューターと並行して構築開始: プロジェクト開始(ページ例は~/my-todo-appスタイルのフロー)。エージェントがステップバイステップでガイドし、進捗に合わせてレッスン継続。
  3. 混乱時インタラクティブプロンプト使用: 問題に当たったらエージェント内で質問。チュートリアルが説明と実行中アプリに重ねたライブ図解を提供。
  4. 学習フェーズ選択: Phase 1(スクラッチからのフルスタックウェブアプリ)またはPhase 2(Open SaaS上のSaaS構築)から開始。

ユースケース

  • 機能実装しながらフルスタックウェブアプリ基礎学習: Phase 1カリキュラムに従い、スクラッチからフルスタックアプリ構築・デプロイ、エージェントがウェブとアプリ部分を説明。
  • リクエスト/データフローを理解してデバッグ: アクションクリック時(例: 「タスク追加」)、図解と説明で裏側(ルート呼び出しとDB挿入)を見る。
  • テンプレート使用しながら基盤ループ学習でSaaS構築: Phase 2でOpen SaaS上にSaaS構築、auth→支払い→アクセスループなどのキーコンセプトをカバー。
  • 指導学習付きでアプリ出荷を目指す創業者: 自分のSaaSアイデアに取り組み、チューターが構築・デプロイ継続に必要なコンセプトに集中。
  • エージェント駆動開発の再プロンプトループ回避: ページが記述する「prompt-fixループ」(学習なし反復)を、起こっていることに紐づく説明で打破するチューターカリキュラム。

FAQ

  • Open Vibeは無料ですか? はい。ページで100%無料と記載。

  • Open Vibeはオープンソースですか? はい。オープンソースでMITライセンス、カリキュラムと図解がMIT下に含まれる。

  • サインアップ必要ですか? サインアップ不要。ターミナルでインストールプロンプト実行し、エージェントに貼り付けでカリキュラム提供。

  • Claude Codeが必須ですか? ページでClaude Code(または選択エージェント)をチューター化、提供インストールプロンプトでカリキュラム統合可能な他の対応エージェントでも動作。

  • レッスンはどこで動作—ビデオ内かエージェント内か? ページでコースはエージェント内に存在、ビデオライブラリやPDFではない。

代替案

  • 静的ウェブ開発チュートリアルコンテンツ(動画、PDF、コース):ステップバイステップの学習資料を提供しますが、通常、日々のコーディングエージェントのワークフローへ直接統合したり、実行中のアプリに説明を重ねたりしません。
  • 構造化されたカリキュラムのない汎用AIコーディングアシスタント:コード提案やデバッグ支援は得られますが、ウェブアプリ/SaaS概念に特化したレッスン主導のインタラクティブなスキルセットがありません。
  • 他の「agentic learning」やガイド付きコーディングプラットフォーム:意図は類似(構築しながら学ぶ)ですが、ローカル実行か、レッスン構造、アプリ実行に連動したインタラクティブ図解の有無で異なります。