alci.dev/en

Tu primer prototipo con IA, del PRD a la web publicada

La clase en la que cada uno construyó y publicó su portfolio en dos horas: definir con un modelo razonador (DeepSeek), ejecutar con una herramienta no-code (Lovable o v0), y las técnicas de prompting que separan un resultado genérico de uno tuyo.

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/4

Vas a definir el PRD de tu producto. ¿Qué tipo de modelo conviene activar?

Vas a definir el PRD de tu producto. ¿Qué tipo de modelo conviene activar?

Gobernar la IA (y no al revés)

~4 min

Hoy hacer un mock-up de cartón pluma cuesta casi lo mismo que hacer algo funcional, así que prototipamos construyendo de verdad. Pero antes, tres ideas que marcan toda la sesión:

Las tres ideas de la sesión
  1. 01 Genérico por defecto

    Si le pides algo a la IA sin definir, construye de forma genérica: emojis, guion largo, diseño de plantilla. Se le huele de lejos.

  2. 02 Gobernar nosotros a la IA

    Lo que mejor sabe hacer la IA es complacer. Si no marcas la intención, decide ella: añade funcionalidades, inventa datos y te sorprende. La creatividad, mejor controlada.

  3. 03 La pregunta de siempre

    ¿La necesidad existe? ¿Lo que le damos la resuelve? Un prototipo sirve para validar eso de forma temprana, no para acumular funcionalidades que nadie pidió.

El e-commerce de tornillos que nadie iba a vender

Un alumno construyó un e-commerce precioso de algo que no pensaba vender. "Mira qué guapa está la página." Ya, ¿pero para qué la quieres? La mayoría de aplicaciones que usas a diario tienen un 80% de funcionalidades que nadie toca (¿has enviado alguna vez las videonotas circulares de WhatsApp?). Antes de la IA, cada funcionalidad de más costaba semanas y decenas de miles de euros; ahora casi no cuesta dinero, pero sigue mareando al usuario y sin responder a ninguna necesidad.

Un prototipo resuelve dos preguntas, siempre: ¿la necesidad existe? y ¿lo que le damos la resuelve? Todo lo demás es decoración.

Modelo razonador vs modelo instantáneo

~5 min

La IA rellena huecos por probabilidad: parece que piensa, pero funciona prediciendo la siguiente palabra. Los primeros modelos respondían lo primero que inferían. Hace un par de años se descubrió que si el modelo, antes de responder, se cuestiona cuál es tu intención (una capa de reflexión, una especie de auto-prompt), los resultados mejoran mucho. Eso es un modelo razonador.

Instantáneo

Inferencia rápida

Responde al momento con lo que tiene autocontenido en el modelo. Barato y rápido.

Para qué va bien: corregir ortografía, reescribir un email, respuestas de trámite. Para qué no: nada donde alucinar salga caro (tu declaración de la renta, por ejemplo).

Ejemplos: Gemini Flash, GPT Luna, Claude Haiku.

Razonador

Piensa antes de responder

Analiza qué le pides y qué esperas de vuelta antes de redactar. Más lento, consume más tokens, respuestas más precisas y elaboradas.

Para qué va bien: definir, planificar, analizar documentos, todo lo que exige estructura.

Ejemplos: DeepSeek con Deep Thinking, GPT Sol, Claude Fable y Opus, Gemini Pro.

Por qué importa

Cuanto más tiempo de cómputo le das a la IA, mejores respuestas y más caras: por eso una suscripción de 20 euros te pone límites antes con un modelo razonador. Saber cuándo usar qué modelo es criterio profesional, no un detalle técnico. Y llegará un orquestador que elija por ti (ya se pilotó en ChatGPT, salió regular), pero hoy eliges tú.

Recursos
  • Web DeepSeek · la IA que usamos para definir: activa Deep Thinking (pensamiento profundo) y tiene un umbral gratuito muy generoso.

Zero-shot, few-shot y guardarraíles

~5 min

Zero-shot es pedir a pelo: "quiero un informe trimestral", cuatro archivos y a correr. La IA te devuelve algo, tú corriges ("cambia esto, esto y esto"), vuelve a fallar, te cabreas. Ese rifirrafe quema tiempo y tokens.

Few-shot es darle contexto y ejemplos antes de pedir: "inspírate en el informe del trimestre pasado". Como con alguien recién contratado: sin contexto, te pinta el informe naranja y verde aunque tus colores sean amarillo y rojo. Y los guardarraíles son la parte del prompt donde negativizas: lo que NO quieres, para no tener que corregirlo después.

El prompting está cambiando: hace tres años, desordenar las palabras cambiaba la respuesta; hoy los modelos infieren tu intención aunque escribas de aquella manera (mi madre le habla igual que siempre a ChatGPT y cada vez le responde mejor). Pero la base (contexto, resultado esperado, guardarraíles) sigue siendo lo que separa un resultado genérico de uno tuyo, con cualquier herramienta.
Recursos

El prompt de la clase: un PRD en un codeblock

~6 min

La técnica que usamos tiene cuatro partes: actúa como (acotas el rol: no responde igual un especialista en portfolios que una IA generalista), resultado esperado (un PRD, el documento de requisitos del producto, dentro de un codeblock para copiarlo sin formatos heredados), contexto (todo lo que eres, en bruto) y no quiero (los guardarraíles).

El prompt de la sesión · pégalo en DeepSeek con Deep Thinking activado 
ACTÚA COMO especialista en la generación de portfolios
profesionales de alto impacto y modernos, que sean vistosos y tengan
buenas animaciones estilo Disney o Apple.

RESULTADO ESPERADO:
Un PRD para el equipo de desarrollo.
Dámelo en un codeblock.

