Sesión 2 · El salto a constructor mediante vibe coding¶

Cuaderno del participante — acompaña a la clase bloque a bloque. Ten a mano tu mapa del Taller 1 (mi-mapa-taller-1.txt).

In [ ]:

Copied!





import subprocess, platform, webbrowser

def abrir(url):
    """Abre una dirección web en tu navegador por defecto."""
    webbrowser.open(url)
    print(f"🌐 Abriendo {url} …")

def copiar(texto):
    """Copia el texto al portapapeles (macOS, Windows o Linux)."""
    try:
        sistema = platform.system()
        if sistema == "Darwin":
            subprocess.run(["pbcopy"], input=texto.encode("utf-8"), check=True)
        elif sistema == "Windows":
            subprocess.run(["clip"], input=texto.encode("utf-16-le"), check=True)
        else:
            subprocess.run(["xclip", "-selection", "clipboard"], input=texto.encode("utf-8"), check=True)
        print("📋 Copiado al portapapeles: pégalo con Cmd+V (Mac) o Ctrl+V (Windows).")
    except Exception:
        print("(No he podido copiar automáticamente: selecciona el texto de arriba y cópialo a mano.)")

print("Ayudantes cargados: abrir(url) y copiar(texto)")
import subprocess, platform, webbrowser

def abrir(url):
    """Abre una dirección web en tu navegador por defecto."""
    webbrowser.open(url)
    print(f"🌐 Abriendo {url} …")

def copiar(texto):
    """Copia el texto al portapapeles (macOS, Windows o Linux)."""
    try:
        sistema = platform.system()
        if sistema == "Darwin":
            subprocess.run(["pbcopy"], input=texto.encode("utf-8"), check=True)
        elif sistema == "Windows":
            subprocess.run(["clip"], input=texto.encode("utf-16-le"), check=True)
        else:
            subprocess.run(["xclip", "-selection", "clipboard"], input=texto.encode("utf-8"), check=True)
        print("📋 Copiado al portapapeles: pégalo con Cmd+V (Mac) o Ctrl+V (Windows).")
    except Exception:
        print("(No he podido copiar automáticamente: selecciona el texto de arriba y cópialo a mano.)")

print("Ayudantes cargados: abrir(url) y copiar(texto)")

Bloque 1 · Desmitificando el «vibe coding» (min 0–15)¶

Vibe coding (término acuñado por Andrej Karpathy el 2 de febrero de 2025): programar por intención. Tú describes el problema en tu idioma; la IA escribe el código. Tú: gerente de producto. La IA: ingeniero de software.
El relato honesto (Javier Pastor, Xataka): «es casi mágico… pero exige iteración, paciencia y saber instruir». La V1 sorprende, la V2 frustra un poco, la V3 empieza a parecerse a lo que querías. Así funciona.
TrendFeed (Sebastian Volkis: app en 4 días, ~10.000 $ recurrentes el primer mes, cifra autodeclarada) es el techo excepcional, no la expectativa.

Bloque 2 · El playbook del fundador no técnico (min 15–28)¶

Regla 1 — Define problemas, no funciones: ✗ «una app con base de datos» → ✓ «una app para que dueños de pymes agenden turnos y eviten horas extra».

Regla 2 — El prompt fundador: Problema + Audiencia + 5 funciones núcleo + Criterio de éxito.

Edita la celda con TU idea (mejor si sale de tu mapa del Taller 1) y ejecútala: tu prompt fundador quedará copiado, listo para pegar en la herramienta.

In [ ]:

Copied!





# ✏️ EDITA con tu idea (el ejemplo es el de la clase)
problema  = "En mi clínica dental perdemos pacientes porque los recordatorios de cita se hacen a mano"
audiencia = "Las dos recepcionistas, sin perfil técnico"
funciones = [
    "Calendario de citas",
    "Alta rápida de paciente",
    "Recordatorio automático 24 h antes",
    "Confirmación con un clic",
    "Lista diaria de pacientes no confirmados",
]
criterio  = "La recepcionista gestiona 40 citas diarias sin usar Excel"

if len(funciones) > 5:
    print(f"⚠️ Tienes {len(funciones)} funciones. Cinco, no quince: la V1 es un prototipo. Recorta antes de seguir.\n")

lista = "\n".join(f"{i}. {f}" for i, f in enumerate(funciones, 1))
prompt_fundador = f"""Construye una aplicación web interactiva.

Problema: {problema}.
Audiencia: {audiencia}.
Funciones núcleo (solo estas):
{lista}
Criterio de éxito: {criterio}."""

