Mejora de la Productividad con IA, taller de ADAMS para EYSA, sesión 3. Llevamos el PRD de portfolio de la sesión anterior a Google AI Studio: cómo iterar con el chat y el lapicito, generar variaciones de diseño sin gastar tokens, publicar con dominio propio, resolver los dos fallos más típicos, y revisar la web antes de compartirla. Cierra con el truco que más rindió en la sala.
Las dos sesiones anteriores fueron de fundamentos: qué es un prompt, cómo se pagan los tokens, qué cambia un modelo razonador y las cuatro piezas de un buen prompt. Con eso cada uno generó su PRD de portfolio. Hoy tocaba la parte que se ve: coger ese documento y construir con él una web real, publicada, con su URL.
En la sesión anterior cada uno generó, con un modelo razonador, el PRD de su propio portfolio: un documento de requisitos con su contexto, su tono y sus guardarraíles. Hoy tocaba construir la web de verdad a partir de ese documento.
Google AI Studio de principio a fin: pegar el PRD y ver la web nacer, iterar con el chat y con imágenes, señalar cambios exactos con el lapicito, generar variaciones de estilo con la brocha sin gastar tokens, el historial de versiones y el Remix, publicar con dominio propio, y los dos fallos que más se repitieron en la sala.
La lista de qué revisar antes de enseñarle tu portfolio a nadie (alucinaciones, fechas, responsive) y el truco que más rindió de toda la clase: mezclar dominios que no pegan a simple vista para que la web deje de sonar genérica.
Cuando pegas el PRD en AI Studio, la IA construye la estructura entera y escribe todos los archivos de golpe: es el paso más lento de todo el proceso. Los cambios que pidas después van mucho más rápido, porque ya existe una base sobre la que trabajar.
Se entra por el apartado Build, con cualquier cuenta de Gmail y sin coste. Con cuenta corporativa puede dar problemas, porque en principio la app queda vinculada a esa cuenta. Al arrancar pide confirmar que eres desarrollador y creas soluciones con fines profesionales, un trámite de un clic.
Al pegar el PRD, a la derecha pueden aparecer preguntas o criterios de aceptación para marcar: idiomas, filtros, paleta de colores, tono. Conviene estar atento y responderlos; si el PRD ya venía completo, puede que ni pregunte. Esta misma vía sirve para más cosas que un portfolio: una mini aplicación para cruzar dos Excel, o una que revise cada mañana noticias de un tema concreto. Es el mismo espíritu que los artefactos de otras IA.
Los ajustes se piden por el chat de la izquierda, nunca encima de la vista previa. Se puede arrastrar una foto propia ahí mismo, pero AI Studio no deja enviar una imagen sola: siempre hay que escribir algo, aunque sea "pon esta foto aquí".
Para señalar dónde quieres un cambio sin ambigüedad, copia un trozo del texto de esa zona y pégalo en el mensaje. La parte de arriba del todo, la primera que se ve, se llama hero section: nombrarla ahorra explicaciones.
Arriba a la derecha, debajo de Publish, hay un lápiz: Select element. Lo activas y clicas sobre una foto o un texto para indicar exactamente dónde quieres el cambio. No todas las herramientas lo tienen; AI Studio sí, y v0 también.
Preview / Codevista previa y códigoChat (izquierda)donde pides los cambiosLapicitoSelect elementBrochavariaciones de diseñoHistorial de versionescheckpointsRemixcopia para experimentarPublishpublicar de verdadSi tu herramienta tiene un botón parecido, la lógica es la misma: cuanto más exacto apuntas, menos vueltas da la IA.
Con el lapicito activo sobre un elemento, el icono de la brocha genera variaciones de diseño para toda la web: otros colores, otras combinaciones. Se aplican al momento porque no regeneran nada, solo cambian la capa de estilo. Puedes pedir más propuestas y quedarte con la que más te convenza.
En configuración hay un historial de versiones: cada petición crea un punto al que se puede volver si un cambio sale mal. Y hay Remix, que copia la app entera a una nueva app con los mismos prompts de partida, para probar algo arriesgado sin tocar la versión que ya funciona.
El botón Publish genera un enlace público. La URL que da por defecto es fea, pero se le puede poner un dominio propio. Al publicar se puede editar también la descripción que aparece bajo el enlace al compartirlo por WhatsApp, y las URL van en minúsculas, sin espacios, con guiones si hace falta.
Y el aviso que más se olvida: cada cambio en el editor hay que volver a publicarlo. El editor y la versión publicada son cosas distintas; pulir cinco detalles seguidos y olvidarse de pulsar Publish al final es el error más común de la sesión.
El fallo más habitual es un "error interno" o la pantalla que se queda pillada a media generación. No es que se haya perdido el trabajo: el procesamiento vive en la nube, no en tu navegador.
Retryprimer intento"continúa"cuando se corta a mediasRefrescar la pestañael comodínPrueba en ese orden y no cierres la pestaña sin más: casi siempre se destraba.
Elimina las funcionalidades con IA que hayas metido en esta
página (chatbot, formulario inteligente, análisis de datos u
otras). No las necesito y me están pidiendo dar de alta un
método de pago solo para publicar.Que la web funcione no quiere decir que esté lista para enseñarla. En clase salieron dos fallos que se repiten mucho y que no se ven a simple vista si solo miras la vista previa por encima.
A uno de los portfolios le pidieron buscar ferias, congresos y artículos de prensa a partir de un nombre y la URL de una empresa, para montar la sección de trayectoria. Resultado: crónicas y artículos que nunca existieron. La IA no navega ni scrapea de verdad salvo que la herramienta se lo permita de forma explícita; cuando no encuentra el dato, rellena el hueco con algo plausible, y lo afirma con la misma seguridad que si fuera cierto.
En otro portfolio, todo estaba bien salvo un detalle: el footer decía © 2025, aunque estemos en 2026. Nadie lo pidió; es la fecha de corte del entrenamiento del modelo asomando, el mismo fenómeno que hace que una IA conteste con el Papa anterior si le preguntas quién es el actual sin dárselo como dato. El modelo no navega el calendario de hoy: vive en el suyo.
El hallazgo de la clase. Una web de consultoría, correcta pero genérica, "muy de consultor", que no representaba a quien la había hecho. El cambio no fue de diseño: fue de lenguaje.
Le pidieron a la IA que tratara el proyecto de consultoría como si fuera una expedición de montaña, y que quien lo leyera viviera la aventura. Salió un cuaderno de bitácora, un "registro de expedición", un "mapa del terreno" (negocio es rumbo y viabilidad, producto es mapa y priorización, tecnología es arquitectura y algoritmo), "las cimas de la expedición" con los proyectos clasificados por dificultad como picos de distinto grado, una "brújula metodológica" y la "cordada" para el equipo.
La web dejó de sonar a plantilla y empezó a sonar a esa persona. Otro caso de la clase hizo lo mismo con hortalizas en vez de montaña, con un tomate 3D girando en la hero section, y quedó de lo más comentado de la sesión.
Trata mi proyecto de consultoría en optimización y
planificación como si fuera una expedición de montaña.
Quiero que quien lo lea viva la aventura: cuaderno de
bitácora, mapa del terreno, cimas clasificadas por
dificultad, brújula metodológica, cordada para el equipo.Funciona porque, como vimos con los embeddings el día anterior, para la IA todo vive en el mismo espacio semántico: montañismo y consultoría, neurociencia y producto, hortalizas y diseño no son mundos aparte, son coordenadas más o menos cercanas. Pedirle "hazme la mejor web" te da lo más estándar del entrenamiento. Pedirle que cruce dos dominios concretos te obliga a construir un vocabulario propio, y ahí es donde una web deja de ser intercambiable con cualquier otra.
La IA no te da buen gusto.
Cierre de la sesión
La IA no tiene iniciativa ni criterio propio. Si le pides "hazme la mejor web" o "la mejor reforma de mi casa", te devuelve lo más estándar: lo que más se repite en su entrenamiento, no lo mejor. Cuando le das un ángulo, "actúa como X", "imagina que eres Y", "quiero que se sienta así al entrar", empieza a rendir de verdad. Es un catalizador de lo que tú le pongas delante, no un sustituto del gusto: si en tus ideas de partida no hay nada propio, lo que sale maximiza el gris. El sentido crítico, decir "por aquí no, por aquí sí", sigue siendo tuyo, dentro y fuera del trabajo.
AI Studio / Geminilo de hoyLovablesiguiente claseClaude / ChatGPT en razonamiento altoestado del arteCon Gemini hay que estar detrás corrigiendo; con los modelos de razonamiento alto casi no hace falta, pero tampoco publican una web con un botón.
Seguir mejorando tu portfolio: revisarlo en el móvil, corregir fechas y datos inventados, y volver a publicarlo después de cada cambio. El concurso al mejor portfolio de la clase sigue abierto, se vota con el pulgar arriba en el chat, y el feedback anónimo del Miro sigue disponible.
Marca lo que vayas completando. Se guarda en tu navegador, así que al volver sigue aquí.
Cinco preguntas para fijar lo esencial. No hay nota ni castigo: si fallas, te explico el porqué.
Repaso · Pregunta 1/5
Glosario · toca para ampliar
Product Requirements Document: el documento de requisitos generado la sesión anterior con quién eres, qué quieres y qué no quieres. Es lo que se pega entero en AI Studio para arrancar la web.
Ver en el diccionarioLa herramienta de Google (apartado Build) que convierte un PRD en una web funcional, con Gemini escribiendo el código por debajo. Se entra con cualquier cuenta de Gmail, sin coste.
Ver en el diccionarioConstruir software describiendo lo que quieres en lenguaje normal, sin escribir código a mano, y dejando que la IA lo traduzca a HTML, CSS y JavaScript de verdad.
Ver en el diccionarioEl bloque de arriba del todo de la web, el primero que se ve. Nombrarlo sirve para señalar exactamente dónde quieres un cambio sin tener que describir la zona.
Ver en el diccionarioEl lenguaje que decide el aspecto visual: colores, tipografías, espaciados. Cambiarlo no gasta tokens de generación, porque no toca el contenido, solo la capa de estilo.
Ver en el diccionarioUna ventana embebida que muestra contenido de otro sitio dentro de tu web, como un vídeo de YouTube incrustado con su propia miniatura reproducible.
Ver en el diccionarioQue la web se adapte sola al tamaño de pantalla. El fallo más habitual y el que menos se nota si solo pruebas en tu propio ordenador.
Ver en el diccionarioCuando la IA se inventa datos con total seguridad. Le pides que busque tu trayectoria a partir de tu nombre y tu web, y en vez de decir "no lo sé", rellena el hueco con crónicas y artículos que nunca existieron.
Ver en el diccionarioEl momento hasta el que el modelo fue entrenado. Es lo que hace que un portfolio recién generado ponga "2025" en el pie de página sin que nadie se lo haya pedido.
Ver en el diccionarioQue Google guarde tu página en su índice. En cuanto publicas en AI Studio, la web queda en abierto en internet y Google la puede indexar como cualquier otra.
Ver en el diccionarioConstruir software sin escribir código directamente, con una herramienta que traduce tus instrucciones. AI Studio, Lovable y v0 son ejemplos.
Ver en el diccionarioOtra herramienta no-code para construir webs con IA, la que se ve en la siguiente sesión. Menos cuota gratuita que AI Studio, pero más creativa y con menos fallos.
Ver en el diccionarioEl punto que crea AI Studio en el historial de versiones cada vez que le pides un cambio. Sirve para volver atrás si algo sale mal.
Copiar toda la app a una nueva, con los mismos prompts de partida, para probar ideas arriesgadas sin tocar la versión que ya funciona.
El aviso que pide una tarjeta al publicar, porque Gemini metió por su cuenta una funcionalidad con IA (un chatbot, un análisis) que consume la API. Se arregla pidiéndole que la elimine.
Estas dos ideas son las que más impacto tienen. Si te llevaras únicamente dos cosas de toda esta página, que sean éstas:
Nos vemos el martes con Lovable y las presentaciones de portfolio pendientes. Si algo de esta página no te cuadra, escríbeme a hi@alci.dev o déjamelo en el feedback anónimo del Miro.