Vibe coding med Claude: Claude-chat, Claude Code og bygging fra Claude

Vibe coding med Claude fungerer på tre måter. Claude-chat bygger små apper på én side rett i samtalen. Claude Code er en agent som endrer et ekte prosjekt på maskinen din eller i skyen, for folk som er komfortable med en kodebase. Og Claude pluss en appbygger over MCP lar deg bygge, forhåndsvise og publisere en fullstack-app med database uten å forlate Claude-samtalen. Hvilken som passer avhenger av hva du bygger og hvor mye av oppsettet du vil eie selv.

Denne guiden dekker alle tre, med prompter og grensene for hver. For ideen bak det hele, se hva vibe coding er.

Alternativ 1: Claude-chat for små verktøy

I den vanlige Claude-appen kan du be om noe interaktivt, og Claude skriver det som kode som kjører ved siden av samtalen: en kalkulator, en flashcard-øvelse, et lite spill, et diagram fra data du limer inn. Du endrer det ved å svare.

En god prompt her er selvstendig:

Lag et interaktivt verktøy der jeg limer inn en liste med utgifter (én per linje, «beløp, kategori») og det viser et kakediagram per kategori og en totalsum. Ta med en eksempelliste slik at det fungerer med en gang.

Det passer best til: raske verktøy på én side du bruker selv eller deler som en lenke, og læring, fordi du kan be Claude forklare hver del.

Hvor det stopper: dette kjører i Claudes miljø. Det finnes ingen varig database av din egen, ingen brukerkontoer, ingen eget domene og ingen plass å kjøre en server. Når en idé vokser ut av én side, trenger du ett av de to neste alternativene.

Alternativ 2: Claude Code for en ekte kodebase

Claude Code er Anthropics kodeagent. Den jobber i terminalen din, i editorer som VS Code og JetBrains, i en skrivebordsapp og på nettet. Du gir den en oppgave med vanlige ord, og den leser prosjektet ditt, endrer filer, kjører kommandoer og tester, og viser deg hva som endret seg. Per nå er den inkludert i Claudes betalte planer og tilgjengelig gjennom API-et; sjekk Anthropics nettsted for gjeldende planer.

En typisk vibe coding-økt ser slik ut:

Legg til en /bookings-side som lister den innloggede brukerens bookinger, nyeste først, med en avbestillingsknapp som er deaktivert mindre enn to timer før timen. Bruk den eksisterende autentiseringshjelperen. Kjør testene når du er ferdig.

Det passer best til: utviklere og tekniske gründere som allerede har et prosjekt, vil ha full kontroll over stacken, og er fornøyd med å kjøre og deploye det selv. Den er sterk på endringer over flere filer og på å følge konvensjonene som allerede finnes i en kodebase.

Hvor det krever mer arbeid: du trenger et utviklingsoppsett, og Claude Code hoster ingenting. Databaser, hemmeligheter, deploy og domener må du ordne selv. For en sammenligning med andre utviklerverktøy, se Cursor vs Windsurf vs Claude Code.

Vaner som fungerer godt med Claude Code

• Be om en plan før store endringer. «Skisser stegene og filene du vil berøre, og vent deretter.»
• Hold en notatfil for prosjektet. Claude Code leser en prosjektminnefil (CLAUDE.md) for konvensjoner, så du slipper å gjenta dem.
• Gjennomgå diffen. Selv når du gjør vibe coding, gå gjennom det som endret seg i sensitive områder: autentisering, betalinger, alt med brukerdata.
• Commit ofte. Små commits gjør det enkelt å angre et dårlig steg.

Alternativ 3: Bygg og publiser fra Claude med Mythex

Hvis du liker å jobbe i Claude, men vil ha en ekte app til slutt, med database, innlogginger, fillagring og en offentlig URL, kan du koble Claude til en KI-appbygger over MCP, protokollen som lar Claude bruke verktøy som hostes andre steder. (Hva MCP er forklarer det med enkle ord.)

