El muro de portfolios: once webs hechas con IA y lo que nos enseñó cada una

Mejora de la Productividad con IA, taller de ADAMS para EYSA, grupo de lunes y miércoles, sesión 3. Cada persona enseñó el portfolio que construyó con Google AI Studio y el grupo votó con likes en el chat. De cada web salió una lección: lo que la IA se inventa, la foto que no hay manera de cambiar, por qué menos es más, dónde está el límite entre prototipo y producto, cómo exportar el código a otro framework y qué pasa cuando conectas un agente a un aparato físico.

Empezar el repaso

De qué fue la sesión

~2 min

Sesión de enseñar lo hecho. Una por una, cada persona compartió pantalla con su portfolio, contó cómo lo había construido y qué le había costado. El resto votaba con el pulgar arriba en el mensaje del chat de Teams donde estaba cada URL, tantas veces como quisiera. En caso de empate, medalla de chocolate a repartir.

La sesión, en tres golpes
  1. 01 Punto de partida

    En la sesión anterior cada persona convirtió su PRD en una web con Google AI Studio y la dejó publicada. Quedaban 48 horas para pulirla.

  2. 02 Lo que vimos

    Once portfolios en pantalla, uno detrás de otro, con votación a base de likes en el chat de Teams. Y de cada uno, una lección: alucinaciones, fotos imposibles, chatbots, idiomas, exportar el código y hasta hardware.

  3. 03 Lo que te llevas

    Una lista de lo que conviene revisar antes de publicar, dónde está el límite de estas herramientas (prototipo sí, producto serio con cuidado) y cómo seguir el proyecto fuera de AI Studio si se te queda corto.

Once perfiles muy distintos, de quien venía del frontend a quien hacía su primera web viniendo del hardware. Y aun así, los mismos problemas se repitieron en casi todas: eso es lo más útil de la sesión.

El muro: once portfolios

~8 min

En orden de aparición. Cada tarjeta resume qué construyó cada persona y qué destacó de la experiencia.

Once portfolios, once enfoques
Diegoel portfolio con MCP
Partió de su currículum en un documento web y, a través de un servidor MCP conectado a Redmine, la IA trajo más información de sus proyectos. Etiquetas de tecnologías (PMP, Scrum, Java) y botón de currículum en PDF en la barra de navegación. Su resumen: lo que a un perfil de frontend le llevaría tres semanas, en un par de horas.
JesúsChristopher Nolan, con chatbot
No quiso subir datos personales y montó la web sobre Christopher Nolan a partir de Wikipedia: línea de tiempo con detalle al pasar el ratón, vista de carteles, temas, premios, gráfico de taquilla, tabla de producción, traducción a varios idiomas, buscador y un chatbot que solo responde sobre el contenido de la propia página.
Alejandrola cita del día
Portfolio minimalista a partir del currículum, con cita del día para que no fuera estático, descarga del CV y una versión resumida y más sobria pensada para recursos humanos. La IA añadió por su cuenta contexto de una de sus empresas y se inventó los enlaces de GitHub y LinkedIn.
Frandos PRD enfrentados
Generó el PRD con dos modelos (ChatGPT gratuito y Claude con razonamiento alto), construyó varias versiones de cada uno y se quedó con la mejor. La traducción al inglés, mejor de lo que la habría hecho a mano. Veredicto: para una web sin integraciones con terceros, esto hace aplicaciones como churros.
Rafaveinte diseños y ninguno
PRD con DeepSeek a partir de las dos empresas principales de su trayectoria y el mapa de países donde ha trabajado. Pidió variaciones tipo Matrix o tipo Airbnb, generó una veintena, y al volver atrás no aparecían: al cambiar de diseño también le cambiaba títulos y contenido.
Luisproyectos por delante
PRD con Copilot de Microsoft, alimentado con el currículum personal y el de empresa, y la petición de potenciar los proyectos: arquitecturas, despliegues por país y tecnologías. Cada cambio tardaba unos cinco minutos, se saltó toda su formación y metió cifras que no había dado.
Javidel hardware al italiano
Primera web de alguien que viene del hardware, no del software. Currículum en español y en italiano (lleva años en un proyecto en Italia), instalaciones de peaje en Galicia, Madrid y Nápoles, y fichas que llevan a un caso de estudio completo.
Adriánla presentación manda
Se centró en la estética más que en la veracidad: imágenes de fondo generadas por la IA según cada tecnología, modo claro y oscuro, versión móvil. Fue el único cuya web mostraba imagen de vista previa al pegar la URL en el chat.
Pilarcon objetivo antes que diseño
Antes de escribir se preguntó qué necesita saber de ella la empresa y sus compañeros. Referencias de Apple (mucho espacio, pocos elementos) y de Uber, tres versiones, y proyectos con contexto, problema, participación, trabajo y resultado para quien quiera profundizar.
Ernestoprimera web, publicada en directo
También sobre la línea de Apple: sencillo, sin sobrecarga y con colores que no fueran apagados. Información de su currículum y de LinkedIn, barra de progreso de lectura y contacto directo. Intentó un chatbot que no salió, y publicó la web en directo en clase.
Albertola versión 0.1
Selector de idioma, responsive y un azul corporativo muy sutil que la IA respetó. Le propuso cosas que no había pedido, como design thinking, que sirven de ideas. Media hora de boceto donde antes no habría podido ni empezar; su duda, la misma que la de Luis: cómo se mantiene esto después.

