El director comercial d’una empresa de components d’automatitzaci\u00f3 de Bilbao va rebre l’enc\u00e0rrec un dimecres a la tarda: necessitava una landing page operativa per a una fira a Hannover que obria el dilluns. El proc\u00e9s habitual amb l’ag\u00e8ncia de disseny trigava entre cinc i set dies. Aquella setmana ho va resoldre en dues hores amb una eina de Vibe Coding, va publicar la landing aquella mateixa nit i va arribar a la fira amb la p\u00e0gina funcionant.<\/p>\n
Quatre dies despr\u00e9s de la fira, la landing no apareixia en cap resultat de cerca. El formulari de captaci\u00f3 no estava connectat al CRM. L’equip de vendes no sabia quants visitants havia rebut ni d’on provenien. La p\u00e0gina va ser r\u00e0pida per\u00f2 va estar molt lluny de ser un actiu de l’empresa.<\/p>\n
Aquest article explica qu\u00e8 pot fer el Vibe Coding en el disseny web real d’una empresa industrial, quines eines existeixen i per a qu\u00e8 serveix cadascuna el 2026, quins problemes t\u00e8cnics apareixen quan no es compta amb revisi\u00f3 experta, i qu\u00e8 ha d’incloure una landing page B2B per convertir leads reals, no nom\u00e9s per veure’s b\u00e9.<\/p>\n
El cicle de producci\u00f3 web amb Vibe Coding t\u00e9 quatre moments.<\/p>\n
En el primer, l’equip defineix en llenguatge natural qu\u00e8 necessita: quines seccions t\u00e9 la p\u00e0gina, quina proposta de valor comunica, a qui s’adre\u00e7a, quina acci\u00f3 espera que faci el visitant.<\/p>\n
En el segon, l’eina genera el codi i desplega una versi\u00f3 previsualitzable al navegador.<\/p>\n
En el tercer, s’avalua si el resultat compleix la necessitat comercial real, no nom\u00e9s si funciona t\u00e8cnicament.<\/p>\n
En el quart, es publica.<\/p>\n
El que canvia respecte al flux tradicional amb ag\u00e8ncia \u00e9s la compressi\u00f3 radical del temps entre el primer i el quart moment. El que no canvia \u00e9s que el tercer moment requereix criteri hum\u00e0 amb coneixement del negoci i del mercat.<\/strong> La IA descriu en codi all\u00f2 que se li instrueix. No sap si all\u00f2 que has instru\u00eft \u00e9s el que realment necessita el teu client.<\/p>\n El Vibe Coding rendeix especialment b\u00e9 en: landing pages de captaci\u00f3 de leads per producte, campanya o esdeveniment sectorial; p\u00e0gines de presentaci\u00f3 de servei o nova l\u00ednia de fabricaci\u00f3; microllocs de fira o llan\u00e7ament de producte; web corporativa de deu a vint p\u00e0gines amb contingut principalment est\u00e0tic; p\u00e0gines de contacte segmentades per perfil de client o sector.<\/p>\n No \u00e9s la soluci\u00f3 directa, sense supervisi\u00f3 t\u00e8cnica addicional, per a:<\/p>\n En aquests contextos, el Vibe Coding pot ser un excel\u00b7lent punt de partida per validar idees, per\u00f2 necessita un especialista que converteixi el prototip en alguna cosa robusta abans de posar-lo en producci\u00f3.<\/p>\n Una landing page creada per un freelancer o una ag\u00e8ncia de disseny pot trigar entre cinc i set dies i costar entre 300 i 800 euros per a un projecte d’abast mitj\u00e0. Amb eines com Lovable o ChatGPT Work, la mateixa feina es pot completar en poques hores amb subscripcions des d’aproximadament 25 \u20ac\/mes.<\/p>\n El mat\u00eds que cap tutorial menciona: aquest estalvi en temps i producci\u00f3 nom\u00e9s es materialitza si el temps alliberat s’inverteix en la fase que s\u00ed que requereix expertesa humana<\/strong> (la revisi\u00f3 t\u00e8cnica, SEO-GEO i de conversi\u00f3 abans de publicar).<\/p>\n Si aquesta fase no existeix, el cost real no \u00e9s el de l’eina: \u00e9s el de l’oportunitat perduda per una p\u00e0gina que no posiciona, no converteix i no es pot mesurar.<\/p>\n Moltes eines de construcci\u00f3 de webs amb IA utilitzen les etiquetes de cap\u00e7alera amb finalitats de disseny visual en lloc d’estructurar la jerarquia sem\u00e0ntica del contingut. Els cercadors utilitzen aquestes cap\u00e7aleres per entendre de qu\u00e8 tracta cada secci\u00f3 de la p\u00e0gina. Quan l’estructura H1\/H2\/H3 est\u00e0 generada per criteris est\u00e8tics en lloc de sem\u00e0ntics, Google no pot llegir correctament el contingut, i el posicionament se’n resent encara que la p\u00e0gina es vegi perfecta per a l’usuari.<\/p>\n A aix\u00f2 s’hi suma el problema de la renderitzaci\u00f3 en JavaScript: una web el contingut de la qual dep\u00e8n de que el navegador executi JavaScript per mostrar-lo tindr\u00e0 dificultats tant amb els Core Web Vitals com amb la rastrejabilitat per part dels agents de cerca aut\u00f2noms que Google va desplegar el 2026 i els bots d’LLMs.<\/p>\n El contingut que nom\u00e9s \u00e9s visible per al navegador de l’usuari, per\u00f2 no per al rastrejador de Google, no existeix per al cercador.<\/p>\n Els tres problemes de rendiment m\u00e9s habituals en webs generades amb IA s\u00f3n mesurables i corregibles abans de publicar, amb eines gratu\u00eftes com PageSpeed Insights o Lighthouse:<\/p>\n LCP per sobre de 2,5 segons.<\/strong> Les imatges generades o importades en el proc\u00e9s de Vibe Coding rarament estan comprimides, no utilitzen formats moderns com WebP o AVIF, i no tenen dimensions definides perqu\u00e8 el navegador les reservi abans de carregar-les. La IA genera l’HTML per\u00f2 no optimitza els recursos visuals per defecte.<\/p>\n INP alt.<\/strong> El JavaScript generat pels constructors d’IA pot ser considerablement m\u00e9s pesat del necessari per a una landing page est\u00e0tica o una web corporativa. En p\u00e0gines amb formularis llargs, filtres de producte o configuradors, el temps de resposta a les interaccions de l’usuari es torna visible i frustrant.<\/p>\n CLS visible.<\/strong> Elements sense dimensions definides que provoquen salts de layout mentre carrega la p\u00e0gina. \u00c9s la fallada m\u00e9s barata de corregir i la que m\u00e9s molesta l’usuari, especialment al m\u00f2bil.<\/p>\n Com testejar abans de publicar.<\/strong> El protocol \u00e9s senzill i no requereix coneixements t\u00e8cnics avan\u00e7ats: copiar la URL de l’entorn de preproducci\u00f3 a PageSpeed Insights, filtrar per m\u00f2bil, i revisar els tres indicadors de Core Web Vitals. Si algun est\u00e0 en vermell o en groc, cal corregir-lo abans de publicar. En entorns on l’acc\u00e9s a una URL p\u00fablica d’staging no \u00e9s possible abans del desplegament, Lighthouse es pot executar directament al navegador Chrome sobre la versi\u00f3 local.<\/p>\n Una web generada amb Vibe Coding sense instruccions espec\u00edfiques sobre SEO presentar\u00e0, sovint, alguna combinaci\u00f3 d’aquests problemes: H1 duplicat o absent, title tag amb el nom gen\u00e8ric de l’eina de construcci\u00f3, meta description buida, schema no implementat, entre altres.<\/p>\n Individualment cap \u00e9s catastr\u00f2fic. Junts, converteixen una p\u00e0gina que funciona en una p\u00e0gina que no posiciona.<\/p>\n La soluci\u00f3 no requereix un projecte t\u00e8cnic de setmanes: una checklist de revisi\u00f3 SEO abans de publicar, aplicada per alg\u00fa amb coneixements t\u00e8cnics, resol el 80% d’aquests problemes en menys d’una hora.<\/p>\n El 2026, posicionar una web no significa nom\u00e9s apar\u00e8ixer als resultats de Google Search. Els motors d’IA generativa (Google AI Overviews, ChatGPT Search, Perplexity, Copilot) processen el contingut dels llocs web amb criteris diferents als del SEO tradicional, i decidir si una web o una landing page mereix ser citada en una resposta d’IA dep\u00e8n de factors com l’autoritat del domini, l’estructura del contingut i la densitat d’informaci\u00f3 verificable.<\/p>\n Aquesta disciplina t\u00e9 nom propi: GEO (Generative Engine Optimization) i \u00e9s el complement necessari de qualsevol estrat\u00e8gia de disseny web amb IA que vulgui generar visibilitat sostenible.<\/p>\nQuins tipus de p\u00e0gines t\u00e9 sentit construir amb Vibe Coding i quins no<\/h3>\n
\n
La nova economia del disseny web<\/h3>\n
El que el disseny web amb IA necessita per posicionar a Google i Bing<\/h2>\n
El problema estructural: la IA optimitza perqu\u00e8 es vegi b\u00e9, no perqu\u00e8 posicioni o rendeixi<\/h3>\n
Core Web Vitals i disseny web amb IA: les tres fallades m\u00e9s freq\u00fcents i com evitar-les<\/h3>\n
Estructura sem\u00e0ntica, schema markup i metadades: el que la IA genera malament per defecte<\/h3>\n
El posicionament en IA generativa: una disciplina pr\u00f2pia que no \u00e9s el SEO tradicional<\/h3>\n