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](/es-es/appendix/prompt-engineering)
- [AI Evolution](/es-es/appendix/ai-evolution)
- [LLM Introduction](/es-es/appendix/llm-intro)
- [VLM Introduction](/es-es/appendix/vlm-intro)
- [AI Image Generation](/es-es/appendix/image-gen-intro)
- [AI Audio Models](/es-es/appendix/audio-intro)
- [Context Engineering](/es-es/appendix/context-engineering)
- [AI Agents](/es-es/appendix/agent-intro)
- [AI Capability Dictionary](/es-es/appendix/ai-capability-dictionary)
-
-### Frontend Development
- [Web Basics (HTML/CSS/JS)](/es-es/appendix/web-basics)
- [Frontend Evolution](/es-es/appendix/frontend-evolution)
- [Frontend Performance](/es-es/appendix/frontend-performance)
- [Canvas 2D](/es-es/appendix/canvas-intro)
- [URL to Browser](/es-es/appendix/url-to-browser)
- [Browser DevTools](/es-es/appendix/browser-devtools)
-
-### Backend Development
- [Backend Evolution](/es-es/appendix/backend-evolution)
- [Backend Languages](/es-es/appendix/backend-languages)
- [Database Principles](/es-es/appendix/database-intro)
- [Cache Design](/es-es/appendix/cache-design)
- [Message Queues](/es-es/appendix/queue-design)
- [Authentication](/es-es/appendix/auth-design)
- [Tracking Design](/es-es/appendix/tracking-design)
- [Operations](/es-es/appendix/operations)
-
-### General Skills
- [API Introduction](/es-es/appendix/api-intro)
- [IDE Introduction](/es-es/appendix/ide-intro)
- [Terminal Introduction](/es-es/appendix/terminal-intro)
- [Git Introduction](/es-es/appendix/git-intro)
- [Computer Networks](/es-es/appendix/computer-networks)
- [Deployment](/es-es/appendix/deployment)
@@ -0,0 +1,186 @@
+# Apéndice
+
+¡Bienvenido a la sección de **Apéndice**! Esta es una colección de fundamentos de inteligencia artificial y conceptos básicos de desarrollo full-stack, que sirve como una biblioteca de referencia importante durante tu viaje de aprendizaje.
+
+## Categorías de contenido
+
+### Fundamentos de IA
+
+Comprende los conceptos centrales, la historia del desarrollo y los principios técnicos de vanguardia de la inteligencia artificial:
+<NavGrid>
+  <NavCard
+    href="/es-es/appendix/prompt-engineering/"
+    title="Ingeniería de prompts"
+    description="Domina el arte del diálogo eficiente con IA para desbloquear el potencial de los grandes modelos"
+  />
+  <NavCard
+    href="/es-es/appendix/ai-evolution"
+    title="Historia de la evolución de la IA"
+    description="Revisa los hitos clave en el desarrollo de la IA y comprende la trayectoria de la evolución tecnológica"
+  />
+  <NavCard
+    href="/es-es/appendix/llm-intro"
+    title="Modelos de lenguaje grandes"
+    description="Explicación profunda pero accesible de cómo funcionan los Modelos de Lenguaje Grandes (LLM) y sus aplicaciones"
+  />
+  <NavCard
+    href="/es-es/appendix/vlm-intro"
+    title="Modelos grandes multimodales"
+    description="Explora modelos avanzados capaces de procesar múltiples modalidades de datos como imágenes y audio"
+  />
+  <NavCard
+    href="/es-es/appendix/image-gen-intro"
+    title="Principios de generación de imágenes por IA"
+    description="Descubre la lógica subyacente y la implementación técnica de la generación de imágenes por IA"
+  />
+  <NavCard
+    href="/es-es/appendix/audio-intro"
+    title="Modelos de audio de IA"
+    description="Comprende las aplicaciones de IA en síntesis de voz, reconocimiento y generación de música"
+  />
+  <NavCard
+    href="/es-es/appendix/context-engineering"
+    title="Ingeniería de contexto"
+    description="Aprende cómo optimizar la gestión de contexto para mejorar la coherencia de largo alcance de las tareas de IA"
+  />
+  <NavCard
+    href="/es-es/appendix/agent-intro"
+    title="Inteligencia de agentes"
+    description="Explora arquitecturas de agentes de IA con capacidades de toma de decisiones y ejecución autónomas"
+  />
+  <NavCard
+    href="/es-es/appendix/ai-capability-dictionary"
+    title="Diccionario de capacidades de IA"
+    description="Un manual de referencia rápida para términos comúnmente usados y conceptos centrales en el campo de la IA"
+  />
+</NavGrid>
+
+
+### Fundamentos de Frontend
+
+Consolida la base técnica del desarrollo frontend:
+<NavGrid>
+  <NavCard
+    href="/es-es/appendix/web-basics"
+    title="Fundamentos de HTML/CSS/JS"
+    description="Los tres pilares de la construcción de páginas web, esencial para principiantes en desarrollo frontend"
+  />
+  <NavCard
+    href="/es-es/appendix/frontend-evolution"
+    title="Historia de la evolución del frontend"
+    description="Comprende la evolución de las pilas de tecnología frontend y comprende las tendencias de desarrollo tecnológico"
+  />
+  <NavCard
+    href="/es-es/appendix/frontend-performance"
+    title="Optimización de rendimiento frontend"
+    description="Aprende estrategias clave para mejorar la velocidad de carga de páginas web y la fluidez de la interacción"
+  />
+  <NavCard
+    href="/es-es/appendix/canvas-intro"
+    title="Introducción a Canvas 2D"
+    description="Domina la API de dibujo de Canvas para lograr efectos geniales de gráficos y animación"
+  />
+  <NavCard
+    href="/es-es/appendix/url-to-browser"
+    title="De URL a visualización en el navegador"
+    description="Análisis de cadena completa del proceso completo de renderizado de páginas por el navegador"
+  />
+  <NavCard
+    href="/es-es/appendix/browser-devtools/"
+    title="Herramientas de desarrollo del navegador"
+    description="Usa herramientas de desarrollo proficientemente para localizar y resolver problemas frontend de manera eficiente"
+  />
+</NavGrid>
+
+
+### Fundamentos de Backend
+
+Domina los conceptos centrales del desarrollo backend:
+<NavGrid>
+  <NavCard
+    href="/es-es/appendix/backend-evolution"
+    title="Historia de la evolución del backend"
+    description="De monolítico a microservicios, explorando la evolución de la arquitectura backend"
+  />
+  <NavCard
+    href="/es-es/appendix/backend-languages"
+    title="Lenguajes de programación backend"
+    description="Compara las características y escenarios aplicables de los lenguajes backend dominantes para elegir la mejor pila de tecnología"
+  />
+  <NavCard
+    href="/es-es/appendix/database-intro"
+    title="Principios de bases de datos"
+    description="Comprende los principios centrales de las bases de datos y domina el arte del almacenamiento y recuperación de datos"
+  />
+  <NavCard
+    href="/es-es/appendix/cache-design"
+    title="Diseño de caché del sistema"
+    description="Aprende estrategias de caché para mejorar las capacidades de procesamiento de alta concurrencia del sistema"
+  />
+  <NavCard
+    href="/es-es/appendix/queue-design"
+    title="Diseño de colas de mensajes"
+    description="Domina el papel clave de las colas de mensajes en el desacoplamiento y el afeitado de picos"
+  />
+  <NavCard
+    href="/es-es/appendix/auth-design"
+    title="Principios y práctica de autenticación"
+    description="Construye sistemas seguros de autenticación de identidad y gestión de permisos"
+  />
+  <NavCard
+    href="/es-es/appendix/tracking-design"
+    title="Diseño de seguimiento"
+    description="Diseña científicamente el seguimiento de datos para proporcionar soporte de datos para la toma de decisiones de productos"
+  />
+  <NavCard
+    href="/es-es/appendix/operations"
+    title="Operaciones en línea"
+    description="Domina habilidades de operaciones para el despliegue, monitoreo y solución de problemas del sistema"
+  />
+</NavGrid>
+
+
+### Habilidades generales
+
+Conocimientos básicos de desarrollo de software:
+<NavGrid>
+  <NavCard
+    href="/es-es/appendix/api-intro"
+    title="Fundamentos de API"
+    description="Conocimientos básicos de diseño y desarrollo de interfaces API"
+  />
+  <NavCard
+    href="/es-es/appendix/ide-intro/"
+    title="Principios de IDE"
+    description="Comprende el mecanismo de funcionamiento interno de los Entornos de Desarrollo Integrados (IDEs)"
+  />
+  <NavCard
+    href="/es-es/appendix/terminal-intro"
+    title="Fundamentos de terminal"
+    description="Domina las operaciones básicas de la terminal de línea de comandos para mejorar la eficiencia del desarrollo"
+  />
+  <NavCard
+    href="/es-es/appendix/git-intro"
+    title="Introducción detallada a Git"
+    description="Comprende profundamente los principios de control de versiones de Git y el uso avanzado"
+  />
+  <NavCard
+    href="/es-es/appendix/computer-networks"
+    title="Redes de computadoras"
+    description="Conocimientos básicos de protocolos de red y principios de comunicación"
+  />
+  <NavCard
+    href="/es-es/appendix/deployment"
+    title="Despliegue y lanzamiento"
+    description="Proceso completo y mejores prácticas para el despliegue y lanzamiento de aplicaciones"
+  />
+</NavGrid>
+
+
+## Sugerencias de uso
+
+- Úsalo como material de referencia durante el proceso de aprendizaje, consulta según sea necesario
+- Cuando encuentres conceptos técnicos desconocidos, busca explicaciones aquí primero
+- Se recomienda leerlo una vez para establecer un sistema de conocimiento completo
+
+¡Este es tu tesoro de conocimientos técnicos, siempre bienvenido a consultar!
@@ -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](/es-es/stage-0/0.1-learning-map/)
- [2. If you can speak, you can code](/es-es/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](/es-es/stage-1/1.1-introduction-to-ai-ide/)
- [2. Building a Prototype](/es-es/stage-1/1.2-building-prototype/)
- [3. Integrating AI Capabilities](/es-es/stage-1/1.3-integrating-ai-capabilities/)
- [4. Complete Project Practice](/es-es/stage-1/1.4-complete-project-practice/)
@@ -0,0 +1,66 @@
+# Novato y Prototipo de Producto
+
+¡Bienvenido a la etapa de **Gerente de Producto de IA**! Este es el punto de partida del tutorial de Easy-Vibe, diseñado para estudiantes sin experiencia en programación.
+
+## Lo que aprenderás
+
+En esta etapa, comenzarás desde cero y dominarás el flujo de trabajo de Vibe Coding para convertirte en un super individuo capaz de diseñar productos de forma independiente.
+
+### Primeros pasos
+
+Adecuado para productos, operaciones y antecedentes no técnicos. Comprende la lógica de programación de IA a través de juegos y genera confianza:
+<NavGrid>
+  <NavCard
+    href="/es-es/stage-0/0.1-learning-map/"
+    title="Mapa de aprendizaje"
+    description="Comprende toda la ruta de aprendizaje y clarifica los objetivos y resultados de cada etapa"
+  />
+  <NavCard
+    href="/es-es/stage-0/0.2-ai-capabilities-through-games/"
+    title="Era de la IA: si puedes hablar, puedes programar"
+    description="Experimenta el encanto de la programación de IA a través de juegos como Snake, superando el miedo a la codificación"
+  />
+</NavGrid>
+
+
+### Gerente de producto
+
+Domina el flujo de trabajo de Vibe Coding. Aprende a desglosar los requisitos y completar de forma independiente prototipos de aplicaciones web de alta fidelidad:
+<NavGrid>
+  <NavCard
+    href="/es-es/stage-1/1.1-introduction-to-ai-ide/"
+    title="Introducción a las herramientas de IA IDE"
+    description="Conoce las herramientas de programación de IA actuales y elige la mejor pareja de desarrollo para ti"
+  />
+  <NavCard
+    href="/es-es/stage-1/1.2-building-prototype/"
+    title="Creación de prototipos"
+    description="Aprende cómo transformar rápidamente ideas de productos en prototipos visuales para prueba y error de bajo costo"
+  />
+  <NavCard
+    href="/es-es/stage-1/1.3-integrating-ai-capabilities/"
+    title="Integración de capacidades de IA"
+    description="Integra APIs de IA simples para dotar a tu prototipo de inteligencia"
+  />
+  <NavCard
+    href="/es-es/stage-1/1.4-complete-project-practice/"
+    title="Práctica de proyectos completos"
+    description="Aplica de manera integral lo que has aprendido para completar el desarrollo de un prototipo de producto completo de 0 a 1"
+  />
+</NavGrid>
+
+
+## Para quién es
+
+- Gerentes de producto y personal de operaciones sin experiencia en programación
+- Emprendedores que quieren validar ideas rápidamente
+- Personas no técnicas interesadas en la programación de IA
+- Diseñadores que buscan mejorar sus habilidades de creación de prototipos
+
+## Ruta de aprendizaje
+
+```
+Primeros pasos → Fundamentos de gestión de productos → Integración de capacidades de IA → Práctica de proyectos completos
+```
+
+¿Listo para comenzar tu viaje de programación de IA? ¡Haz clic en la navegación izquierda para comenzar a aprender!
@@ -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](/es-es/stage-2/frontend/2.0-lovart-assets/)
- [Frontend 1: Figma & MasterGo](/es-es/stage-2/frontend/2.1-figma-mastergo/)
- [Frontend 2: UI Design](/es-es/stage-2/frontend/2.2-ui-design/)
- [Frontend 3: Multi-Product UI](/es-es/stage-2/frontend/2.3-multi-product-ui/)
- [Frontend 4: Hogwarts Portraits](/es-es/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](/es-es/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
- [Backend 2: Database & Supabase](/es-es/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
- [Backend 3: AI Interface Code](/es-es/stage-2/backend/2.3-ai-interface-code/)
- [Backend 4: Git Workflow](/es-es/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
- [Backend 5: Zeabur Deployment](/es-es/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
- [Backend 6: Modern CLI Tools](/es-es/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
- [Backend 7: Stripe Payment](/es-es/stage-2/backend/2.7-stripe-payment/)
-
-### Assignments
-Practical projects to apply your full-stack skills.
-
- [Assignment 1: Full-Stack App](/es-es/stage-2/assignments/2.1-fullstack-app/)
- [Assignment 2: Modern Frontend + Trae](/es-es/stage-2/assignments/2.2-modern-frontend-trae/)
-
-### AI Capabilities
-Integrate AI features like knowledge bases and multimodal APIs.
-
- [AI 1: Dify & Knowledge Base](/es-es/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
- [AI 2: Multimodal API](/es-es/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)
@@ -0,0 +1,126 @@
+# Desarrollo Full-Stack
+
+¡Bienvenido a la etapa de **Desarrollo Full-Stack**! Aquí profundizarás en el desarrollo full-stack, dominando la componentización frontend, el diseño de bases de datos, el desarrollo de API backend y el despliegue.
+
+## Lo que aprenderás
+
+### Desarrollo Frontend
+
+Domina el desarrollo frontend moderno y aprende a usar bibliotecas de componentes y herramientas de diseño:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Frontend 0: Uso de Lovart para activos"
+    description="Aprende cómo usar herramientas de IA como Lovart para generar rápidamente activos de juegos de alta calidad y recursos de UI"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 1: Introducción a Figma y MasterGo"
+    description="Domina las operaciones básicas de herramientas profesionales de diseño de UI y el flujo de trabajo del diseño al código"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 2: Construcción de tu primera aplicación moderna - Diseño de UI"
+    description="Diseña una interfaz de aplicación web moderna desde cero, practicando principios de diseño de UI"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 3: Guías de diseño de UI y UI multi-producto"
+    description="Aprende las guías de diseño de UI dominantes para mejorar la consistencia y estética del diseño de productos"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 4: Construyamos retratos de Hogwarts"
+    description="Proyecto práctico: Construye una aplicación de retratos de Hogwarts interactiva utilizando imágenes generadas por IA"
+  />
+</NavGrid>
+
+
+### Backend y Full-Stack
+
+Aprende diseño de API, gestión de bases de datos y estrategias de despliegue de aplicaciones:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Backend 1: Qué es una API"
+    description="Comprende el concepto central de las APIs, el puente entre frontend y backend"
+  />
+  <NavCard
+    href="#"
+    title="Backend 2: De base de datos a Supabase"
+    description="Domina los fundamentos de bases de datos relacionales y aprende a usar Supabase, una plataforma BaaS moderna"
+  />
+  <NavCard
+    href="#"
+    title="Backend 3: Código de interfaz asistido por IA y documentación"
+    description="Usa IA para asistir en la generación de código de interfaz backend y documentación de API estándar"
+  />
+  <NavCard
+    href="#"
+    title="Backend 4: Flujo de trabajo de Git"
+    description="Domina las operaciones centrales y flujos de trabajo de colaboración del sistema de control de versiones Git"
+  />
+  <NavCard
+    href="#"
+    title="Backend 5: Despliegue en Zeabur"
+    description="Aprende a desplegar rápidamente tus aplicaciones full-stack en la nube usando Zeabur"
+  />
+  <NavCard
+    href="#"
+    title="Backend 6: Herramientas de desarrollo CLI modernas"
+    description="Explora herramientas CLI modernas para mejorar la experiencia de desarrollo en entornos de línea de comandos"
+  />
+  <NavCard
+    href="#"
+    title="Backend 7: Integración de sistemas de pago Stripe"
+    description="Práctica: Integra la funcionalidad de pago de Stripe en tu aplicación para monetización"
+  />
+</NavGrid>
+
+
+### Asignaciones
+
+Consolida tus habilidades de desarrollo full-stack a través de proyectos prácticos:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Asignación 1: Construcción de tu primera aplicación moderna - Full-Stack"
+    description="Aplica de manera integral lo que has aprendido para completar de forma independiente una aplicación full-stack completamente funcional"
+  />
+  <NavCard
+    href="#"
+    title="Asignación 2: Biblioteca de componentes frontend moderna + Trae"
+    description="Usa bibliotecas de componentes modernas con Trae IDE para construir eficientemente interfaces frontend complejas"
+  />
+</NavGrid>
+
+
+### Extensión de capacidades de IA
+<NavGrid>
+  <NavCard
+    href="#"
+    title="IA 1: Introducción a Dify e integración de base de conocimientos"
+    description="Aprende a construir aplicaciones de IA usando Dify e integrar bases de conocimientos privadas"
+  />
+  <NavCard
+    href="#"
+    title="IA 2: Consulta de diccionario de IA e integración de API multimodal"
+    description="Explora más capacidades de IA, integrando APIs multimodales como visión y voz"
+  />
+</NavGrid>
+
+
+## Para quién es
+
+- Desarrolladores con alguna base de programación que quieran aprender sistemáticamente desarrollo full-stack
+- Estudiantes que desean hacer la transición de gerente de producto a ingeniero full-stack
+- Desarrolladores junior a intermedios que quieren dominar herramientas y flujos de trabajo de desarrollo modernos
+- Emprendedores que quieren desarrollar productos completos de forma independiente
+
+## Requisitos previos
+
+- Completar la etapa de "Novato y prototipo de producto", o tener conocimientos básicos equivalentes
+- Comprender conceptos básicos de HTML/CSS/JavaScript
+- Tener conocimientos preliminares sobre herramientas de programación de IA
+
+¿Listo para profundizar en el desarrollo full-stack? ¡Haz clic en la navegación izquierda para comenzar a aprender!
@@ -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](/es-es/stage-3/core-skills/3.1-mcp-claudecode-skills/)
- [Advanced 2: Long-running Tasks](/es-es/stage-3/core-skills/3.2-long-running-tasks/)
-
-### Cross-Platform Development
-Build apps for WeChat, Android, and iOS.
-
- [Advanced 3: WeChat Mini-Program](/es-es/stage-3/cross-platform/3.3-wechat-miniprogram/)
- [Advanced 4: WeChat Mini-Program (Backend)](/es-es/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
- [Advanced 5: Android App](/es-es/stage-3/cross-platform/3.5-android-app/)
- [Advanced 6: iOS App](/es-es/stage-3/cross-platform/3.6-ios-app/)
-
-### Personal Brand
-Build your personal website and blog.
-
- [Advanced 7: Personal Website & Blog](/es-es/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](/es-es/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](/es-es/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)
@@ -0,0 +1,93 @@
+# Desarrollo Avanzado
+
+¡Bienvenido a la etapa de **Desarrollo Avanzado**! Aquí construirás aplicaciones multiplataforma complejas, dominarás el desarrollo de mini programas de WeChat y te desafiarás con el desarrollo de aplicaciones nativas de IA más avanzadas.
+
+## Lo que aprenderás
+
+### Habilidades centrales
+
+Domina profundamente el protocolo MCP y las técnicas avanzadas de Claude Code para mejorar la eficiencia del desarrollo:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Avanzado 1: Habilidades de MCP y ClaudeCode"
+    description="Domina Model Context Protocol (MCP) para extender las capacidades de las herramientas de programación de IA"
+  />
+  <NavCard
+    href="#"
+    title="Avanzado 2: Tareas de larga duración"
+    description="Aprende cómo hacer que las herramientas de codificación de IA manejen tareas complejas de larga duración"
+  />
+</NavGrid>
+
+
+### Desarrollo multiplataforma
+
+Construye mini programas de WeChat, aplicaciones de Android y iOS para lograr cobertura multiplataforma:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Avanzado 3: Construcción de mini programas de WeChat"
+    description="Desarrolla mini programas de WeChat desde cero, dominando los flujos de trabajo centrales de desarrollo de mini programas"
+  />
+  <NavCard
+    href="#"
+    title="Avanzado 4: Mini programas de WeChat con backend"
+    description="Construye aplicaciones completas de mini programas de WeChat con soporte backend"
+  />
+  <NavCard
+    href="#"
+    title="Avanzado 5: Construcción de aplicaciones de Android"
+    description="Usa marcos multiplataforma modernos para construir aplicaciones nativas de Android"
+  />
+  <NavCard
+    href="#"
+    title="Avanzado 6: Construcción de aplicaciones de iOS"
+    description="Desarrolla y publica aplicaciones de iOS, dominando los estándares de desarrollo del ecosistema de iOS"
+  />
+</NavGrid>
+
+
+### Marca personal
+
+Construye tu propio sitio web personal y blog técnico para establecer influencia personal:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Avanzado 7: Construcción de tu sitio web personal y blog académico"
+    description="Usa pilas de tecnología modernas para construir blogs personales de alto rendimiento y atractivos visualmente"
+  />
+</NavGrid>
+
+
+### Capacidades avanzadas de IA
+
+Explora tecnologías avanzadas de IA como RAG y LangGraph para construir flujos de trabajo complejos de aplicaciones de IA:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="IA avanzada 1: Qué es RAG y cómo funciona"
+    description="Comprende profundamente los principios de Retrieval-Augmented Generation (RAG) y su valor en aplicaciones de IA"
+  />
+  <NavCard
+    href="#"
+    title="IA avanzada 2: RAG avanzado y orquestación de flujos de trabajo - LangGraph"
+    description="Aprende a usar LangGraph para orquestar flujos de trabajo complejos de IA y construir sistemas RAG avanzados"
+  />
+</NavGrid>
+
+
+## Para quién es
+
+- Desarrolladores avanzados con experiencia en desarrollo full-stack que quieren desafiar aplicaciones más complejas
+- Ingenieros que quieren dominar tecnologías de desarrollo multiplataforma
+- Exploradores que quieren comprender profundamente el desarrollo de aplicaciones nativas de IA
+- Blogueros técnicos que quieren construir su marca técnica personal
+
+## Requisitos previos
+
+- Completar la etapa de "Desarrollo Full-Stack", o tener experiencia en desarrollo full-stack
+- Familiaridad con marcos frontend (como React/Vue) y desarrollo backend
+- Comprensión de conceptos básicos de IA y uso de APIs
+
+¿Listo para desafiar el desarrollo avanzado? ¡Haz clic en la navegación izquierda para comenzar a aprender!