Cómo Construí Mi Primera Web en 50 Horas Usando IA (Empezando desde Cero en HTML)

La página web en la que estáis leyendo este post la diseñé y la desarrollé yo solo desde cero, sin plantillas. Bueno, yo solo no, con la ayuda de la IA.

Pero antes de empezar: este no es el típico artículo donde digo que conseguí que la IA me hiciera la página perferta con un par de clics, o en apenas una hora. Hacer esta web, como yo la quería, me ha llevado tiempo. Unas 40-60 horas hasta que estuve satisfecho con el resultado.

Y no parece una cantidad desproporcionada de tiempo. Esas 50 horas han sido la mejor inversión que he hecho en meses. Porque no solo he construido una web; he recibido un curso intensivo y personalizado de desarrollo web, y otro de diseño. Y aquí te cuento exactamente cómo lo hice.

Quiero hacer una web desde cero. ¿Por dónde empiezo?

Lo primero que hice, como siempre que afronto un proyecto grande, fue definir el objetivo, y subdividirlo en pequeños proyectos. Tenía claro lo que quería y lo que no: No quería solo un producto final que no entendiera; quería entenderlo para poder mantenerlo y hacerlo crecer. Mis metas eran:

• Una web funcional y minimalista sobre mi.
• Un blog integrado, moderno, que fuera fácil de actualizar y mantener.
• Una base sólida y escalable para futuros proyectos.

¿Podría haber usado herramientas como Wix o WordPress? Pues sí, pero no habría aprendido tanto, y no habría tenido el control total sobre el código y el diseño. Así que, decidí hacerlo desde cero, y sobre todo, no habría sido tan divertido.

Le presenté esta idea a la IA y le pedí que actuara como mi director técnico y tutor. Le pedí que me dijese qué habilidades necesitaría, cómo estructurar el proyecto y por dónde empezar. En esta primera fase, más creativa y de diálogo, utilicé la función de conversación y transcriptor de audio con ChatGPT para dar una definición detallada de mi idea y proyecto.

Al cabo de unos minutos, ya tenía mi primera hoja de ruta: me iba a tocar aprender HTML, CSS y, dado que el contenido era mayormente estático, un framework moderno como Astro sería ideal. Para el diseño, la recomendación fue unánime: Figma. El viaje se dividiría en fases: primero el diseño, luego el código. Entendí la mitad de lo que me dijo, pero como buen alumno aplicado que respeta lo que le enseña su mentor, acepté el plan y le pedí que me explicase qué era Figma y Astro con conceptos básicos, y por qué era la mejor opción para mi proyecto.

Dedicar tiempo a entender los fundamentos del tema sobre el que vas a pedir ayuda aumenta enormemente la eficacia de esa ayuda. Es como la diferencia entre pedirle a alguien “hazme una hamburguesa rica” o “hazme una hamburguesa con estas especificaciones concretas de carne, salsa cocción y acompañamiento”.

Fase 1: Diseñando el Prototipo (Con un Tutor de IA Personal)

Antes de pensar en hacer esta web, yo no había utilizado nunca Figma. Ni siquiera sabía muy bien qué era. (Para quien esté en la misma situación: Figma es una herramienta de diseño que te permite crear prototipos de páginas web de forma visual, antes de programarlas). Pero parecía que Figma iba a ser mi gran aliado para diseñar mi web y necesitaba aprender a utilizarlo, desde cero, para diseñar mi página. Así que abrí Gemini 2.5 Pro y le planteé mi reto:

“Actúa como un profesor de diseño experto en Figma. Quiero que me crees un curso personalizado para diseñar mi web personal. Este es mi objetivo, este es mi estilo deseado. Guíame paso a paso.”

Lo que ocurrió a continuación fue espectacular. La IA no me dio un temario genérico; me diseñó un curso práctico dividido en bloques, enfocado 100% en mi proyecto y adaptado a mi. Y aquí vino la magia: para avanzar, me pedía que le subiera capturas de pantalla de mi trabajo. Me daba feedback sobre mi diseño real, en tiempo real.

