From e61706520d9293ebea575cdcb5bb51e211b2bcb7 Mon Sep 17 00:00:00 2001 From: sanbuphy Date: Tue, 13 Jan 2026 16:04:46 +0800 Subject: [PATCH] docs: update gitignore and add english readme - Add CLAUDE.md and MULTI_LANGUAGE_PLAN.md to gitignore - Fix english badge link in README.md - Add comprehensive README_EN.md with project details - Update CLAUDE.md with new project architecture details --- .gitignore | 4 +- CLAUDE.md | 22 ++++++ README.md | 2 +- README_EN.md | 216 +++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 242 insertions(+), 2 deletions(-) create mode 100644 README_EN.md diff --git a/.gitignore b/.gitignore index 29ed4d1..72b65e0 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,6 @@ node_modules tools/* docs/.vitepress/dist docs/.vitepress/cache -temp/* \ No newline at end of file +temp/* +CLAUDE.md +MULTI_LANGUAGE_PLAN.md diff --git a/CLAUDE.md b/CLAUDE.md index 4449a33..16a1afb 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -37,6 +37,15 @@ The documentation will be available at `http://localhost:5173` (VitePress defaul ## Project Architecture +### VitePress Base Path Configuration + +The site automatically configures its base path based on the deployment environment: + +- **Vercel**: Uses `/` as base (detected via `VERCEL` environment variable) +- **GitHub Pages / Local**: Uses `/easy-vibe/` as base + +This logic is in `docs/.vitepress/config.mjs:3-5`. When linking assets or configuring paths, the `${base}` variable is used to ensure compatibility across environments. + ### Directory Structure ``` @@ -102,12 +111,15 @@ The project uses **VitePress 2.0.0-alpha.15** with these key features: - **Typewriter Effect**: TypeIt.js for homepage hero tagline animation - **Image Optimization**: Automatic image height classes based on aspect ratio - **Custom Layout**: Extends default theme with `Layout.vue` override +- **Reading Settings**: Element Plus popover panel for adjusting font size (12-18px) and line height (1.25-1.8) with localStorage persistence **Key Theme Behaviors**: - Images with aspect ratio > 1.2 get height-limited classes (tall/very-tall/ultra-tall) - Viewer.js initialized on `.vp-doc` container on each route change - Typewriter effect only activates on homepage when `frontmatter.hero.tagline` is an array +- Font size/line height adjustments use CSS custom properties `--ev-doc-font-size` and `--ev-doc-line-height` +- Reading settings panel appears in nav bar after the search/home buttons (gear icon) ### Sidebar Management @@ -183,6 +195,16 @@ In README.md, use these status indicators: - Content can be either `index.md` in a directory or a direct `.md` file - Images use descriptive names; can be in chapter subdirectories or root `/assets/` +### Code Formatting + +Prettier configuration (`.prettierrc`): + +- No semicolons (`semi: false`) +- Single quotes (`singleQuote: true`) +- No trailing commas (`trailingComma: "none"`) + +Run `npm run format` before committing code changes. + ## Permissions The project has configured bash permissions in `.claude/settings.local.json`: diff --git a/README.md b/README.md index 6a1534f..96d0e6a 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@

- English + English 中文
diff --git a/README_EN.md b/README_EN.md new file mode 100644 index 0000000..59c6d87 --- /dev/null +++ b/README_EN.md @@ -0,0 +1,216 @@ + +
+ +
+███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
+██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
+█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗
+██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝
+███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
+╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝
+ +# Easy-Vibe: Learn Vibe Coding from 0 to 1 + +### *Zero Foundation, Project-Based Learning, Build Your First AI Product* + +
+ + + +
+ +

+ + + + +

+ +
+ English + 中文 +
+ +
+ +## 🚀 Project Introduction + +When you try to write code with AI, encounter constant errors, often want to give up, and are unclear about how to actually deploy your programs online 😢. + +This tutorial is specifically designed to take you from 0 to 1, progressively mastering Vibe Coding techniques: + +- **Stage 0**: Get started with **vibe coding skills through simple games** +- **Stage 1**: **Vibe coding skills and business understanding** from a product manager perspective, implementing web application prototypes +- **Stage 2**: Learn **frontend/backend development and AI capabilities** related vibe coding techniques, complete full applications +- **Stage 3**: Master **multi-platform complex application** construction solutions, moving towards production-grade applications + +We believe that by mastering Vibe Coding combined with systematic training, one person can become a developer combining frontend, backend, AI capability integration, and product design. + +> **This project is primarily designed for three types of learners:** +> +> - **Beginners (ordinary people / product and operations)**: Help non-technical beginners understand key concepts and complete their first product prototype. +> - **Intermediate Developers (students and developers with some foundation)**: Master frontend/backend vibe coding and AI capability knowledge. +> - **Advanced Developers (companies and startups, open source and independent developers)**: Advanced development techniques, multi-platform development. + +### 📖 Content Navigation + +
+ Learning Map +
+ +### Appendix + +[AI Capability Dictionary: Common AI Core Concepts, Terminology, and Scenario Explanations](docs/appendix/ai-capability-dictionary.md) + +### Stage 0: Kindergarten + +| Chapter | Key Content | Status | +| :--- | :--- | :--- | +| [Preface: Learning Map](docs/stage-0/0.1-learning-map/index.md) | Overall learning path overview | ✅ | +| [Primary 1: Programming by Speaking in the AI Era](docs/stage-0/0.2-ai-capabilities-through-games/index.md) | Experience AI programming capabilities through Snake and other cases | ✅ | + +### Stage 1: AI Product Manager + +| Chapter | Key Content | Status | +| :--- | :--- | :--- | +| [Primary 2: Understanding AI IDE Tools](docs/stage-1/1.1-introduction-to-ai-ide/index.md) | Learn to use IDE, create small games locally | ✅ | +| [Primary 3: Building Prototypes Hands-On](docs/stage-1/1.2-building-prototype/index.md) | From requirement analysis, AI-generated single page to multi-page product prototype | ✅ | +| [Primary 4: Adding AI Capabilities to Prototypes](docs/stage-1/1.3-integrating-ai-capabilities/index.md) | Learn to integrate common AI capabilities (text, image, video) | ✅ | +| [Primary 5: Complete Project Practice](docs/stage-1/1.4-complete-project-practice/index.md) | Simulate real scenarios, accept user feedback iterations, complete projects | ✅ | +| [Final Assignment: Build a Complete Web Application Prototype and Present](docs/stage-1/1.5-final-project/index.md) | Fully implement application, showcase application effects | ✅ | + +#### Appendix + +| Chapter | Key Content | Status | +| :--- | :--- | :--- | +| [Appendix A: Product Thinking Supplement](docs/stage-1/appendix-a-product-thinking/index.md) | Thinking framework needed to build products from scratch | ✅ | +| [Appendix B: Common Errors and Solutions](docs/stage-1/appendix-b-common-errors/index.md) | Common errors in vibe coding and troubleshooting methods | ✅ | + +### Stage 2: Intermediate Developer + +#### Frontend Part + +| Chapter | Key Content | Status | +| :--- | :--- | :--- | +| [Frontend 0: Using Lovart to Generate Assets](docs/stage-2/frontend/2.0-lovart-assets/) | Learn to use Lovart to batch generate characters, scenes and other visual assets | 🚧 | +| [Frontend 1: Figma & MasterGo Introduction](docs/stage-2/frontend/2.1-figma-mastergo/) | Use design tools to organize information architecture and page structure | 🚧 | +| [Frontend 2: Building Your First Modern Application - UI Design](docs/stage-2/frontend/2.2-ui-design/) | Complete componentized interface based on design specs, implement the first link from design to code | 🚧 | +| [Frontend 3: Reference UI Design Specs and Multi-Product UI Design](docs/stage-2/frontend/2.3-multi-product-ui/) | Expand multi-product interfaces around unified visual design, practice systematic design capabilities | 🚧 | +| [Frontend 4: Building Hogwarts Portraits Together](docs/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Build AI-capable frontend applications from scratch, connecting design and development | ✅ | + +#### Backend and Full Stack Part + +| Chapter | Key Content | Status | +| :--- | :--- | :--- | +| [Backend 1: What is API](docs/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | Understand HTTP interfaces and request-response models | ✅ | +| [Backend 2: From Database to Supabase](docs/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Implement databases and APIs on Supabase, connect data models with frontend pages | ✅ | +| [Backend 3: AI-Assisted Interface Code and Documentation](docs/stage-2/backend/2.3-ai-interface-code/) | Use LLM to help generate interface and database documentation and code | 🚧 | +| [Backend 4: Git Workflow](docs/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Manage code in Git workflow, version control and collaboration | ✅ | +| [Backend 5: Zeabur Deployment](docs/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | Deploy applications to Zeabur for production | ✅ | +| [Backend 6: Modern CLI Development Tools](docs/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | Use CLI-based AI programming tools to accelerate development and debugging | ✅ | +| [Backend 7: Integrating Payment Systems like Stripe](docs/stage-2/backend/2.7-stripe-payment/) | Integrate payment systems, complete payment links and basic settlement processes | 🚧 | +| [Assignment 1: Build Your First Modern Application - Full Stack](docs/stage-2/assignments/2.1-fullstack-app/) | Integrate frontend, backend and payment modules, complete production-ready full stack web application | 🚧 | +| [Assignment 2: Modern Frontend Component Library + Trae Practice](docs/stage-2/assignments/2.2-modern-frontend-trae/) | Use modern frontend component libraries with Trae, independently complete login/registration and payment-capable products | 🚧 | + +#### AI Capabilities Appendix + +| Chapter | Key Content | Status | +| :--- | :--- | :--- | +| [AI 1: Dify Introduction and Knowledge Base Integration](docs/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Use Dify Workflow and basic RAG to build utility products | ✅ | +| [AI 2: Learn to Query AI Dictionary and Integrate Multimodal APIs](docs/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | Learn to find suitable models and APIs, integrate text, image and other multimodal capabilities | 🚧 | + +### Stage 3: Advanced Developer + +| Chapter | Key Content | Status | +| :--- | :--- | :--- | +| [Advanced 1: MCP and ClaudeCode Skills](docs/stage-3/core-skills/3.1-mcp-claudecode-skills/) | Extend IDE capabilities through MCP and Skills, integrate external services as tools | 🚧 | +| [Advanced 2: Making Coding Tools Work for Long Periods](docs/stage-3/core-skills/3.2-long-running-tasks/) | Design and configure long-running tasks, make Coding Tools more stable and reliable | 🚧 | +| [Advanced 3: Multi-Platform Development: Building WeChat Mini Programs](docs/stage-3/cross-platform/3.3-wechat-miniprogram/) | Understand WeChat mini program ecosystem, complete a frontend mini program from official template to launch | ✅ | +| [Advanced 4: Multi-Platform Development: Building WeChat Mini Programs - With Backend](docs/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrate databases and backend logic in mini programs, complete business loops | 🚧 | +| [Advanced 5: Multi-Platform Development: Building Android Apps](docs/stage-3/cross-platform/3.5-android-app/) | Use Expo and other tools to complete Web/native integrated Android application development | 🚧 | +| [Advanced 6: Multi-Platform Development: Building iOS Apps](docs/stage-3/cross-platform/3.6-ios-app/) | Use Expo and other tools to complete Web/native integrated iOS application development | 🚧 | +| [Advanced 7: Building Your Personal Website and Academic Blog](docs/stage-3/personal-brand/3.7-personal-website-blog/) | From selection, building to deployment, create a permanent online homepage showcasing projects and academic achievements | 🚧 | + +#### AI Capabilities Appendix + +| Chapter | Key Content | Status | +| :--- | :--- | :--- | +| [Advanced AI 1: What is RAG and How It Works](docs/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | Systematically understand RAG principles and common architectures | ✅ | +| [Advanced AI 2: Intermediate/Advanced RAG and Workflow Orchestration with LangGraph](docs/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | Use LangGraph and other tools to design multi-step workflows and intermediate/advanced RAG systems | 🚧 | + +## 🛠️ How to Learn + +- Choose relevant chapters to read and practice based on your personal ability. If you have questions, feel free to ask via issues. + +## 💻 Running This Course Locally + +### Modern Approach + +In the AI IDE dialog box (vscode, cursor, trae, etc.), enter the following prompt to start this course: + +``` +Please help me run this project's local service +``` + +### Traditional Approach + +1. npm install +2. npm run dev +3. Open your browser and visit `http://localhost:3000` to view. + +## 🤝 Contributing + +- If you discover any problems or see areas for improvement, please submit an Issue for feedback. If there's no response after submitting, you can contact the [Nanny Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) for follow-up. +- If you want to contribute to this project, please submit a Pull Request. If there's no response after submitting, you can contact the [Nanny Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) for follow-up. +- If you're very interested in Datawhale and want to start a new project, please follow the [Datawhale Open Source Project Guide](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md). + +## 🙏 Thanks to Every Contributor + +- [Sanbu - Project Lead](https://github.com/sanbuphy) (Datawhale Member) +- Fang Ke - Advisor (Datawhale Member, Tsinghua University) +- [Yerim Kang](https://github.com/yerim25) (Practice Project Section - Tsinghua University) +- Zhao Zhilin (Practice Project Section - Tsinghua University) +- [Li Yixuan](https://yixuan20.github.io/) (Page Art Design - Tsinghua University) +- All friends from the AI Vibe Coding 101 Beta Group who provided suggestions and experience + +### Special Thanks + +- Thanks to [@Sm1les](https://github.com/Sm1les) for their help and support with this project +- Thanks to all developers who contributed to this project ❤️ + +
+ + + +
+ +## 📧 Contact Us + +
+

If you have questions, suggestions, or want to communicate together, please scan the QR code below

+ + +

Scan the QR code below to follow the official account: Datawhale

+ +
+ +## 📄 LICENSE + +
+ + Creative Commons License + +
+This work is licensed under a + + Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License +. +
+ +## Star History + +[![Star History Chart](https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=date&legend=top-left)](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)