Vibe Coding con inteligencia artificial: crea una app con Google AI Studio y auditala con OWASP TOP 10

01 ¿Cómo funciona el Vibe Coding?— La metodología para construir software con IA sin programar

El Vibe Coding con IA es una forma de crear software donde tú describes lo que quieres en lenguaje natural y la IA genera el código por ti. No reemplaza el pensamiento lógico ni la capacidad de tomar decisiones, pero sí elimina la barrera de tener que dominar un lenguaje de programación para materializar una idea.

El término lo propuso Andrej Karpathy —cofundador de OpenAI y ex director de IA en Tesla— en febrero de 2025. Se popularizó tan rápido que ese mismo mes fue incorporado al Diccionario Merriam-Webster.

“Una técnica donde el programador describe el problema en pocas oraciones, la IA genera el software, y el rol humano pasa de escribir código a guiar, probar y refinar lo que el modelo produce.”Wikipedia, 2025 — basado en la definición de Karpathy

¿Por qué funciona?

La clave está en que los modelos de lenguaje grandes (LLMs) actuales fueron entrenados con enormes cantidades de código real. Cuando les describes una función, un módulo o una arquitectura completa, el modelo puede generar código funcional porque “ha visto” patrones similares millones de veces. No inventa: reconoce patrones y los adapta a tu descripción.

Pero hay una condición: la calidad del resultado depende directamente de la calidad de lo que describes. Un prompt vago produce código vago. Un prompt preciso, con restricciones claras y formato de salida definido, produce código estructurado y coherente.

Lo más importante: el Vibe Coding con inteligencia artificial no es “pedirle a la IA que haga todo”. Es saber qué quieres construir, dividirlo en partes, describir cada parte con precisión y revisar críticamente lo que te devuelve. La IA genera; tú diriges.

La herramienta: Google AI Studio

Google AI Studio es la plataforma gratuita de Google para usar los modelos Gemini directamente desde el navegador. No necesitas instalar nada ni tener tarjeta de crédito, solo una cuenta de Google.

Para Vibe Coding tiene ventajas claras:

• Ventana de contexto de hasta un millón de tokens: puedes mantener todo el contexto de un proyecto complejo en una sola sesión sin que el modelo “olvide” lo anterior.
• Multimodal: puedes pasarle imágenes, PDFs o capturas de pantalla junto con tus prompts. Si tienes un diseño en papel o un diagrama, puedes subirlo y la IA lo considera.
• System Prompt: puedes definir instrucciones base que se aplican a toda la sesión, lo que da coherencia al código generado en múltiples iteraciones.
• Gratuito: acceso sin costo en todas las regiones disponibles, ideal para proyectos académicos y prototipos (Google Cloud, 2026).

Cómo estructurar un buen prompt para Vibe Coding con IA

Esta es la parte que más impacta en el resultado. Un prompt de Vibe Coding con inteligencia artificial bien construido tiene cinco elementos:

1. Rol: qué tipo de experto debe ser la IA en esta respuesta. “Actúa como un Backend Engineer Senior con experiencia en Node.js y APIs REST.”
2. Contexto: qué estás construyendo y para qué. Cuanto más específico, mejor.
3. Objetivo: qué resultado concreto esperas de este prompt. No “ayúdame con el backend” sino “diseña los endpoints REST del módulo de autenticación con JWT y roles admin/editor”.
4. Restricciones: lo que NO debe incluir. Esto es igual de importante que el objetivo. “No uses Redis, no uses microservicios, no uses GraphQL.”
5. Formato de salida: cómo quieres que entregue el resultado. Árbol de carpetas, tabla de endpoints, schema de Prisma, etc.

Error común: describir todo en un solo prompt gigante esperando que la IA genere la aplicación completa de una vez. Funciona mejor dividir el proyecto en módulos y trabajar cada uno por separado, iterando hasta que quede bien antes de pasar al siguiente.

El ciclo de trabajo real para el Vibe Coding con IA

1 Define la idea con claridad antes de abrir AI Studio

¿Qué problema resuelve la app? ¿Quién la usa? ¿Qué hace en cada pantalla? Sin esta base, los prompts serán vagos y el código también. Escribe un resumen de media página antes de empezar.

2 Configura el System Prompt en Google AI Studio

Entra a aistudio.google.com, selecciona Gemini y activa el System Prompt. Ahí define el contexto global del proyecto y las restricciones tecnológicas que aplican a toda la sesión.

