Vibe coding amb Claude: xat de Claude, Claude Code i com construir des de Claude

El vibe coding amb Claude funciona de tres maneres. El xat de Claude construeix petites apps d'una sola pàgina directament dins de la conversa. Claude Code és un agent que edita un projecte real a la teva màquina o al núvol, pensat per a persones còmodes amb una base de codi. I Claude més un creador d'apps per MCP et permet construir, previsualitzar i publicar una app completa amb base de dades sense sortir de la conversa amb Claude. Quina encaixa depèn del que construeixes i de quanta configuració vols gestionar tu.

Aquesta guia cobreix les tres, amb prompts i els límits de cadascuna. Per a la idea de fons, consulta què és el vibe coding.

Opció 1: el xat de Claude per a eines petites

A l'app habitual de Claude pots demanar alguna cosa interactiva, i Claude l'escriu com a codi que s'executa just al costat de la conversa: una calculadora, un exercici de targetes d'estudi, un joc petit o un gràfic a partir de dades que enganxes. El canvies responent.

Un bon prompt aquí és autocontingut:

Fes una eina interactiva on enganxo una llista de despeses (una per línia, «import, categoria») i mostra un gràfic de sectors per categoria i un total. Inclou una llista d'exemple perquè funcioni de seguida.

Per a què va molt bé: eines ràpides d'una sola pàgina que uses tu mateix o comparteixes com a enllaç, i per aprendre, perquè pots demanar a Claude que expliqui cada part.

On s'atura: aquestes s'executen dins de l'entorn de Claude. No hi ha una base de dades persistent teva, ni comptes d'usuari, ni domini personalitzat, ni lloc on executar un servidor. Quan una idea supera una sola pàgina, necessites una de les dues opcions següents.

Opció 2: Claude Code per a una base de codi real

Claude Code és l'agent de codi d'Anthropic. Treballa al teu terminal, en editors com VS Code i JetBrains, en una app d'escriptori i a la web. Li dones una tasca en llenguatge senzill, i llegeix el projecte, edita fitxers, executa comandes i proves, i et mostra què ha canviat. En el moment d'escriure això, està inclòs en els plans de pagament de Claude i disponible a través de l'API; consulta el lloc web d'Anthropic per als plans actuals.

Una sessió típica de vibe coding es veu així:

Afegeix una pàgina /reserves que mostri les reserves de l'usuari actual, les més noves primer, amb un botó de cancel·lar que quedi desactivat amb menys de dues hores abans de la classe. Usa l'ajudant d'autenticació existent. Executa les proves quan acabis.

Per a què va molt bé: desenvolupadors i fundadors tècnics que ja tenen un projecte, volen control total de la pila i estan contents d'executar-lo i desplegar-lo ells mateixos. És fort en canvis de molts fitxers i en seguir les convencions que ja hi ha en una base de codi.

On requereix més feina: necessites una configuració de desenvolupament, i Claude Code no allotja res. Les bases de dades, els secrets, el desplegament i els dominis els organitzes tu. Per a una comparació amb altres eines per a desenvolupadors, consulta Cursor vs Windsurf vs Claude Code.

Hàbits que funcionen bé amb Claude Code

• Demana un pla abans de canvis grans. «Esquematitza els passos i els fitxers que tocaràs, i després espera.»
• Mantén un fitxer de notes del projecte. Claude Code llegeix un fitxer de memòria del projecte (CLAUDE.md) amb les convencions, així que no les has de repetir.
• Revisa el diff. Fins i tot quan fas vibe coding, fes un cop d'ull al que ha canviat en les àrees sensibles: autenticació, pagaments, qualsevol cosa amb dades d'usuaris.
• Fes commits sovint. Els commits petits faciliten desfer un pas dolent.

Opció 3: construir i publicar des de Claude amb Mythex

Si t'agrada treballar amb Claude però vols una app real al final —base de dades, inicis de sessió, emmagatzematge de fitxers, una URL pública—, pots connectar Claude a un creador d'apps amb IA a través de MCP, el protocol que permet a Claude usar eines allotjades en un altre lloc. (Què és MCP ho explica en termes senzills.)