Haz clic para ver una parte del curso que me diseñó la IA

Es un texto largo, pero lo he dejado aquí por si te interesa ver con más detalle el curso que me diseñó y que seguí para aprender Figma. El texto orginial estaba en inglés, así que si algo suena raro, ha podido ser mi traducción

Yo

🤓

Hola, estoy intentando aprender Figma para diseñar mi web personal (que luego programaré con Astro y Tailwind). Será una web estática y minimalista, con una landing page, blog, etc. No sé nada de Figma y quiero que actúes como un profesor experto.

Por favor, dame un temario estructurado para aprender justo lo que necesito, con una estimación de tiempo. No empieces aún con el pimer tema: veamos primero qué tal es el temario y discutámoslo.

Gemini

¡Excelente objetivo! Usar Figma como prototipo es el flujo de trabajo profesional ideal. Dado tu background en programación, pillarás la lógica de componentes y Auto Layout muy rápido. Aquí tienes un plan de estudios práctico y sin rodeos:

Propuesta de Curso: “Figma para tu Web Personal”

• Módulo 0: Puesta en Marcha (30-60 min)
• Módulo 1: Fundamentos - Los Bloques de Construcción (1.5-2.5 h)
• Módulo 2: Diseño Web - Estructura y Reutilización (2-3 h)
• Módulo 3: Construyendo tu Web (3-5 h)
• Módulo 4: Finalizar y Preparar para Código (1-1.5 h)

Tiempo Total Estimado: Entre 8 y 13 horas de práctica.

¿Te parece bien este plan para empezar?

Yo

🤓

Sí, parece perfecto. Empieza cuando quieras. Ya he estado trasteando un poco, así que el Módulo 0 seguramente sea rápido.

Gemini

¡Genial! Empecemos entonces.

Módulo 0: Puesta en Marcha

Lo clave aquí es familiarizarse con la interfaz y los atajos de teclado. Recomiendo la app de escritorio para Mac.

• Interfaz: Identifica el Lienzo (centro), la Barra de Herramientas (arriba), el Panel de Capas (izquierda) y el Panel de Propiedades (derecha).
• Atajos Esenciales (macOS):
  • V - Herramienta de Selección (tu mejor amigo).
  • Barra Espaciadora + Arrastrar - Moverse por el lienzo.
  • Cmd + +/- - Zoom.
  • Shift + 1 - Ver todo.
  • Shift + 2 - Zoom a la selección.

Tu Primera Tarea (5 min): Crea un nuevo archivo, llámalo “Web Personal”, y practica la navegación y el zoom. Dibuja un par de formas aleatorias (R para rectángulo, O para elipse).

Gemini

Módulo 1: Fundamentos - Los Bloques de Construcción

Aquí empezamos a crear los elementos de tu web.

• Frames (F): Son tus “páginas web”. Crea uno usando el preset “MacBook Pro 14” y llámalo “Homepage”.
• Formas y Estilos: Dibuja un rectángulo (R) en tu Frame. En el panel derecho, dale un color de relleno (Fill), un borde (Stroke) y un radio de esquina (Corner Radius) de 8px.
• Texto (T): Añade un título y un párrafo. En el panel derecho, ajusta la fuente (Inter), el grosor (Bold, Regular) y el tamaño.
• Agrupar (Cmd + G): Selecciona tu título y párrafo y agrúpalos. Esto los mantiene juntos.

Tarea Práctica: Dentro de tu Frame “Homepage”, crea un boceto simple de la sección principal con un rectángulo de fondo, un círculo para el logo, un título y un párrafo.

Gemini

Módulo 2: Diseño Web - Estructura y Reutilización (¡El más importante!)

Estos son los conceptos que te ahorrarán horas.

