Vibe coding med Claude: Claude-chatt, Claude Code och att bygga från Claude

Vibe coding med Claude fungerar på tre sätt. Claude-chatten bygger enkla appar på en sida direkt i konversationen. Claude Code är en agent som redigerar ett riktigt projekt på din dator eller i molnet, för dig som är bekväm med en kodbas. Och Claude plus en appbyggare via MCP låter dig bygga, förhandsgranska och publicera en fullständig app med databas utan att lämna Claude-konversationen. Vilket som passar beror på vad du bygger och hur mycket av installationen du vill äga själv.

Den här guiden täcker alla tre, med prompter och gränserna för varje. För idén bakom allt, se vad vibe coding är.

Alternativ 1: Claude-chatten för små verktyg

I den vanliga Claude-appen kan du be om något interaktivt, och Claude skriver det som kod som körs bredvid konversationen: en räknare, en flashcard-övning, ett litet spel, ett diagram från data du klistrar in. Du ändrar det genom att svara.

En bra prompt här är självständig:

Gör ett interaktivt verktyg där jag klistrar in en lista med utgifter (en per rad, "belopp, kategori") och det visar ett cirkeldiagram per kategori och en summa. Ta med en exempellista så att det fungerar direkt.

Det är bäst för: snabba verktyg på en sida som du använder själv eller delar som en länk, och lärande, eftersom du kan be Claude förklara varje del.

Där det tar slut: dessa körs i Claudes miljö. Det finns ingen beständig databas av din egen, inga användarkonton, ingen egen domän och ingen plats att köra en server. När en idé växer ur en sida behöver du något av de två följande alternativen.

Alternativ 2: Claude Code för en riktig kodbas

Claude Code är Anthropics kodagent. Den fungerar i din terminal, i editorer som VS Code och JetBrains, i en skrivbordsapp och på webben. Du ger den en uppgift med vanliga ord, och den läser ditt projekt, redigerar filer, kör kommandon och tester och visar vad som ändrats. När detta skrivs ingår den i Claudes betalplaner och finns tillgänglig via API; kontrollera Anthropics webbplats för aktuella planer.

En typisk vibe coding-session ser ut så här:

Lägg till en sida /bookings som listar den inloggade användarens bokningar, nyast först, med en avbokningsknapp som är inaktiverad mindre än två timmar före passet. Använd den befintliga autentiseringshjälpen. Kör testerna när du är klar.

Det är bäst för: utvecklare och tekniska grundare som redan har ett projekt, vill ha full kontroll över stacken och är nöjda med att köra och driftsätta den själva. Den är stark på ändringar över flera filer och på att följa konventionerna som redan finns i en kodbas.

Där det kräver mer arbete: du behöver en utvecklingsmiljö, och Claude Code hostar ingenting. Databaser, hemligheter, driftsättning och domäner ordnar du själv. För en jämförelse med andra utvecklarverktyg, se Cursor vs Windsurf vs Claude Code.

Vanor som fungerar bra med Claude Code

• Be om en plan före stora ändringar. "Skissa stegen och filerna du kommer att röra, och vänta sedan."
• Behåll en projektanteckningsfil. Claude Code läser en projektminnesfil (CLAUDE.md) för konventioner, så du behöver inte upprepa dem.
• Granska diffen. Även när du vibe codar, skumma över vad som ändrats i känsliga delar: autentisering, betalningar, allt med användardata.
• Committa ofta. Små commits gör det enkelt att ångra ett dåligt steg.

Alternativ 3: Bygg och publicera från Claude med Mythex

Om du gillar att arbeta i Claude men vill ha en riktig app i slutet — databas, inloggningar, filer och en publik URL — kan du koppla Claude till en AI-appbyggare via MCP, protokollet som låter Claude använda verktyg som hostas någon annanstans. (Vad MCP är förklarar det med enkla ord.)

Mythex kör en MCP-server. När den är ansluten kan Claude skapa ett Mythex-projekt, skriva koden i en privat molnsandlåda, starta en live-förhandsvisning, koppla en databas och fillagring och publicera appen. Varje resultat innehåller en länk för att följa projektet live i Mythex.

Så ansluter du

1. I Mythex, öppna Kontoinställningar och kopiera MCP-URL:en: https://mcp.mythex.ai/mcp.
2. I Claude, gå till Inställningar → Connectors → Lägg till anpassad connector, klistra in URL:en och klicka på Anslut.
3. En Mythex-sida öppnas. Logga in vid behov och välj Tillåt åtkomst. Det finns ingen API-nyckel att kopiera.
4. Tillbaka i Claude, be om det du vill ha.

Vem som helst kan ansluta på alla planer; sandlådeverktygen kräver Mythex Pro ($25 i månaden). Claude-användningen ligger kvar på din Claude-plan, och sandlådetid, förhandsvisningar och hosting kommer från dina Mythex-krediter. Hela genomgången finns i bygg Mythex-appar från Claude, Cursor eller Codex.

En första prompt att prova

Använd Mythex och skapa ett nytt projekt: ett enkelt CRM för min lilla designstudio. Kontakter med namn, företag, e-post, telefon, fas (lead, aktiv, tidigare) och anteckningar. En tavlevy per fas där jag kan dra kontakter mellan kolumnerna, och en sökruta. Lägg till en databas så att datan består, och en inloggning så att bara jag kan se den. Starta förhandsvisningen och skicka mig länken när den körs.

Iterera sedan i samma konversation, en ändring i taget:

I Mythex-projektet, lägg till ett datum för "nästa uppföljning" på kontakter och en lista på startskärmen över uppföljningar som förfaller den här veckan. Kontrollera det i förhandsvisningen.

Publicera CRM:et och ge mig den levande URL:en.

Det är bäst för: personer som tänker bäst i Claude och vill ha resultatet hostat, med databas, utan att sätta upp servrar. Du kan också växla: börja i Claude och fortsätt i Mythex-chatten, eller tvärtom, eftersom det är samma projekt.

Vilket ska du använda?

Promptningstips som betyder mer med Claude

Claude följer detaljerade instruktioner noga, vilket går åt båda hållen.

• Säg vad som inte ska ändras. "Behåll layouten och färgerna; ändra bara formulärvalideringen."
• Ge en definition av klart. "Klart betyder att en ny kontakt sparas, syns på tavlan och finns kvar efter en uppdatering."
• Be den kontrollera sitt arbete. I Claude Code innebär det att köra tester; i Mythex innebär det att kontrollera live-förhandsvisningen eller köra ett webbläsartest.
• Be om förklaringar med vanliga ord när du inte följer en ändring. Det är det snabbaste sättet att lära sig vad din app gör.

Vår prompt-lista för vibe coding har 30 prompter som fungerar i alla tre upplägg.

Säkerhetsnoteringar för alla tre

• Klistra inte in riktiga API-nycklar eller lösenord i en Claude-konversation. I Mythex går hemligheter i projektets hemlighetsinställningar, och Claude kan se deras namn men inte deras värden.
• Kontrollera vem som kan se vad innan du publicerar. "Kan en inloggad användare öppna en annan användares poster?" är den första frågan att ställa.
• Granska känslig kod. Claude är en kapabel kodare, men vibe coding innebär att du inte läser varje rad, så välj de rader som spelar roll. Se är vibe coding säkert?.

Använder du också ChatGPT? Följeslagarguiden täcker vibe coding med ChatGPT och Codex. Och om du hellre hoppar över installationen helt, öppna AI-appbyggaren och beskriv din app där.

Frågor