Mythex executa un servidor MCP. Un cop connectat, Claude pot crear un projecte de Mythex, escriure el codi en un sandbox privat al núvol, iniciar una previsualització en directe, adjuntar una base de dades i emmagatzematge de fitxers, i publicar l'app. Cada resultat inclou un enllaç per veure el projecte en directe a Mythex.

Com connectar-ho

1. A Mythex, obre Configuració del compte i copia la URL MCP: https://mcp.mythex.ai/mcp.
2. A Claude, ves a Configuració → Connectors → Afegeix connector personalitzat, enganxa la URL i fes clic a Connecta.
3. S'obre una pàgina de Mythex. Inicia sessió si cal i tria Permet l'accés. No hi ha cap clau d'API per copiar.
4. De tornada a Claude, demana el que vulguis.

Qualsevol pot connectar-se en qualsevol pla; les eines del sandbox necessiten Mythex Pro (25 $ al mes). L'ús de Claude es queda al teu pla de Claude, i el temps de sandbox, les previsualitzacions i l'allotjament surten dels teus crèdits de Mythex. El recorregut complet és a construir apps de Mythex des de Claude, Cursor o Codex.

Un primer prompt per provar

Usant Mythex, crea un projecte nou: un CRM senzill per al meu petit estudi de disseny. Contactes amb nom, empresa, correu, telèfon, etapa (potencial, actiu, anterior) i notes. Una vista de tauler per etapa on pugui arrossegar contactes entre columnes, i un quadre de cerca. Afegeix una base de dades perquè les dades persisteixin, i un inici de sessió perquè només jo pugui veure-les. Inicia la previsualització i envia'm l'enllaç quan estigui en marxa.

Després, itera dins de la mateixa conversa, un canvi cada vegada:

Al projecte de Mythex, afegeix una data de «següent seguiment» als contactes i una llista a la pantalla d'inici amb els seguiments que venzen aquesta setmana. Comprova-ho a la previsualització.

Publica el CRM i dona'm l'URL en directe.

Per a què va molt bé: persones que pensen millor amb Claude i volen el resultat allotjat, amb una base de dades, sense configurar servidors. També pots canviar: comença a Claude i continua al xat de Mythex, o al revés, perquè és el mateix projecte.

Quina has d'usar?

Consells de prompt que importen més amb Claude

Claude segueix de prop les instruccions detallades, cosa que funciona en els dos sentits.

• Digues què no has de canviar. «Mantén la disposició i els colors; canvia només la validació del formulari.»
• Dona-li una definició de fet. «Fet vol dir que un contacte nou es desa, apareix al tauler i sobreviu a un refresc.»
• Demana-li que comprovi la seva feina. A Claude Code vol dir executar les proves; amb Mythex vol dir comprovar la previsualització en directe o executar una prova al navegador.
• Demana explicacions en paraules senzilles quan no entenguis un canvi. És la manera més ràpida d'aprendre què fa la teva app.

El nostre full de referència de prompts de vibe coding té 30 prompts que funcionen en qualsevol de les tres configuracions.

Notes de seguretat per a les tres

• No enganxis claus d'API ni contrasenyes reals en una conversa amb Claude. Amb Mythex, els secrets van a la configuració de secrets del projecte, i Claude pot veure'n els noms però no els valors.
• Comprova qui pot veure què abans de publicar. «Un usuari connectat pot obrir els registres d'un altre usuari?» és la primera pregunta a fer.
• Revisa el codi sensible. Claude és un programador capaç, però el vibe coding vol dir que no llegeixes cada línia, així que tria les línies que importen. Consulta el vibe coding és segur?.

Si també uses ChatGPT, la guia complementària cobreix el vibe coding amb ChatGPT i Codex. I si prefereixes saltar-te la configuració, obre el creador d'apps amb IA i descriu la teva app allà.

Preguntes