CONTEXTO:
(Pega aquí toda la información sobre ti: tu CV, tu perfil de LinkedIn,
tu manual de marca... en bruto, sin miedo. Que te represente.)

NO QUIERO (GUARDARRAÍL):
- No quiero emojis.
- No quiero un tono formal serio.
- No quiero que uses el vosotros (soy canario).
- No quiero que el PRD supere los 1200 caracteres.
- No añadas datos que no tengas (emails, URLs): pregúntame antes.
Por qué importa

Dos detalles que ahorran créditos después: poda el PRD (lo que dudes, fuera; la definición técnica de tecnologías, fuera) porque cuanto más corto, menos tokens consume al ejecutar. Y el codeblock no es decoración: copia el texto sin negritas ni tipografías heredadas, listo para pegar donde sea.

Definir y ejecutar: partir el coste en dos

~5 min

Todo lo de hoy se resume en dos fases: definir con un modelo razonador potente (la concepción es lo que más calidad exige) y ejecutar con la herramienta que construye y publica. Copias el PRD del codeblock, lo pegas en Lovable o v0, respondes sus preguntas y dejas que cocine. Si pagas una sola herramienta buena (Claude, ChatGPT), puedes hacerlo todo en ella; con cuentas gratuitas, partirlo en dos es lo que hace que los créditos lleguen.

Al publicar: el botón es Publish, no Share (share comparte el proyecto editable; publish te da la URL real). Los cambios, todos juntos en un mensaje: cada corrección suelta quema un crédito. Y revisa lo que la IA rellenó sola: emails de contacto, enlaces de LinkedIn y testimonios que quizá no existen.

El plus inesperado: performance de serie

Uno de los dolores clásicos del desarrollo front es la velocidad de carga, que además influye en cómo te indexa Google. Estas herramientas aplican las buenas prácticas de base: las landings de clase salieron con puntuaciones de performance del 98%. Antes se contrataban empresas solo para optimizar tiempos de carga.

Recursos
  • Web Lovable · no-code con IA (usa modelos de Anthropic por debajo): pegas el PRD, responde a sus preguntas y publica con URL propia. Unos 5 créditos gratis al día.
  • Web v0, de Vercel · la alternativa equivalente: mismo flujo, hosting de Vercel. Si ya conocías Lovable, prueba esta para ver otro sabor.
  • Web PageSpeed Insights · mide la performance, accesibilidad y SEO de tu web publicada, como hicimos en clase.

Los portfolios que salieron de clase

~3 min

Esto es lo que da de sí una sesión de dos horas cuando defines antes de ejecutar: webs reales, publicadas, con URL propia. Construidas por perfiles de todos los ámbitos, la mayoría sin haber hecho una web en su vida.

13 personas · 14 webs publicadas
Por qué importa

Ninguna está terminada y no pasa nada: son prototipos. La semana que viene bajamos la definición al detalle para que la IA no invente y el resultado responda a una necesidad real. Hoy tocaba entrar en calor y perder el miedo a publicar.

Glosario · toca para ampliar

  • Modelo razonador

    Modelo de IA que piensa en pasos antes de responder: se pregunta qué quieres realmente y luego contesta. Más lento y más caro, pero mucho más preciso. Ideal para definir y planificar.

    Ver en el diccionario
  • Prompt

    La instrucción que le escribes a la IA. Se traduce en tokens de entrada, y la respuesta en tokens de salida: la moneda de cambio con la que se mide el consumo.

    Ver en el diccionario
  • Zero-shot

    Pedirle algo a la IA a pelo, sin contexto ni ejemplos. Funciona para cosas simples; para construir algo con intención se queda corto y obliga al rifirrafe de correcciones.

    Ver en el diccionario
  • Few-shot

    Darle a la IA contexto y ejemplos de lo que esperas antes de pedir. Como enseñarle el informe del trimestre pasado a alguien recién contratado: el resultado sale mucho más fino.

    Ver en el diccionario
  • Guardarraíl

    La parte del prompt donde dices lo que NO quieres (negativizar el prompt): sin emojis, sin inventar datos, sin superar X caracteres. Evita corregir después lo que podías prohibir antes.

    Ver en el diccionario
  • PRD

    Product Requirements Document: el documento que define qué tiene que tener tu producto y cómo, antes de construirlo. El pariente denso del briefing de marketing.

    Ver en el diccionario
  • Token

    La unidad con la que las IAs miden lo que leen y escriben, y con la que te cobran. Cuanto más potente el modelo y más largo el documento, más tokens consume.

    Ver en el diccionario
  • No-code

    Herramientas que construyen y publican software sin escribir código, como Lovable o v0: pegas el PRD, responde preguntas y te da una URL real.

    Ver en el diccionario
  • Alucinación

    Cuando la IA rellena huecos con datos inventados: un email de contacto que no existe, una URL de LinkedIn falsa. Todo lo que no le des, se lo inventará.

    Ver en el diccionario

Si solo tienes tiempo para 2 cosas

Si te llevaras únicamente dos cosas de toda esta página, que sean éstas:

  1. Define antes de ejecutar: modelo razonador + prompt de cuatro partes (actúa como, resultado esperado, contexto, no quiero). El rifirrafe de correcciones se evita en la definición, no a base de créditos.
  2. Practica el flujo completo: pega el prompt de la clase en DeepSeek con Deep Thinking, y el PRD resultante en Lovable o v0. En media hora tienes web publicada.

Para cualquier duda, pueden escribirme a hi@alci.dev. Y si no terminaste tu portfolio en clase, esta página tiene todos los pasos.

Alcibiades Cabral · Prototipado con IA
Digital Product & Project Manager Ed. 4 · EOI · 16 julio 2026