3 Empieza por la arquitectura, no por el código

El primer prompt debe pedir la estructura general: carpetas, módulos, decisiones de stack, flujo de datos. Si la arquitectura está bien, el código que venga después encaja solo. Si está mal, cada módulo va a tener problemas.

4 Genera módulo por módulo y prueba cada uno

Base de datos, autenticación, APIs, frontend — cada uno en su propio prompt y su propio ciclo de revisión. Prueba que funcione antes de pasar al siguiente. Un error acumulado en el módulo de base de datos contamina todo lo que viene después.

5 Cuando algo falla, describe el error con precisión

No digas “no funciona”. Di exactamente qué falla, en qué endpoint, con qué datos de prueba y qué devuelve. Cuanto más específico es el error que le describes a la IA, más precisa es la corrección que genera.

6 Integra los módulos y despliega

Cuando cada parte funciona por separado, intégralas. Para desplegar en Render: crea un Web Service, conecta el repositorio, define el build command y el start command, agrega la base de datos PostgreSQL y configura las variables de entorno. En menos de 15 minutos está en producción.

---

02 El proyecto que construimos— Una plataforma SaaS de redes sociales generada con IA

Qué construimos y cómo quedó

Para aplicar el Vibe Coding con inteligencia artificial en un caso real, construimos una plataforma de gestión de redes sociales para concesionarios de motos. Incluye calendario de contenido con drag and drop, generador de copies e ideas con IA, dashboard de métricas y gestión de campañas publicitarias para Instagram, TikTok, YouTube, Facebook y X/Twitter.

Puedes verla aquí: calendario-redes-sociales.onrender.com
Código fuente: github.com/FernandoMartinez018/calendario-redes-sociales-hacking-etico

El stack que definimos desde el primer prompt

La restricción más importante fue la simplicidad: un solo proyecto, un solo servidor, sin microservicios ni Redis ni colas. Todo en un monolito desplegable en Render.

Frontend

React 19 + Vite + TailwindCSS + shadcn/ui

Backend

Node.js 20 + Express 4 + TypeScript

Base de datos

PostgreSQL + Prisma ORM

Inteligencia artificial

OpenAI API

Multimedia

Cloudinary

Autenticación

JWT + bcrypt + roles

Automatización

node-cron

Deploy

Render (1 Web Service)

Los cinco prompts maestros que usamos

En lugar de un prompt gigante, dividimos el proyecto en cinco prompts especializados. Cada uno generó una capa completa del sistema. Así funciona el Vibe Coding con IA cuando se estructura bien: módulo a módulo, con precisión.

Prompt #1 · Arquitectura general

Prompt #1 — Arquitectura General Monolítica (Node.js + PostgreSQL + Render)
ROL

Actúa como un Software Architect Senior con 15 años de experiencia construyendo aplicaciones SaaS monolíticas modernas con Node.js, PostgreSQL y despliegues simplificados en Render. Especialista en arquitecturas fullstack simples, mantenibles y optimizadas para desarrollo rápido mediante vibe coding y AI-assisted development.

CONTEXTO

Estoy construyendo una plataforma SaaS de gestión de redes sociales enfocada en concesionarios y venta de motos.

La aplicación debe permitir:

Gestión de calendario de contenido para:
Instagram
TikTok
YouTube
Facebook
X/Twitter
Creación y programación de:
reels
historias
posts
shorts
campañas ads
Generación automática de:
copies
hashtags
títulos
captions
prompts creativos
ideas de campañas
Generación automática de 20 publicaciones mensuales.
Dashboard de métricas:
likes
engagement
reposts
shares
followers
alcance
CTR
Gestión de campañas:
Meta Ads
TikTok Ads
Google Ads
IA interna que:
recopila prompts,
genera copies,
genera ideas visuales,
recomienda horarios.

La aplicación debe ser SIMPLE.

NO quiero:

microservicios,
colas,
Redis,
Kafka,
arquitectura distribuida,
complejidad innecesaria.

TODO debe vivir:

en un único proyecto Node.js,
con frontend y backend juntos,
usando PostgreSQL,
desplegable fácilmente en Render.
OBJETIVO

Diseñar una arquitectura fullstack monolítica simple, moderna y escalable moderadamente, optimizada para:

velocidad de desarrollo,
mantenimiento sencillo,
bajo costo,
despliegue simple,
y desarrollo mediante vibe coding.
REQUERIMIENTOS DE ENTRADA

La aplicación debe incluir:

Módulos principales
Autenticación
Dashboard
Calendario Social
Generador IA
Gestión de publicaciones
Gestión de campañas Ads
Analytics
Configuración
Biblioteca multimedia
Gestión de prompts IA
Funcionalidades
Programación de publicaciones
Generación automática de copies
Generación de hashtags
Recomendación de horarios
Dashboard de métricas
Subida de imágenes/videos
Calendario drag and drop
Generación automática de contenido mensual
RESTRICCIONES (NO NEGOCIABLES)
NO usar microservicios.
NO usar Redis.
NO usar colas/event brokers.
NO usar Docker obligatorio.
NO usar Kubernetes.
NO usar arquitectura hexagonal compleja.
NO usar CQRS.
NO usar GraphQL.
NO usar múltiples repositorios.
Debe ser un único proyecto fullstack.
Debe poder desplegarse en Render con:
un único Web Service
una base PostgreSQL
Debe ser entendible para un desarrollador mid-level.
Debe priorizar simplicidad sobre hiper-escalabilidad.
STACK FORZADO
Frontend
React 19
TypeScript
Vite
TailwindCSS
shadcn/ui
Backend
Node.js 20
Express 4
TypeScript
Base de datos
PostgreSQL
ORM
Prisma ORM
IA
OpenAI API
Deploy
Render
Charts
Recharts
Auth
JWT simple con bcrypt
Uploads
Cloudinary
FORMATO DE SALIDA (estricto)
1. Arquitectura General

Explicar:

por qué un monolito es correcto,
cómo convivirán frontend y backend,
flujo de datos,
estructura simple del proyecto.
2. Diagrama de capas ASCII

Mostrar:

Browser
↓
React Frontend
↓
Express API
↓
Services
↓
Prisma ORM
↓
PostgreSQL

Y conexiones externas:

OpenAI
Cloudinary
APIs sociales
3. Estructura de carpetas completa

Generar árbol completo:

frontend
backend
shared
prisma
uploads
scripts

Con explicación carpeta por carpeta.

4. Módulos del sistema

Tabla:

| Módulo | Responsabilidad | Tablas | APIs externas |

5. Modelo de autenticación

Explicar:

JWT
refresh token
bcrypt
middleware auth
roles:
admin
editor
6. Arquitectura del calendario social

Explicar:

drag and drop
programación
estados:
draft
scheduled
published
failed

Modelo de publicación.

7. Arquitectura IA

Explicar:

generación de copies
prompts
recomendaciones
generación de hashtags
reutilización de prompts
historial IA
8. Dashboard y analytics

Explicar:

métricas
KPIs
gráficos
agregaciones SQL
rendimiento sin Redis
9. Estrategia de despliegue en Render

Explicar:

build command
start command
variables de entorno
PostgreSQL
almacenamiento multimedia
10. Trade-offs arquitectónicos

Mínimo 10 trade-offs.

Ejemplo:

Decisión

Monolito Node.js

Ventaja

Desarrollo rápido.

Desventaja

Escalabilidad horizontal limitada.

11. Roadmap técnico

Fase 1:

MVP

Fase 2:

IA avanzada

Fase 3:

automatizaciones
CRITERIOS DE ACEPTACIÓN

La respuesta solo es válida si:

NO usa microservicios.
NO usa Redis.
TODO cabe en Render.
Frontend y backend viven juntos.
Prisma es el único ORM.
PostgreSQL es la única base de datos.
Existe una arquitectura clara para:
calendario,
IA,
métricas,
publicaciones,
campañas ads.
Todo está optimizado para simplicidad.

---

03 Pruebas de seguridad: OWASP Top 10

Por qué hacerle pruebas de seguridad al código generado por IA

Según daily.dev (2026), hasta el 45% del código generado por IA contiene vulnerabilidades de seguridad que no son evidentes a simple vista. La IA incorpora los patrones que conoce, pero no siempre aplica las mejores prácticas de seguridad a menos que los prompts las especifiquen explícitamente. Por eso, después de construir con Vibe Coding con IA, la siguiente pregunta obligatoria es: ¿qué tan seguro quedó?

El marco que usamos para responderla fue el OWASP Top 10 – 2021: las diez categorías de vulnerabilidades más críticas en aplicaciones web, definidas por la Open Web Application Security Project. Es el estándar de referencia en hacking ético y auditoría de aplicaciones web.

