feat(docs): add NavGrid/NavCard components and restructure stage pages

- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
2026-02-01 23:42:12 +08:00
parent a9a5c5c8a7
commit ad95658a11
171 changed files with 16366 additions and 7946 deletions
@@ -1,42 +0,0 @@
-# Appendix
-
-Knowledge base for AI, Frontend, Backend, and General Skills.
-
-## Content Overview
-
-### AI Basics
- [Prompt Engineering](/vi-vn/appendix/prompt-engineering)
- [AI Evolution](/vi-vn/appendix/ai-evolution)
- [LLM Introduction](/vi-vn/appendix/llm-intro)
- [VLM Introduction](/vi-vn/appendix/vlm-intro)
- [AI Image Generation](/vi-vn/appendix/image-gen-intro)
- [AI Audio Models](/vi-vn/appendix/audio-intro)
- [Context Engineering](/vi-vn/appendix/context-engineering)
- [AI Agents](/vi-vn/appendix/agent-intro)
- [AI Capability Dictionary](/vi-vn/appendix/ai-capability-dictionary)
-
-### Frontend Development
- [Web Basics (HTML/CSS/JS)](/vi-vn/appendix/web-basics)
- [Frontend Evolution](/vi-vn/appendix/frontend-evolution)
- [Frontend Performance](/vi-vn/appendix/frontend-performance)
- [Canvas 2D](/vi-vn/appendix/canvas-intro)
- [URL to Browser](/vi-vn/appendix/url-to-browser)
- [Browser DevTools](/vi-vn/appendix/browser-devtools)
-
-### Backend Development
- [Backend Evolution](/vi-vn/appendix/backend-evolution)
- [Backend Languages](/vi-vn/appendix/backend-languages)
- [Database Principles](/vi-vn/appendix/database-intro)
- [Cache Design](/vi-vn/appendix/cache-design)
- [Message Queues](/vi-vn/appendix/queue-design)
- [Authentication](/vi-vn/appendix/auth-design)
- [Tracking Design](/vi-vn/appendix/tracking-design)
- [Operations](/vi-vn/appendix/operations)
-
-### General Skills
- [API Introduction](/vi-vn/appendix/api-intro)
- [IDE Introduction](/vi-vn/appendix/ide-intro)
- [Terminal Introduction](/vi-vn/appendix/terminal-intro)
- [Git Introduction](/vi-vn/appendix/git-intro)
- [Computer Networks](/vi-vn/appendix/computer-networks)
- [Deployment](/vi-vn/appendix/deployment)
@@ -0,0 +1,186 @@
+# Phụ lục
+
+Chào mừng đến với phần **Phụ lục**! Đây là bộ sưu tập các nền tảng trí tuệ nhân tạo và các khái niệm cơ bản về phát triển full-stack, đóng vai trò là thư viện tham khảo quan trọng trong hành trình học tập của bạn.
+
+## Danh mục nội dung
+
+### Nền tảng AI
+
+Hiểu các khái niệm cốt lõi, lịch sử phát triển và các nguyên tắc kỹ thuật tiên tiến của trí tuệ nhân tạo:
+<NavGrid>
+  <NavCard
+    href="/vi-vn/appendix/prompt-engineering/"
+    title="Kỹ thuật Prompt"
+    description="Thành thạo nghệ thuật đối thoại hiệu quả với AI để khai thác tiềm năng của các mô hình lớn"
+  />
+  <NavCard
+    href="/vi-vn/appendix/ai-evolution"
+    title="Lịch sử tiến hóa AI"
+    description="Xem xét các cột mốc quan trọng trong phát triển AI và hiểu quỹ đạo tiến hóa công nghệ"
+  />
+  <NavCard
+    href="/vi-vn/appendix/llm-intro"
+    title="Mô hình ngôn ngữ lớn"
+    description="Giải thích sâu nhưng dễ tiếp cận về cách hoạt động của Mô hình Ngôn ngữ Lớn (LLM) và các ứng dụng của chúng"
+  />
+  <NavCard
+    href="/vi-vn/appendix/vlm-intro"
+    title="Mô hình đa phương thức lớn"
+    description="Khám phá các mô hình tiên tiến có khả năng xử lý nhiều phương thức dữ liệu như hình ảnh và âm thanh"
+  />
+  <NavCard
+    href="/vi-vn/appendix/image-gen-intro"
+    title="Nguyên tắc tạo hình ảnh AI"
+    description="Tiết lộ logic cơ bản và triển khai kỹ thuật của việc tạo hình ảnh AI"
+  />
+  <NavCard
+    href="/vi-vn/appendix/audio-intro"
+    title="Mô hình âm thanh AI"
+    description="Hiểu các ứng dụng AI trong tổng hợp giọng nói, nhận dạng và tạo âm nhạc"
+  />
+  <NavCard
+    href="/vi-vn/appendix/context-engineering"
+    title="Kỹ thuật Ngữ cảnh"
+    description="Học cách tối ưu hóa quản lý ngữ cảnh để cải thiện tính nhất quán dài hạn của các tác vụ AI"
+  />
+  <NavCard
+    href="/vi-vn/appendix/agent-intro"
+    title="Trí thông minh Tác nhân"
+    description="Khám phá các kiến trúc tác nhân AI với khả năng ra quyết định và thực thi tự chủ"
+  />
+  <NavCard
+    href="/vi-vn/appendix/ai-capability-dictionary"
+    title="Từ điển Khả năng AI"
+    description="Sổ tay tham khảo nhanh cho các thuật ngữ thường được sử dụng và các khái niệm cốt lõi trong lĩnh vực AI"
+  />
+</NavGrid>
+
+
+### Nền tảng Frontend
+
+Củng cố nền tảng kỹ thuật của phát triển frontend:
+<NavGrid>
+  <NavCard
+    href="/vi-vn/appendix/web-basics"
+    title="Cơ bản HTML/CSS/JS"
+    description="Ba trụ cột của việc xây dựng trang web, điều cần thiết cho ngườI mới bắt đầu phát triển frontend"
+  />
+  <NavCard
+    href="/vi-vn/appendix/frontend-evolution"
+    title="Lịch sử tiến hóa Frontend"
+    description="Hiểu sự tiến hóa của các stack công nghệ frontend và nắm bắt xu hướng phát triển công nghệ"
+  />
+  <NavCard
+    href="/vi-vn/appendix/frontend-performance"
+    title="Tối ưu hóa Hiệu suất Frontend"
+    description="Học các chiến lược chính để cải thiện tốc độ tải trang web và tính mượt mà của tương tác"
+  />
+  <NavCard
+    href="/vi-vn/appendix/canvas-intro"
+    title="Giới thiệu Canvas 2D"
+    description="Thành thạo API vẽ Canvas để đạt được hiệu ứng đồ họa và hoạt hình tuyệt vời"
+  />
+  <NavCard
+    href="/vi-vn/appendix/url-to-browser"
+    title="Từ URL đến Hiển thị Trình duyệt"
+    description="Phân tích chuỗi đầy đủ về toàn bộ quá trình trình duyệt render trang"
+  />
+  <NavCard
+    href="/vi-vn/appendix/browser-devtools/"
+    title="Công cụ Phát triển Trình duyệt"
+    description="Sử dụng thành thạo các công cụ phát triển để xác định và giải quyết hiệu quả các vấn đề frontend"
+  />
+</NavGrid>
+
+
+### Nền tảng Backend
+
+Thành thạo các khái niệm cốt lõi của phát triển backend:
+<NavGrid>
+  <NavCard
+    href="/vi-vn/appendix/backend-evolution"
+    title="Lịch sử tiến hóa Backend"
+    description="Từ đơn khối đến microservices, khám phá sự tiến hóa của kiến trúc backend"
+  />
+  <NavCard
+    href="/vi-vn/appendix/backend-languages"
+    title="Ngôn ngữ Lập trình Backend"
+    description="So sánh các đặc điểm và kịch bản ứng dụng của các ngôn ngữ backend hàng đầu để chọn stack công nghệ tốt nhất"
+  />
+  <NavCard
+    href="/vi-vn/appendix/database-intro"
+    title="Nguyên tắc Cơ sở dữ liệu"
+    description="Hiểu các nguyên tắc cốt lõi của cơ sở dữ liệu và thành thạo nghệ thuật lưu trữ và truy vấn dữ liệu"
+  />
+  <NavCard
+    href="/vi-vn/appendix/cache-design"
+    title="Thiết kế Bộ nhớ đệm Hệ thống"
+    description="Học các chiến lược bộ nhớ đệm để cải thiện khả năng xử lý đồng thời cao của hệ thống"
+  />
+  <NavCard
+    href="/vi-vn/appendix/queue-design"
+    title="Thiết kế Hàng đợi Tin nhắn"
+    description="Thành thạo vai trò then chốt của hàng đợi tin nhắn trong việc tách rời và cắt giảm đỉnh"
+  />
+  <NavCard
+    href="/vi-vn/appendix/auth-design"
+    title="Nguyên tắc và Thực hành Xác thực"
+    description="Xây dựng các hệ thống xác thực danh tính và quản lý quyền an toàn"
+  />
+  <NavCard
+    href="/vi-vn/appendix/tracking-design"
+    title="Thiết kế Theo dõi"
+    description="Thiết kế theo dõi dữ liệu một cách khoa học để cung cấp hỗ trợ dữ liệu cho quyết định sản phẩm"
+  />
+  <NavCard
+    href="/vi-vn/appendix/operations"
+    title="Vận hành Trực tuyến"
+    description="Thành thạo các kỹ năng vận hành cho việc triển khai, giám sát và khắc phục sự cố hệ thống"
+  />
+</NavGrid>
+
+
+### Kỹ năng Chung
+
+Kiến thức cơ bản về phát triển phần mềm:
+<NavGrid>
+  <NavCard
+    href="/vi-vn/appendix/api-intro"
+    title="Giới thiệu API"
+    description="Kiến thức cơ bản về thiết kế và phát triển giao diện API"
+  />
+  <NavCard
+    href="/vi-vn/appendix/ide-intro/"
+    title="Nguyên tắc IDE"
+    description="Hiểu cơ chế hoạt động bên trong của Môi trường Phát triển Tích hợp (IDE)"
+  />
+  <NavCard
+    href="/vi-vn/appendix/terminal-intro"
+    title="Giới thiệu Terminal"
+    description="Thành thạo các thao tác cơ bản của terminal dòng lệnh để cải thiện hiệu quả phát triển"
+  />
+  <NavCard
+    href="/vi-vn/appendix/git-intro"
+    title="Giới thiệu Chi tiết về Git"
+    description="Hiểu sâu các nguyên tắc quản lý phiên bản Git và cách sử dụng nâng cao"
+  />
+  <NavCard
+    href="/vi-vn/appendix/computer-networks"
+    title="Mạng máy tính"
+    description="Kiến thức cơ bản về giao thức mạng và nguyên tắc giao tiếp"
+  />
+  <NavCard
+    href="/vi-vn/appendix/deployment"
+    title="Triển khai và Ra mắt"
+    description="Quy trình đầy đủ và các thực hành tốt nhất cho việc triển khai và ra mắt ứng dụng"
+  />
+</NavGrid>
+
+
+## Gợi ý sử dụng
+
+- Sử dụng làm tài liệu tham khảo trong quá trình học tập, tham khảo khi cần
+- Khi gặp các khái niệm kỹ thuật không quen thuộc, tìm kiếm giải thích ở đây trước
+- Nên đọc một lần để thiết lập hệ thống kiến thức hoàn chỉnh
+
+Đây là kho báu kiến thức kỹ thuật của bạn, luôn chào đón tham khảo!
@@ -1,19 +0,0 @@
-# AI Product Manager
-
-Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
-
-## Stage Overview
-
-### Getting Started
-Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
-
- [1. Learning Map](/vi-vn/stage-0/0.1-learning-map/)
- [2. If you can speak, you can code](/vi-vn/stage-0/0.2-ai-capabilities-through-games/)
-
-### Product Manager
-Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
-
- [1. Introduction to AI IDE](/vi-vn/stage-1/1.1-introduction-to-ai-ide/)
- [2. Building a Prototype](/vi-vn/stage-1/1.2-building-prototype/)
- [3. Integrating AI Capabilities](/vi-vn/stage-1/1.3-integrating-ai-capabilities/)
- [4. Complete Project Practice](/vi-vn/stage-1/1.4-complete-project-practice/)
@@ -0,0 +1,66 @@
+# NgườI MớI Và Nguyên Mẫu Sản Phẩm
+
+Chào mừng đến với giai đoạn **Quản lý Sản phẩm AI**! Đây là điểm khởi đầu của hướng dẫn Easy-Vibe, được thiết kế cho ngườI học không có kinh nghiệm lập trình.
+
+## Bạn sẽ học được gì
+
+Trong giai đoạn này, bạn sẽ bắt đầu từ con số không và thành thạo quy trình làm việc Vibe Coding để trở thành một cá nhân xuất sắc có khả năng thiết kế sản phẩm độc lập.
+
+### Bắt đầu
+
+Phù hợp cho sản phẩm, vận hành và nền tảng phi kỹ thuật. Hiểu logic lập trình AI thông qua trò chơi và xây dựng sự tự tin:
+<NavGrid>
+  <NavCard
+    href="/vi-vn/stage-0/0.1-learning-map/"
+    title="Bản đồ học tập"
+    description="Hiểu toàn bộ lộ trình học tập và làm rõ mục tiêu và kết quả của từng giai đoạn"
+  />
+  <NavCard
+    href="/vi-vn/stage-0/0.2-ai-capabilities-through-games/"
+    title="Kỷ nguyên AI: Nếu bạn có thể nói, bạn có thể lập trình"
+    description="Trải nghiệm sức hấp dẫn của lập trình AI thông qua các trò chơi như Snake, vượt qua nỗi sợ lập trình"
+  />
+</NavGrid>
+
+
+### Quản lý sản phẩm
+
+Thành thạo quy trình làm việc Vibe Coding. Học cách phân tách yêu cầu và hoàn thành độc lập các nguyên mẫu ứng dụng web độ trung thực cao:
+<NavGrid>
+  <NavCard
+    href="/vi-vn/stage-1/1.1-introduction-to-ai-ide/"
+    title="Giới thiệu công cụ IDE AI"
+    description="Tìm hiểu các công cụ lập trình AI hiện tại và chọn đối tác phát triển tốt nhất cho bạn"
+  />
+  <NavCard
+    href="/vi-vn/stage-1/1.2-building-prototype/"
+    title="Tạo nguyên mẫu"
+    description="Học cách chuyển đổi nhanh ý tưởng sản phẩm thành nguyên mẫu trực quan để thử nghiệm với chi phí thấp"
+  />
+  <NavCard
+    href="/vi-vn/stage-1/1.3-integrating-ai-capabilities/"
+    title="Tích hợp khả năng AI"
+    description="Tích hợp các API AI đơn giản để trang bị trí tuệ cho nguyên mẫu của bạn"
+  />
+  <NavCard
+    href="/vi-vn/stage-1/1.4-complete-project-practice/"
+    title="Thực hành dự án hoàn chỉnh"
+    description="Áp dụng toàn diện những gì bạn đã học để hoàn thành phát triển nguyên mẫu sản phẩm hoàn chỉnh từ 0 đến 1"
+  />
+</NavGrid>
+
+
+## Dành cho ai
+
+- Quản lý sản phẩm và nhân viên vận hành không có kinh nghiệm lập trình
+- Doanh nhân muốn xác thực ý tưởng nhanh chóng
+- NgườI phi kỹ thuật quan tâm đến lập trình AI
+- Nhà thiết kế muốn cải thiện kỹ năng tạo nguyên mẫu
+
+## Lộ trình học tập
+
+```
+Bắt đầu → Cơ bản quản lý sản phẩm → Tích hợp khả năng AI → Thực hành dự án hoàn chỉnh
+```
+
+Sẵn sàng bắt đầu hành trình lập trình AI của bạn? Nhấp vào điều hướng bên trái để bắt đầu học!
@@ -1,37 +0,0 @@
-# Full-Stack Development
-
-Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
-
-## Stage Overview
-
-### Frontend Development
-Master modern frontend development with component libraries and design tools.
-
- [Frontend 0: Lovart Assets](/vi-vn/stage-2/frontend/2.0-lovart-assets/)
- [Frontend 1: Figma & MasterGo](/vi-vn/stage-2/frontend/2.1-figma-mastergo/)
- [Frontend 2: UI Design](/vi-vn/stage-2/frontend/2.2-ui-design/)
- [Frontend 3: Multi-Product UI](/vi-vn/stage-2/frontend/2.3-multi-product-ui/)
- [Frontend 4: Hogwarts Portraits](/vi-vn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
-
-### Backend & Full-Stack
-Learn API design, database management, and deployment strategies.
-
- [Backend 1: What is API](/vi-vn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
- [Backend 2: Database & Supabase](/vi-vn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
- [Backend 3: AI Interface Code](/vi-vn/stage-2/backend/2.3-ai-interface-code/)
- [Backend 4: Git Workflow](/vi-vn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
- [Backend 5: Zeabur Deployment](/vi-vn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
- [Backend 6: Modern CLI Tools](/vi-vn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
- [Backend 7: Stripe Payment](/vi-vn/stage-2/backend/2.7-stripe-payment/)
-
-### Assignments
-Practical projects to apply your full-stack skills.
-
- [Assignment 1: Full-Stack App](/vi-vn/stage-2/assignments/2.1-fullstack-app/)
- [Assignment 2: Modern Frontend + Trae](/vi-vn/stage-2/assignments/2.2-modern-frontend-trae/)
-
-### AI Capabilities
-Integrate AI features like knowledge bases and multimodal APIs.
-
- [AI 1: Dify & Knowledge Base](/vi-vn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
- [AI 2: Multimodal API](/vi-vn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)
@@ -0,0 +1,126 @@
+# Phát triển Full-Stack
+
+Chào mừng đến với giai đoạn **Phát triển Full-Stack**! Ở đây bạn sẽ đi sâu vào phát triển full-stack, thành thạo component hóa frontend, thiết kế cơ sở dữ liệu, phát triển API backend và triển khai.
+
+## Bạn sẽ học được gì
+
+### Phát triển Frontend
+
+Thành thạo phát triển frontend hiện đại và học cách sử dụng thư viện component và công cụ thiết kế:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Frontend 0: Sử dụng Lovart cho tài nguyên"
+    description="Học cách sử dụng các công cụ AI như Lovart để tạo nhanh tài nguyên trò chơi chất lượng cao và tài nguyên UI"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 1: Giới thiệu Figma và MasterGo"
+    description="Thành thạo các thao tác cơ bản của công cụ thiết kế UI chuyên nghiệp và quy trình làm việc từ thiết kế đến code"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 2: Xây dựng ứng dụng hiện đại đầu tiên của bạn - Thiết kế UI"
+    description="Thiết kế giao diện ứng dụng web hiện đại từ đầu, thực hành các nguyên tắc thiết kế UI"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 3: Hướng dẫn thiết kế UI và UI đa sản phẩm"
+    description="Tìm hiểu các hướng dẫn thiết kế UI hàng đầu để cải thiện tính nhất quán và thẩm mỹ của thiết kế sản phẩm"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 4: Hãy xây dựng chân dung Hogwarts"
+    description="Dự án thực hành: Xây dựng ứng dụng chân dung Hogwarts tương tác sử dụng hình ảnh được tạo bởi AI"
+  />
+</NavGrid>
+
+
+### Backend và Full-Stack
+
+Học thiết kế API, quản lý cơ sở dữ liệu và chiến lược triển khai ứng dụng:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Backend 1: API là gì"
+    description="Hiểu khái niệm cốt lõi của API, cầu nối giữa frontend và backend"
+  />
+  <NavCard
+    href="#"
+    title="Backend 2: Từ cơ sở dữ liệu đến Supabase"
+    description="Thành thạo các nguyên tắc cơ bản của cơ sở dữ liệu quan hệ và học cách sử dụng Supabase, nền tảng BaaS hiện đại"
+  />
+  <NavCard
+    href="#"
+    title="Backend 3: Code giao diện được hỗ trợ bởi AI và tài liệu"
+    description="Sử dụng AI để hỗ trợ tạo code giao diện backend và tài liệu API chuẩn"
+  />
+  <NavCard
+    href="#"
+    title="Backend 4: Quy trình làm việc Git"
+    description="Thành thạo các thao tác cốt lõi và quy trình làm việc cộng tác của hệ thống quản lý phiên bản Git"
+  />
+  <NavCard
+    href="#"
+    title="Backend 5: Triển khai Zeabur"
+    description="Học cách triển khai nhanh các ứng dụng full-stack của bạn lên đám mây sử dụng Zeabur"
+  />
+  <NavCard
+    href="#"
+    title="Backend 6: Công cụ phát triển CLI hiện đại"
+    description="Khám phá các công cụ CLI hiện đại để nâng cao trải nghiệm phát triển trong môi trường dòng lệnh"
+  />
+  <NavCard
+    href="#"
+    title="Backend 7: Tích hợp hệ thống thanh toán Stripe"
+    description="Thực hành: Tích hợp chức năng thanh toán Stripe vào ứng dụng của bạn để kiếm tiền"
+  />
+</NavGrid>
+
+
+### Bài tập
+
+Củng cố kỹ năng phát triển full-stack của bạn thông qua các dự án thực hành:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Bài tập 1: Xây dựng ứng dụng hiện đại đầu tiên của bạn - Full-Stack"
+    description="Áp dụng toàn diện những gì bạn đã học để hoàn thành độc lập một ứng dụng full-stack hoàn toàn chức năng"
+  />
+  <NavCard
+    href="#"
+    title="Bài tập 2: Thư viện component frontend hiện đại + Trae"
+    description="Sử dụng thư viện component hiện đại với Trae IDE để xây dựng hiệu quả các giao diện frontend phức tạp"
+  />
+</NavGrid>
+
+
+### Mở rộng khả năng AI
+<NavGrid>
+  <NavCard
+    href="#"
+    title="AI 1: Giới thiệu Dify và tích hợp cơ sở kiến thức"
+    description="Học cách xây dựng ứng dụng AI sử dụng Dify và tích hợp các cơ sở kiến thức riêng tư"
+  />
+  <NavCard
+    href="#"
+    title="AI 2: Tra cứu từ điển AI và tích hợp API đa phương thức"
+    description="Khám phá thêm các khả năng AI, tích hợp các API đa phương thức như thị giác và giọng nói"
+  />
+</NavGrid>
+
+
+## Dành cho ai
+
+- Nhà phát triển có một số nền tảng lập trình muốn học phát triển full-stack một cách có hệ thống
+- NgườI học muốn chuyển đổi từ quản lý sản phẩm sang kỹ sư full-stack
+- Nhà phát triển từ cơ bản đến trung cấp muốn thành thạo công cụ và quy trình làm việc phát triển hiện đại
+- Doanh nhân muốn phát triển các sản phẩm hoàn chỉnh độc lập
+
+## Điều kiện tiên quyết
+
+- Hoàn thành giai đoạn "NgườI mới và nguyên mẫu sản phẩm", hoặc có kiến thức cơ bản tương đương
+- Hiểu các khái niệm cơ bản về HTML/CSS/JavaScript
+- Có kiến thức sơ bộ về các công cụ lập trình AI
+
+Sẵn sàng đi sâu vào phát triển full-stack? Nhấp vào điều hướng bên trái để bắt đầu học!
@@ -1,30 +0,0 @@
-# Advanced Development
-
-Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
-
-## Stage Overview
-
-### Core Skills
-Advanced AI coding skills and long-running task management.
-
- [Advanced 1: MCP & ClaudeCode Skills](/vi-vn/stage-3/core-skills/3.1-mcp-claudecode-skills/)
- [Advanced 2: Long-running Tasks](/vi-vn/stage-3/core-skills/3.2-long-running-tasks/)
-
-### Cross-Platform Development
-Build apps for WeChat, Android, and iOS.
-
- [Advanced 3: WeChat Mini-Program](/vi-vn/stage-3/cross-platform/3.3-wechat-miniprogram/)
- [Advanced 4: WeChat Mini-Program (Backend)](/vi-vn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
- [Advanced 5: Android App](/vi-vn/stage-3/cross-platform/3.5-android-app/)
- [Advanced 6: iOS App](/vi-vn/stage-3/cross-platform/3.6-ios-app/)
-
-### Personal Brand
-Build your personal website and blog.
-
- [Advanced 7: Personal Website & Blog](/vi-vn/stage-3/personal-brand/3.7-personal-website-blog/)
-
-### AI Advanced
-Deep dive into RAG and advanced agent workflows.
-
- [Advanced AI 1: What is RAG](/vi-vn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
- [Advanced AI 2: Advanced RAG with LangGraph](/vi-vn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)
@@ -0,0 +1,93 @@
+# Phát triển Nâng cao
+
+Chào mừng đến với giai đoạn **Phát triển Nâng cao**! Ở đây bạn sẽ xây dựng các ứng dụng đa nền tảng phức tạp, thành thạo phát triển mini-program WeChat và thách thức bản thân với phát triển ứng dụng AI native nâng cao hơn.
+
+## Bạn sẽ học được gì
+
+### Kỹ năng cốt lõi
+
+Thành thạo sâu giao thức MCP và các kỹ thuật nâng cao của Claude Code để cải thiện hiệu quả phát triển:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Nâng cao 1: Kỹ năng MCP và ClaudeCode"
+    description="Thành thạo Model Context Protocol (MCP) để mở rộng khả năng của các công cụ lập trình AI"
+  />
+  <NavCard
+    href="#"
+    title="Nâng cao 2: Các tác vụ chạy dài"
+    description="Học cách làm cho các công cụ lập trình AI xử lý các tác vụ phức tạp chạy dài"
+  />
+</NavGrid>
+
+
+### Phát triển đa nền tảng
+
+Xây dựng mini-program WeChat, ứng dụng Android và iOS để đạt được phủ sóng đa nền tảng:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Nâng cao 3: Xây dựng mini-program WeChat"
+    description="Phát triển mini-program WeChat từ đầu, thành thạo các quy trình làm việc cốt lõi của phát triển mini-program"
+  />
+  <NavCard
+    href="#"
+    title="Nâng cao 4: Mini-program WeChat với backend"
+    description="Xây dựng các ứng dụng mini-program WeChat hoàn chỉnh với hỗ trợ backend"
+  />
+  <NavCard
+    href="#"
+    title="Nâng cao 5: Xây dựng ứng dụng Android"
+    description="Sử dụng các framework đa nền tảng hiện đại để xây dựng ứng dụng native Android"
+  />
+  <NavCard
+    href="#"
+    title="Nâng cao 6: Xây dựng ứng dụng iOS"
+    description="Phát triển và phát hành ứng dụng iOS, thành thạo các tiêu chuẩn phát triển của hệ sinh thái iOS"
+  />
+</NavGrid>
+
+
+### Thương hiệu cá nhân
+
+Xây dựng trang web cá nhân và blog kỹ thuật của riêng bạn để thiết lập ảnh hưởng cá nhân:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Nâng cao 7: Xây dựng trang web cá nhân và blog học thuật của bạn"
+    description="Sử dụng các stack công nghệ hiện đại để xây dựng blog cá nhân hiệu suất cao và hấp dẫn về mặt hình ảnh"
+  />
+</NavGrid>
+
+
+### Khả năng AI nâng cao
+
+Khám phá các công nghệ AI nâng cao như RAG và LangGraph để xây dựng các quy trình làm việc ứng dụng AI phức tạp:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="AI nâng cao 1: RAG là gì và cách hoạt động"
+    description="Hiểu sâu các nguyên tắc của Retrieval-Augmented Generation (RAG) và giá trị của nó trong các ứng dụng AI"
+  />
+  <NavCard
+    href="#"
+    title="AI nâng cao 2: RAG nâng cao và điều phối quy trình làm việc - LangGraph"
+    description="Học cách sử dụng LangGraph để điều phối các quy trình làm việc AI phức tạp và xây dựng các hệ thống RAG nâng cao"
+  />
+</NavGrid>
+
+
+## Dành cho ai
+
+- Nhà phát triển nâng cao có kinh nghiệm phát triển full-stack muốn thách thức các ứng dụng phức tạp hơn
+- Kỹ sư muốn thành thạo các công nghệ phát triển đa nền tảng
+- Nhà thám hiểm muốn hiểu sâu về phát triển ứng dụng AI native
+- Blogger kỹ thuật muốn xây dựng thương hiệu kỹ thuật cá nhân của họ
+
+## Điều kiện tiên quyết
+
+- Hoàn thành giai đoạn "Phát triển Full-Stack", hoặc có kinh nghiệm phát triển full-stack
+- Thành thạo các framework frontend (như React/Vue) và phát triển backend
+- Hiểu các khái niệm cơ bản về AI và sử dụng API
+
+Sẵn sàng thách thức phát triển nâng cao? Nhấp vào điều hướng bên trái để bắt đầu học!