Vibe coding per a principiants: com començar, pas a pas

El vibe coding per a principiants es redueix a cinc passos: tria una eina que executi l'app per a tu, descriu una petita app amb paraules senzilles, prova-la com ho faria un usuari, demana una correcció cada vegada i publica quan funcioni. No cal que sàpigues programar. Aquest tutorial recorre cada pas amb un primer projecte real, els prompts exactes que has d'escriure i els errors que gairebé tots els principiants cometen la primera setmana.

Si vols primer el context —d'on ve el terme i per què la gent hi discuteix—, llegeix què és el vibe coding. Aquesta pàgina és el costat pràctic.

Què necessites abans de començar

Menys del que creus:

• Un navegador i un compte amb una eina de vibe coding. Els principiants haurien d'escollir un creador d'apps amb IA, que escriu el codi, l'executa i l'allotja, en lloc d'un assistent de codi que espera que gestionis tu els fitxers i els servidors.
• Una petita idea. No la teva startup. Una eina per a una persona (tu) amb una o dues pantalles.
• Una o dues hores sense interrupcions. La primera sessió t'ensenya el ritme.

Això és tot. Sense instal·lacions, sense curs de programació, sense terminal.

Quina eina triar com a principiant

L'eina importa menys que els hàbits, però ha de fer tres coses: mostrar una previsualització en directe mentre construeix, deixar-te desfer un canvi dolent i publicar en un enllaç que puguis compartir. La nostra comparativa de les millors eines de vibe coding cobreix les opcions principals amb honestedat. Mythex n'és una: descrius l'app en el xat, construeix una app completa real amb una previsualització en directe, afegeix una base de dades quan l'app necessita recordar coses i publica amb un clic. El pla gratuït no necessita targeta.

Pas 1: tria un primer projecte que puguis acabar

Els principiants solen fracassar perquè apunten massa alt. Un bon primer projecte:

• És útil per a tu personalment, així que el provaràs com cal.
• Cap en una o dues pantalles.
• Emmagatzema una petita quantitat de les teves pròpies dades.
• No té pagaments, ni equips, ni dades personals sensibles.

Bons primers projectes:

Usarem la llista de lectura en la resta d'aquest tutorial.

Pas 2: escriu el teu primer prompt

El teu primer missatge determina la forma de tot. Digues per a qui és, què fa i com ha de veure's. Mantén-lo en un paràgraf curt.

Un primer prompt feble:

Fes-me una app de llibres.

Un bon primer prompt:

Construeix-me una app de llista de lectura. Puc afegir un llibre amb títol, autor i estat (per llegir, llegint, acabat). Mostra els llibres com a targetes agrupades per estat, amb els més nous primer. Puc canviar l'estat d'un llibre o eliminar-lo. Que sigui neta i simple: fons blanc, un sol color d'accent, que funcioni al meu telèfon. Desa els llibres perquè continuïn allà després de refrescar la pàgina.

Fixa't en el que fa el segon. Enumera els camps, les accions, la disposició i una regla que els principiants sempre obliden: desa les dades perquè sobrevisquin a un refresc. Sense aquesta línia, moltes eines construeixen una pàgina que sembla acabada però oblida tot quan la recarregues.

Per a més punts de partida, consulta el nostre full de referència de prompts de vibe coding.

Demana un pla quan no estiguis segur

Si no saps com descriure alguna cosa, demana a la IA que planifiqui abans de construir:

Abans de construir res, digues-me en paraules senzilles quines pantalles faràs, quines dades emmagatzemaràs i què necessites que decideixi jo.

A Mythex, això és per a això el mode Plan: l'agent exposa l'enfocament i tu l'aproves abans que canviï cap fitxer.

Pas 3: prova-la com un usuari, no com la persona que la va construir

Quan aparegui la previsualització, no te la limitis a admirar. Usa-la:

1. Afegeix tres llibres, un d'ells amb un títol molt llarg.
2. Canvia un estat. La targeta passa al grup correcte?
3. Refresca la pàgina. Els llibres encara hi són?
4. Prova d'afegir un llibre amb el títol buit. Què passa?
5. Obre la previsualització al teu telèfon, o estreny la finestra del navegador.

Anota en paraules senzilles què no funciona. «El títol llarg trenca la disposició de la targeta» és un informe d'error perfecte. «Està trencat» no ho és.

Pas 4: corregeix una cosa per missatge

Aquest és l'hàbit que separa qui acaba de qui es rendeix. Envia un canvi, comprova'l i després envia el següent.

