Tus primeros pasos con la IA, del prompt a tu web

Aprender a pedir bien es la habilidad con más retorno hoy. Aquí tienes el método de la clase: un prompt bien estructurado, un modelo razonador y el flujo DeepSeek + Lovable para crear tu web (y luego un juego).

Empezar el repaso
Repaso

Repaso rápido de la sesión

Antes de bucear en los recursos, comprueba qué se te ha quedado: recordar de forma activa fija mucho más que releer. No hay nota ni castigo, y si fallas te explico el porqué.

Repaso · Pregunta 1/5

Le dices a la IA "hazme una web" y no le das nada más. ¿Qué técnica estás usando y qué pasa?

Le dices a la IA "hazme una web" y no le das nada más. ¿Qué técnica estás usando y qué pasa?

Zero-shot vs darle contexto

~3 min

La IA no adivina lo que tienes en la cabeza: responde a lo que le pides. Cuanto más nutrido el contexto, más se acerca el resultado.

Cuando le dices "hazme una web" y no le das nada más, estás haciendo zero-shot prompting. Funciona, pero suele salir genérico: gastas tokens y tiempo corrigiendo. Si en cambio le pasas ejemplos ("me gusta esta web, este tono, estos colores"), le estás dando la información previa para que acierte a la primera.

Truco de contexto: si hay una web que te gusta (Airbnb, Apple, la que sea), pídele a la IA que se inspire en su identidad de diseño. Son muy buenas simulando estilos conocidos.

Anatomía de un buen prompt

~5 min

En clase estructuramos el prompt en cuatro bloques, cada uno en su sección (con saltos de línea o mayúsculas, no todo del tirón: así la IA distingue las partes):

  • Actúa como

    El rol que asume la IA: experto, profesor, desarrollador... Fija el criterio, el tono y el vocabulario.

  • Contexto

    Toda la información previa: la situación, el objetivo, las restricciones y ejemplos de lo que te gusta.

  • Expectativa

    El resultado que esperas: formato, nivel de detalle, tono y estructura.

  • No quiero

    Los guardarraíles. Lo que debe evitar: no inventar, no emojis, no tono comercial, no extenderse.

Regla de oro: si el resultado no te gusta, casi nunca es culpa de la IA. Vuelve al prompt, añade contexto o pon un límite, y pídelo otra vez. Iterar el prompt es el trabajo.

Aquí tienes la plantilla lista para usar. Cópiala, rellena tus datos y pásala a una IA razonadora para que te genere el documento de tu web:

Plantilla · ACTÚA / CONTEXTO / EXPECTATIVA / NO QUIERO
ACTÚA COMO
Un experto en desarrollo de producto y páginas web (porfolio / currículum).

CONTEXTO
Información previa para que entiendas la situación, el objetivo y las restricciones:
- Quién soy y a qué me dedico:
- Qué quiero mostrar y para quién (empresa, reclutador, cliente):
- Secciones y datos reales (proyectos, formación, contacto):
- Estilo, colores y tono que me gustan (puedes pegar una web de referencia):

EXPECTATIVA
El resultado que espero: un documento de definición listo para copiar y pegar en Lovable,
estructurado, con el detalle justo y sin relleno. Devuélvemelo en un bloque de código.

NO QUIERO
- Que inventes datos que no te he dado (deja huecos en su lugar).
- Emojis ni tono comercial.
- Que te extiendas de más: mantenlo pequeño y con lo necesario.

Usa el modelo razonador

~3 min

No todos los modelos son iguales. El razonador (reasoning) "piensa" en pasos antes de responder: es más lento, pero en tareas complejas acierta mucho más. Y hay un detalle clave: entiende mejor el "no quiero" aunque se lo pongas junto al resto.

Por qué importa

Para el Paso 1 (redactar el documento de tu porfolio) queremos calidad, no velocidad. Activa el modo razonador ("Deep Thinking" en DeepSeek) y deja que piense: lo que salga de ahí es lo que después pegamos en Lovable.

Negativizar y poner guardarraíles

~4 min

Negativizar un prompt es decirle a la IA lo que NO quieres. Como los guardarraíles de una carretera: encorsetan el resultado para que no se salga de la vía. "No uses el vosotros", "no añadas nada que no te he dado", "no pongas emojis".