Las herramientas del pen testing

• OWASP ZAP: herramienta gratuita de análisis automático de vulnerabilidades. Lanza payloads sobre todos los endpoints y formularios detectados y reporta lo que encuentra.
• curl desde PowerShell: para pruebas manuales de conectividad y análisis de headers HTTP.
• DevTools del navegador: inspección de tráfico, respuestas del servidor y comportamiento de la app en tiempo real.
• Análisis manual: algunos tests no se pueden automatizar. El comportamiento del login ante intentos fallidos, por ejemplo, requiere prueba directa.

Las 10 categorías y cómo testear cada una

Código	Categoría	Qué se busca	Herramienta
A01	Broken Access Control	Acceso a recursos sin permisos	Manual / ZAP
A02	Cryptographic Failures	Tráfico sin cifrar, datos expuestos	curl / ZAP
A03	Injection	SQL Injection, XSS, Command Injection	ZAP Active Scan
A04	Insecure Design	Fallas de diseño como fuerza bruta posible	Manual
A05	Security Misconfiguration	Headers HTTP de seguridad ausentes	ZAP / curl
A06	Vulnerable Components	Stack expuesto, versiones con CVEs	ZAP / DevTools
A07	Authentication Failures	XSS en login, sesiones débiles	Manual / ZAP
A08	Integrity Failures	Recursos sin SRI, dependencias inseguras	DevTools / ZAP
A09	Logging Failures	Errores que exponen info interna	Manual / ZAP
A10	Server-Side Request Forgery	Parámetros que aceptan URLs arbitrarias	Manual / ZAP

Resultados: qué encontramos en nuestra app

A01 · Broken Access Control

Sin vulnerabilidad

Intentamos acceder directamente al endpoint /wp-json/wp/v2/users para enumerar usuarios. Render bloqueó el acceso correctamente. La app no está sobre WordPress, y los controles de acceso del servidor funcionan.Herramienta: navegador · acceso manual

A02 · Cryptographic Failures

HTTPS correcto

El sitio usa TLS 1.3 y redirige automáticamente desde HTTP. No encontramos datos sensibles en texto plano en ninguna respuesta.Herramienta: curl (PowerShell)

# Test básico de cifrado
curl -v http://calendario-redes-sociales.onrender.com/
→ 301 Moved Permanently → redirige a HTTPS ✓

curl -v https://calendario-redes-sociales.onrender.com/
→ 200 OK · TLS 1.3 · Certificado válido ✓

A03 · Injection

Riesgo bajo — Prisma ORM mitiga SQL Injection

OWASP ZAP lanzó payloads de SQL Injection, XSS y Command Injection sobre todos los formularios. Prisma ORM parametriza automáticamente todas las consultas, eliminando el riesgo de SQL Injection clásico. ZAP detectó que algunos mensajes de error devolvían más información del sistema de lo recomendable.Herramienta: OWASP ZAP · Active Scan

A04 · Insecure Design

Vulnerabilidad encontrada El login no bloquea intentos fallidos

Probamos el formulario de login con múltiples credenciales incorrectas seguidas. La app no bloqueó al usuario, no mostró CAPTCHA y no agregó ninguna demora. Esto permite automatizar un ataque de fuerza bruta sin fricción:

• Sin límite de intentos por IP o por cuenta
• Sin timeout entre intentos fallidos
• Sin notificación al usuario sobre actividad sospechosa

Herramienta: análisis manual · navegador

A05 · Security Misconfiguration

Headers de seguridad incompletos

OWASP ZAP detectó ausencia de headers HTTP críticos:

• Content-Security-Policy: no presente → facilita XSS al permitir cargar recursos externos sin restricción.
• X-Frame-Options: ausente → la app puede embeberse en un iframe para clickjacking.
• Referrer-Policy y Permissions-Policy: no configurados.

Solo el header Strict-Transport-Security (HSTS) estaba activo, activado automáticamente por Render.Herramienta: OWASP ZAP · revisión de headers HTTP

A06 · Vulnerable Components

Expone el stack tecnológico

El header X-Powered-By y algunos mensajes de error revelaban el framework y versiones usadas. Esto le da a un atacante información para buscar CVEs específicos de esas versiones. No encontramos dependencias con CVEs críticos activos al momento de la prueba.Herramienta: OWASP ZAP · DevTools

A07 · Authentication Failures

