⚡ Vibe coding con ChatGPT (Parte 2)

De la idea al widget listo para usar… en minutos.

En la Parte 1 vimos qué es el vibe coding y cómo funciona. Hoy vamos a pasar a la acción (sin tocar código) y crear herramientas que puedes poner hoy mismo en tu web.

La clave es pedírselo a ChatGPT como si se lo explicaras a un colega. Directo, claro y sin tecnicismos.

¿Qué resuelves?

La mayoría de quienes ya tienen una página web creen que para añadir algo nuevo (un widget, un estimador, un recomendador) necesitan contratar a un programador, gastar dinero y esperar semanas sin saber si dará resultado. Ese es el freno.

Con vibe coding, la historia cambia. Puedes probar ideas rápidas, crear prototipos funcionales y ver cómo se verían en tu web sin depender de nadie. Si funciona, lo integras. Si no, lo ajustas en minutos.

Veámoslo en acción.

Ejemplo 1 - Estimador de tiempo para cursos online

Tienes una página de cursos y quieres dar a tus alumnos potenciales una forma sencilla de calcular cuánto tardarán en completarlos según su disponibilidad semanal.

Por qué sirve: Reduce la incertidumbre (“¿cuánto tardaré en acabar?”) y les da un empujón para inscribirse.

Prompt:

Quiero un widget para mi página de ventas llamado “¿Cuánto tardaré en terminar?” El usuario elige cuántas horas puede dedicar por semana (entre 1 y 10) con una barra deslizable y esta calcula automáticamente las semanas usando 120 horas como base (que pueda cambiarse fácil). Muestra el resultado en grande. Estilo igual que mi web: usa colores, tipografía y botones de esta URL: <tu_url>.

Una vez tienes el código, puedes ejecutarlo y ajustar lo que necesites.

Y si no quieres tocar el código de forma manual, también puedes pedir los cambios hablando con la AI de manera natural y conversacional, igual que cuando lo creaste.

Esa es la base. Con este mismo flujo puedes probar cualquier idea, defines lo que quieres, lo generas, lo ajustas y lo integras.

Para que lo veas más claro, aquí van un par de ejemplos más en otros contextos.

Ejemplo 2 - Configurador de “Bundle & Ahorro”

Tu e-commerce necesita incentivar a los clientes a comprar más de un producto mostrando claramente el ahorro.

Por qué sirve: Aumenta el ticket medio al mostrar de forma inmediata cuánto ahorran.

Prompt:

Hazme un configurador llamado “Arma tu pack y ahorra” para mi e-commerce. Incluye 6 productos de skin care con checkbox y precio:

• Lumina Hydrating Cream — $22

• PureGlow Vitamin C Serum — $28

• Velura Tinted Moisturizer — $18

• SkinNova BHA Exfoliant — $32

• AquaMist Facial Toner — $15

• Soléa Daily Sunscreen SPF 50 — $26

Aplica 10% de descuento si eligen 2 productos, 15% si eligen 3 o más. Muestra total, ahorro y precio por unidad. El estilo debe ser igual que mi web (<tu_url>), responsive y con eventos de analytics para trackear uso y clics en “Añadir al carrito”.

Ejemplo 3 - Recomendador de plato según el tiempo

En un restaurante, puedes facilitar que los clientes elijan platos en función del tiempo que tienen para comer.

Por qué sirve: Reduce la indecisión y acelera la rotación de mesas, mejorando la experiencia.

Prompt:

Quiero un widget pequeño para mi página que se llame “¿Qué como hoy?”. La idea es que se vea como una tarjetita compacta, no que ocupe toda la pantalla. Que el usuario pueda elegir cuánto tiempo tiene para comer (15, 30, 40 o 60 minutos), y según eso muestre platos que se preparan en ese tiempo o menos, con precio y una descripción corta. También quiero que tenga filtros para comida vegetariana, vegana y sin gluten, que se puedan combinar. Y un botón de “Ver carta completa” que abra una lista con todos los platos. Que el estilo sea limpio y sencillo, como algo que puedes embeber en una columna de la web sin que se vea gigante.

Estos son solo algunos ejemplos. Puedes llevar el mismo flujo a lo que realmente necesites: un dashboard interno de métricas, un pequeño sistema de reservas, un generador de propuestas rápidas, un comparador de planes o incluso un widget para productividad personal.

La lógica es la misma: defines → generas → ajustas → integras.

Cómo pegarlo en tu web

Una vez que estés contento con el resultado, integrarlo en tu web es tan sencillo como copiar y pegar el bloque de código. Mira cómo hacerlo según tu plataforma:

WordPress (Bloques)

1. Copia el código que te dio ChatGPT.

2. En tu página → añade un bloque “HTML personalizado” → pega → Actualizar.

3. Si te entregó un .zip (plugin), ve a Plugins → Añadir nuevo → Subir plugin → Activar y añade el bloque del plugin donde quieras.

Webflow

1. En el diseño, arrastra un Embed (</>) donde quieras el widget.

2. Pega el código → Save & Close → Publish.

3. Si te dio un archivo index.html, súbelo como Página estática o insértalo vía iframe.

Squarespace

1. Edita la sección → Add Block → Code.

2. Pega el HTML/JS → Apply → Save.

3. Si usas una versión con iframe, asegúrate de que el dominio esté permitido en Settings → Advanced.

💡 Tip Pro

Si al pegar el código no carga (por errores de “contenido mixto” http/https o porque tu plantilla bloquea scripts en línea), pide a ChatGPT:

"Que el resultado sea un único bloque que puedas incrustar tal cual, sin depender de archivos externos, y sin usar scripts en línea si la plataforma los bloquea."

Y si prefieres no pegar el código tú mismo, no pasa nada. Igual puedes usar este flujo para validar la idea, ver cómo funcionaría en tu web y luego entregarle las instrucciones claras (y hasta el bloque generado) a tu programador. Así llegas con algo probado y reduces el riesgo de perder tiempo y dinero.

Idea clave

No es cuestión de saber programar, sino de explicar con claridad qué quieres, dar contexto visual y funcional, y pedir el resultado listo para integrar. Esa es la diferencia entre un experimento y algo que ya puedes usar.

En la próxima parte, veremos cómo crear un chat de voz dentro de un GPT personalizado que sea realmente útil para tu audiencia.