## 新增内容 ### 附录文档扩展 - 扩展前端项目架构文档 (frontend-project-architecture.md) - 扩展后端项目架构文档 (backend-project-architecture.md) - 扩展数据治理文档 (data-governance.md) - 扩展数据可视化文档 (data-visualization.md) - 扩展分布式系统文档 (distributed-systems.md) - 扩展高可用文档 (high-availability.md) - 扩展单体到微服务文档 (monolith-to-microservices.md) - 扩展系统设计方法论文档 (system-design-methodology.md) - 扩展 Docker 容器文档 (docker-containers.md) - 扩展 Kubernetes 文档 (kubernetes.md) - 扩展 Linux 基础文档 (linux-basics.md) - 扩展神经网络文档 (neural-networks.md) ### 新增交互式组件 - 数据治理组件: DataQualityDemo, DataGovernanceFrameworkDemo, DataLineageDemo - 数据可视化组件: ChartTypeSelectorDemo, DashboardLayoutDemo - 分布式系统组件: CAPTheoremDemo, ConsistencyModelsDemo, DistributedChallengesDemo - 高可用组件: AvailabilityCalculatorDemo, FailoverStrategyDemo - 系统设计组件: SystemDesignStepsDemo, CapacityEstimationDemo - Docker 容器组件: DockerArchitectureDemo, DockerLifecycleDemo - Kubernetes 组件: K8sArchitectureDemo, K8sWorkloadsDemo - Linux 基础组件: LinuxFileSystemDemo, LinuxCommandDemo, LinuxPermissionsDemo - 神经网络组件: NeuronDemo, NetworkLayersDemo, NetworkArchitectureDemo - 单体到微服务组件: ArchEvolutionDemo - 项目架构组件: ProjectArchitectureComparisonDemo - 附录导航组件: AppendixFlowMap ### 英文版重构 - 将 en-us 目录重命名为 en - 更新相关配置和组件中的语言代码 ## Bug 修复 - 修复 index.js 中重复的组件导入语句导致的 build 失败 - 恢复被注释的 InvertedIndexDemo 和 SearchRelevanceDemo 导入 - 修复 HomeFeatures.vue 中 en-us 与 config.mjs 中 en 不一致导致的语言切换问题 ## 其他改进 - 添加构建脚本 (scripts/build.mjs) - 更新依赖版本
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗ ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝ █████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗ ██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝ ███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝
Easy-Vibe : Aprende Vibe Coding de 0 a 1
📌 Leer en línea (Read Online) · ✨ Tutorial interactivo
⭐ Te invitamos a dar Star aquí para acelerar las actualizaciones ❤️
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:
| Etapa | Habilidades clave | Resultado |
|---|---|---|
| Etapa 1 | Introducción a la programación con IA, Pensamiento de producto, Diseño de prototipos | Minijuegos interactivos, Prototipos de aplicaciones Web (Principiantes & PM) |
| Etapa 2 | Desarrollo Full-stack, Integración de IA, Bases de datos | Aplicación de IA Full-stack completa |
| Etapa 3 | Claude Code avanzado, Desarrollo de Miniprogramas y Android | Aplicaciones multiplataforma de nivel de producción |
| Apéndice | Ayuda para entender conceptos básicos de Computación e IA | 9 dominios de conocimiento, más de 80 temas interactivos |
🔥 Noticias
- [2026-02-25] Actualizada la Base de conocimientos del apéndice, 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.
Past News
- [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.
📖 Navegación
📚 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.
I. Introducción desde cero
| Capítulo | Contenido clave | Estado |
|---|---|---|
| Prólogo: Mapa de aprendizaje | Navegación por la ruta de aprendizaje completa | ✅ |
| Nivel 1: Era de la IA, hablar es programar | Experimenta la programación con IA mediante casos | ✅ |
| Nivel 2: Buscando buenas ideas | Aprende a validar ideas de productos | ✅ |
| Nivel 3: Introducción a las herramientas AI IDE | Aprende a usar el IDE y crea juegos locales | ✅ |
| Nivel 4: Construyendo prototipos a mano | Desde el análisis hasta prototipos de varias páginas | ✅ |
| Nivel 5: Añadiendo IA a los prototipos | Aprende a integrar IA (texto, imagen, video) | ✅ |
| Nivel 6: Práctica de proyecto completo | Escenarios reales e iteración con feedback | ✅ |
Apéndice: Pensamiento de negocio
| Capítulo | Contenido clave | Estado |
|---|---|---|
| Apéndice A: Pensamiento de producto | Marcos de pensamiento para crear productos | ✅ |
| Apéndice B: Escenarios industriales de IA (B2B) | Aplicaciones de IA en diferentes industrias | ✅ |
| Apéndice C: Inspiración para escenarios B2C | 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 | Errores comunes en vibe coding y soluciones | ✅ |
| Apéndice E: Comparación de herramientas AI | Comparativa de plataformas principales | ✅ |
| Apéndice F: Diseñando sitios con Agentes | Uso de agentes de IA para diseño web | ✅ |
II. Desarrollador intermedio
Front-end
| Capítulo | Contenido clave | Estado |
|---|---|---|
| Front-end 0: Activos con Lovart | Generación masiva de activos visuales | 🚧 |
| Front-end 1: Intro a Figma & MasterGo | Organización de arquitectura de la información | 🚧 |
| Front-end 2: Construyendo la primera App - UI | Interfaz basada en componentes desde el diseño | 🚧 |
| Front-end 3: Especificaciones de diseño UI | Diseño sistemático a través de productos | 🚧 |
| Front-end 4: Retratos de Hogwarts juntos | 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 | Interfaces HTTP y modelos petición-respuesta | ✅ |
| Back-end 2: De DB a Supabase | Implementación de bases de datos y APIs | ✅ |
| Back-end 3: Código de interfaz asistido por IA | Uso de LLM para generación de código y docs | 🚧 |
| Back-end 4: Flujo de trabajo Git | Control de versiones y colaboración | ✅ |
| Back-end 5: Despliegue en Zeabur | Despliegue de aplicaciones para producción | ✅ |
| Back-end 6: Herramientas CLI modernas | Aceleración del desarrollo con herramientas AI | ✅ |
| Back-end 7: Integración de pagos con Stripe | Procesos de cobro y liquidación básicos | 🚧 |
| Proyecto 1: Aplicación Full-stack completa | Web App completa lista para producción | 🚧 |
| Proyecto 2: UI Library + Trae | Producto independiente con auth y pagos | 🚧 |
III. Desarrollador avanzado
| Capítulo | Contenido clave | Estado |
|---|---|---|
| Avanzado 1: MCP & Claude Code Skills | Extensión de capacidades del IDE | 🚧 |
| Avanzado 2: Tareas de larga duración | Configuración de tareas de codificación estables | 🚧 |
| Avanzado 3: WeChat Mini Program | Ecosistema y lanzamiento de mini programas | ✅ |
| Avanzado 4: Mini Program con Back-end | Lógica de negocio completa en mini programas | 🚧 |
| Avanzado 5: Android App Development | Desarrollo unificado con Expo | ✅ |
| Avanzado 6: iOS App Development | Desarrollo unificado con Expo | ✅ |
| Avanzado 7: Web personal y blog académico | Construcción de marca personal en línea | 🚧 |
🛠️ 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
- npm install
- npm run dev
- Abre
http://localhost:3000en 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 (Miembro de Datawhale)
- Fang Ke - Asesor (Miembro de Datawhale, Univ. de Tsinghua)
- Todo el equipo de diseño y pruebas por su apoyo ❤️
📧 Contacto
📄 LICENCIA
Este trabajo está bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional .








