test-repo/docs-readme/es-ES/README.md

<!-- 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: Learn Vibe Coding from 0 to 1

### _Desde cero, aprendizaje basado en proyectos, construyendo tu primer producto de IA_

<p align="center">
  📌 <a href="https://datawhalechina.github.io/easy-vibe/">Comenzar a leer en línea (Start Reading Online)</a>
</p>

<p align="center">
  <a href="https://datawhalechina.github.io/easy-vibe/">Leer en línea</a> ·
  <a href="#-navegación-de-contenido">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="./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="../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="../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>
</p>

</div>

## 🚀 Introducción al Proyecto

Cuando intentas escribir código con IA, encuentras errores constantes, a menudo quieres rendirte y no está claro cómo llevar realmente tus programas en línea 😢.

Este tutorial está específicamente diseñado para llevarte de 0 a 1, dominando progresivamente las técnicas de Vibe Coding:

- **Etapa 0**: **Introducción rápida a través de mini juegos** para adquirir habilidades de Vibe Coding
- **Etapa 1**: Desde la perspectiva de un product manager, **habilidades de Vibe Coding y comprensión del negocio**, implementando un prototipo de aplicación web
- **Etapa 2**: Aprender **desarrollo frontend/backend y capacidades de IA** relacionadas con técnicas de Vibe Coding, completando una aplicación completa
- **Etapa 3**: Dominar la construcción de **aplicaciones complejas multiplataforma**, avanzando hacia aplicaciones de nivel de producción

Creemos que al dominar Vibe Coding y combinarlo con entrenamiento sistemático, una sola persona puede convertirse en un desarrollador que combine desarrollo frontend, desarrollo backend, integración de capacidades de IA y diseño de productos.

> **Este proyecto está dirigido principalmente a tres tipos de estudiantes:**
>
> - **Principiantes (personas comunes / producto y operaciones)**: Ayudar a estudiantes no técnicos a entender conceptos clave y completar su primer prototipo de producto
> - **Desarrollores de nivel principiante-intermedio (estudiantes y desarrolladores con cierta base)**: Dominar el conocimiento de Vibe Coding frontend/backend y capacidades de IA
> - **Desarrollores avanzados (empresas y startups, código abierto e desarrollores independientes)**: Técnicas avanzadas de desarrollo, desarrollo multiplataforma

### 📖 Navegación de Contenido

<div align="center">
  <img src="../assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
</div>

### Apéndice General

[Diccionario de capacidades de IA: conceptos centrales comunes de IA, términos y explicaciones de escenarios](docs/zh-cn/appendix/ai-capability-dictionary.md)

### 0. Jardín de Infancia

