b215b13303
- Add stage-based recommendations for different user levels - Reorganize stage tables with improved formatting and content - Add new news entries for recent updates - Restructure advanced developer sections with Claude Code skills - Expand multi-platform development sections
414 lines
29 KiB
Markdown
414 lines
29 KiB
Markdown
<!-- trigger vercel build -->
|
|
<div align="center">
|
|
|
|
<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
|
|
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
|
|
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
|
|
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗
|
|
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝
|
|
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
|
|
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
|
|
|
|
# Easy-Vibe : Aprende Vibe Coding de 0 a 1
|
|
|
|
<p align="center">
|
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Tutorial interactivo</a>
|
|
</p>
|
|
|
|
<p align="center">
|
|
<a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea</a> ·
|
|
<a href="#-navegación">Mapa de aprendizaje</a> ·
|
|
<a href="#contact">Comunidad</a>
|
|
</p>
|
|
|
|
<p align="center">
|
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
|
|
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
|
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
|
|
<img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
|
|
<a href="LICENSE" target="_blank">
|
|
<img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
|
|
</p>
|
|
|
|
<p align="center">
|
|
<a href="../zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
|
|
<a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
|
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
|
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
|
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
|
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
|
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
|
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
|
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
|
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
|
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
|
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
|
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
|
</p>
|
|
|
|
</div>
|
|
<table align="center">
|
|
<tr>
|
|
<td width="50%" valign="top" align="center">
|
|
<img src="../../assets/gif-header.png" width="100%">
|
|
<br>
|
|
<strong>Mapa de aprendizaje exclusivo para principiantes</strong>
|
|
<br>
|
|
<sub>Guía desde cero, planificación de ruta clara, adiós al "aprender y olvidar"</sub>
|
|
</td>
|
|
<td width="50%" valign="top" align="center">
|
|
<img src="../../assets/gif-tutorial.png" width="100%">
|
|
<br>
|
|
<strong>Tutorial gráfico paso a paso</strong>
|
|
<br>
|
|
<sub>Explicaciones detalladas, como tener un tutor privado a tu lado, solo sigue los pasos</sub>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="50%" valign="top" align="center">
|
|
<img src="../../assets/gif-ide.gif" width="100%">
|
|
<br>
|
|
<strong>Programación simulada inmersiva</strong>
|
|
<br>
|
|
<sub>Navegación automática con mouse virtual, aprendiendo rápidamente los usos principales del IDE</sub>
|
|
</td>
|
|
<td width="50%" valign="top" align="center">
|
|
<img src="../../assets/gif-diffusion.gif" width="100%">
|
|
<br>
|
|
<strong>Principios de IA visibles</strong>
|
|
<br>
|
|
<sub>Principios de algoritmos animados, entiende de un vistazo cómo la IA "dibuja" imágenes</sub>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="50%" valign="top" align="center">
|
|
<img src="../../assets/gif-rag.gif" width="100%">
|
|
<br>
|
|
<strong>Aprende RAG como si fuera un juego</strong>
|
|
<br>
|
|
<sub>Componentes interactivos exclusivos, haz clic para ver claramente el flujo de datos RAG</sub>
|
|
</td>
|
|
<td width="50%" valign="top" align="center">
|
|
<img src="../../assets/git-terminal.gif" width="100%">
|
|
<br>
|
|
<strong>Principios de terminal visualizados</strong>
|
|
<br>
|
|
<sub>Operaciones de línea de comandos visualizadas, mostrando intuitivamente la lógica de fondo</sub>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div align="center">
|
|
<h3>⭐ Te invitamos a dar <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Star aquí</a> para acelerar las actualizaciones ❤️</h3>
|
|
</div>
|
|
|
|
En la era de la IA, las personas que convierten ideas en productos a menudo no son las que tienen los conocimientos técnicos más sólidos, sino las que dan el primer paso.
|
|
|
|
Muchas personas, incluso con asistentes de IA, se desaniman por "no entender el código" o "no saber cómo configurar el entorno". **Easy-Vibe nació para esto.** Asumiendo que todos parten de cero, te llevamos de la mano desde escribir tu primera línea de código hasta entender la lógica del front-end y back-end, y finalmente lanzar tu producto.
|
|
|
|
- **Público objetivo**: Principiantes, Product Managers, Desarrolladores Front-end / Back-end / Full-stack
|
|
- **Temas**: Programación con IA, Desarrollo de aplicaciones Web Full-stack, AI Agent, Workflows y sistemas RAG
|
|
|
|
---
|
|
|
|
Easy-Vibe te lleva de 0 a 1 a través de las siguientes etapas:
|
|
|
|
> Elige tu punto de partida según tu nivel:
|
|
> - **Sin conocimientos / Product Manager**: Comienza desde Stage 1 para desarrollar pensamiento de programación y dominar AI IDE para prototipado rápido
|
|
> - **Desarrollador**: Comienza desde Stage 2 para profundizar en desarrollo full-stack e integración de IA
|
|
> - **Desarrollador avanzado**: Salta directamente a Stage 3 para explorar Claude Code y desarrollo multiplataforma
|
|
|
|
| Etapa | Habilidades clave | Resultado |
|
|
| :--- | :--- | :--- |
|
|
| **Stage 1** | Mapa de aprendizaje, Introducción a programación IA, AI IDE, Pensamiento de producto, Diseño de prototipos, Integración de capacidades IA | Minijuegos interactivos, Prototipos de producto completos |
|
|
| **Stage 2** | Desarrollo Full-stack, Bases de datos, Integración de IA, Despliegue y operaciones | Aplicaciones IA Full-stack listas para producción |
|
|
| **Stage 3** | Claude Code avanzado, Desarrollo multiplataforma | Aplicaciones multiplataforma de nivel de producción |
|
|
| **Apéndice** | Fundamentos de computación, Introducción a IA, 9 dominios de conocimiento | Más de 80 temas interactivos |
|
|
|
|
## 🔥 Noticias
|
|
|
|
- **[2026-03-02]** 🦞 **Soporte para OpenClaw y AI Agents**: Se agregó el archivo de navegación AI `llms.txt`, permitiendo que OpenClaw, Claude, Cursor, Trae y otros AI Agents comprendan rápidamente la estructura del repositorio y localicen con precisión el contenido del tutorial. ¡Esperamos que cada 🦞 disfrute aprendiendo!
|
|
- **[2026-03-01]** [Sección de desarrollo avanzado](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/) actualizada integralmente: Se agregaron siete guías detalladas de Claude Code (MCP, Skills, Agent Teams, etc.) y ocho tutoriales de desarrollo multiplataforma (PWA, Electron, NFT, extensiones VS Code, aplicaciones industriales Qt, etc.).
|
|
- **[2026-02-25]** Actualizada la [Base de conocimientos del apéndice](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/), que cubre 9 dominios de conocimiento y más de 80 temas interactivos.
|
|
- **[2026-01-27]** Se agregaron tutoriales de desarrollo de aplicaciones para las plataformas Android e iOS.
|
|
- **[2026-01-19]** Lanzamiento de una serie de componentes de demostración interactiva para Prompt Engineering, evolución de la IA, diseño de autenticación, principios de Git, etc.
|
|
|
|
<details>
|
|
<summary>Past News</summary>
|
|
|
|
- **[2026-01-16]** Reestructuración del proyecto, estableciendo formalmente el capítulo de "Introducción para principiantes".
|
|
- **[2026-01-14]** Completada una actualización masiva de la documentación de la Etapa 1 "Construcción de prototipos de productos".
|
|
- **[2026-01-13]** Reconstrucción de la arquitectura de documentos, soporte total para multi-idioma (i18n).
|
|
- **[2026-01-01]** Lanzamiento del Mapa de Aprendizaje principal del proyecto.
|
|
</details>
|
|
|
|
### 📖 Navegación
|
|
|
|
<div align="center">
|
|
<img src="../../assets/readme-image1.png" alt="Mapa de Aprendizaje" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
|
</div>
|
|
|
|
### 📚 Base de conocimientos del apéndice
|
|
|
|
> Cubre **9 dominios de conocimiento** y más de **80 temas interactivos**, utilizando animaciones y componentes visuales para ayudarte a comprender intuitivamente los conceptos centrales desde los fundamentos de la computación hasta la frontera de la IA.
|
|
>
|
|
> 👉 [Ver apéndice completo](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [Diccionario de capacidades de IA](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
|
|
|
<table>
|
|
<tr>
|
|
<td valign="top" width="33%">
|
|
<strong>💻 Fundamentos de Computación</strong><br><br>
|
|
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md">Del transistor a la CPU</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md">Sistemas operativos</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md">Codificación, almacenamiento y transmisión de datos</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md">Redes: Cómo hablan dos ordenadores</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md">Estructuras de datos</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md">Introducción al pensamiento algorítmico</a>
|
|
</td>
|
|
<td valign="top" width="33%">
|
|
<strong>🔧 Herramientas de desarrollo</strong><br><br>
|
|
• <a href="../../docs/zh-cn/appendix/2-development-tools/git-version-control.md">Git: La máquina del tiempo del código</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/2-development-tools/command-line-shell.md">Línea de comandos y scripts de Shell</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/2-development-tools/package-managers.md">Gestores de paquetes</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/2-development-tools/debugging-art/">El arte de la depuración</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/2-development-tools/regex.md">Expresiones regulares</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/2-development-tools/environment-path.md">Variables de entorno y PATH</a>
|
|
</td>
|
|
<td valign="top" width="33%">
|
|
<strong>🌐 Navegador y Front-end</strong><br><br>
|
|
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.md">Inmersión profunda en JavaScript</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.md">Tubería de renderizado del navegador</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.md">Comparación de frameworks front-end</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md">Gráficos y animación</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/web-performance.md">Medición y optimización del rendimiento web</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.md">Panorama de la ingeniería front-end</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td valign="top" width="33%">
|
|
<strong>🖥️ Servidor y Back-end</strong><br><br>
|
|
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/http-protocol.md">Protocolo HTTP</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/api-design.md">Filosofía de diseño de APIs</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/auth-authorization.md">Autenticación y autorización</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/concurrency-async.md">Concurrencia, asincronía e hilos</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/message-queues.md">Colas de mensajes y eventos</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.md">Arquitectura back-end en capas</a>
|
|
</td>
|
|
<td valign="top" width="33%">
|
|
<strong>📊 Datos</strong><br><br>
|
|
• <a href="../../docs/zh-cn/appendix/5-data/sql.md">SQL</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/5-data/database-fundamentals.md">Principios de bases de datos</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/5-data/data-tracking.md">Recopilación de comportamiento del usuario</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/5-data/data-analysis.md">Fundamentos de análisis de datos</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/5-data/ab-testing.md">Pruebas A/B y experimentación</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/5-data/data-visualization.md">Visualización de datos y dashboards</a>
|
|
</td>
|
|
<td valign="top" width="33%">
|
|
<strong>🏗️ Arquitectura y Diseño de Sistemas</strong><br><br>
|
|
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.md">Del monolito a los microservicios</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.md">Desafíos de sistemas distribuidos</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/high-availability.md">Alta disponibilidad y recuperación</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.md">Metodología de diseño de sistemas</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td valign="top" width="33%">
|
|
<strong>☁️ Infraestructura y Operaciones</strong><br><br>
|
|
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.md">Containerización con Docker</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.md">Orquestación con Kubernetes</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.md">Automatización CI / CD</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md">Dominios, DNS y HTTPS</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md">Monitoreo, registros y alertas</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.md">Infraestructura como código</a>
|
|
</td>
|
|
<td valign="top" width="33%">
|
|
<strong>🤖 Inteligencia Artificial</strong><br><br>
|
|
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/llm-principles.md">Cómo funcionan los LLMs</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md">Transformer y mecanismos de atención</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/rag.md">Arquitectura RAG</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/ai-agents.md">AI Agents y llamadas a herramientas</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.md">Ingeniería de prompts</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/image-generation.md">Principios de generación de imágenes</a>
|
|
</td>
|
|
<td valign="top" width="33%">
|
|
<strong>🎯 Excelencia en Ingeniería</strong><br><br>
|
|
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.md">Calidad de código y refactorización</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/testing-strategies.md">Estrategias de prueba</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/design-patterns.md">Patrones de diseño</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/security-thinking.md">Pensamiento de seguridad y defensa</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/technical-writing.md">Redacción técnica</a><br>
|
|
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.md">Colaboración de código abierto</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
### I. Introducción desde cero
|
|
|
|
| Capítulo | Contenido clave | Estado |
|
|
| :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
|
| [Prólogo: Mapa de aprendizaje](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | Navegación por la ruta de aprendizaje completa | ✅ |
|
|
| [Nivel 1: Era de la IA, hablar es programar](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Experimenta la programación con IA mediante casos | ✅ |
|
|
| [Nivel 2: Buscando buenas ideas](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | Aprende a validar ideas de productos | ✅ |
|
|
| [Nivel 3: Introducción a las herramientas AI IDE](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Aprende a usar el IDE y crea juegos locales | ✅ |
|
|
| [Nivel 4: Construyendo prototipos a mano](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | Desde el análisis hasta prototipos de varias páginas | ✅ |
|
|
| [Nivel 5: Añadiendo IA a los prototipos](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Aprende a integrar IA (texto, imagen, video) | ✅ |
|
|
| [Nivel 6: Práctica de proyecto completo](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | Escenarios reales e iteración con feedback | ✅ |
|
|
|
|
#### Apéndice: Pensamiento de negocio
|
|
|
|
| Capítulo | Contenido clave | Estado |
|
|
| :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
|
| [Apéndice A: Pensamiento de producto](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Marcos de pensamiento para crear productos | ✅ |
|
|
| [Apéndice B: Escenarios industriales de IA (B2B)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | Aplicaciones de IA en diferentes industrias | ✅ |
|
|
| [Apéndice C: Inspiración para escenarios B2C](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | Exploración de IA en productos de consumo | ✅ |
|
|
|
|
#### Apéndice: Soluciones técnicas
|
|
|
|
| Capítulo | Contenido clave | Estado |
|
|
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
|
|
| [Apéndice D: Qué hacer ante errores](../../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Errores comunes en vibe coding y soluciones | ✅ |
|
|
| [Apéndice E: Comparación de herramientas AI](../../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Comparativa de plataformas principales | ✅ |
|
|
| [Apéndice F: Diseñando sitios con Agentes](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Uso de agentes de IA para diseño web | ✅ |
|
|
|
|
<details>
|
|
<summary><strong>II. Desarrollador intermedio</strong></summary>
|
|
|
|
#### Front-end
|
|
|
|
| Capítulo | Contenido clave | Estado |
|
|
| :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
|
|
| [Front-end 0: Activos con Lovart](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Generación masiva de activos visuales | 🚧 |
|
|
| [Front-end 1: Intro a Figma & MasterGo](../../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Organización de arquitectura de la información | 🚧 |
|
|
| [Front-end 2: Construyendo la primera App - UI](../../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | Interfaz basada en componentes desde el diseño | 🚧 |
|
|
| [Front-end 3: Especificaciones de diseño UI](../../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Diseño sistemático a través de productos | 🚧 |
|
|
| [Front-end 4: Retratos de Hogwarts juntos](../../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | App front-end con IA desde cero hasta producción | ✅ |
|
|
|
|
#### Back-end y Full-stack
|
|
|
|
| Capítulo | Contenido clave | Estado |
|
|
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
|
| [Back-end 1: Qué es una API](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | Interfaces HTTP y modelos petición-respuesta | ✅ |
|
|
| [Back-end 2: De DB a Supabase](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Implementación de bases de datos y APIs | ✅ |
|
|
| [Back-end 3: Código de interfaz asistido por IA](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | Uso de LLM para generación de código y docs | 🚧 |
|
|
| [Back-end 4: Flujo de trabajo Git](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Control de versiones y colaboración | ✅ |
|
|
| [Back-end 5: Despliegue en Zeabur](../../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | Despliegue de aplicaciones para producción | ✅ |
|
|
| [Back-end 6: Herramientas CLI modernas](../../docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | Aceleración del desarrollo con herramientas AI | ✅ |
|
|
| [Back-end 7: Integración de pagos con Stripe](../../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | Procesos de cobro y liquidación básicos | 🚧 |
|
|
| [Proyecto 1: Aplicación Full-stack completa](../../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | Web App completa lista para producción | 🚧 |
|
|
| [Proyecto 2: UI Library + Trae](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | Producto independiente con auth y pagos | 🚧 |
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary><strong>III. Desarrollador avanzado</strong></summary>
|
|
|
|
#### Habilidades básicas de Claude Code
|
|
|
|
| Capítulo | Contenido clave | Estado |
|
|
| :--- | :--- | :--- |
|
|
| [Inicio rápido con Claude Code](../../docs/zh-cn/stage-3/core-skills/basics/) | Instalación, operaciones básicas, consejos prácticos y comandos comunes | ✅ |
|
|
| [Guía completa de Claude Code MCP](../../docs/zh-cn/stage-3/core-skills/mcp/) | Conectar Claude Code a GitHub, bases de datos, APIs vía MCP | ✅ |
|
|
| [Guía completa de Claude Code Skills](../../docs/zh-cn/stage-3/core-skills/skills/) | Empaquetar conocimiento profesional en paquetes de habilidades reutilizables | ✅ |
|
|
| [Mejores prácticas de flujo de trabajo Claude Code](../../docs/zh-cn/stage-3/core-skills/workflow/) | Mejores prácticas para desarrollo diario, refactorización, revisión de código | ✅ |
|
|
| [Guía completa de Claude Agent Teams](../../docs/zh-cn/stage-3/core-skills/agent-teams/) | Colaboración de múltiples instancias de IA como un verdadero equipo de desarrollo | ✅ |
|
|
| [Claude Code Superpowers Desarrollo de ingeniería](../../docs/zh-cn/stage-3/core-skills/superpowers/) | Escribir código de nivel de ingeniería siguiendo TDD y mejores prácticas | ✅ |
|
|
| [Cómo hacer que Claude Code trabaje por largos períodos](../../docs/zh-cn/stage-3/core-skills/long-running-tasks/) | Diseñar tareas de larga duración para trabajo continuo | ✅ |
|
|
|
|
#### Desarrollo multiplataforma
|
|
|
|
| Capítulo | Contenido clave | Estado |
|
|
| :--- | :--- | :--- |
|
|
| [Cómo construir WeChat Mini Program](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | Ecosistema de mini programas, desde plantillas hasta lanzamiento | ✅ |
|
|
| [Cómo construir WeChat Mini Program con back-end](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrar base de datos y lógica back-end en mini programas | ✅ |
|
|
| [Desarrollo de aplicaciones Android](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Desarrollo unificado Web/Nativo con Expo | ✅ |
|
|
| [Desarrollo de aplicaciones iOS](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Desarrollo unificado Web/Nativo con Expo | ✅ |
|
|
| [Desarrollo PWA](../../docs/zh-cn/stage-3/cross-platform/3.7-pwa/) | Construir Progressive Web Apps con soporte offline | 🚧 |
|
|
| [Desarrollo de aplicaciones de escritorio Electron](../../docs/zh-cn/stage-3/cross-platform/3.8-electron/) | Construir aplicaciones de escritorio multiplataforma | 🚧 |
|
|
| [Desarrollo de extensiones VS Code](../../docs/zh-cn/stage-3/cross-platform/3.9-vscode-extension/) | Desarrollar extensiones y plugins para VS Code | 🚧 |
|
|
| [Desarrollo de aplicaciones industriales Qt](../../docs/zh-cn/stage-3/cross-platform/3.10-qt-industrial/) | Construir aplicaciones de escritorio de nivel industrial con Qt | 🚧 |
|
|
|
|
</details>
|
|
|
|
## 🛠️ Cómo aprender
|
|
|
|
- Según tu nivel, elige los capítulos relevantes para leer y practicar.
|
|
|
|
## 💻 Configuración local
|
|
|
|
### Método moderno
|
|
|
|
En tu AI IDE (VS Code, Cursor, Trae), usa el siguiente prompt:
|
|
|
|
```
|
|
Por favor, ayúdame a ejecutar el servicio local de este proyecto.
|
|
```
|
|
|
|
### Método tradicional
|
|
|
|
1. npm install
|
|
2. npm run dev
|
|
3. Abre `http://localhost:3000` en tu navegador.
|
|
|
|
## 🤝 Contribuir
|
|
|
|
- Si encuentras problemas, por favor abre un Issue.
|
|
- Si quieres contribuir, envía un Pull Request.
|
|
|
|
## 🙏 Agradecimientos
|
|
|
|
- [Sanbu - Líder del proyecto](https://github.com/sanbuphy) (Miembro de Datawhale)
|
|
- Fang Ke - Asesor (Miembro de Datawhale, Univ. de Tsinghua)
|
|
- Todo el equipo de diseño y pruebas por su apoyo ❤️
|
|
|
|
<div align="center">
|
|
|
|
<p>
|
|
<a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src="https://reporoster.com/stars/datawhalechina/easy-vibe" alt="Stargazers"/></a>
|
|
|
|
<a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src="https://reporoster.com/forks/datawhalechina/easy-vibe" alt="Forkers"/></a>
|
|
</p>
|
|
|
|
<a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left">
|
|
<picture>
|
|
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" />
|
|
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" />
|
|
</picture>
|
|
</a>
|
|
</div>
|
|
|
|
<div align=center style="margin-top: 30px;">
|
|
<a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors">
|
|
<img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" />
|
|
</a>
|
|
</div>
|
|
|
|
## <span id="contact">📧 Contacto</span>
|
|
|
|
<div align=center>
|
|
<p>Si tienes sugerencias o quieres colaborar, escanea el código QR:</p>
|
|
<img src="../../assets/wechat.png" width="280">
|
|
|
|
<p>Sigue a Datawhale en WeChat:</p>
|
|
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
|
|
</div>
|
|
|
|
## 📄 LICENCIA
|
|
|
|
<div align="center">
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
|
<img
|
|
alt="Licencia CC"
|
|
style="border-width:0"
|
|
src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
|
|
/>
|
|
</a>
|
|
<br />
|
|
Este trabajo está bajo una
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
|
|
Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional
|
|
</a>.
|
|
</div>
|
|
|
|
## Star History
|
|
|
|
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
|