Vibe Coding on KnightLi Blog

easy-vibe: un mapa de aprendizaje para principiantes de Vibe Coding

Sat, 16 May 2026 22:44:43 +0800

easy-vibe es un proyecto open source de Datawhale para aprender Vibe Coding. No está dirigido a desarrolladores que ya dominan herramientas de AI Coding, sino a estudiantes, product managers, diseñadores, equipos de operaciones, indie developers y personas con interés técnico que apenas empiezan con Vibe Coding.

El valor del proyecto no está en listar otro grupo de herramientas de IA, sino en convertir “cómo empezar a construir proyectos con IA” en una ruta de aprendizaje más fácil de entender. Para muchos principiantes, lo difícil no es saber que existen Claude Code, Cursor, MCP o los Agents. Lo difícil es saber qué aprender primero, cómo practicar y cuándo pasar a herramientas más avanzadas.

Lo que más necesitan los principiantes es una ruta

Vibe Coding se ha vuelto popular en los últimos años, pero no es especialmente amigable para principiantes.

En apariencia, si sabes describir un requisito, puedes pedir a la IA que escriba código. En la práctica, en cuanto la tarea se vuelve un poco más compleja, aparecen problemas: el requisito no está claro, el modelo modifica el archivo equivocado, la estructura del proyecto no se entiende, los errores no se saben resolver, las dependencias no se instalan, los prompts se vuelven cada vez más confusos y el flujo termina regresando a “copiar código en una caja de chat”.

Por eso aprender Vibe Coding no puede limitarse a “cómo escribir prompts”. Como mínimo debe resolver varias cosas:

Cómo dividir una idea en tareas ejecutables;
Cómo hacer que la IA entienda la estructura del proyecto;
Cómo leer el código generado por el modelo;
Cómo manejar errores e iterar;
Cómo usar la terminal y el entorno local de desarrollo;
Cómo pasar del chat web a herramientas reales de AI Coding.

Ahí está el sentido de easy-vibe: intenta organizar estos temas en una ruta de aprendizaje, en lugar de dejar que los principiantes se pierdan entre herramientas, tutoriales y términos.

No es un tutorial aislado, sino una hoja de ruta

Según la presentación del proyecto, easy-vibe cubre tutoriales básicos, ejercicios interactivos, contenido visual, RAG, herramientas de terminal, herramientas de AI Coding y temas más avanzados como Claude Code, MCP, Skills y Agent Teams.

Esta forma de organizar el contenido es adecuada para principiantes. AI Coding no es una sola habilidad, sino una combinación de capacidades:

Describir requisitos;
Dividir tareas;
Leer proyectos;
Pedir al modelo que modifique código;
Ejecutar y verificar;
Iterar según los errores;
Convertir flujos repetidos en herramientas o skills.

Si solo aprendes una herramienta, es fácil quedar limitado por su interfaz. Cambias de modelo, editor o CLI, y el flujo vuelve a no estar claro. La ventaja de una hoja de ruta es construir primero el método de trabajo y luego poner las herramientas en el lugar adecuado.

Es especialmente útil para no programadores

El mayor atractivo de Vibe Coding es que permite a personas que no son programadoras profesionales crear prototipos.

Un product manager puede convertir una idea de producto en un demo interactivo. Un diseñador puede validar lógica de interacción. Un equipo de operaciones puede crear herramientas internas. Un estudiante puede construir proyectos de clase rápidamente. Un fundador puede validar demanda en etapas tempranas. Estas personas no necesariamente necesitan convertirse en ingenieros full-time en el sentido tradicional, pero sí necesitan un método para “hacer que la IA me ayude a llevar una idea a algo funcional”.

Por eso easy-vibe encaja bien con la comunidad china. Muchos usuarios chinos ya saben que la IA puede escribir código, pero aún faltan materiales sistemáticos para empezar: entorno de desarrollo, prompts, estructura de proyecto, depuración y uso de herramientas Agent. Es mejor cuando todo se explica con claridad en chino y se acompaña con ejercicios graduales.

