Com crear un lloc web amb IA: del primer prompt al lloc en directe

Per crear un lloc web amb IA, escriu per a què serveix el lloc i quines pàgines necessita, descriu-ho a un constructor de llocs web o d'aplicacions amb IA en unes quantes frases en llenguatge normal, i deixa que generi una primera versió que pots veure en una vista prèvia en directe. Després arregla el text, comprova-ho en un telèfon, afegeix les bases que necessiten els motors de cerca i publica-ho en un domini. La majoria de llocs petits —un lloc de negoci, un portafolis, una pàgina de destinació, un blog senzill— poden anar de la idea a estar en línia en una sola sessió.

Quin tipus de lloc web estàs creant?

«Lloc web» cobreix coses molt diferents, i el tipus que triïs canvia el que has de demanar:

Tipus de lloc	Pàgines que sol necessitar	Necessita base de dades?
Pàgina de destinació	Una pàgina llarga: capçalera, avantatges, proves, preguntes freqüents, crida a l'acció	Només si recull registres
Lloc de petit negoci	Inici, serveis, qui som, contacte, potser preus	Només per a formularis o reserves
Portafolis	Inici, graella de treballs, pàgines de projectes, qui som, contacte	Rarament
Blog o lloc de contingut	Inici, llista d'articles, pàgines d'articles, categories	Sovint, o fitxers Markdown
Lloc amb funcions d'aplicació	Qualsevol dels anteriors més inici de sessió, reserves, comandes o un tauler	Sí

Si el teu és a l'última fila, en realitat estàs construint una aplicació web amb una façana de màrqueting. Això està bé —els constructors d'aplicacions amb IA gestionen les dues coses—, però planifica la part d'aplicació per separat; la nostra guia sobre com crear una aplicació amb IA en tracta.

Constructors de llocs amb IA vs. plantilles vs. constructors d'aplicacions amb IA

Hi ha tres rutes habituals, i cadascuna va bé a una persona diferent.

Constructors basats en plantilles amb funcions d'IA (Wix, Squarespace, Framer i similars). Parteixes d'una plantilla dissenyada i l'edites visualment; la IA ajuda a escriure text o a suggerir un disseny. Són bons quan vols un disseny provat, un editor visual i extras integrats com un blog o un widget de cites.
Constructors d'aplicacions amb IA (Mythex, Lovable, Bolt i d'altres). Descrius el lloc al xat i la IA escriu el codi des de zero, després l'executa en una vista prèvia en directe. Són bons quan vols quelcom a mida, quan vols canviar-lo parlant en lloc d'arrossegant caixes, o quan preveus afegir funcions d'aplicació més endavant.
Llocs fets a mà o per agència. Continuen sent l'opció adequada per a llocs grans amb fluxos de contingut complexos, sistemes de marca estrictes o revisió legal de cada pàgina.

Per veure una comparació directa d'eines concretes, mira els millors constructors de llocs web amb IA.

Pas 1: Planifica el lloc en una sola pàgina

Abans d'obrir cap eina, respon aquestes cinc preguntes. Triga deu minuts i t'estalvia hores d'anada i tornada:

Qui és el visitant i què ha de fer? «Propietaris de casa de la zona que han de trucar per demanar un pressupost» és un pla. «Tothom» no ho és.
Quines pàgines hi ha? Fes-ne una llista. La majoria de llocs petits necessiten quatre o cinc.
Què va a cada pàgina? Una o dues línies per a cadascuna: «Serveis: tres serveis amb una descripció curta i un preu de sortida».
Què és real? Reuneix el nom real del teu negoci, els serveis, els preus, l'adreça, l'horari, les fotos i els testimonis que pots fer servir. La IA inventarà marcadors de posició per a tot el que no li donis.
Com ha de sentir-se? Dues o tres paraules («calmat, net, molt d'espai en blanc») o un enllaç a un lloc que t'agradi.

Pas 2: Escriu el primer prompt

Un bon primer prompt descriu el negoci i les pàgines, no el codi:

Construeix un lloc web per a Harbor Physio, una clínica de fisioteràpia en un poble petit de costa. Pàgines: Inici (capçalera amb el botó «Reserva una valoració», tres motius per triar-nos, una secció breu de testimonis), Serveis (lesions esportives, dolor lumbar, rehabilitació postcirurgia; cadascun amb un paràgraf i la durada de la sessió), Qui som (els dos fisioterapeutes, amb marcadors de posició per a les fotos) i Contacte (adreça, horari, telèfon i un formulari de contacte). Aspecte calmat i net amb un accent blau suau. Primer mòbil. Fes servir un text realista, sense lorem ipsum, i no inventis ressenyes ni premis.

Aquesta última frase importa. Les eines d'IA estan encantades d'omplir l'espai buit amb testimonis inventats, banners de «confiat per 10.000 clients» o premis falsos. Digues-li que no ho faci, i comprova-ho igualment.

Si ja tens un logotip, colors de marca o una captura d'un lloc que t'agradi, adjunta-ho. Per a més patrons, mira com escriure prompts per a constructors d'aplicacions amb IA.

Pas 3: Revisa-ho com un visitant

Quan aparegui la primera versió, no comencis retocant tipografies. Recorre-la com ho faria el teu visitant:

Pots dir a què es dedica el negoci en cinc segons des que arribes?
És evident el botó principal, i porta a algun lloc?
Existeix cada pàgina del menú i enllaça bé?
Canvia a la vista de mida de telèfon. La majoria de visitants arribaran des d'un telèfon, i és aquí on apareixen el text apretat i les imatges massa grans.

Despràs canvia una cosa cada vegada. «Fes el titular de la capçalera més curt i posa el número de telèfon al encapçalat» dona un millor resultat que «millora-ho». Si un canvi surt malament, torna a una versió anterior en lloc d'intentar negociar-hi amb el xat.

Pas 4: Substitueix els marcadors de posició pel contingut real

El primer esborrany tindrà imatges de marcador i frases genèriques. Treballa pàgina per pàgina:

Text. Enganxa les teves descripcions de serveis, preus i horaris reals. Demana a la IA que els ajusti, però que els fets siguin teus.
Imatges. Puja les teves pròpies fotos quan puguis. Les fotos d'arxiu són bones per a fons; les fotos reals del teu treball, equip o local generen més confiança.
Proves. Només fes servir testimonis, logotips i xifres que puguis justificar.
Pàgines legals. Si recollint dades personals a través d'un formulari, normalment necessitaràs una política de privacitat. Demana a la IA una pàgina i després fes-la revisar segons les normes del lloc on operes: una política generada és un punt de partida, no assessorament legal.

Pas 5: Formularis, reserves i altres parts d'«aplicació»

Un formulari de contacte necessita un lloc on enviar les dades. Les opcions, de la més simple a la més complexa:

Opció	Com funciona	Compromís
Enllaç mailto o número de telèfon	S'obre l'aplicació de correu del visitant	Zero configuració, però sense registre de consultes
Formulari desat en una base de dades	Els enviaments s'emmagatzemen i es mostren en una pàgina privada	Has de revisar la llista
Formulari que t'envia un correu	Fa servir un proveïdor de correu com Resend o Postmark	Necessita una clau d'API i un domini d'enviament verificat
Eina de tercers incrustada	Un widget de reserves o de butlletí d'un altre servei	Ràpid, però el seu aspecte i les seves dades viuen en un altre lloc

Si necessites reserves o pagaments reals, mira com crear una aplicació de reserves i com afegir pagaments a la teva aplicació.

Pas 6: Bases de SEO abans de compartir-ho

Una IA pot escriure una pàgina preciosa que els motors de cerca gairebé no entenen. Abans del llançament, demana:

Un títol i una metadescripció únics a cada pàgina
Una capçalera principal clara per pàgina, amb subcapçaleres sensates
Text alternatiu descriptiu a les imatges
Etiquetes Open Graph, perquè els enllaços es vegin bé en compartir-los a xarxes socials o en missatges
Un fitxer de mapa del lloc i un fitxer robots

Hi ha un punt tècnic que val la pena conèixer. Molts constructors amb IA produeixen aplicacions d'una sola pàgina, on el navegador construeix la pàgina amb JavaScript. Els motors de cerca les poden indexar, però l'HTML estàtic o renderitzat al servidor és més fiable per a les pàgines que han de posicionar-se. Si la cerca és important, demana un lloc estàtic o un framework que renderitzi les pàgines al servidor. La nostra guia de SEO per a llocs web creats amb IA ho aprofundeix.

Pas 7: Publica i connecta un domini

Publicar converteix la vista prèvia en un lloc públic. La majoria de constructors et donen primer un subdomini gratuït, que està bé per fer proves i compartir-ho amb amics. Per a un negoci, connecta el teu propi domini: o bé el compres a través del constructor, o bé apuntes un domini que ja tens al lloc amb un registre DNS. Com connectar un domini propi explica la part del DNS pas a pas.

Després del llançament, crea un compte gratuït a Google Search Console perquè puguis veure si les teves pàgines s'indexen.

Errors habituals

Demanar-ho tot de cop. Dotze pàgines, un blog, una botiga i una zona de socis en un sol prompt produeix una versió superficial de cadascuna. Construeix primer les pàgines essencials.
Publicar text de marcador. Cerca a cada pàgina «Lorem», «La teva empresa» i xifres inventades abans de sortir en línia.
Ignorar el mòbil. Revisa cada pàgina a l'amplada d'un telèfon, no només la de l'inici.
Deixar vaga la crida a l'acció. Cada pàgina ha de fer evident el pas següent: trucar, reservar, comprar o contactar.
Oblidar qui l'actualitzarà. Si una altra persona editarà el lloc cada setmana, assegura't que pugui fer-ho, ja sigui xatejant amb el mateix constructor, o triant una eina amb editor visual.

Què costa

Un lloc senzill creat amb IA sol costar molt menys que un de dissenyat i construït a mida. Els costos de funcionament a tenir en compte són:

El constructor. La majoria tenen un nivell gratuït per provar coses i un pla de pagament per a dominis propis i més ús.
Allotjament. De vegades inclòs al pla, de vegades per ús.
Un nom de domini. Una quota de registre anual, que depèn del nom i de l'extensió.
Extres. Un proveïdor de correu per a les notificacions de formularis, o eines de pagament per a reserves o butlletins.

Quan un constructor de llocs web és l'opció millor

Sigues honest sobre el que necessites. Si vols un lloc informatiu clàssic, un editor visual per a un company no tècnic, un blog integrat amb programació, o una botiga en línia amb inventari i enviaments gestionats, potser et serveix més un constructor de llocs basat en plantilles o una plataforma dedicada com Shopify que qualsevol codi generat per IA. Els constructors d'aplicacions amb IA guanyen avantatge quan el lloc és inusual, canvia sovint, o és la porta d'entrada a alguna cosa que es comporta com una aplicació.

Construir-ho amb Mythex

Mythex és un constructor d'aplicacions amb IA, i els llocs web són una de les coses més habituals que la gent hi construeix. Descrius el lloc, es construeix en una vista prèvia en directe (incloent-hi una vista de mida de telèfon), i el publiques a una adreça elteunom.mythex.app; al Pro pots comprar un domini a Mythex o connectar-ne un de propi. Si els rànquings de cerca són importants, pots demanar un lloc estàtic pla en lloc de l'aplicació React per defecte; mira la documentació sobre llocs web estàtics i SEO per a la teva aplicació publicada.

Mythex no és un CMS: no hi ha un accés d'editor separat per a un equip de màrqueting, de manera que els canvis es fan xatejant amb el constructor o editant el codi. Per evitar la pàgina en blanc, comença amb una de les plantilles de llocs web o plantilles de portafolis, cadascuna de les quals obre un projecte nou amb un prompt inicial ja omplert.

Preguntes

La IA pot crear un lloc web complet per a mi?

Sí. Un constructor de llocs web o d'aplicacions amb IA pot produir un lloc de diverses pàgines a partir d'una descripció escrita, incloent-hi el disseny, el text, les imatges i un formulari de contacte. Encara has d'aportar les dades del teu negoci i revisar cada pàgina abans de publicar-la.

Un lloc web creat amb IA és bo per al SEO?

Pot ser-ho, però no és automàtic. Cada pàgina necessita un títol i una descripció únics, capçaleres reals i contingut real, i un lloc que es renderitzi bé per als motors de cerca; demana-ho explícitament i revisa-ho abans del llançament.

Necessito saber HTML per crear un lloc web amb IA?

No. Descrius el que vols en llenguatge normal i la IA escriu el codi. Conèixer alguns termes —pàgina, secció, formulari, domini— fa més clares les teves peticions, però mai no has d'escriure HTML tu mateix.

He d'usar una plantilla o un constructor de llocs web amb IA?

Fes servir un constructor basat en plantilles si vols un disseny provat i un editor visual perquè altres el puguin actualitzar després. Fes servir un constructor amb IA si vols quelcom a mida de manera ràpida, o un lloc que també necessiti funcions d'aplicació com reserves, inicis de sessió o una base de dades.