De Webflow a una web estática moderna con IA, en una hora.
Cómo actualizar una web de club hecha con Webflow con código limpio, una nueva dirección visual y la complejidad justa.
El punto de partida es la web de St. Faithleach’s GAA: una web de club con historia, noticias, enlaces para socios y un formulario de contacto. El contenido ya está ahí; el reto es llevarlo a una experiencia visual actual sin convertir una actualización concreta en una migración tecnológica innecesaria.
El objetivo del rediseño es llegar en una hora a una primera versión real: una web estática responsive, navegable, con nuevos recursos visuales y preparada para publicar. No una maqueta, sino una base que se pueda comprobar y seguir iterando.
Primero, leer la web existente
Antes de tocar el diseño, separo lo que hay que conservar de lo que hay que replantear. En una web antigua, la arquitectura suele revelar qué información es prioritaria: presentación del club, trayectoria, logros, inscripciones, actualidad y contacto.
Webflow sigue siendo útil como referencia del contenido y de las rutas que los usuarios ya conocen. No hace falta exportar su código y retocarlo: el marcado generado por un editor visual responde a las necesidades del editor, no necesariamente a una base pequeña y mantenible. Reconstruir solo las piezas que tienen sentido permite empezar con HTML semántico y una estructura más clara.
Las herramientas: IA para acelerar, criterio para decidir
El flujo combina herramientas con roles muy concretos:
- Webflow, como fuente de contenido y estructura de la versión original.
- Codex, para analizar la página, proponer el esqueleto de componentes, generar la primera implementación y revisar incoherencias.
- HTML, CSS y JavaScript modernos, para construir una web estática ligera, responsive y sin dependencias que no aportan valor.
- Generación de imágenes con IA, para explorar una dirección de arte propia: pasar de gráficos planos a composiciones con volumen, materiales y luz, sin recurrir a fotografía de stock genérica.
- Navegador y comprobaciones de compilación, para verificar enlaces, formulario, lectura en móvil, contraste y carga de recursos.
La IA reduce el tiempo de producción de la primera versión. No sustituye las decisiones: todavía hay que decidir qué se prioriza, qué se elimina, qué información necesita el club y qué lenguaje visual le corresponde.
Un sistema visual antes que una suma de secciones
En vez de cambiar colores sobre la web antigua, el rediseño parte de un sistema pequeño: escala tipográfica, paleta, espaciados, botones, tarjetas y una retícula responsive. Así, la navegación, los logros, las noticias y el contacto comparten un mismo ritmo.
Las ilustraciones también forman parte de este sistema. Un icono plano o un gráfico antiguo pueden convertirse en una pieza 3D con la misma idea de fondo, pero con profundidad y una composición pensada para la nueva cabecera. No son decoración: sirven para dar identidad, organizar la mirada y diferenciar al club de una plantilla genérica.
Por qué no hace falta usar Astro
Astro es una opción excelente para contenido editorial extenso, plantillas repetibles, Markdown, integraciones con componentes o una web que prevé crecer mucho. Pero no es un requisito para tener una web moderna y rápida.
En una web de club con un número acotado de secciones y contenido relativamente estable, una base de HTML, CSS y JavaScript puede resolver el problema con menos capas: no hay servidor, base de datos ni un proceso de ejecución complejo. El resultado se puede publicar en cualquier hosting estático, cargar rápidamente y mantener con facilidad.
La decisión correcta no es elegir la tecnología más nueva. Es añadir solo la complejidad que el proyecto necesita hoy. Si más adelante el club necesita un blog editorial, un CMS o muchos tipos de página, entonces Astro puede ser una evolución razonable. No hace falta anticipar esa arquitectura antes de tener una necesidad real.
Funcional significa verificado
Una hora es suficiente para construir una primera versión sólida, pero no para dar cosas por hechas. Antes de publicar, hay que comprobar que cada menú lleva a donde corresponde, que los botones tienen una acción, que el formulario llega a un destino real y que la web se lee bien en pantallas pequeñas.
También hay que optimizar las imágenes, escribir textos alternativos cuando aportan información, mantener un contraste suficiente y completar los metadatos básicos. Son detalles que no hacen ruido en una captura, pero que separan una demo de una web funcional.
Llegar antes a una mejor primera versión
El valor del proceso no es afirmar que la IA “hace una web sola”. Es poder invertir menos tiempo en trabajo repetitivo y más en la estructura, el contenido y la dirección visual. La web antigua aporta el contexto; el código estático aporta control; y la IA ayuda a explorar y construir con velocidad.
El resultado es una base actual, ligera y preparada para evolucionar sin introducir más tecnología de la necesaria.