Lo que más se repitió: datos inventados, la foto, cambios que tocan lo que no se pidió y la duda sobre el mantenimiento.

El chatbot que no vende Coca-Colas

La web de Jesús fue la que más exprimió AI Studio. Además de traducciones y buscador, metió un chatbot limitado al contenido de la página. A la pregunta de cuáles son las películas con más taquilla respondió bien; a la de comprar una Coca-Cola en el cine, avisó de que eso no lo puede hacer.

Es el ejemplo de lo que se abre al estar dentro del entorno de Google: conectores con Google Docs, y Gemini multimodal, que permitiría, por ejemplo, una aplicación que identifique coches en una foto. Y un recordatorio: un chatbot consume la API de Gemini, y al publicar te puede pedir tarjeta.

Lo que la IA rellena sola

~4 min

Salió en casi todos los portfolios. La IA no deja huecos: si una sección espera un dato y no se lo has dado, lo pone igual. En la sesión aparecieron:

  • Enlaces de GitHub y LinkedIn que nadie le había pasado.
  • Un currículum que pasó a hablar diez idiomas porque se le pidió que la web fuera multiidioma.
  • Una cifra de mejora del 4 % que no estaba en ningún documento.
  • Contexto de una empresa sacado, probablemente, de una búsqueda sobre ella.
  • Toda la formación de un currículum, simplemente omitida.
Lo que parece cierto es lo peligroso. Un dato absurdo lo ves; uno verosímil se publica. Antes de compartir la URL, repasa la web con esta lista.

Antes de publicar, revisa

Marca lo que vayas completando. Se guarda en tu navegador, así que al volver sigue aquí.

0/8 completado

La foto que no había manera

~3 min

Por texto, con el lápiz, subiéndola... y otra vez la misma

A Luis la IA le puso la foto de una persona que no era él, sin haberle pasado ninguna imagen. Lo intentó todo: pedírselo por texto, con el lapicito, subiendo su foto. Cinco minutos por intento y la misma imagen de vuelta. Rafa también se pasó más tiempo peleándose con la foto que con el contenido.

Y Adrián descubrió la variante más curiosa: la miniatura que aparece al pegar su URL en Teams mostraba una foto antigua que no era la suya. Ahí el culpable suele ser la caché de la vista previa: Teams y otras apps guardan la primera imagen que ven, y pueden tardar hasta un día en refrescarla.

Qué funciona mejor: subirla con el lapicito sobre la imagen y pulsar Submit, no por el chat (por el chat la recrea en vez de colocarla). Si se resiste, el botón Code te deja cambiar la ruta de la imagen a mano.

Menos es más: negativiza

~3 min

Las webs que mejor quedaron fueron las más sobrias: Pilar y Ernesto, con Apple como referencia de espacio y pocos elementos. Pilar hizo tres versiones: la primera empezó a rellenar huecos con cosas que no había dicho, y en la segunda le dejó claro que se ciñera a la verdad.

Si el pescado es bueno, no hace falta ponerle mucha salsa.

Sobre el diseño de un portfolio

Gemini tiende a lo barroco y a alucinar, más que otros modelos. Por eso vuelve la pieza del no quiero de la plantilla: minimalista, sin contadores, sin inventar, y que pregunte antes de rellenar. Y cuando pidas un cambio, que sea el mínimo.

Prompt · guardarraíles para tu web
NO QUIERO
Que inventes informacion: si te falta un dato, preguntame
antes de rellenarlo. Ni contadores, ni cifras, ni enlaces
que yo no te haya dado. Diseno minimalista.

CAMBIOS
Haz solo los cambios minimos imprescindibles. No borres ni
reescribas nada que no te haya pedido tocar.

Prototipar sin ser técnico

~4 min

En un equipo de desarrollo, estas herramientas ya se usan para acortar la toma de requisitos. En vez de tres horas de reunión explicando el flujo, o de pintar la interfaz en Miro o en Figma, la persona de negocio se pelea una o dos horas con la IA hasta tener algo que le encaje, y con eso delante el equipo técnico lo construye bien.

Tres veces que el prototipo se escapó