| Capítulo                                                                                                                            | Contenido clave                                                                                  | Estado |
| :---------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | :----- |
| [Prólogo: Mapa de aprendizaje](docs/zh-cn/stage-0/0.1-learning-map/index.md)                                                        | Guía general de la ruta de aprendizaje                                                           | ✅     |
| [Principiante 1: La era de la IA, si puedes hablar puedes programar](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Experimentar por primera vez las capacidades de programación con IA a través de casos como Snake | ✅     |

### 1. Product Manager de IA

| Capítulo                                                                                                                  | Contenido clave                                                                                                          | Estado |
| :------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------- | :----- |
| [Principiante 2: Conociendo herramientas de IDE de IA](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md)            | Aprender a usar el IDE, crear mini juegos localmente                                                                     | ✅     |
| [Principiante 3: Haz un prototipo tú mismo](docs/zh-cn/stage-1/1.2-building-prototype/index.md)                           | Análisis de requisitos, generación de una sola página con IA, hasta generar prototipos de productos de múltiples páginas | ✅     |
| [Principiante 4: Añade capacidades de IA al prototipo](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md)       | Aprender a conectar capacidades comunes de IA (texto, imagen, video)                                                     | ✅     |
| [Principiante 5: Proyecto completo práctico](docs/zh-cn/stage-1/1.4-complete-project-practice/index.md)                   | Simular escenarios reales, aceptar feedback de usuarios para iterar, completar el proyecto                               | ✅     |
| [Proyecto final: Haz un prototipo completo de aplicación web y preséntalo](docs/zh-cn/stage-1/1.5-final-project/index.md) | Implementar completamente la aplicación, mostrar los efectos de la aplicación                                            | ✅     |

#### Apéndices

| Capítulo                                                                                                     | Contenido clave                                                       | Estado |
| :----------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------- | :----- |
| [Apéndice A: Suplemento de pensamiento de producto](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Marcos de pensamiento necesarios para crear un producto de cero a uno | ✅     |
| [Apéndice B: Errores comunes y soluciones](docs/zh-cn/stage-1/appendix-b-common-errors/index.md)             | Errores comunes en Vibe Coding y métodos de solución de problemas     | ✅     |

### 2. Ingeniero de Desarrollo de Nivel Principiante-Intermedio

#### Parte Frontend

| Capítulo                                                                                                                                            | Contenido clave                                                                                                                                    | Estado |
| :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :----- |
| [Frontend 0: Usar lovart para generar activos](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/)                                                      | Usar lovart para generar por lotes activos visuales como personajes y escenas, proporcionando base de activos para diseño UI y desarrollo frontend | 🚧     |
| [Frontend 1: Introducción a Figma y MasterGo](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/)                                                      | Usar herramientas de diseño para organizar arquitectura de información y estructura de páginas, preparando la base para implementación frontend    | 🚧     |
| [Frontend 2: Construir la primera aplicación moderna - Diseño UI](docs/zh-cn/stage-2/frontend/2.2-ui-design/)                                       | Completar interfaz basada en componentes basada en diseños,实现 la primera ruta de diseño a código                                                 | 🚧     |
| [Frontend 3: Referencia de especificaciones de diseño UI y diseño UI de múltiples productos](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/)     | Expandir interfaces de múltiples productos en torno a un visual principal unificado, practicar capacidades de diseño sistemático                   | 🚧     |
| [Frontend 4: Hagamos los retratos de Hogwarts juntos](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Crear una aplicación frontend con capacidades de IA integradas de 0 a 1, conectando diseño y desarrollo                                            | ✅     |

#### Parte Backend y Full Stack

| Capítulo                                                                                                                                                                           | Contenido clave                                                                                                                       | Estado |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :----- |
| [Backend 1: Qué es una API](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md)                                                                               | Entender interfaces HTTP y modelos de solicitud-respuesta, preparándose para integración backend y coordinación                       | ✅     |
| [Backend 2: De bases de datos a Supabase](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md)                                         | Implementar bases de datos y APIs en Supabase, conectando modelos de datos con páginas frontend                                       | ✅     |
| [Backend 3: LLM asistiendo en la escritura de código de interfaz y documentación](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/)                                               | Usar LLM para ayudar a generar documentación y código para interfaces y bases de datos,实现 un backend legible y testeable            | 🚧     |
| [Backend 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)                                                     | Gestionar código en flujo de trabajo Git, realizar control de versiones y colaboración                                                | ✅     |
| [Backend 5: Despliegue Zeabur](docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md)                             | Desplegar la aplicación en Zeabur para ponerla en línea                                                                               | ✅     |
| [Backend 6: Herramientas de desarrollo 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) | Usar herramientas de programación IA tipo CLI para acelerar desarrollo y depuración, formando flujo de ingeniería personal            | ✅     |
| [Backend 7: Cómo integrar sistemas de pago como Stripe](docs/zh-cn/stage-2/backend/2.7-stripe-payment/)                                                                            | Conectar sistemas de pago, completar flujo de pago y proceso básico de liquidación                                                    | 🚧     |
| [Proyecto final 1: Construir la primera aplicación moderna - Aplicación full stack](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/)                                             | Integrar frontend, backend y módulos de pago, completar aplicación web full stack lista para producción                               | 🚧     |
| [Proyecto final 2: Biblioteca de componentes frontend moderna + Trae práctico](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/)                                           | Usar biblioteca de componentes frontend moderna y Trae, completar independientemente un producto con registro/login y soporte de pago | 🚧     |

#### Apéndice de Capacidades de IA

| Capítulo                                                                                                                                                                                                         | Contenido clave                                                                                                                          | Estado |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- | :----- |
| [IA 1: Introducción a Dify e integración de base de conocimientos](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Usar Dify Workflow y RAG básico para construir productos tipo herramientas, creando ejemplo para actualizaciones futuras de aplicaciones | ✅     |
| [IA 2: Aprender a consultar diccionario de IA e integrar APIs multimodales](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md)                               | Aprender a buscar modelos y APIs apropiados, integrar capacidades multimodales como texto e imagen en productos                          | 🚧     |

### 3. Ingeniero de Desarrollo Avanzado

| Capítulo                                                                                                                                                                  | Contenido clave                                                                                                                              | Estado |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------- | :----- |
| [Avanzado 1: MCP y ClaudeCode Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/)                                                                          | Extender capacidades del IDE a través de MCP y Skills, conectar servicios externos como herramientas                                         | 🚧     |
| [Avanzado 2: Cómo hacer que Coding Tools funcione durante mucho tiempo](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/)                                           | Diseñar y configurar tareas de ejecución prolongada, hacer Coding Tools más estable y confiable                                              | 🚧     |
| [Avanzado 3: Desarrollo multiplataforma: Cómo construir mini programas de WeChat](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/)                              | Entender el ecosistema de mini programas de WeChat, completar un mini programa frontend desde plantilla oficial hasta lanzamiento            | ✅     |
| [Avanzado 4: Desarrollo multiplataforma: Cómo construir mini programas de WeChat - Incluyendo backend](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrar base de datos y lógica backend en mini programas,实现 ciclo completo de negocio                                                     | 🚧     |
| [Avanzado 5: Desarrollo multiplataforma: Cómo construir aplicaciones Android](docs/zh-cn/stage-3/cross-platform/3.5-android-app/)                                         | Usar herramientas como Expo, completar desarrollo de aplicaciones Android integrando Web/nativo                                              | 🚧     |
| [Avanzado 6: Desarrollo multiplataforma: Cómo construir aplicaciones iOS](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/)                                                 | Usar herramientas como Expo, completar desarrollo de aplicaciones iOS integrando Web/nativo                                                  | 🚧     |
| [Avanzado 7: Cómo construir tu propio sitio web personal y blog académico](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/)                                  | Desde selección, construcción hasta despliegue, construir homepage en línea a largo plazo mostrando proyectos personales y logros académicos | 🚧     |

#### Apéndice de Capacidades de IA

| Capítulo                                                                                                                                                         | Contenido clave                                                                                                                                    | Estado |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :----- |
| [IA Avanzada 1: Qué es RAG y cómo funciona](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md)          | Entender sistemáticamente principios de RAG y arquitecturas comunes, proporcionar base de recuperación de conocimiento para aplicaciones complejas | ✅     |
| [IA Avanzada 2: RAG intermedio-avanzado y orquestación de flujos de trabajo: Ejemplo con LangGraph](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | Usar herramientas como LangGraph para diseñar flujos de trabajo multipaso y sistemas RAG intermedio-avanzados                                      | 🚧     |

## 🛠️ Cómo Aprender

- Según tus habilidades personales, lee y practica selectivamente capítulos relevantes, si tienes preguntas hazlas en Issues.

## 💻 Iniciar Este Curso Localmente

### Método Moderno

En el cuadro de diálogo del IDE de IA (vscode, cursor, trae, etc.), ingresa el siguiente prompt para iniciar este curso:

```
Por favor ayúdame a ejecutar el servicio local de este proyecto
```

### Método Antiguo

1. npm install
2. npm run dev
3. Abre tu navegador y visita `http://localhost:3000` para ver.

## 🤝 Contribuir

- Si descubres algún problema, o crees que hay algo que se pueda mejorar en este proyecto, puedes enviar un Issue para dar feedback. Si después de enviar nadie responde, puedes contactar al [equipo de cuidadores](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) para feedback y seguimiento~
- Si quieres contribuir a este proyecto, puedes enviar un Pull Request, si después de enviar nadie responde, puedes contactar al [equipo de cuidadores](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) para feedback y seguimiento~
- Si estás muy interesado en Datawhale y quieres iniciar un nuevo proyecto, por favor sigue la [guía de proyectos de código abierto de Datawhale](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~

## 🙏 Gracias a Cada Contribuyente

- [散步-Líder del proyecto](https://github.com/sanbuphy) (Miembro de Datawhale)
- Fang Ke-Profesor guía (Miembro de Datawhale, Universidad de Tsinghua)
- [Yerim Kang](https://github.com/yerim25)（Parte de proyectos prácticos-Universidad de Tsinghua）
- Zhao Zhilin（Parte de proyectos prácticos-Universidad de Tsinghua）
- [Li Yixuan](https://yixuan20.github.io/)（Diseño artístico de página-Universidad de Tsinghua）
- Todos los compañeros del grupo beta de AI Vibe Coding 101 que proporcionaron sugerencias y experiencia

### Agradecimientos Especiales

- Gracias a [@Sm1les](https://github.com/Sm1les) por su ayuda y apoyo a este proyecto
- Gracias a todos los desarrolladores que han contribuido a este proyecto ❤️

<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">📧 Contáctanos</span>

<div align=center>
<p>Si tienes preguntas, sugerencias, quejas, o quieres comunicarte, por favor escanea el código QR a continuación</p>
<img src="../assets/wechat.png" width="280">

<p>Escanea el código QR a continuación para seguir la cuenta oficial: Datawhale</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 Creative Commons"
    style="border-width:0"
    src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
  />
</a>
<br />
Este trabajo está licenciado 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

[![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)