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

███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝

Easy-Vibe: Learn Vibe Coding from 0 to 1

Desde cero, aprendizaje basado en proyectos, construyendo tu primer producto de IA

📌 Comenzar a leer en línea (Start Reading Online)

Leer en línea · Mapa de aprendizaje · Comunidad

🚀 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

Apéndice General

Diccionario de capacidades de IA: conceptos centrales comunes de IA, términos y explicaciones de escenarios

0. Jardín de Infancia

Capítulo	Contenido clave	Estado
Prólogo: Mapa de aprendizaje	Guía general de la ruta de aprendizaje	✅
Principiante 1: La era de la IA, si puedes hablar puedes programar	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	Aprender a usar el IDE, crear mini juegos localmente	✅
Principiante 3: Haz un prototipo tú mismo	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	Aprender a conectar capacidades comunes de IA (texto, imagen, video)	✅
Principiante 5: Proyecto completo práctico	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	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	Marcos de pensamiento necesarios para crear un producto de cero a uno	✅
Apéndice B: Errores comunes y soluciones	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	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	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	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	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	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	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	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	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	Gestionar código en flujo de trabajo Git, realizar control de versiones y colaboración	✅
Backend 5: Despliegue Zeabur	Desplegar la aplicación en Zeabur para ponerla en línea	✅
Backend 6: Herramientas de desarrollo CLI modernas	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	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	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	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	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	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	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	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	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	Integrar base de datos y lógica backend en mini programas,实现 ciclo completo de negocio	🚧
Avanzado 5: Desarrollo multiplataforma: Cómo construir aplicaciones Android	Usar herramientas como Expo, completar desarrollo de aplicaciones Android integrando Web/nativo	🚧
Avanzado 6: Desarrollo multiplataforma: Cómo construir aplicaciones iOS	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	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	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	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 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 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~

🙏 Gracias a Cada Contribuyente

• 散步-Líder del proyecto (Miembro de Datawhale)
• Fang Ke-Profesor guía (Miembro de Datawhale, Universidad de Tsinghua)
• Yerim Kang（Parte de proyectos prácticos-Universidad de Tsinghua）
• Zhao Zhilin（Parte de proyectos prácticos-Universidad de Tsinghua）
• Li Yixuan（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 por su ayuda y apoyo a este proyecto
• Gracias a todos los desarrolladores que han contribuido a este proyecto ❤️

📧 Contáctanos

Si tienes preguntas, sugerencias, quejas, o quieres comunicarte, por favor escanea el código QR a continuación

Escanea el código QR a continuación para seguir la cuenta oficial: Datawhale

📄 LICENCIA

Este trabajo está licenciado bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional

Star History