XSS en campos de entrada

Insertamos payloads de Cross-Site Scripting manualmente en campos de formulario. Algunos reflejaban el script en la respuesta sin sanitizar. Payloads probados: <script>alert('XSS')</script> y variantes con URL encoding y Base64.Herramienta: pruebas manuales · OWASP ZAP

A08 · Integrity Failures

Sin Subresource Integrity en recursos externos

No encontramos uso de SRI para scripts y estilos cargados desde CDNs externos. Sin CVEs críticos activos en las dependencias al momento de la prueba.Herramienta: DevTools · OWASP ZAP

A09 · Logging Failures

Errores inconsistentes: algunos exponen info interna

Enviamos formularios con datos inválidos y payloads de inyección. En algunos casos la app respondía limpiamente; en otros devolvió trazas de error con detalles del sistema visibles en la respuesta HTTP. El manejo de excepciones no es uniforme en toda la aplicación.Herramienta: pruebas manuales · OWASP ZAP

A10 · Server-Side Request Forgery

Sin evidencia de SSRF

No encontramos parámetros que aceptaran URLs arbitrarias ni funcionalidades que hicieran peticiones servidor-a-servidor configurables por el usuario. El stack monolítico reduce considerablemente esta superficie de ataque.Herramienta: DevTools · OWASP ZAP · análisis manual

Resumen de hallazgos

3Vulnerabilidades críticas

3Riesgo medio

4Sin vulnerabilidad activa

10Categorías OWASP evaluadas

Herramientas utilizadas: OWASP ZAP · curl · DevTools · análisis manual

---

Lo que aprendimos

El Vibe Coding con inteligencia artificial funciona. Permite construir aplicaciones reales y complejas sin saber programar, siempre que sepas estructurar bien los prompts y revisar críticamente lo que la IA genera. Las cosas que salieron bien en las pruebas de seguridad —HTTPS, Prisma contra SQL Injection, JWT con bcrypt— funcionaron porque los prompts las pedían explícitamente. Las que fallaron —fuerza bruta sin límite, headers incompletos, XSS— fallaron porque ningún prompt de arquitectura general las cubre por defecto.

La conclusión práctica: si construyes con Vibe Coding con inteligencia artificial, auditalo con OWASP. No como un paso opcional al final, sino como parte del proceso. El Vibe Coding con inteligencia artificial te da velocidad para construir; el pen testing te da la confianza para desplegarlo.

Todo el código está en GitHub y la app corre en Render. Los cinco prompts están en este artículo. Si quieres replicarlo, ya tienes todo lo que necesitas para empezar.

Créditos

Autores Brayan Camilo Miranda – Nicolás Buitrago Bogotá – Luis Fernando Martínez

Editores Magister Ingeniero Pinzón –

Código: UCIAG-7

UniversidadUniversidad Central

Fuentes

• Brennan, K. (2026, abril). Vibe coding may offer insight into our AI future. The Harvard Gazette. news.harvard.edu
• DataCamp. (2025, diciembre). ¿Qué es la ingeniería de prompts? Una guía detallada para 2026. datacamp.com
• daily.dev. (2026). Vibe coding in 2026: How AI is changing the way developers write code. daily.dev
• Ecosistema Startup. (2026). Google AI Studio: qué es y para qué sirve en 2026. ecosistemastartup.com
• Founderz. (2025). Prompt engineering: mejora la IA creativa. founderz.com
• Generative, Inc. (2025, octubre). Vibe coding: The future of intuitive software development. generative.inc
• Google Cloud. (2025). Vibe coding explained: Tools and guides. cloud.google.com
• Google Cloud. (2026). Más de 10 herramientas de IA sin coste económico para el 2026. cloud.google.com
• IBM. (2025a). What is vibe coding? IBM Think. ibm.com
• IBM. (2025b). ¿Qué es el prompt engineering? IBM Think. ibm.com
• index.dev. (2025). How vibe coding is changing software development in 2025. index.dev
• Infobae Tecno. (2026, marzo 17). Cómo funciona Google AI Studio, la herramienta para crear aplicaciones con Gemini. infobae.com
• OWASP Foundation. (2021). OWASP Top 10. owasp.org
• OWASP Foundation. (2023). OWASP ZAP. owasp.org
• OWASP Foundation. (2023). OWASP Web Security Testing Guide. owasp.org
• ICANN. (s.f.). WHOIS lookup. lookup.icann.org