• Layout Grids (Ctrl+Shift+4): Añade una rejilla de 12 columnas a tu Frame. Esto te ayudará a alinear todo perfectamente.
• Auto Layout (Shift+A): La super-habilidad de Figma. Crea contenedores que se adaptan a su contenido. Esencial para botones, menús y tarjetas.
• Componentes (Cmd+Opt+K): Convierte un diseño (como un botón) en un elemento reutilizable. Si cambias el componente principal, todas sus copias (instancias) se actualizan.
• Estilos: Guarda tus colores y estilos de texto para aplicarlos de forma consistente con un solo clic.

Tarea Práctica: Crea un componente de “Botón” con Auto Layout. Luego, crea un componente de “Header” que use Auto Layout para espaciar los enlaces del menú.

Gemini

Los módulos 3 y 4 consisten en usar estos bloques para construir el diseño completo de tu página y luego usar el panel “Inspect” para extraer las medidas y colores (los valores de CSS) que necesitarás para Tailwind.

¡Con esto tienes una base sólida para empezar a diseñar tu web!

La conversación siguió, y conforme iba avanzando en el curso, la IA me iba dando tareas prácticas y feedback sobre mi progreso. Por ejemplo, mirad aquí cuanod le di una captura de lo que llevaba en el módulo 3.4:

Yo

🤓

¡Listo! Acabo de terminar la Tarea 3.4. Te adjunto una captura de pantalla.

Creo que se ve un poco vacío o “pobre”, especialmente el título de la sección. Las tarjetas me gustan, con la sombra se ven bien, pero el conjunto se siente un poco rígido. ¿Puedes ayudarme a mejorar la sección? Quizá añadir algo de “punch” con un fondo o un borde, pero sin que la página se llene de cajas con esquinas redondeadas.

Yo

🤓

×

Gemini

¡Esto se ve genial, Carlos! Has montado la sección de “Últimos Posts” perfectamente. La organización de tus capas es impecable.

Entiendo perfectamente la sensación de que la sección se vea “vacía” o “rígida”. Es un reto común al pasar de componentes individuales a secciones completas. Aquí tienes varias ideas para darle más “punch” manteniendo tu estética minimalista:

Para el Título de la Sección (“Últimos posts del Blog”):

• Añade un Subtítulo: Una frase corta debajo del título principal añade contexto. Prueba con algo como: “Descubre mis últimas reflexiones y aprendizajes.”
• Elemento Decorativo: Una línea horizontal delgada (1-2px) debajo del título, usando un color de acento, puede anclarlo visualmente.
• Prueba a Centrarlo: Un título centrado sobre una rejilla de tarjetas a menudo se ve muy equilibrado e intencionado.

Para la Sensación General de la Sección:

• Fondo Sutil (con cuidado): Dale a toda la sección un color de fondo que sea casi imperceptiblemente diferente del fondo principal de la página (ej: blanco puro sobre un fondo blanco roto). Esto la delimita sin crear una “caja” dura.
• ¡Padding, Padding, Padding!: Asegúrate de que haya un espacio vertical generoso entre esta sección y la sección Hero de arriba. El espacio en blanco es la herramienta minimalista más potente.

Mi recomendación: Empieza por centrar el título y aumentar el padding vertical. Suele ser el 80% de la solución con el mínimo esfuerzo visual.

Fue como tener un tutor particular y un diseñador sentado a mi lado enseñándome. La IA me mandaba tareas usando el texto y los elementos que yo quería para mi web, y verificaba mi progreso con las capturas que yo le enviaba. Una experiencia de aprendizaje hiper-personalizada.

En unas 10 horas, pasé de no saber qué era Figma a tener un prototipo completo y funcional de mi web. Creado a partir de un solo prompt. Ahora tocaba pasarlo a HTML.

Fase 2: Del Diseño al Código (Mi IA como Compañero de Programación)