El pero: al menos en tres ocasiones, usuarios a los que se les pidió que no publicaran lo acabaron publicando, compartiendo y usando. Con la base de datos expuesta, un montón de errores de seguridad y las claves metidas en el código.

Para un mockup o un MVP mínimo, una gozada. Para producción, con el equipo técnico.

Fran y Rafa lo resumieron igual: al amigo que te pide una web, ya no se la haces, le enseñas a hacérsela. Y a nivel de país se ha anunciado una especie de kit digital para que las pymes tengan acceso a consultoría y tokens de IA. Está por ver cómo se materializa.

Mantenimiento y gobernanza

~4 min

Luis y Alberto pusieron el dedo en la llaga: está muy bonito, pero ¿quién mantiene esto? Cada petición cambia cosas que no sabes, cuánto ni dónde. Es el reto que hoy tiene la ingeniería: la gobernanza.

La IA genera propuestas de cambio (pull requests) tan rápido y tan grandes que revisarlas se ha convertido en el cuello de botella. Donde antes había un perfil de calidad por cada cinco desarrolladores, ahora casi harían falta cinco revisores por desarrollador. Y sin una buena base de tests unitarios, te rompe servicios sin que te enteres.

Es como tener un pequeño junior con mucha cafeína.

Sobre programar con IA
Cada modelo tiene sus manías. Unos llenan el código de comentarios en inglés hasta tener más comentario que funcionalidad; otros los quitan todos, incluidos los que querías conservar. Díselo en el prompt: cambios mínimos, no borres código ni comentarios que no te haya pedido tocar.

¿Arquitectura escalable a cinco años o algo pequeño que funcione ya? Para una herramienta muy acotada, lo segundo, y en dos años veremos dónde estamos. Hace un año era casi inviable poner en producción el código que generaba la IA tal cual; hoy se revisa, y va mejorando rápido.

Salir de AI Studio

~4 min

AI Studio siempre devuelve un frontend. Para trabajar también el backend, la vía es exportar: en la vista previa, a la derecha, los iconos de código; ahí exportas en ZIP o a GitHub y lo continúas en un entorno agéntico. Google tiene Antigravity, que también funciona en terminal.

En qué te lo hace y cómo cambiarlo
Por defectoReact
Si no le dices nada, AI Studio te lo hace en React (con Vite y TypeScript por debajo).
Con SSRNext.js
Si necesitas renderizado en servidor, puedes pedirle Next.js.
A peticiónAngular, Astro, Svelte
Aunque no aparezcan en el selector, se pueden forzar en el prompt. La prueba en directo con Svelte renderizó el componente.
Para seguirexportar
Desde los iconos de código, exportar en ZIP o a GitHub y continuar en un entorno agéntico como Antigravity, Claude Code o Codex.

El framework se elige al principio. Cambiarlo después es una migración, y gasta tokens.

En directo se lanzaron dos pruebas: crear una web en Svelte, que no está en el selector (renderizó el componente), y migrar un proyecto entero de React a Svelte. Visualmente debería quedar casi igual, porque los estilos van con Tailwind o CSS, aunque no es determinista.

Útil también para proyectos legacy: traer una versión antigua de Angular a una actual da buenos resultados con algún retoque. Eso sí, el coste de migrar y el de rehacer están ya muy cerca, y muchas veces compensa empezar de nuevo.
Y la crítica de Adrián, con razón: en AI Studio todo pasa por el prompt. No hay una cajita para cambiar un texto a mano como en WordPress. Es un creador de aplicaciones, no un gestor de contenidos; si quieres un blog, pídele que te monte la base de datos en Firebase con un editor de entradas autenticado.

IA y hardware: con arnés

~4 min

Javi viene del hardware y lanzó la idea: ¿se podrá pedirle a la IA que configure directamente una cámara, una antena o una barrera? En su mundo, con muchas vías, plazas y equipos, sería mucho tiempo y dinero.

Una pantalla de tinta electrónica en diez minutos

La respuesta en pantalla: un panel de tinta electrónica con un ESP32, un procesador pequeñito, conectado por USB al ordenador. Claude levantó toda la configuración, la conexión wifi y el panel de datos en tiempo real en unos diez minutos, sin decirle qué librería usar. Lleva tres días funcionando sin un fallo.

La parte que conviene recordar: como no consiguió usar el firmware propietario de la pantalla, decidió flashearla y escribirse su propio firmware. Un agente sin arnés intenta llegar al objetivo cueste lo que cueste.

Con equipos reales: copia de seguridad, permisos acotados y calma. Y para esto, la IA en modo terminal, que es la que puede hablar con periféricos. El firmware depende del fabricante: unos usan protocolos abiertos (cámaras con librerías estándar) y otros propietarios, que son justo donde un agente se puede poner creativo.

Publicar y compartir el enlace

