Per 
Cada setmana algú ens pregunta si es pot crear un web amb Claude, la intel·ligència artificial d'Anthropic. La resposta curta és que sí: avui Claude pot escriure el codi d'un web complet, des d'una pàgina senzilla fins a un tema de WordPress a mida. La resposta llarga és la que importa si aquest web t'ha de portar clients.
Nosaltres dissenyem i programem webs amb Claude cada dia. En aquesta guia t'expliquem com crear un web amb Claude pas a pas si ho vols fer tu, què no farà la IA per tu i com ho fem a moca: el sistema d'automatitzacions, comprovacions i criteri que hi ha darrere de cada projecte, amb dos casos reals.
En resum
- Sí, pots crear un web amb Claude: al xat per a una prova ràpida, o amb Claude Code per a un web de debò, amb arxius, historial i publicació.
- El resultat depèn del que li donis: un bon encàrrec val més que el millor prompt.
- Claude programa molt de pressa, però no coneix el teu negoci, no fa les teves fotos ni decideix què et diferencia.
- Google no penalitza que un web estigui fet amb IA; penalitza el contingut que no ajuda ningú.
- A moca, Claude treballa dins d'un sistema propi: manual de cada projecte, generador de pàgines, comprovacions automàtiques, publicació amb historial, mesura diària i una persona revisant cada pas.
Què és Claude i què pot fer pel teu web
Claude és l'assistent d'intel·ligència artificial d'Anthropic. Per crear una pàgina web hi ha dues maneres de fer-lo servir:
- El xat de Claude. Li descrius la pàgina i te l'ensenya al costat de la conversa, en una vista prèvia que pots anar corregint. Va molt bé per a una maqueta, una landing de prova o comparar idees.
- Claude Code. És la versió que treballa sobre els arxius d'un projecte: llegeix el codi, el canvia, executa ordres, prova i desa cada canvi amb el seu historial. Funciona al terminal, a l'app d'escriptori, al navegador i en editors de codi. És la que fem servir nosaltres.
Amb Claude Code es pot fer un web estàtic en HTML i CSS, un tema de WordPress, un web amb un framework modern o retocar el que ja tens. El que no ve de sèrie és el domini, l'allotjament, la fitxa de Google i, sobretot, saber què ha de dir el teu web perquè et truquin a tu.
Com crear un web amb Claude, pas a pas
Si ho vols provar tu, aquest és l'ordre que et recomanem. Serveix igual per a un web d'una pàgina que per a un de deu.
1. Escriu l'encàrrec abans d'obrir Claude
Apunta en un document a què et dediques, en quina zona treballes, quins serveis vols vendre primer, qui és el teu client ideal, què et diferencia (garantia, terminis, certificacions reals) i què vols que faci qui visita el web: trucar-te, escriure't per WhatsApp o demanar pressupost. Claude omple els buits amb frases genèriques; com menys buits, millor web.
2. Tria on treballaràs
Per a una primera idea, el xat. Per a un web que publicaràs, Claude Code en una carpeta pròpia, si pot ser amb git per poder tornar enrere. Si ja tens WordPress, li pots demanar un tema a mida o un tema fill, però fes sempre una còpia de seguretat abans de tocar res.
3. Demana primer el pla, no el web
Demana-li que et faci preguntes i et proposi el mapa de pàgines (inici, serveis, zones, qui sou, contacte) i què anirà a cadascuna. Corregeix el pla. És molt més barat canviar una llista que refer deu pàgines.
4. Genera pàgina a pàgina i revisa al mòbil
Demana una pàgina cada vegada i obre-la al mòbil, perquè la majoria dels teus clients hi arribaran des d'allà. Comprova que el botó de trucar i el de WhatsApp es vegin sense baixar, que els textos es llegeixin sense fer zoom i que la pàgina carregui de pressa. Per a la velocitat tens PageSpeed Insights, gratis.
5. Revisa el SEO a mà, encara que l'escrigui Claude
Cada pàgina necessita el seu propi títol i descripció, un sol H1, textos que diguin què fas i on, imatges amb text alternatiu, dades estructurades (schema) del teu negoci i un sitemap. Claude sap escriure tot això. El que et toca a tu és comprovar que sigui veritat i que cada pàgina respongui a una cerca real dels teus clients.
6. Publica i connecta-ho tot
Necessites domini, allotjament, certificat HTTPS, un formulari que arribi de debò al teu correu, Google Search Console, una analítica que respecti la privacitat, i l'avís legal, la política de privacitat i la de galetes. És la part que més s'oblida i la que més problemes dona.
7. Mantén-lo viu
Un web no s'acaba el dia que es publica: cal actualitzar-lo, comprovar que el formulari continua arribant i afegir treballs i pàgines noves. Desa les instruccions del projecte en un arxiu perquè, la propera vegada, Claude no comenci de zero.
Un exemple d'encàrrec per a Claude
Així començaria un bon encàrrec. Canvia el que va entre claudàtors per les dades reals de la teva empresa:
«Crearem el web de [empresa], una empresa de [servei] a [zona]. Volem que ens demanin pressupost [tipus de client] de [ciutats]. Serveis per ordre d'importància: [llista]. Ens diferencia: [garantia, terminis, certificacions]. To proper, de tu i sense tecnicismes. Abans d'escriure codi, fes-me les preguntes que necessitis i proposa el mapa de pàgines amb el títol, la descripció i l'H1 de cadascuna. El web ha de ser ràpid, veure's bé al mòbil, tenir sempre a mà els botons de trucar i de WhatsApp, incloure dades estructurades de LocalBusiness i no inventar res que no t'hagi dit: ni ressenyes, ni xifres, ni anys d'experiència.»
L'última frase és la més important. Si no l'hi dius, la IA tendeix a omplir amb ressenyes, clients i xifres que ningú no li ha donat, i això en un web d'empresa és un problema seriós.
El que Claude no fa per tu
Treballant amb Claude cada dia, això és el que continua depenent d'una persona:
- Saber què et diferencia. Claude escriu bé, però no sap que respons el mateix dia o que els teus tècnics estan certificats. Si no l'hi dones, escriu el mateix que la teva competència.
- Decidir. Et pot proposar vint portades; triar la que funciona per al teu client és criteri, no codi.
- El que és real. Les fotos dels teus treballs, les teves ressenyes, els teus preus i les teves dades de contacte. Res d'això es pot generar sense enganyar qui et llegeix.
- Comprovar que funciona fora de l'ordinador de qui l'ha fet. Formularis, correus, mòbils antics, velocitat real i avisos legals.
- Respondre del resultat. Si alguna cosa falla un dissabte, algú se n'ha d'assabentar i arreglar-ho.
Google ho diu a la seva manera: premia el contingut útil i fiable, s'hagi produït com s'hagi produït, i considera spam fer servir la IA per generar contingut amb l'única finalitat de manipular el rànquing (ho explica a Google Search Central). La IA no és el problema; el contingut buit, sí.
Com creem webs amb Claude a moca
Quan algú sent que treballem amb IA, de vegades s'imagina que escrivim una frase i surt un web. És gairebé al revés: hem dedicat moltes hores a construir un sistema perquè Claude treballi amb les nostres regles, que cada canvi es comprovi abans d'arribar al teu web i que res d'important depengui de la memòria de ningú. Aquestes són les seves peces.
1. Un manual viu per a cada projecte
Cada web té el seu repositori amb un manual que Claude llegeix abans de tocar res: colors exactes, tipografies, com es publica, què no es pot fer i cada decisió que has pres tu, amb la seva data. Si un dia ens dius «no tornis a posar aquesta línia», queda escrit i no torna a aparèixer. És la diferència entre una IA que comença de zero cada vegada i una que coneix el teu projecte.
2. Un generador de pàgines propi
Els nostres webs estàtics no surten d'una plantilla comprada. Els munta un programa nostre que uneix les pàgines, els textos en castellà i en català, el menú, les dades estructurades per a Google, el sitemap i les versions lleugeres de les imatges per al mòbil. Les preguntes freqüents que veus en una pàgina i les que llegeix Google surten del mateix lloc, així que mai no diuen coses diferents.
3. Comprovacions automàtiques abans de publicar
Cap canvi es publica sense passar una bateria de comprovacions: que el web es generi sense errors, que el codi JavaScript sigui vàlid, que no hi hagi enllaços interns trencats i que les dades estructurades siguin correctes. Per a la part visual, un navegador automàtic (Playwright) obre les pàgines en mida ordinador i mòbil i fa captures que revisem. També el fem servir per mesurar la fluïdesa: així vam trobar a la nostra portada unes regles d'estil que frenaven el scroll, i vam passar de 57 fotogrames lents a 1.
4. Publicació amb historial
Cada canvi és un pas petit, desat a git amb la seva descripció, i es publica amb una sola ordre. Si alguna cosa no convenç, es torna enrere en segons. En els projectes de WordPress publica una acció automàtica que només pot escriure a la carpeta del tema, així que un error mai no toca la resta de la instal·lació.
5. Auditories generades a mida
Abans de proposar-te res analitzem el teu web actual. Una plantilla i un generador propis munten una auditoria personalitzada amb el que qualsevol pot veure al teu web, les deu heurístiques d'usabilitat de Nielsen i una nota sobre 100 que pesa sobretot el disseny i l'experiència (60 %), després Google (30 %) i la part tècnica (10 %). T'arriba per enllaç i es llegeix en tres minuts.
6. Mesura cada dia, sense tocar res
Unes tasques programades recullen cada matí, i diverses vegades al dia, les dades del web (amb Umami, que no fa servir galetes), de Google Search Console, de Microsoft Clarity per a qui accepta galetes i de la fitxa de Google, i les porten a un panell intern. Així veiem quines pàgines porten visites i què busca la gent que hi arriba, article per article.
7. Imatge i vídeo amb IA, revisats a mà
Fem servir Gemini per a il·lustracions i renderitzem els vídeos dels nostres casos fotograma a fotograma amb un navegador automàtic. El que es genera amb IA es revisa, s'indica i mai no substitueix una foto real del teu treball.
8. Persones en cada decisió
Tot l'anterior existeix perquè nosaltres, en Marc i la Lucía, dediquem el temps al que no s'automatitza: entendre el teu negoci, decidir l'estratègia, dirigir el disseny i revisar cada text. Res no es publica al teu web sense el teu vistiplau. Ho expliquem amb més detall a com treballem.
Cas real: el web de Pablo Escayola
Pablo Escayola és assessor immobiliari independent i ven propietats a Barcelona, la Costa Brava i la Cerdanya. Tenia una audiència enorme a les xarxes, però cap web propi. Li vam fer la marca personal i un web en WordPress amb un tema fet a mida, sense constructors visuals.
Així es veu el sistema en un projecte real:
- Un manual del projecte amb la direcció d'art (fons travertí, tinta i un granat d'accent), la tipografia, el mode fosc i regles com no carregar fonts ni scripts de tercers, per privacitat i velocitat.
- Un catàleg de propietats a mida: cercador amb filtres, fitxes amb el vídeo de cada casa i els seus últims vídeos de TikTok a la portada.
- Tres idiomes, castellà, català i anglès, amb els textos fixos del tema traduïts als seus arxius d'idioma.
- Més de 130 canvis desats amb el seu historial i publicats de manera automàtica, només a la carpeta del tema.
- Un panell senzill perquè en Pablo gestioni les seves propietats, contactes i blog sense dependre de ningú.
- Una pàgina privada per pujar propietats des del mòbil que crea la fitxa, redueix les fotos i la tradueix sola. Ho expliquem a automatitzar amb Claude: cas real.
Claude va escriure bona part del codi; les decisions de marca, de disseny i de què explicar van ser nostres i d'en Pablo. Tens el procés complet al cas de Pablo Escayola i el seu web a pabloescayola.es.
Cas real: el nostre propi web
La millor prova del sistema és el web que estàs llegint. mocabcn.com està fet amb el mateix mètode: generador propi, castellà i català, dades estructurades a cada pàgina, eines gratis que funcionen al teu navegador i una zona interna amb el nostre ERP, els pressupostos i les mètriques. Des del 2 d'octubre de 2026 hem desat i publicat més de 600 canvis, cadascun amb les seves comprovacions. A aquest ritme no s'hi arriba teclejant més de pressa, sinó amb un sistema.
A la marca treballem igual. A la identitat de Supra Group, la construcció del símbol es dibuixa pas a pas a la mateixa pàgina del cas, i la seva animació es va renderitzar fotograma a fotograma des del mateix projecte.
Fer-lo tu amb Claude o encarregar-lo?
Depèn del que necessitis. Si vols una pàgina per provar una idea i tens temps, Claude és una eina fantàstica i aquesta guia et serveix. Si el teu web t'ha de portar clients cada mes, la diferència no és a la IA (fem servir la mateixa que pots fer servir tu), sinó en tot el que l'envolta.
| Tu amb Claude | Amb moca web | |
|---|---|---|
| Cost | La teva subscripció de Claude, domini i allotjament | 1.090 € sense IVA, fins a 8 pàgines (domini i allotjament a part) |
| El teu temps | Aprendre, provar i corregir | Unes 3 o 4 hores en tot el projecte |
| Textos i SEO | El que sàpigues tu | Textos escrits per nosaltres, SEO tècnic i Search Console |
| Comprovacions | Les que facis a mà | Automàtiques a cada canvi, més la nostra revisió |
| Posada en marxa | Pel teu compte | Domini, HTTPS, correu, formulari i WhatsApp connectats |
| Després | Tu | Manteniment opcional amb moca care |
Tens tot el que inclou a moca web, i si vols comparar preus en general, ho expliquem a quant costa una pàgina web per a una empresa de serveis.
Preguntes freqüents
Pots fer proves al xat amb el pla gratuït, que té límits d'ús. Per treballar sobre els arxius d'un web amb Claude Code necessites un pla de pagament; consulta els preus actuals al web d'Anthropic. I qualsevol web publicat necessita, a més, domini i allotjament.
Per a una maqueta al xat, no. Per publicar un web que funcioni bé, ajuda molt: cal entendre què fa cada arxiu, revisar els canvis, configurar l'allotjament i adonar-se de quan la IA s'equivoca.
No per estar fets amb IA. Google diu que premia el contingut útil i fiable sense importar com s'hagi creat, i que fer servir IA per generar contingut amb la finalitat de manipular el rànquing va contra les seves polítiques de spam. El que importa és que el que diu el teu web sigui veritat i serveixi a qui el llegeix.
Sí. Pot programar un tema a mida o modificar-ne un que ja existeixi. Així vam fer el web de Pablo Escayola: un tema propi, sense constructors visuals, amb un panell senzill perquè ell gestioni les seves propietats.
Una pàgina de prova, en una tarda. Un web d'empresa llest per portar clients, amb estratègia, textos revisats, SEO i tot connectat, ens porta de 3 a 5 setmanes, i la major part d'aquest temps no és escriure codi.
Claude per programar i revisar, i Gemini per a imatges, juntament amb eines com Figma, WordPress, Search Console i PageSpeed Insights. Cada decisió la prenem i la revisem nosaltres, i el que es genera amb IA s'indica.