Con mi diseño en Figma listo, era hora de convertirlo a código. Primero, invertí unas 10 horas en lo básico de la forma tradicional: tutoriales de Astro y algunos vídeos recomendados por la IA sobre HTML y CSS. Con ese “vocabulario” mínimo, estaba listo para la fase más intensa: ponerse manos a la obra y programar. ¿Con qué herramienta decidí empezar a desarrollar? Sé que aquí podía haber utilizado Cursor, Windusrf o Github Copilot integrado en VSCode, o similares. Pero aunque he ido usando un poco de Github Copilot, mi IA principal fue Gemini 2.5 Pro desde aistudio. Y luego entenderéis por qué. Únicamente, para empezar, creé en modo Agente la estructura de carpetas necesaria en VSCode (es decir, ChatGPT, integrado en VSCode, me generó las carpetas iniciales y algunos archivos que iban a ser parte del proyecto). Después, me pasé a aistudio. Si no sabes lo que es aistudio, es una herramienta de Google que permite interactuar con Gemini de forma más avanzada, con un contexto mayor y con la posibilidad de subir archivos y capturas de pantalla. Es una, joya, quizá haga un post sobre ella más adelante.

Mi flujo de trabajo se convirtió en un ciclo iterativo increíblemente eficaz:

1. Pedir a Gemini que implementase una pequeña parte del proyecot. Una seccion, el encabezamineot, el diseño de una tarjeta del Blog, el estilo global..
2. Implementar el código, revisarlo y ver los resultados.
3. Si daba error, le devolvía el texto de error para que lo solucionase y me explicase qué habia pasado. Si no me gustaba cómo quedaba, hacía una captura de pantalla para mostrarle cómo había quedado (“El botón no está centrado, ¿cómo lo arreglo?”, “En móvil se ve mal, hazmelo responsivo para tal resolución”.)
4. Cuando estaba conforme, paba a la siguiuente tarea.

Como era de esperar, tras los primeros prompts, el avance era espectacular. No sólo porque la IA me iba entendiendo mejor, sino porque yo también iba aprendiendo. En apenas minutos ya tenía una primera versión del Header, el Footer y los componentes principales de la web. Y crear una hoja de estilo CSS básica no fue difícil tampoco. Simplemente bastó con una captura de pantalla de mis propiedades en Figma (colores principal, secundario, de acento, tipo de letra, tamaños preferidos para cada elemento, etc).

Fase 3: El Control de Calidad (Cuando la IA se Convirtió en mi Mentor)

A medida que la web tomaba forma, implementé otra técnica: cada vez que tenía un avance significativo o quería reiniciar la conversación que refrescara el contexto, abría una nueva instancia de chat, le pasaba todo el código del proyecto y le pedía una opinión completa a ese nuevo chat, que no tenía el contexto de los problemas anteriores ni estaba sesgado por mis comentarios o errores y éxitos que habíamos tenido.

En una de estas auditorías, Gemini me dijo algo que lo cambió todo: “La web se ve bien, limpia y con buen SEO, pero deberías analizarla con Lighthouse para evaluar su rendimiento real. Pásame los resultados y te ayudaré a optimizarla”.

¿QUÉ?

Yo no sabía qué era Lighthouse. Pero la IA, proactivamente, me estaba sugiriendo una herramienta profesional de auditoría web para medir rendimiento, accesibilidad, SEO y buenas prácticas. Se estaba comportando como un verdadero mentor.

Tenía que probarlo. Y el proceso fue tan interesante y revelador que merece su propio post :). (Te contaré cómo pasé de una puntuación mediocre a una casi perfecta en un futuro post).”

No Todo Fue un Camino de Rosas

Sería mentira decir que no hubo frustraciones. Me encontré principalmente con dos muros que tuve que aprender a escalar:

1. El Muro del Conocimiento Obsoleto

Los modelos de IA tienen una “fecha de corte”. No saben lo que ocurrió ayer. Esto se convirtió en un problema real cuando intenté usar la última versión de Tailwind CSS, que había salido después de la fecha de entrenamiento de mi modelo. La IA me daba código para la versión antigua, que simplemente no funcionaba.