~2 min

Para tener una URL de la que presumir: botón Publish arriba a la derecha, luego Get started, y al terminar te da la dirección. Cualquiera con el enlace entra, y la puedes despublicar cuando quieras.

La tarjeta del enlace

Lo que aparece al pegar la URL en Teams o WhatsApp (imagen, título y descripción) sale de las metaetiquetas Open Graph. Solo una de las webs del grupo las tenía. Pídeselas a la IA con tu foto y una descripción corta, y ten paciencia: las apps guardan la primera versión que ven.

Repaso

Repaso rápido

Cinco preguntas sacadas de los portfolios de la sesión. Sin nota: si fallas, te explico el porqué.

Repaso · Pregunta 1/5

Tu portfolio muestra un botón de LinkedIn que funciona, pero tú nunca le diste el enlace. ¿Qué ha pasado?

Tu portfolio muestra un botón de LinkedIn que funciona, pero tú nunca le diste el enlace. ¿Qué ha pasado?

Glosario · toca para ampliar

  • AI Studio

    La herramienta de Google que convierte un PRD en una web funcional. Todo el grupo construyó con ella su portfolio.

    Ver en el diccionario
  • Alucinación

    Cuando la IA rellena con datos inventados lo que no le diste: enlaces, cifras, idiomas o proyectos. Suenan verosímiles y por eso hay que revisarlos.

    Ver en el diccionario
  • MCP

    Model Context Protocol: el estándar para conectar una IA con herramientas y datos externos, como un gestor de proyectos. Así se trajo información extra a uno de los portfolios.

  • i18n

    Internacionalización: preparar la web para servirse en varios idiomas. Ojo, que la IA puede confundir traducir la web con decir que hablas esos idiomas.

    Ver en el diccionario
  • Open Graph

    Las metaetiquetas que deciden qué imagen, título y descripción aparecen al pegar un enlace en Teams, WhatsApp o LinkedIn.

    Ver en el diccionario
  • MVP

    Producto mínimo viable: lo justo para validar una idea. Es donde estas herramientas brillan, sobre todo para perfiles no técnicos.

    Ver en el diccionario
  • Pull request

    La propuesta de cambio de código que otra persona revisa antes de integrarla. Con la IA llegan más y más grandes, y revisarlas es el nuevo cuello de botella.

    Ver en el diccionario
  • Gobernanza de la IA

    Las reglas, controles y revisiones que deciden qué hace la IA y qué no en una organización. Hoy, el mayor reto en ingeniería.

    Ver en el diccionario
  • Test unitario

    Prueba automática de una pieza pequeña de código. Es la red que avisa cuando la IA rompe algo que no le pediste tocar.

    Ver en el diccionario
  • Legacy

    Sistema antiguo que sigue en producción. La IA ayuda a migrarlo, aunque a veces cuesta casi lo mismo rehacerlo.

    Ver en el diccionario
  • Antigravity

    El entorno de desarrollo agéntico de Google, con modo terminal. Donde se puede continuar un proyecto exportado de AI Studio y trabajar también el backend.

    Ver en el diccionario
  • Firmware

    El software grabado en un dispositivo físico (una cámara, una antena, una pantalla). Si un agente no consigue usarlo, puede intentar reescribirlo: cuidado.

    Ver en el diccionario
  • Firebase

    El servicio de base de datos y autenticación de Google. Se le puede pedir a AI Studio para montar, por ejemplo, un blog con editor privado.

    Ver en el diccionario

Si solo tienes tiempo para 2 cosas

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

  1. Revisa todo lo que no escribiste tú: enlaces, cifras, idiomas y fotos. La IA rellena los huecos con datos verosímiles, y lo verosímil es lo que se publica sin que nadie lo mire.
  2. Prototipo sí, producción con cuidado: estas herramientas ahorran semanas para validar una idea. Para algo que se vaya a mantener, exporta el código, pide cambios mínimos, apóyate en tests y no dejes a un agente tocar nada que no puedas recuperar.
Recursos
  • herramienta Google AI Studio · New App · Donde vive tu portfolio. Revisa, corrige y vuelve a pulsar Publish después de cada cambio.
  • herramienta Google Antigravity · El entorno de desarrollo agéntico de Google, también en terminal. Para continuar un proyecto exportado de AI Studio y trabajar el backend.
  • clase anterior Tu portfolio, publicado · sesión 2 · El recorrido completo de AI Studio: lapicito, brocha, versiones, Remix, Publish y la lista de errores con su salida.

Enhorabuena a los once: de un PRD a una web publicada en dos sesiones. Si algo de esta página no te cuadra, escríbeme a hi@alci.dev.

Alcibiades Cabral · Mejora de la Productividad con IA · ADAMS para EYSA
El muro de portfolios · 23 septiembre 2026