De Webflow a una web estàtica moderna amb IA, en una hora.
Com actualitzar una web de club feta amb Webflow amb codi net, una direcció visual nova i la complexitat justa.
El punt de partida és la web de St. Faithleach’s GAA: una web de club amb història, notícies, enllaços de membres i un formulari de contacte. El contingut hi és; el repte és portar-lo a una experiència visual actual sense convertir una actualització concreta en una migració tecnològica innecessària.
L’objectiu del redisseny és arribar en una hora a una primera versió real: una web estàtica responsive, navegable, amb recursos visuals nous i preparada per publicar. No una maqueta, sinó una base que es pugui comprovar i continuar iterant.
Primer, llegir la web existent
Abans de tocar el disseny, separo el que cal conservar del que cal replantejar. En una web antiga, l’arquitectura acostuma a revelar quina informació és prioritària: presentació del club, trajectòria, assoliments, inscripcions, actualitat i contacte.
Webflow continua sent útil com a referència del contingut i de les rutes que els usuaris ja coneixen. No cal exportar-ne el codi i retocar-lo: el marcatge generat per un editor visual respon a les necessitats de l’editor, no necessàriament a una base petita i mantenible. Reconstruir només les peces que tenen sentit permet començar amb HTML semàntic i una estructura més clara.
Les eines: IA per accelerar, criteri per decidir
El flux combina eines amb rols molt concrets:
- Webflow, com a font de contingut i estructura de la versió original.
- Codex, per analitzar la pàgina, proposar l’esquelet de components, generar la primera implementació i revisar inconsistències.
- HTML, CSS i JavaScript moderns, per construir una web estàtica lleugera, responsive i sense dependències que no aporten valor.
- Generació d’imatges amb IA, per explorar una direcció d’art pròpia: passar de gràfics plans a composicions amb volum, materials i llum, sense recórrer a fotografia d’estoc genèrica.
- Navegador i comprovacions de compilació, per verificar enllaços, formulari, lectura en mòbil, contrast i càrrega dels recursos.
La IA redueix el temps de producció de la primera versió. No substitueix les decisions: encara cal decidir què es prioritza, què s’elimina, quina informació necessita el club i quin llenguatge visual li és propi.
Un sistema visual abans que una suma de seccions
En lloc de canviar colors sobre la web antiga, el redisseny parteix d’un sistema petit: escala tipogràfica, paleta, espaiats, botons, targetes i una retícula responsive. Això fa que la navegació, els assoliments, les notícies i el contacte comparteixin un mateix ritme.
Les il·lustracions també formen part d’aquest sistema. Una icona plana o un gràfic antic poden convertir-se en una peça 3D amb la mateixa idea de fons, però amb profunditat i una composició pensada per a la nova capçalera. No són decoració: serveixen per donar identitat, organitzar la mirada i diferenciar el club d’una plantilla genèrica.
Per què no cal anar a Astro
Astro és una opció excel·lent per a contingut editorial extens, plantilles repetibles, Markdown, integracions amb components o una web que preveu créixer molt. Però no és un requisit per tenir una web moderna i ràpida.
En una web de club amb un nombre acotat de seccions i contingut relativament estable, una base d’HTML, CSS i JavaScript pot resoldre el problema amb menys capes: no hi ha servidor, base de dades ni procés complex d’execució. El resultat es pot publicar en qualsevol hosting estàtic, carregar ràpidament i mantenir amb facilitat.
La decisió correcta no és triar la tecnologia més nova. És afegir només la complexitat que el projecte necessita avui. Si més endavant el club necessita un blog editorial, un CMS o molts tipus de pàgina, llavors Astro pot ser una evolució raonable. No cal anticipar aquesta arquitectura abans de tenir-ne una necessitat real.
Funcional vol dir verificat
Una hora és suficient per construir una primera versió sòlida, però no per donar coses per fetes. Abans de publicar, cal comprovar que cada menú porta on toca, que els botons tenen una acció, que el formulari arriba a un destí real i que la web es llegeix bé en pantalles petites.
També cal optimitzar les imatges, escriure textos alternatius quan aporten informació, mantenir un contrast suficient i completar les metadades bàsiques. Són detalls que no fan soroll en una captura, però que separen una demo d’una web funcional.
Arribar abans a una millor primera versió
El valor del procés no és afirmar que la IA “fa una web sola”. És poder invertir menys temps en feina repetitiva i més en l’estructura, el contingut i la direcció visual. La web antiga aporta el context; el codi estàtic aporta control; i la IA ajuda a explorar i construir amb velocitat.
El resultat és una base actual, lleugera i preparada per evolucionar sense haver d’introduir més tecnologia de la necessària.