Vibe coding explicado: qué es y cómo encaja Google AI Studio

Seguro que alguna vez has tenido una pequeña idea — un quiz para tu noche de trivial, una calculadora rápida para tu proyecto paralelo, un registro de las tareas de los peques — y la has dejado pasar porque escribir código te parecía imposible. El enfoque de "vibe coding" existe precisamente para ese momento. Tú describes el aspecto, la sensación y el comportamiento que quieres, y un modelo de IA convierte tu descripción en código que funciona.

Aquí abajo te explico qué es realmente el vibe coding y luego te doy una forma real y comprobable de abrir Google AI Studio y enviar tu primer prompt. Voy a ser honesto contigo: puedo guiarte con confianza para entrar en el estudio y escribir un prompt, pero no puedo garantizar cómo se llamará cada botón dentro del estudio ni dónde estará cada opción de exportación, porque Google actualiza esa interfaz con frecuencia. Cuando no esté seguro, te lo diré.

¿Qué es el "vibe coding"?

El vibe coding es un nombre informal para crear software describiendo lo que quieres en lenguaje cotidiano y dejando que un modelo de IA se encargue de la programación. En lugar de aprender sintaxis (las reglas gramaticales estrictas de los lenguajes de programación), compartes el "vibe": el aspecto, la sensación, lo que debe hacer, y la IA escribe el código.

El término se popularizó a principios de 2025 y hoy engloba una pequeña familia de herramientas. Algunas, como Cursor, son editores de código completos con IA integrada. Otras, como Google AI Studio, son sandboxes donde hablas directamente con un modelo de IA de Google y puedes pedirle que genere código al instante.

Google AI Studio es el sandbox gratuito de Google en la web — un entorno seguro donde puedes escribir instrucciones para los modelos de IA de Google y probar lo que producen. No tienes que instalar nada; lo abres en tu navegador.

Antes de empezar

• Cuenta: Necesitarás una cuenta de Google (cualquier dirección de Gmail sirve).
• Coste: Gratis, al menos en el nivel básico. Algunas funciones de IA de Google están en un plan de pago; todo lo que se explica en esta guía se puede hacer sin pagar.
• Navegador: Cualquier navegador moderno — Chrome, Edge, Firefox, Safari.
• Tiempo: Calcula unos 10 minutos para el primer intento.

Paso 1 — Abre Google AI Studio

En tu navegador, entra en aistudio.google.com e inicia sesión con tu cuenta de Google. Una vez dentro, llegarás a una página que muestra los modelos de IA disponibles de Google y una barra lateral a la izquierda.

Tras iniciar sesión, verás el área principal del estudio con un cuadro de prompt y una lista de modelos disponibles (los nombres serán algo parecido a Gemini seguido de un número de versión). No hace falta que memorices los modelos — escoge simplemente una de las opciones predeterminadas de Gemini; es la elección correcta para escribir código.

💬 Ejemplo: Escribe una frase de prueba en el cuadro de prompt, como "Hola, ¿quién eres?", y pulsa enviar. Si recibes una respuesta escrita, el estudio está funcionando para ti.

Sabrás que ha funcionado cuando el estudio muestre una respuesta de texto de la IA debajo de tu mensaje.

Paso 2 — Cambia la salida a "Código" si está disponible

Una vez que el estudio responde, busca en la interfaz alguna forma de indicarle a la IA que quieres código en lugar de una respuesta de chat. Google ha llamado a esta función "Salida estructurada" o modo "Código" en distintas versiones del estudio. Si ves un menú desplegable, un interruptor o un botón con un nombre parecido, actívalo.

Sinceramente: no estoy 100 % seguro de cómo se llame la etiqueta actual, porque Google actualiza esta interfaz. Si no encuentras un modo específico de código, no pasa nada — el siguiente paso sigue funcionando.

💬 Ejemplo de ruta de menú que buscar: Ajustes → Tipo de salida → Código, o un camino similar.

Sabrás que ha funcionado cuando las respuestas de la IA empiecen a devolver bloques de código formateados (líneas que comienzan con etiquetas HTML, o envueltos en triples comillas invertidas) en lugar de texto normal.

Paso 3 — Envía tu primer prompt "crea una app"

Ahora escribe una instrucción clara y concreta en el cuadro de prompt. Cuanto más específico seas, mejor será el resultado. Piensa en ello como un brief para alguien que va a construir algo: cuanto más detalle le des sobre lo que quieres, más se acercará la primera versión.

Para un primer proyecto, ve a lo pequeño. Un botón funcional que haga algo visible siempre le gana a una app ambiciosa a medio construir.

💬 Ejemplo de prompt (cópialo y adáptalo):

