Exemples de vibe coding: 10 tipus d'app reals, prompts i què va sortir malament

Els exemples més habituals de vibe coding són apps web petites i útils: seguidors, pàgines de reserva, eines internes, portals de clients, pàgines de llançament, qüestionaris, taulells i petites eines d'IA. A continuació en tens deu. Per a cadascun veuràs qui el construeix, el primer prompt, què sol sortir malament i el prompt de seguiment que ho corregeix.

Són composicions dels projectes que la gent porta més sovint als creadors d'apps amb IA, no estudis de cas d'una sola persona. Els prompts es poden copiar. Les fallades són les que tornen a aparèixer una i altra vegada, i per això són la part útil. Si el vibe coding en si et resulta nou, comença per què és el vibe coding.

1. Un seguidor de pressupost personal

Qui el construeix: persones que han provat els fulls de càlcul i s'hi han rendit.

Primer prompt:

Construeix un seguidor de pressupost mensual. Afegeixo despeses amb import, categoria (menjar, lloguer, transport, oci, altres), data i una nota. Mostra el total d'aquest mes per categoria en un gràfic de barres i una llista de despeses recents. Puc definir un pressupost per categoria i veure quant queda.

Què va sortir malament: el gràfic comptava totes les despeses introduïdes mai, no només les d'aquest mes, així que al segon mes totes les categories semblaven excedides. A més, els imports escrits amb coma («1,200») es van desar com a 1.

Prompt de correcció:

Els gràfics i els totals només han d'incloure les despeses del mes seleccionat. Afegeix un selector de mes a dalt, per defecte el mes actual. Accepta també imports escrits amb comes o espais i desa'ls com a números.

Lliçó: «aquest mes» és una regla. Digues les regles en veu alta.

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

Qui el construeix: propietaris de petites empreses cansats de reservar per telèfon i per missatges directes.

Primer prompt:

Construeix una pàgina de reserves per al meu saló. Els clients trien un servei, una data i una franja horària lliure, i després introdueixen el nom i el telèfon. Tinc una pàgina d'administració privada, darrere d'un inici de sessió, que mostra les reserves per dia.

Què va sortir malament: dos clients van reservar la mateixa franja de les 10:00 amb menys d'un minut de diferència, perquè la pàgina només comprovava la disponibilitat quan es carregava per primera vegada. Una reserva de color de 90 minuts tampoc no bloquejava les franges següents.

Prompt de correcció:

Quan un client envia una reserva, comprova al servidor que totes les franges que cobreix continuen lliures, i rebutja-la amb el missatge «Aquella hora acaba de ser presa» si no ho estan. Un servei bloqueja tota la seva durada, així que una reserva de 90 minuts a les 10:00 bloqueja les 10:00, les 10:30 i les 11:00.

Lliçó: qualsevol cosa que dues persones puguin fer alhora necessita una comprovació al servidor. Consulta com construir una app de reserves per a la versió completa.

3. Un menú de restaurant amb codi QR

Qui el construeix: propietaris de cafeteries i restaurants que reimprimeixen els menús massa sovint.

Primer prompt:

Construeix un lloc web de menú per al mòbil per a la meva cafeteria. Seccions per a esmorzar, dinar, begudes i postres, cada element amb nom, preu, descripció curta i etiquetes dietètiques (vegà, sense gluten). Necessito una pàgina d'administració per editar els elements i marcar-los com a esgotats. Mostra un codi QR que pugui imprimir i que enllaci al menú.

Què va sortir malament: no es va trencar res, però el menú anava lent amb la Wi-Fi de la cafeteria perquè es carregaven fotos de telèfon a mida completa per a cada element.

Prompt de correcció:

Les fotos del menú pesen massa. Redimensiona les imatges pujades a un màxim de 800 px d'amplada, comprimeix-les i carrega-les de manera diferida mentre el visitant fa scroll.

Lliçó: prova-ho amb una connexió lenta, no només a la teva oficina.

4. Un seguidor d'equip o d'estoc