Para este tipo de usuarios, lo más importante no es aprender un framework complejo desde el primer día, sino completar un ciclo completo: plantear un requisito, generar un proyecto, ejecutarlo, encontrar problemas, seguir modificando y terminar con una versión usable.

La parte avanzada se acerca a flujos reales de desarrollo con IA

Claude Code, MCP, Skills y Agent Teams, que aparecen en easy-vibe, ya no son solo conceptos introductorios.

Claude Code representa los Agents de programación en terminal: el modelo puede entrar en un proyecto local, leer archivos, modificar código y ejecutar comandos. MCP resuelve la conexión con herramientas y fuentes de datos, para que el modelo no se quede encerrado en una caja de chat. Skills permite conservar flujos reutilizables, como generación fija de proyectos, organización de documentos, revisión de tests o procesos de producción de contenido. Agent Teams va un paso más allá y divide tareas entre varios agentes.

Para principiantes, estos temas pueden parecer lejanos, pero vale la pena conocerlos pronto. La dirección de Vibe Coding ya está clara: pasar de “hacer que la IA escriba un fragmento de código” a “hacer que la IA participe en un flujo completo de proyecto”.

Si una ruta de aprendizaje se queda solo en prompts, pronto quedará atrás frente a la evolución de las herramientas. Pero si al principio se lanzan todos los conceptos avanzados a la vez, el principiante no sabrá por dónde empezar. El valor razonable de easy-vibe es colocar esos temas en una ruta de actualización gradual.

Dos errores que conviene evitar

El primer error es creer que Vibe Coding significa que, aunque no sepas código, puedes desentenderte por completo del código.

La IA puede generar muchas cosas, pero el usuario sigue necesitando juzgar si el resultado es correcto. Como mínimo, hay que entender la estructura del proyecto, saber cómo ejecutarlo y ubicar aproximadamente dónde ocurre un error. Aunque no escribas código complejo, necesitas sentido común básico de ingeniería.

El segundo error es creer que cuanto más avanzada sea la herramienta, mejor.

Un principiante no necesariamente necesita Claude Code, MCP o múltiples Agents al inicio. Un orden mejor es crear primero un ciclo de feedback con proyectos simples, y luego introducir poco a poco terminal, control de versiones, tests, llamadas a herramientas y flujos automatizados. Las herramientas deben coincidir con la complejidad de la tarea; si no, se convierten en algo que parece potente pero no se sabe para qué usar.

Cómo usarlo

Si apenas empiezas con Vibe Coding, puedes usar easy-vibe como una lista de aprendizaje.

Empieza con conceptos básicos y ejercicios simples. No hace falta perseguir todas las herramientas. Construye un proyecto pequeño, como una página personal, un dashboard de datos, una herramienta de formularios, un script de automatización o una demo de base de conocimiento. Durante el proceso, observa en qué partes ayuda la IA y en cuáles necesitas confirmar por tu cuenta.

Cuando puedas completar proyectos pequeños de forma estable, empieza con temas más complejos:

Usar herramientas de terminal para trabajar con proyectos locales;
Usar Git para gestionar cada cambio;
Usar RAG para conectar tus propios materiales;
Usar MCP para conectar herramientas externas;
Usar Skills para fijar flujos repetidos;
Usar Agent Teams para dividir tareas complejas.

Aprender Vibe Coding así no es solo aprender a preguntar a la IA. Es aprender a poner la IA dentro de tu propio flujo de trabajo.

Conclusión

easy-vibe puede verse como un mapa de entrada en chino para Vibe Coding. Organiza conceptos, herramientas y ejercicios dispersos de AI Coding en una ruta que ayuda al principiante a pasar de “he oído que la IA puede escribir código” a “puedo construir un proyecto con IA”.