Mythex kjører en MCP-server. Når den er tilkoblet, kan Claude opprette et Mythex-prosjekt, skrive koden i en privat sky-sandkasse, starte en levende forhåndsvisning, legge til en database og fillagring, og publisere appen. Hvert resultat inkluderer en lenke for å følge prosjektet live i Mythex.

Slik kobler du til

1. I Mythex, åpne Kontoinnstillinger og kopier MCP-URL-en: https://mcp.mythex.ai/mcp.
2. I Claude, gå til Innstillinger → Connectors → Add custom connector, lim inn URL-en og klikk Connect.
3. En Mythex-side åpnes. Logg inn om nødvendig og velg Tillat tilgang. Det finnes ingen API-nøkkel å kopiere.
4. Tilbake i Claude, be om det du vil ha.

Alle kan koble til på alle planer; sandkasseverktøyene krever Mythex Pro ($25 i måneden). Claude-bruken forblir på din Claude-plan, og sandkasse-tid, forhåndsvisninger og hosting kommer fra dine Mythex-kreditter. Den fullstendige gjennomgangen finner du i bygg Mythex-apper fra Claude, Cursor eller Codex.

En første prompt å prøve

Bruk Mythex til å lage et nytt prosjekt: et enkelt CRM for det lille designstudioet mitt. Kontakter med navn, firma, e-post, telefon, fase (lead, aktiv, tidligere) og notater. En tavlevisning sortert etter fase der jeg kan dra kontakter mellom kolonner, og et søkefelt. Legg til en database slik at dataene vedvarer, og en innlogging slik at bare jeg kan se dem. Start forhåndsvisningen og send meg lenken når den kjører.

Deretter itererer du i samme samtale, én endring om gangen:

I Mythex-prosjektet, legg til en «neste oppfølgingsdato» på kontakter, og en liste på hjemskjermen over oppfølginger som forfaller denne uken. Sjekk det i forhåndsvisningen.

Publiser CRM-et og gi meg den offentlige URL-en.

Det passer best til: folk som tenker best i Claude og vil ha resultatet hostet, med en database, uten å sette opp servere. Du kan også bytte: start i Claude og fortsett i Mythex-chatten, eller omvendt, fordi det er det samme prosjektet.

Hvilken bør du bruke?

Promptråd som betyr mer med Claude

Claude følger detaljerte instruksjoner nøye, noe som virker begge veier.

• Si hva som ikke skal endres. «Behold layouten og fargene; endre bare skjemavalideringen.»
• Gi en definisjon av ferdig. «Ferdig betyr at en ny kontakt lagres, dukker opp på tavlen og overlever en oppdatering.»
• Be den sjekke arbeidet sitt. I Claude Code betyr det å kjøre tester; med Mythex betyr det å sjekke den levende forhåndsvisningen eller kjøre en nettlesertest.
• Be om forklaringer med vanlige ord når du ikke forstår en endring. Det er den raskeste måten å lære hva appen din gjør.

Vårt jukseark med vibe coding-prompter har 30 prompter som fungerer i alle tre oppsettene.

Sikkerhetsmerknader for alle tre

• Lim ikke inn ekte API-nøkler eller passord i en Claude-samtale. Med Mythex går hemmeligheter i prosjektets innstillinger for hemmeligheter, og Claude kan se navnene deres, men ikke verdiene.
• Sjekk hvem som kan se hva før du publiserer. «Kan en innlogget bruker åpne en annen brukers poster?» er det første spørsmålet å stille.
• Gjennomgå sensitiv kode. Claude er en dyktig koder, men vibe coding betyr at du ikke leser hver linje, så velg de linjene som betyr noe. Se er vibe coding trygt?.

Bruker du ChatGPT også? Den tilhørende guiden dekker vibe coding med ChatGPT og Codex. Og hvis du heller vil hoppe over oppsettet helt, åpne KI-appbyggeren og beskriv appen din der.

Spørsmål