Qui el construeix: persones d'operacions que substitueixen un full de càlcul compartit.

Primer prompt:

Construeix una eina d'inventari per al nostre equip de magatzem. Els articles tenen nom, SKU, quantitat, ubicació i un nivell mínim. El personal inicia sessió i pot afegir estoc, treure'n amb un motiu i veure una llista dels articles per sota del mínim, ressaltats en vermell. Mantén un historial de cada canvi i de qui l'ha fet.

Què va sortir malament: l'historial mostrava «usuari 3» en lloc de noms, i treure més estoc del disponible deixava la quantitat en negatiu.

Prompt de correcció:

Mostra a l'historial el nom de la persona, no el seu ID. No permetis una retirada que deixi la quantitat per sota de zero; mostra «Només 4 en estoc» en el seu lloc.

Lliçó: descriu què ha de ser impossible, no només què ha de ser possible. La nostra guia sobre com construir una app de gestió d'inventari cobreix la resta.

5. Un portal de clients per a un autònom o un estudi

Qui el construeix: dissenyadors, comptables, consultors i agències.

Primer prompt:

Construeix un portal de clients. Convido els clients per correu electrònic. Cada client inicia sessió i només veu els seus projectes, fitxers i factures, i pot deixar comentaris. Jo entro com a administrador i ho veig tot.

Què va sortir malament: aquesta és la fallada més important de la llista. Les pàgines només mostraven a cada client els seus projectes, però el servidor retornava qualsevol projecte si canviaves el número a la barra d'adreces. Navegar com un sol client no ho va revelar mai.

Prompt de correcció:

Comprova cada ruta del servidor que retorna projectes, fitxers, comentaris o factures. Cadascuna ha de confirmar que el client connectat és el propietari del registre, i retornar «no trobat» en cas contrari. Després prova-ho: inicia sessió com a client A i intenta obrir el projecte del client B pel seu ID.

Lliçó: amagar alguna cosa a la pantalla no és el mateix que protegir-la. Més sobre això a el vibe coding és segur?.

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

Qui el construeix: fundadors que proven una idea abans de construir-la.

Primer prompt:

Construeix una pàgina de llançament per a una app que ajuda els professors particulars a programar classes i cobrar pagaments. Titular principal, subtítol, registre amb correu, tres avantatges, una secció de com funciona i unes preguntes freqüents. Desa els registres a una base de dades amb la data, i deixa'm descarregar-los en CSV des d'una pàgina privada.

Què va sortir malament: en pocs dies la llista es va omplir de registres brossa de bots, i la pàgina no tenia títol ni descripció, així que els enllaços compartits mostraven una vista prèvia en blanc.

Prompt de correcció:

Afegeix una protecció bàsica contra bots al formulari de registre (un camp trampa ocult i un límit de 5 registres per IP cada hora). Afegeix un títol de pàgina, una meta descripció i una imatge per compartir a les xarxes socials.

Lliçó: un formulari públic es troba. Consulta com construir una pàgina de llista d'espera.

7. Una app de qüestionaris per a un professor

Qui el construeix: professors i formadors que volen alguna cosa més lleugera que un LMS.

Primer prompt:

Construeix una app de qüestionaris per a la meva classe. Creo qüestionaris amb preguntes de resposta múltiple i una sola resposta correcta cadascuna. Els estudiants s'uneixen amb un codi i el seu nom, responen les preguntes i veuen la puntuació al final. Veig una taula de resultats per qüestionari.

Què va sortir malament: les respostes correctes s'enviaven al navegador juntament amb les preguntes, així que un estudiant curiós les podia llegir al codi font de la pàgina. A més, els estudiants podien tornar a enviar el qüestionari fins que treien un 100%.

Prompt de correcció:

No enviïs les respostes correctes al navegador. Comprova les respostes al servidor després de l'enviament. Permet un sol enviament per nom d'estudiant i per qüestionari, i mostra al professor si algú ho intenta de nou.

Lliçó: el navegador és de l'usuari. Qualsevol cosa que hi sigui es pot llegir.