La solución fue sorprendentemente simple: en lugar de pedirle que “supiera” algo que no podía saber, le di el conocimiento que necesitaba.

Busqué la página de la documentación oficial de la nueva versión de Tailwind CSS y le pasé la URL directamente a Gemini. Mi prompt fue algo como:

Y funcionó razonablemente bien. La IA “estudió” la documentación y adaptó el código sin problemas y aunque a veces se le olvidaba, bastaba con recordarle que estábamos usando una versión que no conocía y que incluso me preguntase antes de utilizar la version anterior para darle el contexto adecuado.

2. El Muro de la Ventana de Contexto

La web fue creciendo. Nuevas secciones, páginas, iconos, scripts, etc. Cada vez era más difícil hacer que Gemini mantuviese el contexto de toda la web, y notaba que conforme aumentaba la complejidad, el código que me proponía o bien no valía, o me deshacía y rompía cambios anteriores. Estaba llegando al límite de contexto en el que la IA mantenía su claridad mental, y supe que tenía que actuar. Aunque Gemini 2.5 tiene 1 millón de tokens de contexto (si no sabes lo que es un token o qué es el contexto, puedes entrar en mi artículo donde explico estos y otros conceptos básicos), noté que cuando llegaba a los 300k-500k tokens, tras haber hecho multitud de cambios, la inteligencia disminuía, así que era momento de empezar una nueva instancia o conversación. Pero no quería que el modelo olvidase todo el progreso, ni tener que empezar de cero. Además, con ya 10-20 archivos distintos, algunos en un formato no permitido por la interfaz de aistudio, no quería andar copiando y pegando manualmente el contenido cada vez que quisiera renovar el contexto.

Así que pedí a ChatGPT un script sencillo que volcase el contenido de todo mi proyecto en un único txt, donde fuese añadiendo uno tras otro, el contenido de cada archivo, indicando ruta, nombre del archivo y formato. Así, en futuras instancias, la IA no sólo sabría qué que modificar y dónde, sino que tenía clara la estructura del proyecto. Con ello, introduje un bucle exterior a mi iteración. Cada vez que notaba que la IA flaqueaba, iniciaba una nueva instancia, adjuntaba el progreso actual, y empezaba de nuevo. En la fase final del proyecto, sólo mi primer prompt, donde le daba todo el código de lo que llevaba de web ya usaba casi 80000 tokens.

Así, lo que conseguía, además de dar a la IA unas instrucciones y contexto inicial muy rico, era saltar la limitación de token. Con ello logré hacer un proyecto que calculo que habrá tenido unos 10 millones de tokens en total. Y aquí se ve la importancia de utilizar un modelo con una ventana de contexto suficientemente grande. Llegado cierto punto, las versiones disponibles de ChatGPT o Claude no podían asumir todo ese contexto inicial, y Gemini 2.5pro demostró ser el claro ganador para este tipo de proyectos!

Los Resultados: ¿Valió la Pena?

Tras 50 horas de trabajo, esto es lo que he conseguido:

• He aprendido los fundamentos de HTML, CSS, Astro y Figma.
• Tengo una web personal, escalable, moderna y de la que me siento orgulloso (y si algo no te gusta de la web, siempre puedo culpar a la IA).
• He conseguido una puntuación en Lighthouse que muchos sitios profesionales envidiarían.
• Coste total: 0€.

Ya lo sé,, no fue un clic. No fue cosa de una tarde como encuentras en muchas otras historias por Interenet.

¿Cuánto me he ahorrado?

Por pura curiosidad, le pregunté a Claude cuánto habría costado que un desarrollador freelance en España me hiciera una web con estas características.

No sé si las estimaciones que hace están bien o está alucinando. En cualquier caso, no está nada mal para ser un principiante armado con las herramientas adecuadas, ¿verdad?

¿Y ahora qué? Tu Turno.