Saltar al contenido
Unai Alcón Contacto
Cómo se hizo

Cómo construí esta web.

Esta web está pensada para enseñar lo que sé hacer con la IA, no solo para contarlo. Aquí explico con qué problemas me encontré, cómo los pensé y en qué me apoyé en la IA para resolverlos.

El problema

Un currículum no enseña lo que sé hacer.

No cabe en una página explicar qué construí, qué decidí y cómo compruebo que sirve, ni enseñar prototipos interactivos que vayan más allá de una demo visual. Así que la web es la prueba: cuatro proyectos que se pueden tocar, con datos de ejemplo, y en cada uno el problema, el papel de la IA, qué hice yo y qué decidí.

También quería que fuese sobria y cuidada en el detalle. Y que cada cosa que dice se pueda defender en una conversación: lo que no podía explicar, lo he quitado.

El papel de la IA

Qué hizo la IA y qué hice yo.

La IA

Claude escribió el código, los textos y la revisión de la web, y montó los vídeos. Gemini hizo las escenas de vídeo y ElevenLabs las voces.

Yo

Decidí qué se enseña y cómo debe comportarse cada cosa, probé todo como lo haría un visitante, quité lo que no podía defender y elegí cuándo publicar.

El proceso

Cinco pasos, siempre conversando con la IA.

01

Definir qué enseñar

Convertí cada cosa que sé hacer en algo que se pudiera enseñar o probar, no solo contar.

02

Elegir los proyectos

De mis proyectos, cuatro. Sin nombres de empresas ni de clientes, y con datos de ejemplo.

03

Construir conversando

Yo decido qué se hace y cómo debe comportarse. Claude escribe el código. Lo he hecho casi todo desde el móvil y el Chromebook.

04

Probar como un visitante

En móvil y en ordenador, en los tres aspectos, con un navegador automático que repite los recorridos y con mi propio móvil.

05

Corregir y publicar

Siempre en la misma dirección. Más de 60 commits hasta hoy.

Capturas

Tres aspectos, una sola web.

Claro, oscuro y «loco»: el tercero es una pizarra con las decisiones de diseño anotadas, para quien quiera ver la trastienda.

Portada en aspecto claro
Claro
Portada en aspecto oscuro
Oscuro
Portada en aspecto loco, con notas de diseño
Loco: con notas y decisiones
Sala de reunión de SAIM
SAIM: una sala tipo videollamada con 48 caras generadas con IA y voces de ElevenLabs
Página del Auditor de Procesos
Auditor de Procesos
La estructura

Qué hay y para qué.

InicioPresentación, cifras, el asistente, los cuatro proyectos y un corto de ficción.
Una página por proyectoSuite de Gestión, SAIM, Auditor de Procesos y EtxekoLagun: vídeo, de dónde nace, el problema, por qué lo desarrollé, la prueba y sus puntos fuertes.
UnAIUn asistente sin IA: responde solo con lo que yo he escrito y, si no lo sabe, te manda a mí. Nada inventado.
Cómo trabajo y TrayectoriaEl método, mi experiencia y mi formación.
Tres aspectosClaro, oscuro y «loco», con selector arriba.
Datos de ejemploTodas las pruebas usan datos inventados. La web lleva la marca para que los buscadores no la indexen.
Juego · 1 minuto¿Te atreves a cuadrar el turno de una semana?El problema que resuelve la Suite de Gestión, en un juego.Jugar
Herramientas

Con qué la hice y para qué.

ClaudeCódigo, textos y revisión de la web, y montaje de los vídeos.
GeminiEscenas de vídeo y la primera versión del Auditor de Procesos.
ElevenLabsVoces de los vídeos y de SAIM, y mi propia voz clonada.
SunoLa música del corto.
Hanken Grotesk y JetBrains MonoLas dos tipografías de la web.
Mi móvil y mi ChromebookCon los que la he hecho, aunque también la he probado en PC.