8. Una petita eina d'IA

Qui la construeix: especialistes en màrqueting, redactors i fundadors que volen un assistent d'IA concret.

Primer prompt:

Construeix una eina que converteixi la descripció d'un producte en cinc publicacions per a xarxes socials amb diferents tons (amable, expert, lúdic, curt, llarg). Utilitza una API d'IA. Enganxo la descripció, trio una plataforma i obtinc les publicacions amb botons per copiar.

Què va sortir malament: la primera versió cridava el servei d'IA directament des del navegador amb la clau d'API dins de la pàgina, on qualsevol podia copiar-la i disparar la factura.

Prompt de correcció:

Mou la crida a la IA al servidor. Desa la clau d'API com a secret, mai al codi del frontend. Limita cada visitant a 20 generacions al dia.

Lliçó: les claus pertanyen als secrets del servidor. Consulta com mantenir segures les claus d'API i com afegir funcions d'IA a la teva app.

9. Un lloc web empresarial en àrab i anglès

Qui el construeix: empreses del Golf i del món àrab més ampli que atenen en dos idiomes.

Primer prompt:

Construeix un lloc web per a la meva empresa de disseny d'interiors en àrab i anglès, amb un canvi d'idioma. Pàgines: inici, serveis, portafoli, sobre nosaltres i contacte. L'àrab ha de ser totalment d'hora dreta a esquerra.

Què va sortir malament: el text en àrab estava alineat a la dreta però la disposició no es va reflectir: les fletxes continuaven apuntant a la direcció equivocada i el menú estava al costat equivocat. Els números de telèfon també es mostraven del revés en alguns llocs.

Prompt de correcció:

En àrab, reflecteix tota la disposició: posa la direcció de la pàgina de dreta a esquerra, col·loca el menú a la dreta, gira les icones direccionals i mantén els números de telèfon i els correus d'esquerra a dreta dins del text en àrab.

Lliçó: la dreta a l'esquerra és una disposició, no un alineament. Mythex gestiona l'àrab i altres disposicions de dreta a esquerra, i pots escriure els prompts directament en àrab.

10. Un seguidor que es converteix en una app de telèfon

Qui el construeix: entrenadors, gimnasos i grups comunitaris els usuaris dels quals viuen al telèfon.

Primer prompt:

Construeix un registre d'entrenaments per als meus clients d'entrenament personal. Cada client inicia sessió, veu el pla que he assignat per a la setmana, marca els exercicis i registra els pesos. Veig el progrés de cada client en un gràfic.

Què va sortir malament: l'app web funcionava, però al telèfon els botons eren massa petits per tocar-los durant l'entrenament i el gràfic era il·legible.

Prompt de correcció:

Dissenya-ho per a ús amb una sola mà en un telèfon: objectius tàctils grans a la part inferior de la pantalla, un exercici per pantalla amb botons grans de Següent i Fet, i un gràfic setmanal de progrés senzill.

Lliçó: si la gent l'usarà al telèfon, dissenya primer per al telèfon. Al pla Pro de Mythex, l'app publicada pot convertir-se després en una app d'Android per a Google Play i en una app d'iPhone enviada a TestFlight; l'app del telèfon obre la teva app publicada, així que cada publicació l'actualitza. Consulta la pàgina del creador d'apps mòbils.

Els patrons darrere d'aquests exemples

En els deu, les fallades es divideixen en uns quants grups:

Cap d'aquests no et demana que llegeixis codi. Et demanen que proves com un usuari curiós i una mica hostil, i que descriguis amb precisió el que veus.

Prova-ne un tu mateix

Tria l'exemple més proper a la teva idea, copia'n el primer prompt i canvia els detalls. Després usa el prompt de correcció com a llista de comprovació abans de compartir-la. El nostre full de referència de prompts de vibe coding en té 30 més, i com construir una app amb vibe coding porta un projecte des de la idea fins a una app publicada. Quan estiguis a punt, comença-la al creador d'apps amb IA o explora les plantilles per tenir un punt de partida.

Preguntes