El títol llarg «The Hitchhiker's Guide to the Galaxy: The Complete Trilogy» surt de la targeta. Fes que els títols llargs ocupin dues línies i talla la resta amb «…».

Després:

Si envio el formulari amb el títol buit, no passa res i no hi ha cap missatge. Mostra «Afegeix un títol» sota el camp i no guardis el llibre.

Per què d'un en un? Quan demanes cinc canvis en un sol missatge, la IA pot fer-ne quatre bé i trencar silenciosament alguna altra cosa, i no sabràs quin canvi ha causat el problema. Els passos petits també fan útil desfer: si un canvi surt malament, torna a la versió just anterior i prova una petició més clara.

Quan alguna cosa es trenca

Passarà. Tots els creadors tenen errors. Copia el text exacte de l'error, o descriu exactament què has clicat i què has vist, i enganxa-ho de nou:

Quan faig clic a Eliminar en una targeta veig «Alguna cosa ha anat malament» i el llibre es queda. Descobreix per què passa i corregeix-ho. Digues-me quina era la causa.

Demanar la causa importa. T'ensenya com funcionen les apps i impedeix que la IA endevini. La nostra guia sobre com depurar una app construïda amb IA va més a fons.

Pas 5: fes-la teva

Quan funcioni, millora-la amb els mateixos passos petits:

• «Afegeix una valoració d'1 a 5 estrelles que es mostri en els llibres acabats.»
• «Afegeix un quadre de cerca sobre les targetes que filtri per títol o autor.»
• «Fes servir un fons blanc trencat i un verd fosc com a color d'accent.»
• «Afegeix un comptador a dalt: llibres acabats aquest any.»

Cada un és un canvi únic i comprovable.

Pas 6: publica-la i comparteix-la

Quan faci el que necessites, publica-la. A Mythex això és un clic, i obtens una URL pública que pots obrir en qualsevol dispositiu o enviar a un amic. Si més endavant vols el teu propi domini, això és una funció de Pro, i la nostra guia sobre com connectar un domini personalitzat ho explica.

Abans de compartir res més enllà d'uns quants amics, llegeix el vibe coding és segur?. Per a una llista de lectura personal el risc és baix. Per a una app on desconeguts es registren i emmagatzemen dades, hi ha comprovacions que cal fer abans.

Errors de principiant que cal evitar

• Demanar-ho tot de cop. «Fes-me un Goodreads» produeix alguna cosa que sembla impressionant i funciona malament. Comença per la versió més petita útil.
• No provar el refresc. Les dades que desapareixen en recarregar són la sorpresa més habitual dels principiants.
• Reescriure la petició des de zero cada vegada. Digues què canviar i què mantenir: «Mantén la disposició, canvia només els colors.»
• Confiar en el «ja està arreglat». La IA sovint dirà que un error està arreglat. Comprova-ho tu mateix cada vegada.
• Enganxar contrasenyes o claus d'API al xat. Si la teva app necessita una clau per a un servei extern, posa-la a la configuració de secrets de l'eina, mai en un missatge ni en el codi. Consulta com mantenir segures les claus d'API.
• Rendir-se després del primer error. Els errors són normals. Enganxa'ls de nou i demana'n la causa.

Què aprendre pel camí

No necessites un curs, però unes quantes idees faran que cada petició sigui més precisa. Demana a la IA que te les expliqui en el context de la teva pròpia app:

• Frontend i backend: què s'executa al navegador del visitant i què en un servidor. (Frontend vs backend)
• Base de dades: on guarda la teva app les dades. (Què és una base de dades?)
• Autenticació: com sap l'app qui és algú.
• Secrets: claus privades que usa l'app i que els visitants no han de veure mai.

Un bon prompt per a això: «Explica'm com la meva llista de lectura desa un llibre, des que faig clic a Afegir fins que es guarden les dades. Fes-ho amb paraules senzilles i refereix-te als fitxers reals.»

El teu segon i tercer projecte

Després de la primera app, tria alguna cosa un pas més difícil. Un seguidor d'hàbits amb un gràfic setmanal. Un formulari de reserva que t'envia un correu. Un petit tauler que llegeix d'un full de Google. Els nostres exemples de vibe coding mostren tipus d'app reals amb els prompts darrere i què va sortir malament, i com construir una app amb vibe coding porta un projecte més gran des de la idea fins a una app publicada amb usuaris.

Quan estiguis a punt per començar, obre el creador d'apps amb IA, enganxa el prompt de la llista de lectura de dalt i canvia'l per la teva pròpia idea.

Preguntes