print(prompt_fundador)
print()
copiar(prompt_fundador)
# ✏️ EDITA con tu idea (el ejemplo es el de la clase)
problema  = "En mi clínica dental perdemos pacientes porque los recordatorios de cita se hacen a mano"
audiencia = "Las dos recepcionistas, sin perfil técnico"
funciones = [
    "Calendario de citas",
    "Alta rápida de paciente",
    "Recordatorio automático 24 h antes",
    "Confirmación con un clic",
    "Lista diaria de pacientes no confirmados",
]
criterio  = "La recepcionista gestiona 40 citas diarias sin usar Excel"

if len(funciones) > 5:
    print(f"⚠️ Tienes {len(funciones)} funciones. Cinco, no quince: la V1 es un prototipo. Recorta antes de seguir.\n")

lista = "\n".join(f"{i}. {f}" for i, f in enumerate(funciones, 1))
prompt_fundador = f"""Construye una aplicación web interactiva.

Problema: {problema}.
Audiencia: {audiencia}.
Funciones núcleo (solo estas):
{lista}
Criterio de éxito: {criterio}."""

print(prompt_fundador)
print()
copiar(prompt_fundador)

Regla 3 — Elige tu herramienta de construcción (las tres valen; ⚠ verificar límites de cada plan):

Herramienta	Cómo construye	Nota
Claude — Artifacts (claude.ai)	Describes la app en el chat y la genera como pieza interactiva al lado; se publica con un enlace	Recomendada para el taller
Gemini — Canvas	Mismo concepto dentro de gemini.google.com	Alternativa en ecosistema Google
ChatGPT — Canvas	Mismo concepto dentro de chatgpt.com	Alternativa en ecosistema OpenAI
Claude Code / Codex	Agentes de código en terminal	Categoría aparte: el siguiente nivel — se ve en el módulo avanzado, hoy no

In [ ]:

Copied!





# Abre tu herramienta para el taller (Claude si dudas — usa tu cuenta de la Sesión 1):
abrir("https://claude.ai")
# abrir("https://gemini.google.com")
# abrir("https://chatgpt.com")
# Abre tu herramienta para el taller (Claude si dudas — usa tu cuenta de la Sesión 1):
abrir("https://claude.ai")
# abrir("https://gemini.google.com")
# abrir("https://chatgpt.com")

Bloque 3 · Demo en vivo (min 28–43)¶

Mientras el facilitador construye (en Claude, con Artifacts), fíjate en tres cosas:

El prompt fundador que escribe (la fórmula en acción).
Cuánto genera la IA de una sola vez.
Qué hace cuando la IA se equivoca: describe el fallo en el chat y deja que lo arregle — sin tocar el código.

El ciclo completo: Intención → Generación → Depuración asistida → Revisión … y vuelta a empezar.

Bloque 4 · Taller 2: tu primer prototipo (min 43–90 · 47 min)¶

Paso	Minutos	Qué hacer
1	0–8	Inicia sesión en tu herramienta (claude.ai recomendado) y abre una conversación nueva
2	8–20	Pega tu prompt fundador (celda de arriba) y genera la V1
3	20–42	Dos iteraciones mínimo: una estética + una de lógica
4	42–47	Publica/comparte y captura tu enlace

Si algo falla: describe lo que ves en el chat («al pulsar guardar no pasa nada») y deja que la IA lo corrija. Si se enreda: «quita esa función y vuelve a la versión que funcionaba».

In [ ]:

Copied!





# ✏️ Prepara tus dos iteraciones ANTES de pedirlas (edita y ejecuta; copia la que toque)
iteracion_estetica = "Cambia los colores a azul marino y blanco, aumenta el tamaño de los botones y da más aire entre elementos."
iteracion_logica   = "Añade un filtro por responsable y ordena la lista por fecha límite, con las vencidas en rojo."

print("Iteración 1 (estética):\n " + iteracion_estetica)
print()
print("Iteración 2 (lógica):\n " + iteracion_logica)
print()
copiar(iteracion_estetica)  # cambia a iteracion_logica cuando llegues a la segunda
# ✏️ Prepara tus dos iteraciones ANTES de pedirlas (edita y ejecuta; copia la que toque)
iteracion_estetica = "Cambia los colores a azul marino y blanco, aumenta el tamaño de los botones y da más aire entre elementos."
iteracion_logica   = "Añade un filtro por responsable y ordena la lista por fecha límite, con las vencidas en rojo."

print("Iteración 1 (estética):\n " + iteracion_estetica)
print()
print("Iteración 2 (lógica):\n " + iteracion_logica)
print()
copiar(iteracion_estetica)  # cambia a iteracion_logica cuando llegues a la segunda

In [ ]:

Copied!





# ✏️ ENTREGABLE: pega el enlace compartible de tu prototipo
# (en Claude: botón Publicar/Compartir del artifact; en Gemini/ChatGPT: Compartir — ⚠ el nombre exacto cambia)
url = ""
proxima_iteracion = "Lo primero que le pediré en la próxima versión"