El valor real de Vibe Coding no es saltarse todo aprendizaje, sino bajar la barrera entre idea y prototipo. Aún necesitas entender requisitos, organizar tareas, verificar resultados y controlar riesgos. Pero muchos pasos repetitivos, tediosos y fáciles de bloquear pueden hacerse con ayuda de la IA.

Si quieres una entrada sistemática al AI Coding y no quieres perderte desde el principio entre nombres de herramientas y configuraciones de ingeniería complejas, easy-vibe es un buen punto de partida.

No subas API Keys a GitHub: guía para evitar fugas de secretos al programar con IA

Sat, 16 May 2026 16:26:50 +0800

La programación con IA reduce la barrera para crear software, pero también lleva muchos problemas de seguridad de ingeniería a principiantes y usuarios no técnicos.

Uno de los incidentes más comunes es subir a un repositorio público un API Key, Secret, Token, cadena de conexión a una base de datos o archivo .env. En local, estos archivos parecen simples configuraciones para que la aplicación funcione. En un repositorio público de GitHub, se convierten en credenciales que pueden ser escaneadas, llamadas y abusadas automáticamente.

Las fugas de secretos no son raras. El informe 2026 de GitGuardian indica que los commits públicos de GitHub en 2025 contenían unos 28,65 millones de nuevas credenciales hardcodeadas, y que las fugas de credenciales relacionadas con servicios de IA crecieron un 81% interanual. El problema ya no es solo descuido: la programación con IA, los prototipos rápidos y el alojamiento público están amplificando la escala.

Por qué los principiantes filtran claves con más facilidad

Muchos agentes de IA y pequeñas herramientas tienen dos “repositorios”: uno en el disco local y otro visible para todo el mundo en GitHub. El problema es que los principiantes a menudo no distinguen bien esa frontera.

Durante el desarrollo local, config.json, .env y settings.yaml pueden contener API keys. Después de ejecutar git add ., git commit y git push, esos archivos pueden subirse completos. Cuando el repositorio es público, los bots de escaneo no necesitan entender tu negocio: solo necesitan detectar un patrón de secreto.

La programación con IA agrava esto:

Los ejemplos generados por IA pueden poner OPENAI_API_KEY = "sk-..." directamente en el código fuente.
Para “hacer que funcione”, los principiantes tienden a hardcodear secretos en frontend, scripts o archivos de configuración.
Muchas plataformas de vibe coding despliegan aplicaciones directamente sin pasar por la protección de push de GitHub.
El usuario puede no saber qué archivos, APIs o permisos predeterminados existen dentro del proyecto generado por IA.

En resumen, la IA puede ayudarte a crear algo que funciona más rápido. No asume automáticamente la responsabilidad de seguridad.

`.gitignore` no es decoración

Git gestiona el historial de versiones, GitHub aloja el código y .gitignore le dice a Git qué archivos no deben entrar en ese historial.

Un proyecto básico de IA debería ignorar al menos:

.env
.env.*
*.key
*.pem
config.local.*
secrets.*
credentials.*

Pero .gitignore no basta. Solo evita que archivos no rastreados se añadan en el futuro. Si un archivo con secretos ya fue committeado, añadirlo después a .gitignore no lo elimina del historial.

Un hábito más seguro:

Crear .gitignore al inicio del proyecto.
Guardar API keys solo en variables de entorno o configuración local.
Proporcionar .env.example con placeholders, no secretos reales.
Ejecutar un escáner de secretos antes de hacer commit, como gitleaks, trufflehog o GitHub Secret Scanning.

Borrar el archivo no basta

Si una clave ya llegó a un repositorio público, la primera reacción no debería ser “borro el archivo y hago otro commit”. Primero revoca o rota la clave.

Git registra el historial. Aunque el último commit elimine el archivo, los commits antiguos, forks, clones, cachés y sistemas de escaneo pueden conservarlo. La documentación de GitHub también recomienda revocar o rotar contraseñas, tokens y credenciales como primer paso.

Orden recomendado:

Revoca la clave antigua en el panel del proveedor y genera una nueva.
Revisa facturación, registros de uso, IPs sospechosas y tráfico inusual.
Elimina secretos hardcodeados y usa variables de entorno o un gestor de secretos.
Limpia archivos sensibles del historial con git filter-repo o BFG.
Activa GitHub Secret Scanning y Push Protection.
Revisa CI/CD, plataformas de despliegue, funciones cloud y artefactos frontend por si contienen la clave antigua.

En servicios como OpenAI, Anthropic, DeepSeek, proveedores cloud, pagos, correo o bases de datos, una clave filtrada puede provocar algo más que una factura inesperada: lectura de datos, abuso del servicio, contaminación de la cadena de suministro o bloqueo de cuentas.

Los secretos reales no van en el frontend

Muchos principiantes ponen API keys en JavaScript del frontend porque la página funciona:

`1`	`const apiKey = "sk-xxxxxxxx";`

Eso equivale prácticamente a publicarlas. El código del navegador, las peticiones de red, los Source Map y los artefactos de build se pueden inspeccionar. Cualquier clave que deba ser secreta no debe aparecer en el cliente.

La forma correcta es que el frontend llame a tu propio backend, y que el backend lea variables de entorno y llame a la API externa:

// frontend
await fetch("/api/chat", {
  method: "POST",
  body: JSON.stringify({ message })
});

El servidor usa la variable de entorno:

1
2

// server
const apiKey = process.env.OPENAI_API_KEY;

Esto mantiene el secreto en el entorno del servidor y evita exponerlo a todos los visitantes.

Vibe Coding no elimina la responsabilidad de seguridad

El problema del vibe coding no se limita a GitHub. Muchas aplicaciones se publican directamente desde plataformas de programación con IA a internet, sin revisión de código, escaneo de repositorio ni pruebas de seguridad tradicionales.

Investigaciones recientes de RedAccess encontraron una gran cantidad de activos públicos generados o alojados por herramientas de programación con IA, y algunos exponían datos corporativos, información personal o archivos internos. La lección es clara: cuando “se puede desplegar” se vuelve demasiado fácil, se olvida preguntar “¿debería ser público?”, “¿debería ser solo interno?” y “¿tiene control de acceso?”.

Antes de publicar una app generada por IA, pregunta:

¿Esta aplicación necesita realmente acceso público?
¿Tiene login, autenticación y separación de permisos?
¿Expone URLs de bases de datos, API keys, tokens o webhooks en el frontend?
¿Tiene límites de cuota, dominio, permisos y caducidad para APIs externas?
¿Puedes desactivar claves y revertir despliegues rápidamente tras un incidente?

El código generado por IA también necesita revisión de seguridad. Cuanto menos código hayas escrito personalmente, menos deberías asumir que es seguro.

Comprobaciones para hacer ahora

Empieza por tu cuenta de GitHub. Busca tu usuario junto con:

API_KEY
SECRET
TOKEN
OPENAI_API_KEY
ANTHROPIC_API_KEY
DEEPSEEK_API_KEY
.env
config
credentials

Si encuentras una clave real, rota primero y limpia después. Si entró alguna vez en un repositorio público, trátala como filtrada.

Para futuros proyectos con IA, usa un proceso fijo:

Escribe .gitignore antes del código de negocio.
Usa .env.example para documentar las variables necesarias.
Pon todos los secretos en variables de entorno, no en el código fuente.
Da a las API keys permisos mínimos, cuotas y fechas de caducidad.
Activa GitHub Secret Scanning y Push Protection.
Pide a la IA una revisión de seguridad antes de publicar, pero no confíes solo en su conclusión.

El verdadero peligro de la programación con IA no es solo que escriba código incorrecto. Es que da a muchas personas, por primera vez, la capacidad de publicar rápidamente aplicaciones inseguras en internet. Escribir rápido no es el problema. Entregar secretos, datos y permisos sí lo es.