sanbuphy
7d0e798672
Add comprehensive guide for AI applications in consumer scenarios with 16 categories and 80+ inspiration ideas. Focus on creating emotional connections and atmosphere rather than just functionality. Includes interactive selection tool to help users find relevant scenarios based on desired vibe and current feeling. Each scenario provides detailed atmosphere creation tips and psychological cues. Also covers core design principles for C-end products, shifting from functional thinking to emotional experience design.
26 KiB
26 KiB
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗ ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝ █████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗ ██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝ ███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝
Easy-Vibe: Learn Vibe Coding from 0 to 1
ゼロから、プロジェクトベース学習、最初の AI 製品を構築
📌 オンラインで読み始める (Start Reading Online)
🚀 プロジェクト紹介
AI でコードを書こうとしてエラーが続き、諦めかけたくなり、プログラムを本当にオンラインにする方法がわからないとき 😢
本チュートリアルは、0 から 1 まで、Vibe Coding のスキルを段階的に習得できるように設計されています：
- 第 1 段階：ミニゲームからWeb プロトタイプまで、AI プログラミングの基礎とプロダクト思考を習得
- 第 2 段階：フロントエンド・バックエンド開発と AI 能力に関連する Vibe Coding テクニックの学習、完全なアプリケーションの完成
- 第 3 段階：マルチプラットフォーム複雑アプリケーションの構築手法を習得、本番級アプリケーションへ
私たちは、Vibe Coding を習得し体系的なトレーニングを組み合わせることで、一人でフロントエンド開発、バックエンド開発、AI 能力統合、プロダクトデザインを兼ね備えた開発者になれると信じています。
本プロジェクトは主に 3 種類の学習者を対象としています：
- 初心者（一般人 / プロダクト・運用担当者）：非技術系初心者が重要な概念を理解し、最初のプロダクトプロトタイプを完成させるのを支援
- 初中級開発者（一定の基礎がある学生と開発者）：フロントエンド・バックエンドの Vibe Coding と AI 能力の知識を習得
- 上級開発者（企業・スタートアップ、オープンソース・独立開発者）：高度な開発技術、マルチプラットフォーム開発
📖 コンテンツナビゲーション
総付録
AI 能力辞書：一般的な AI コア概念と用語、シーンの解釈
一、初心者入門とプロダクトプロトタイプ
| 章 | 主要内容 | 状態 |
|---|---|---|
| 前書：学習マップ | 全体学習パスのガイド | ✅ |
| 初級一：AI 時代、話せるだけでプログラミングできる | スネークゲームなどの事例を通じて AI プログラミングの能力を初めて体験 | ✅ |
| 初級二：AI IDE ツールを知る | IDE の使用方法を学び、ローカルでミニゲームを作成 | ✅ |
| 初級三：手を動かしてプロトタイプを作る | ニーズ分析、AI による単一ページ生成、複数ページプロダクトプロトタイプの生成へ | ✅ |
| 初級四：プロトタイプに AI 能力を追加 | 一般的な AI 能力（テキスト、画像、動画）の接続方法を習得 | ✅ |
| 初級五：完全プロジェクト実戦 | 実際のシーンをシミュレート、ユーザーフィードバックを受け反復改良、プロジェクトを完全に | ✅ |
| 大課題：完全な Web アプリケーションプロトタイプを作成し展示 | アプリケーションを完全に実装し、アプリケーション効果を展示 | ✅ |
付録：ビジネス思考
| 章 | 主要内容 | 状態 |
|---|---|---|
| 付録 A：プロダクト思考とソリューション設計 | ゼロからイチまでプロダクトを作る際に必要な思考フレームワーク | ✅ |
| 付録 B：AI 業界アプリケーションシナリオ参考 (B2B) | さまざまな業界での AI 応用事例を理解する | ✅ |
| 付録 C：AI 消費シナリオインスピレーション参考 (B2C) | 消費者向け製品での AI 応用事例を探索する | ✅ |
付録：技術ソリューション
| 章 | 主要内容 | 状態 |
|---|---|---|
| 付録 D：コード作成時にエラーが発生した場合の対処法 | Vibe Coding における一般的なエラーとトラブルシューティング方法 | ✅ |
| 付録 E：7 つの AI プログラミングツール比較 | 主流の AI プログラミングプラットフォームの比較テスト | ✅ |
| 付録 F：デザインとプログラミングエージェントでウェブサイトを設計 | AI エージェントの協調的な使用方法を学ぶ | ✅ |
二、初中級開発エンジニア
フロントエンド部分
| 章 | 主要内容 | 状態 |
|---|---|---|
| フロントエンド零：lovart を使用して素材を生成 | lovart を使ってキャラクター、シーンなどの視覚素材を一括生成し、UI デザインとフロントエンド開発に素材基盤を提供 | 🚧 |
| フロントエンド一：Figma と MasterGo 入門 | デザインツールを使って情報アーキテクチャとページ構造を整理し、フロントエンド実装の基礎を築く | 🚧 |
| フロントエンド二：最初のモダンアプリケーションを構築 - UI デザイン | デザイン画に基づいてコンポーネント化インターフェースを完成させ、デザインからコードへの最初のパスを実現 | 🚧 |
| フロントエンド三：UI デザイン仕様とマルチプロダクト UI デザインを参照 | 統一されたメインビジュアルを中心にマルチプロダクトインターフェースを拡張し、体系的デザイン能力を練習 | 🚧 |
| フロントエンド四：一緒にハリー・ポッターの肖像画を作ろう | 0 から 1 まで AI 能力を統合したフロントエンドアプリケーションを作成し、デザインと開発を接続 | ✅ |
バックエンドとフルスタック部分
| 章 | 主要内容 | 状態 |
|---|---|---|
| バックエンド一：API とは | HTTP インターフェースとリクエスト・レスポンスモデルを理解し、バックエンド統合と連携調整の準備 | ✅ |
| バックエンド二：データベースから Supabase へ | Supabase 上でデータベースと API を実装し、データモデルとフロントエンドページを接続 | ✅ |
| バックエンド三：大規模言語モデル支援によるインターフェースコードとドキュメント作成 | 大規模言語モデルを使ってインターフェースとデータベースのドキュメントおよびコードの生成を支援し、読みやすくテスト可能なバックエンドを実現 | 🚧 |
| バックエンド四：Git ワークフロー | Git ワークフローでコードを管理し、バージョン管理とコラボレーションを行う | ✅ |
| バックエンド五：Zeabur デプロイ | アプリケーションを Zeabur にデプロイしてオンライン化 | ✅ |
| バックエンド六：モダン CLI 開発ツール | CLI 系 AI プログラミングツールを使用して開発とデバッグを加速し、個人のエンジニアリングワークフローを形成 | ✅ |
| バックエンド七：Stripe などの課金システムの統合方法 | 決済システムを接続し、課金パスと基本決済フローを完成 | 🚧 |
| 大課題 1：最初のモダンアプリケーションを構築 - フルスタックアプリ | フロントエンド、バックエンド、決済モジュールを統合し、オンライン可能なフルスタック Web アプリケーションを完成 | 🚧 |
| 大課題 2：モダンフロントエンドコンポーネントライブラリ + Trae 実戦 | モダンフロントエンドコンポーネントライブラリと Trae を使用し、ログイン・登録可能で課金対応のプロダクトを独立完成 | 🚧 |
AI 能力付録
| 章 | 主要内容 | 状態 |
|---|---|---|
| AI 一：Dify 入門とナレッジベース統合 | Dify Workflow と基本 RAG を使ってツール系プロダクトを構築し、以降のアプリケーションアップグレードのモデルケースを作成 | ✅ |
| AI 二：AI 辞典の検索とマルチモーダル API 統合を学ぶ | 適切なモデルと API を検索する方法を学び、テキスト、画像などのマルチモーダル能力をプロダクトに統合 | 🚧 |
三、上級開発エンジニア
| 章 | 主要内容 | 状態 |
|---|---|---|
| 上級一：MCP と ClaudeCode Skills | MCP と Skills を通じて IDE 能力を拡張し、外部サービスをツールとして接続 | 🚧 |
| 上級二：Coding Tools を長時間動作させる方法 | 長時間動作するタスクを設計・設定し、Coding Tools をより安定して信頼性の高いものに | 🚧 |
| 上級三：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法 | WeChat ミニプログラムのエコシステムを理解し、公式テンプレートからリリースまでフロントエンドミニプログラムを完成 | ✅ |
| 上級四：マルチプラットフォーム開発：WeChat ミニプログラムの構築方法 - バックエンド含む | ミニプログラムにデータベースとバックエンドロジックを統合し、完全な業務クローズドループを実現 | 🚧 |
| 上級五：マルチプラットフォーム開発：Android アプリの構築方法 | Expo などのツールを使用し、Web/ネイティブ一体化の Android アプリ開発を完成 | 🚧 |
| 上級六：マルチプラットフォーム開発：iOS アプリの構築方法 | Expo などのツールを使用し、Web/ネイティブ一体化の iOS アプリ開発を完成 | 🚧 |
| 上級七：自分専用の個人ウェブページと学術ブログの構築方法 | 選定、構築からデプロイまで、個人プロジェクトと学術成果を展示する長期的なオンラインホームページを構築 | 🚧 |
AI 能力付録
| 章 | 主要内容 | 状態 |
|---|---|---|
| 上級 AI 一：RAG とは、それがどのように動作するか | RAG 原理と一般的なアーキテクチャを体系的に理解し、複雑なアプリケーションに知識検索基盤を提供 | ✅ |
| 上級 AI 二：中上級 RAG とワークフロー編成：LangGraph を例に | LangGraph などのツールを使用してマルチステップワークフローと中上級 RAG システムを設計 | 🚧 |
🛠️ 学習方法
- 個人の能力に応じて、関連する章を選択的に読み实践し、問題があれば Issue で質問してください。
💻 本课件をローカルで起動
モダン手法
AI IDE ダイアログボックス（vscode、cursor、trae など）で、以下のプロンプトを入力して本课件を起動：
このプロジェクトのローカルサービスを実行してください
旧手法
- npm install
- npm run dev
- ブラウザを開いて
http://localhost:3000にアクセスして確認。
🤝 貢献に参加
- もし問題を発見した場合、または本プロジェクトを改善できる点があると思われる場合は、Issue を提出してフィードバックしてください。提出後に誰も返信しない場合は、保母チームのメンバーに連絡してフィードバックとフォローアップを受けることができます~
- もしあなたが本プロジェクトへの貢献に参加したい場合は、Pull Request を提出してください。提出後に誰も返信しない場合は、保母チームのメンバーに連絡してフィードバックとフォローアップを受けることができます~
- もしあなたが Datawhale に非常に興味があり、新しいプロジェクトを開始したい場合は、Datawhale オープンソースプロジェクトガイドに従って操作してください~
🙏 すべての貢献者に感謝
- 散步-プロジェクト責任者 (Datawhale メンバー)
- 方可-指導教官（Datawhale メンバー、清華大学）
- Yerim Kang（实践项目部分-清華大学）
- 赵芷霖（実践プロジェクト部分-清華大学）
- 李亦萱（ページ美術デザイン-清華大学）
- AI Vibe Coding 101 ベータテストグループでアドバイスと体験を提供してくれたすべての仲間たち
特別な感謝
- @Sm1les さんの本プロジェクトへの支援と支持に感謝
- 本プロジェクトに貢献してくれたすべての開発者に感謝 ❤️
📧 お問い合わせ
ご質問、ご提案、不満、または交流をご希望の場合は、以下の QR コードをスキャンしてください
以下の QR コードをスキャンして公式アカウントをフォローしてください：Datawhale