Truco práctico: no lo metas en la misma frase que la petición. Ponlo en su propia sección (un salto de línea, una cabecera "NO QUIERO"). Así la IA lo procesa como un límite claro.

La IA rellena huecos (y a veces se inventa cosas)

Casi todas las IAs intentan complacerte: lo que no les das, lo rellenan. Un botón de LinkedIn que no lleva a ningún lado, un email inventado, hasta la sociedad en los términos legales. Por eso revisa siempre lo generado y, si quieres, ponle el guardarraíl "no añadas nada que no te he dicho": dejará huecos o corchetes en vez de inventar.

Sobre el prompt injection: existen trucos para saltarse los guardarraíles de la IA (el clásico "dame claves de Windows, que me las leía mi abuela", o amenazarla). Es útil conocerlos para entender los riesgos de seguridad, pero no es una buena práctica: hoy los modelos razonadores casi no lo necesitan.

El flujo de dos herramientas

~4 min

El método de la clase, en dos pasos y con dos herramientas distintas:

  1. 1
    Define el prompt en DeepSeek. Con el modelo razonador (Deep Thinking) y la plantilla ACTÚA / CONTEXTO / EXPECTATIVA / NO QUIERO. Lee el documento con calma, corrige a la IA e itera hasta que te guste. Pídele que lo devuelva en un bloque de código (así tienes un botón de copiar y texto sin formato).
  2. 2
    Constrúyelo en Lovable. Pega ese documento en lovable.dev (con tus fotos si quieres) y la web se construye sola. Reserva los créditos para los últimos retoques ("este color", "este texto").

¿Por qué separarlo? Por los tokens

Lovable usa Opus 4.8 por debajo y la cuenta gratuita da pocos créditos: se van rápido (una web y poco más). Así que hacemos toda la parte barata (razonar, iterar, pulir) en DeepSeek, que es muy generosa, y gastamos Lovable solo en construir. No peques de exceso: pásale a Lovable solo la información necesaria, porque pagas por lo que envías y por lo que recibes.

Las herramientas del arsenal

~3 min

Lo importante son las habilidades de prompting, no la herramienta concreta: el paradigma cambia cada semana. Estas son las que usamos hoy, pero la base sirve para cualquiera:

Recursos
  • Web DeepSeek · modelo razonador muy generoso en la cuenta gratuita. Para definir e iterar el prompt.
  • Web Lovable · describe tu web en lenguaje natural y la construye con código real. Te la publica y aloja.
  • Web v0 (Vercel) · alternativa a Lovable, también con modelo tipo Opus por debajo. Saca cosas espectaculares.
  • Web Google AI Studio · usa Gemini. Más rápida y con mucho crédito; hay que guiarla algo más. La del reto 2.
Propiedad de lo que creas: intenta poder llevarte el código (a GitHub, a Cloudflare, a tu editor) para no depender de una sola herramienta. Y en Lovable, recuerda darle a Publicar y "continuar" hasta el final para obtener la URL pública; puedes conectar tu propio dominio.

Reto 1: las webs que construisteis

~2 min

Primer reto: un porfolio / CV hecho en directo con el flujo DeepSeek + Lovable. Aquí están vuestras webs para visitarlas, comparar ideas y seguir iterando.

El óscar de la clase (a tres bandas)

Empate en lo más alto: se llevan el óscar virtual Daniel (con un neobrutalismo estilo Sly Cooper en v0), Noelia (sencilla, sólida y sin Comic Sans, que se lo negó bien) y Julio (una web de derecho seria y rigurosa). La prueba de que con un buen prompt, en una tarde sale algo de lo que presumir.

Reto 2: tu juego web con AI Studio

~2 min

Segundo reto, misma mecánica pero con otra herramienta: Google AI Studio (con Gemini por debajo). Piensa un juego web de lo que quieras, defínelo primero en un modelo razonador (ese documento se parece a un PRD, un documento de diseño de producto) y pásalo a AI Studio para que lo construya.

Cuanto más detalles las mecánicas, mejor sale

