30 prompts de vibe coding que pots copiar (full de referència)

Els millors prompts de vibe coding són curts, específics i sobre el comportament: qui usa l'app, què pot fer, què guarda i com es veu. A continuació hi ha 30 prompts que pots copiar i enganxar, agrupats per l'etapa en què ets, des de la primera versió fins a la publicació. Substitueix les parts entre [claudàtors] pels teus propis detalls.

Funcionen en qualsevol creador d'apps amb IA o agent de codi. Si vols el raonament que hi ha darrere, la nostra guia més llarga sobre com escriure prompts per a creadors d'apps amb IA explica els principis. Aquesta pàgina és el full de referència.

Com usar aquest full de referència

• Comença amb un prompt de primera versió, i després usa la resta d'un en un.
• Prova després de cada prompt. Revisa el canvi fent clic abans d'enviar el següent.
• Conserva el que funciona. La majoria de prompts de seguiment aquí acaben amb «mantén tota la resta igual», i hi ha un motiu.
• Enganxa el text exacte. Els missatges d'error, les etiquetes dels botons i les paraules de la pantalla guanyen sempre a les descripcions.

Prompts de primera versió

Aquests defineixen la forma de l'app. Cadascun nomena els usuaris, les accions, les dades i l'aspecte.

1. Un seguidor senzill

Construeix-me un seguidor de [hàbit]. Puc afegir un [hàbit] amb un nom i un color, marcar-lo una vegada al dia, i veure una graella de 30 dies i la meva ratxa actual. Desa-ho tot perquè continuï allà després de refrescar la pàgina. Disseny net i minimalista que funcioni en un telèfon.

2. Una pàgina de reserves per a un petit negoci

Construeix una pàgina de reserves per a la meva [perruqueria]. Els clients trien un servei ([tall 30 min, color 90 min]), una data i una franja lliure entre [9:00 i 18:00], i després introdueixen nom, telèfon i correu. Dues persones no poden reservar la mateixa franja. Necessito una pàgina d'administració privada, darrere d'un inici de sessió, que mostri les properes reserves per dia.

3. Una eina interna

Construeix una eina interna perquè el meu equip segueixi els [préstecs de material]. Cada element té un nom, un codi i un estat (disponible, en préstec, espatllat). El personal inicia sessió, pot registrar un element a nom propi i retornar-lo. Mostra una taula amb filtres per estat i un historial de qui ha tingut cada element.

4. Una pàgina de llançament amb llista d'espera

Construeix un lloc d'una sola pàgina per a [el meu producte: una app de planificació de menjars per a pares ocupats]. Capçalera amb titular, subtítol d'una frase i registre amb correu. Després, tres avantatges, una secció breu de com funciona i unes preguntes freqüents. Desa els correus de registre en una base de dades i mostra'm la llista en una pàgina d'administració privada.

5. Un portal de clients

Construeix un portal de clients per al meu [estudi de disseny]. Cada client inicia sessió i només veu els seus propis projectes, amb l'estat, els fitxers que he pujat i un fil de comentaris. Jo entro com a administrador i veig tots els clients. Els clients mai no han de veure les dades dels altres.

6. Una calculadora o eina de pressupostos

Construeix una calculadora de pressupostos per al meu [negoci de neteja]. Entrades: nombre d'habitacions, banys, serveis extra (forn, finestres, nevera) i freqüència (una vegada, setmanal, mensual). Mostra el preu a mesura que canvien les opcions, amb un desglossament. Preus: [enganxa la teva llista de preus]. Afegeix un botó per enviar-me la sol·licitud de pressupost per correu.

Prompts de planificació

Usa aquests abans d'una funció gran, o quan no estiguis segur de com descriure alguna cosa.

7. Planifica abans de construir

Abans d'escriure cap codi, descriu en paraules senzilles les pantalles que construiràs, les dades que emmagatzemaràs i les decisions que necessites que prengui jo. Espera la meva aprovació.

8. Converteix una idea desordenada en una primera versió

Aquí tens la meva idea: [enganxa les notes]. Suggereix la versió inicial més petita que encara sigui útil, en 5–8 punts. Enumera el que deixaries per més tard i per què.

9. Pregunta què falta

Quines preguntes faria un desenvolupador abans de construir això? Fes-me-les una per una, i després resumeix les meves respostes en una especificació curta.

10. Revisa primer un canvi gran