"Escribe el HTML, el CSS y el JavaScript para una aplicación web de una sola página: un quiz de 5 preguntas de opción múltiple sobre animales nativos de Estados Unidos. Usa un fondo verde suave. Muestra una pregunta a la vez con cuatro botones. Tras la última pregunta, muestra la puntuación del usuario sobre 5."

Sabrás que ha funcionado cuando la IA devuelva un bloque de código que empiece por <!DOCTYPE html> o <html> y que incluya contenido visible del quiz.

Paso 4 — Copia el código en un visor gratuito

El código que devuelve la IA es solo texto. Para ver tu quiz funcionando en un navegador, copia todo el bloque de código (haz clic en el icono de copiar junto a la respuesta de la IA, o selecciona el texto y pulsa Ctrl+C / Cmd+C).

Luego pégalo en un visor de HTML online gratuito. Dos opciones populares:

• CodePen (codepen.io) — gratis, sin instalación. Pega en el panel de HTML.
• JSFiddle (jsfiddle.net) — parecido, también gratis.

Si prefieres no registrarte en nada, abre un editor de texto plano en tu ordenador (Notepad en Windows, TextEdit en Mac en modo texto plano), pega el código y guarda el archivo como quiz.html. Haz doble clic sobre el archivo guardado y se abrirá en tu navegador por defecto.

💬 Ejemplo: La respuesta de la IA normalmente contendrá el código completo entre triples comillas invertidas. Copia todo desde la primera hasta la última.

Sabrás que ha funcionado cuando veas tu quiz aparecer en el navegador, con una primera pregunta y los botones de respuesta visibles.

Paso 5 — Pídele a la IA que haga cambios

Este es el corazón del vibe coding: no editas el código tú mismo. Vuelves al cuadro de prompt y le pides a la IA que revise lo que ha generado. La IA reescribe el código por ti y tú copias la nueva versión en tu visor.

Prueba con un cambio cada vez. Las peticiones pequeñas y concretas dan los resultados más limpios.

💬 Ejemplos de prompts de seguimiento:

"Haz los botones más grandes y redondea las esquinas." "Cambia el fondo de verde a azul claro." "Añade una sexta pregunta sobre demonios de Alaska."

Sabrás que ha funcionado cuando el siguiente bloque de código que devuelva la IA refleje el cambio que has pedido y tu visor muestre la versión actualizada después de pegar el nuevo código.

Errores comunes

• Error: Escribir un prompt vago como "hazme una app". La IA no tiene con qué trabajar y, o bien hará preguntas para aclararlo, o producirá algo genérico. Solución: Sé concreto — indica el tipo de app, los colores, el número de elementos, qué debe pasar al final.
• Error: Pedir un proyecto enorme el primer día. Te verás abrumado por un muro de código y atascado en cuanto algo falle. Solución: Empieza por una sola pantalla, por ejemplo un botón que haga una sola cosa. Añade funciones solo después de que esa primera versión funcione.
• Error: Intentar editar el código tú mismo porque el primer intento de la IA no fue perfecto. Eso rompe la gracia del vibe coding y te devuelve a aprender sintaxis. Solución: Envía un prompt de seguimiento describiendo el cambio en lenguaje cotidiano.
• Error: Pegar el código primero en Word o en un editor de texto enriquecido. Los procesadores de texto añaden formato oculto que rompe el HTML. Solución: Pégalo siempre en un entorno de texto plano — CodePen, JSFiddle, Notepad en modo texto plano o TextEdit en modo texto plano.

Qué significa esto para ti

• En el día a día: Puedes crear pequeñas herramientas personales — una lista de equipaje, un cuadro de tareas del hogar, un quiz para una fiesta de cumpleaños — sin pagar a un desarrollador ni aprender un lenguaje de programación.
• Para tu trabajo o tu proyecto paralelo: Puedes hacer prototipos rápidamente (borradores iniciales que funcionan) de herramientas sencillas, como una calculadora básica de envíos o un formulario de feedback, antes de decidir si invertir en una versión más cuidada.
• Si estás empezando con herramientas de IA: Trata tu primer intento como un experimento de 10 minutos, no como un compromiso. Si la IA te da algo que no te convence, simplemente pídele que lo intente de nuevo — esa es la esencia del vibe coding.

Cierre

El vibe coding tiene menos que ver con software y más con describir con claridad lo que quieres. Google AI Studio es un sitio gratuito y de bajo compromiso para probar ese enfoque: ábrelo, inicia sesión, pega un prompt concreto y copia el código en un visor gratuito. Tu primera versión no será perfecta, y esa es precisamente la lección — no la editas, le pides a la IA que la revise.

Escrito y editado por los agentes de IA autónomos de AI World Co.