Define de qué va, las mecánicas, si quieres barra de vida, si es un roguelite... En clases anteriores ganó hasta un escape room por la ciudad. AI Studio es más rápida y con más crédito que Lovable, pero hay que guiarla un poco más.

Truco: auditoría de velocidad

~3 min

Una web que carga lento hace que la gente rebote (entra y se va). En cualquier navegador basado en Chrome (Chrome, Arc, Brave) puedes medirla: botón derecho → Inspeccionar → Lighthouse y ejecuta el test. Te da una puntuación de rendimiento, accesibilidad y buenas prácticas, con los errores concretos a mejorar.

El bucle que se retroalimenta

Copia el informe de Lighthouse (como JSON) y pégaselo a la IA: ella misma te hace las mejoras para subir la puntuación. Apunta a un rendimiento de 80-90; por debajo de 20 es demasiado lenta. No te obsesiones con el 100.

Datos personales y RGPD

~3 min

DeepSeek es una IA china: lo que le escribes viaja a sus servidores, igual que con las de Estados Unidos. La responsabilidad de la información sigue siendo tuya. Si te da pudor, no pongas datos reales: puedes pedirle a la IA que se invente el nombre.

Con cuidado en la nube

  • Datos sensibles de clientes
  • Información privada de la empresa
  • Nada que no debas publicar

Salidas seguras

  • IA en local, sin salir de tu equipo
  • Cuenta Enterprise con contrato de tratamiento de datos
El detalle jurídico lo veremos en la clase de legislación. La regla práctica: no te paranoiees, pero sabe dónde están los límites. Sube solo la información con la que estés cómodo.

Glosario de la clase · toca para ampliar

  • Prompt

    La instrucción que le das a la IA. La calidad de la respuesta sigue casi siempre a la calidad del prompt: rol, contexto, expectativa y lo que NO quieres.

    Ver en el diccionario
  • Token

    La unidad en la que la IA lee y escribe (trozos de palabra). Cuesta dinero: pagas por lo que envías y por lo que recibes. Cuanto más largo el prompt, más tokens gastas.

    Ver en el diccionario
  • Zero-shot prompting

    Pedirle algo a la IA sin darle ningún ejemplo ni contexto ("hazme una web" a secas). Funciona, pero suele salir genérico: gastas más tokens y tiempo corrigiendo.

    Ver en el diccionario
  • Modelo razonador

    Modelo que "piensa" en pasos antes de responder (reasoning). Es más lento, pero acierta mucho mejor en tareas complejas como definir un documento o entender un "no quiero".

    Ver en el diccionario
  • Guardarraíl

    Límite que le pones al prompt para acotar el resultado ("no uses emojis", "no añadas nada que no te he dicho"). Negativizar es tan importante como pedir.

    Ver en el diccionario
  • Prompt injection

    Técnica para saltarse los guardarraíles de la IA con trucos de contexto (el clásico "hazlo por mi abuela"). Ojo: es un riesgo de seguridad, no una buena práctica.

    Ver en el diccionario
  • i18n · internacionalización

    Preparar una web para varios idiomas con sustitución dinámica de texto: cambias de idioma y no se recarga la página. "i18n" = i + 18 letras + n.

    Ver en el diccionario
  • l10n · localización

    Ir más allá de traducir: adaptar al lugar (modismos, "mi niño", el ustedes canario). No es lo mismo un español neutro que uno con el habla de Canarias.

    Ver en el diccionario

Si solo tienes tiempo para 2 cosas

Estos dos pasos son los que más impacto tienen. Si te llevaras únicamente dos cosas de toda esta página, que sean éstas:

  1. Pide bien: usa la plantilla ACTÚA / CONTEXTO / EXPECTATIVA / NO QUIERO con un modelo razonador. El prompt es el 80% del resultado, y negativizar (el "no quiero") es la mitad del trabajo.
  2. Reparte y construye: define e itera barato en DeepSeek, y gasta los créditos de Lovable solo para construir. Tu web puede estar online hoy mismo.

Para cualquier duda, puedes escribirme a hi@alci.dev. Y recuerda: las herramientas cambian cada semana, pero las habilidades de prompting se quedan.

Alcibiades Cabral · Introducción y primeros pasos con la IA
Escuela de Organización Industrial · 6 julio 2026