Vull afegir [comptes d'equip on diverses persones comparteixen un espai de treball]. Explica què ha de canviar a les dades, a les pantalles i als permisos, i què es podria trencar. No canviïs res encara.

Prompts de disseny

11. Defineix un estil clar

Reestilitza l'app: fons blanc trencat, text fosc, un color d'accent [#1F6F50], cantonades arrodonides, espaiat generós i una tipografia sans-serif moderna. Mantén la disposició i cada funció exactament com estan.

12. Copia la sensació d'una referència

Fes que el tauler sembli una app de finances tranquil·la: molt espai en blanc, números grans i en negreta, etiquetes petites i grises, i un gràfic simple a dalt. No copiïs el logotip ni el text de cap marca.

13. Corregeix la disposició al telèfon

En un telèfon de 375 px d'amplada, la taula de [la pàgina de Comandes] fa scroll lateral i els botons se superposen. Converteix cada fila en una targeta apilada en pantalles petites. No canviïs la disposició d'escriptori.

14. Estats buits, de càrrega i d'error

Afegeix estats adequats a [la llista de Projectes]: un estat buit amigable amb un botó per afegir el primer projecte, un esquelet de càrrega mentre es carreguen les dades, i un missatge clar amb un botó de reintentar si la càrrega falla.

15. Suport de dreta a esquerra

Afegeix una versió en àrab de la interfície amb una disposició completa de dreta a esquerra. Les icones que apunten en una direcció s'han d'invertir; els números i les dates han d'usar el format de la configuració regional. Mantén l'anglès com a opció per defecte.

Prompts de dades i funcions

16. Fes que les dades persisteixin

Ara mateix les meves dades desapareixen en refrescar. Emmagatzema-les en una base de dades real, i mantén les pantalles actuals funcionant de la mateixa manera.

17. Afegeix inici de sessió

Afegeix registre i inici de sessió amb correu i contrasenya. Cada usuari només ha de veure i editar les seves pròpies [entrades]. Mostra el correu de l'usuari a la barra superior amb un botó de tancar sessió.

18. Afegeix rols

Afegeix dos rols: administrador i membre. Els administradors poden afegir, editar i eliminar [productes]; els membres només els poden veure. Aplica-ho al servidor, no només amagant els botons.

19. Afegeix cerca i filtres

Afegeix un quadre de cerca sobre [la llista de contactes] que coincideixi amb el nom, l'empresa o el correu mentre escric, més un filtre per [estat]. Mantén l'ordre actual.

20. Afegeix pujada de fitxers

Permet que els usuaris adjuntin fins a [5] imatges a cada [anunci], de [5 MB] com a màxim cadascuna. Mostra miniatures a l'anunci i una vista més gran en fer clic. Només el propietari pot eliminar les seves imatges.

21. Importa des d'un full de càlcul

Afegeix un botó Importar que accepti un CSV amb les columnes [nom, correu, telèfon, notes], mostri una vista prèvia de les 10 primeres files i em deixi confirmar abans de desar. Omet les files sense correu i digue'm quantes s'han omès.

Prompts de correcció

22. Informa d'un error amb claredat

Quan [faig clic a Desar al formulari d'edició], veig «[text exacte de l'error]» i el canvi no es desa. Esperat: el canvi es desa i torno a la llista. Troba la causa, explica-la en una o dues frases i després corregeix-la.

23. Atura un bucle de correccions

Hem intentat corregir això tres vegades i encara falla. Deixa de canviar codi. Enumera les tres causes més probables, com comprovar cadascuna i quina creus que és.

24. Desfés efectes col·laterals

El teu últim canvi va corregir el selector de dates però [la barra lateral] ha desaparegut. Torna a posar la barra lateral exactament com estava i mantén la correcció del selector de dates.

25. Explica abans de canviar

Explica com es calcula ara mateix [el total del pagament], pas a pas, indicant els fitxers implicats. No canviïs res.

Prompts de proves i revisió

26. Casos límit

Enumera 10 maneres en què un usuari real podria trencar [el formulari de reserves]: camps buits, text molt llarg, doble clic, dues persones alhora, zones horàries incorrectes. Prova cadascuna i corregeix el que falli. Informa del que has canviat.

27. Resumeix els canvis recents

Resumeix en paraules senzilles cada canvi que has fet en els últims [cinc] passos, i marca qualsevol cosa que pugui afectar les dades existents.

Prompts de seguretat

Acompanya aquests amb la nostra pàgina sobre si el vibe coding és segur.

28. Comprova l'accés a les dades

Revisa el codi del servidor: un usuari connectat pot llegir o canviar els [registres] d'un altre usuari canviant un ID en una petició? Mostra'm on es comprova l'accés i corregeix qualsevol forat.

29. Comprova si hi ha secrets exposats

Enumera cada clau d'API, contrasenya o token que usa aquesta app i on s'emmagatzema cadascun. Assegura't que cap d'ells estigui en codi que s'executi al navegador ni en fitxers pujats al repositori. Mou-los a secrets si és el cas.

Prompts de publicació

30. Revisió prèvia al llançament

Estic a punt de publicar això per a usuaris reals. Repassa-ho com un revisor: enllaços trencats, títols i descripcions de pàgina que falten, formularis sense validació, pàgines lentes, errors de consola i qualsevol cosa que sembli inacabada en un telèfon. Dona'm una llista ordenada per importància, i després corregeix els cinc primers.

Prompts que cal evitar

Alguns prompts produeixen de manera fiable resultats pitjors:

• «Millora-ho.» Millor com? Nomena la pantalla i el canvi.
• «Arregla-ho tot.» La IA canviarà molt i no sabràs què s'ha mogut.
• «Usa [biblioteca] i [framework] i [patró].» Tret que tinguis un motiu, descriu el comportament i deixa que l'eina triï la pila.
• «Aquí tens la meva clau d'API: …» Mai no enganxis secrets en un xat. Usa la configuració de secrets de l'eina.
• Deu funcions en un sol missatge. Divideix-les.

Convertir els prompts en un hàbit

Després d'uns quants projectes tindràs les teves pròpies versions d'aquests. Guarda-les en una nota i reutilitza les que funcionen. Mythex també recorda qui ets i com treballes entre projectes, així que les preferències que repeteixes, com el teu estil habitual o la teva pila, es mantenen sense haver de tornar-les a escriure.

Si t'ha costat trobar un primer prompt, el generador de prompts d'apps gratuït converteix una idea d'una línia en un punt de partida més complet. I per veure què produeixen aquests prompts a la pràctica, llegeix els nostres exemples de vibe coding, o enganxa el prompt 1 al creador d'apps amb IA i canvia els claudàtors per la teva pròpia idea.

Preguntes