if url.startswith("http"):
    from pathlib import Path
    Path("mi-prototipo.txt").write_text(
        f"Enlace de mi prototipo: {url}\nPróxima iteración: {proxima_iteracion}\n", encoding="utf-8"
    )
    print(f"🏆 ¡Entregable conseguido! → {url}")
    print("💾 Guardado en mi-prototipo.txt")
else:
    print("Aún no hay enlace válido (debe empezar por http). Paso 4 del taller: botón Publicar/Compartir de tu herramienta.")
# ✏️ ENTREGABLE: pega el enlace compartible de tu prototipo
# (en Claude: botón Publicar/Compartir del artifact; en Gemini/ChatGPT: Compartir — ⚠ el nombre exacto cambia)
url = ""
proxima_iteracion = "Lo primero que le pediré en la próxima versión"

if url.startswith("http"):
    from pathlib import Path
    Path("mi-prototipo.txt").write_text(
        f"Enlace de mi prototipo: {url}\nPróxima iteración: {proxima_iteracion}\n", encoding="utf-8"
    )
    print(f"🏆 ¡Entregable conseguido! → {url}")
    print("💾 Guardado en mi-prototipo.txt")
else:
    print("Aún no hay enlace válido (debe empezar por http). Paso 4 del taller: botón Publicar/Compartir de tu herramienta.")

Bloque 5 · Cierre: liderazgo, gobernanza y hábitos (min 90–105)¶

Co-inteligencia (Ethan Mollick): invita a la IA a la mesa en todos tus procesos — como al mejor becario: incansable, rapidísimo, necesitado de supervisión.
Humano en el bucle, siempre, para juicio crítico y acciones de alto impacto.
El reto de los 15 minutos × 30 días: la celda siguiente genera tu tarjeta de compromiso con las fechas de check-in ya calculadas.

In [ ]:

Copied!





from datetime import date, timedelta
from pathlib import Path

# ✏️ EDITA con tus datos
tarea     = "Preparar los resúmenes de candidaturas"
uso_ia    = "La IA extrae y resume; yo reviso y decido"
companero = "Nombre de tu compañero/a de seguimiento"
contacto  = "su correo o teléfono"
inicio    = date.today()

check15 = inicio + timedelta(days=15)
check30 = inicio + timedelta(days=30)

tarjeta = f"""MI TARJETA DE COMPROMISO · Reto 15 min × 30 días
================================================
La tarea que más odio      : {tarea}
Cómo usaré la IA           : {uso_ia}
Compañero/a de seguimiento : {companero} ({contacto})
Inicio                     : {inicio.strftime('%d/%m/%Y')}
Check-in día 15            : {check15.strftime('%d/%m/%Y')}
Check-in día 30            : {check30.strftime('%d/%m/%Y')}

Reglas: 15 minutos de verdad (temporizador) · una sola tarea ·
registra cada día · si te atascas dos días seguidos, escribe a tu compañero/a.
"""
print(tarjeta)
Path("mi-tarjeta-30-dias.txt").write_text(tarjeta, encoding="utf-8")
print("💾 Guardada en mi-tarjeta-30-dias.txt — imprímela o ponla donde la veas a diario.")
from datetime import date, timedelta
from pathlib import Path

# ✏️ EDITA con tus datos
tarea     = "Preparar los resúmenes de candidaturas"
uso_ia    = "La IA extrae y resume; yo reviso y decido"
companero = "Nombre de tu compañero/a de seguimiento"
contacto  = "su correo o teléfono"
inicio    = date.today()

check15 = inicio + timedelta(days=15)
check30 = inicio + timedelta(days=30)

tarjeta = f"""MI TARJETA DE COMPROMISO · Reto 15 min × 30 días
================================================
La tarea que más odio      : {tarea}
Cómo usaré la IA           : {uso_ia}
Compañero/a de seguimiento : {companero} ({contacto})
Inicio                     : {inicio.strftime('%d/%m/%Y')}
Check-in día 15            : {check15.strftime('%d/%m/%Y')}
Check-in día 30            : {check30.strftime('%d/%m/%Y')}

Reglas: 15 minutos de verdad (temporizador) · una sola tarea ·
registra cada día · si te atascas dos días seguidos, escribe a tu compañero/a.
"""
print(tarjeta)
Path("mi-tarjeta-30-dias.txt").write_text(tarjeta, encoding="utf-8")
print("💾 Guardada en mi-tarjeta-30-dias.txt — imprímela o ponla donde la veas a diario.")

De usuario a constructor ✅¶

Ya tienes: un marco para la ansiedad (AWARE), una fórmula para instruir, un flujo mapeado, un perímetro de datos y una aplicación con enlace construida por ti.

¿Quieres ir más allá? El módulo avanzado te enseña a llevar la IA a tus archivos y sistemas: 03-avanzado-claude-code-skills-mcp.ipynb.