Vibe coding Claude-dal: Claude-chat, Claude Code és építés a Claude-ból

A vibe coding Claude-dal háromféleképpen működik. A Claude-chat kis egyoldalas appokat épít közvetlenül a beszélgetésben. A Claude Code egy ügynök, amely valódi projektet szerkeszt a gépeden vagy a felhőben, azoknak, akik kényelmesen mozognak kódbázisban. A Claude és egy app-építő MCP-n át pedig lehetővé teszi, hogy teljes stackes appot építs, előnézetben nézz meg és publikálj adatbázissal együtt anélkül, hogy kilépnél a Claude-beszélgetésből. Hogy melyik illik, az attól függ, mit építesz, és mennyi beállítást akarsz magad kezelni.

Ez az útmutató mindhármat bemutatja, promptokkal és a korlátaikkal. Az egész mögött álló gondolathoz lásd: mi a vibe coding.

1. lehetőség: Claude-chat kis eszközökhöz

A normál Claude-appban kérhetsz valami interaktívat, és Claude olyan kódként írja meg, amely a beszélgetés mellett fut: számológép, kártyás gyakorló, kis játék, diagram az beillesztett adatokból. Válaszolva módosíthatod.

Itt egy jó prompt önálló:

Készíts egy interaktív eszközt, ahová egy kiadáslistát illeszthetek (soronként egy, „összeg, kategória” formában), és amely kategóriánként kördiagramot és összesítést mutat. Adj egy mintalistát, hogy azonnal működjön.

Jó ehhez: gyors, egyoldalas eszközök, amelyeket magad használsz vagy linkként megosztasz, és tanuláshoz, mert megkérheted Claude-ot, hogy magyarázza el minden részét.

Hol áll meg: ezek a Claude környezetében futnak. Nincs saját, tartós adatbázisod, nincsenek felhasználói fiókok, nincs egyedi domain, és nincs hova szervert futtatni. Ha egy ötlet kinő az egy oldalból, a következő két lehetőség valamelyikére van szükséged.

2. lehetőség: Claude Code valódi kódbázishoz

A Claude Code az Anthropic kódolóügynöke. A terminálodban, a VS Code-hoz és a JetBrains-hez hasonló szerkesztőkben, asztali appban és a weben működik. Egyszerű nyelven adsz neki feladatot, ő pedig olvassa a projektedet, szerkeszti a fájlokat, parancsokat és teszteket futtat, és megmutatja, mi változott. A készítés idején a fizetős Claude-csomagokban benne van, és API-n keresztül is elérhető; a jelenlegi csomagokat az Anthropic oldalán nézd meg.

Egy tipikus vibe coding munkamenet így néz ki:

Adj egy /foglalasok oldalt, amely a jelenlegi felhasználó foglalásait listázza, a legújabb legelöl, mellette egy lemondás gombbal, amely az óra előtt kevesebb mint két órával le van tiltva. Használd a meglévő hitelesítési segédet. Futtasd a teszteket, ha kész vagy.

Jó ehhez: fejlesztőknek és technikai alapítóknak, akiknek van már projektjük, teljes kontrollt akarnak a stack felett, és szívesen futtatják és telepítik maguk. Erős a több fájlt érintő változtatásokban, és abban, hogy követi a meglévő kódbázis konvencióit.

Ahol több munkát igényel: fejlesztési környezet kell hozzá, a Claude Code pedig nem hostol semmit. Az adatbázis, a titkok, a telepítés és a domainek rád tartoznak. Más fejlesztői eszközökkel való összehasonlításhoz lásd: Cursor vs Windsurf vs Claude Code.

Szokások, amelyek jól működnek a Claude Code-dal

• Kérj tervet nagy változtatások előtt. „Vázold fel a lépéseket és a fájlokat, amelyekhez hozzányúlsz, aztán várj.”
• Vezess projektjegyzet-fájlt. A Claude Code olvassa a projekt memóriafájlját (CLAUDE.md) a konvenciókhoz, így nem kell ismételned őket.
• Nézd át a diffet. Még vibe codingnál is nézd át gyorsan az érzékeny részeket: hitelesítés, fizetés, bármi felhasználói adat.
• Commitolj gyakran. A kis commitok megkönnyítik egy rossz lépés visszavonását.

3. lehetőség: Építés és publikálás a Claude-ból a Mythexszel

Ha szereted a Claude-ban dolgozni, de valódi appot szeretnél a végén — adatbázist, bejelentkezést, fájltárhelyet, nyilvános URL-t —, összekötheted a Claude-ot egy AI app-építővel MCP-n át, a protokollon, amely lehetővé teszi, hogy a Claude máshol hostolt eszközöket használjon. (Mi az MCP egyszerű szavakkal elmagyarázza.)

A Mythex MCP-szervert futtat. Amint csatlakoztatva van, a Claude létrehozhat Mythex-projektet, megírhatja a kódot egy privát felhőbeli homokozóban, elindíthatja az élő előnézetet, adatbázist és fájltárhelyet csatolhat, és publikálhatja az appot. Minden eredmény tartalmaz egy linket, amellyel a projektet élőben nézheted a Mythexben.

Hogyan csatlakozz

1. A Mythexben nyisd meg a Fiókbeállításokat, és másold ki az MCP-címet: https://mcp.mythex.ai/mcp.
2. A Claude-ban menj a Beállítások → Összekötők → Egyedi összekötő hozzáadása menüpontra, illeszd be a címet, és kattints a Csatlakozás gombra.
3. Megnyílik egy Mythex-oldal. Jelentkezz be, ha kell, és válaszd az Hozzáférés engedélyezése lehetőséget. Nincs API-kulcs, amit másolni kellene.
4. Térj vissza a Claude-ba, és kérd, amit szeretnél.

Bárki csatlakozhat bármelyik csomagon; a homokozói eszközökhöz Mythex Pro ($25 havonta) kell. A Claude-használat a Claude-csomagodon marad, a homokozói idő, az előnézetek és a hosting pedig a Mythex-kreditjeidből jön. A teljes végigvezetés itt van: Mythex-appok építése Claude-ból, Cursorból vagy Codexből.

Egy első prompt a kipróbáláshoz

A Mythex segítségével hozz létre egy új projektet: egyszerű CRM a kis tervezőstúdiómnak. Kapcsolatok névvel, céggel, e-mail címmel, telefonnal, állapottal (érdeklődő, aktív, korábbi) és megjegyzésekkel. Táblanézet állapot szerint, ahol oszlopok között húzhatom a kapcsolatokat, és egy keresőmező. Adj adatbázist, hogy az adat megmaradjon, és bejelentkezést, hogy csak én lássam. Indítsd el az előnézetet, és küldd el a linket, amint fut.

Ezután ugyanabban a beszélgetésben, egy változtatás egyszerre:

A Mythex-projektben adj a kapcsolatokhoz egy „következő követési” dátumot, és a kezdőképernyőn listázd a héten esedékes követéseket. Ellenőrizd az előnézetben.

Publikáld a CRM-et, és add meg az élő URL-t.

Jó ehhez: azoknak, akik a Claude-ban gondolkodnak a legjobban, és azt szeretnék, hogy az eredmény hostolva legyen, adatbázissal, szerverek beállítása nélkül. Váltogathatsz is: kezdheted a Claude-ban és folytathatod a Mythex chatben, vagy fordítva, mert ugyanaz a projekt.

Melyik illik

Promptolási tippek, amelyek a Claude-dal jobban számítanak

A Claude pontosan követi a részletes utasításokat, ami kétirányú.

• Mondd meg, mit ne változtasson. „Tartsd meg az elrendezést és a színeket; csak az űrlapellenőrzést módosítsd.”
• Adj egy kész-definíciót. „Kész az, ha egy új kapcsolat mentődik, megjelenik a táblán, és frissítés után is megmarad.”
• Kérd meg, hogy ellenőrizze a munkáját. A Claude Code-ban ez a tesztek futtatását jelenti; a Mythexszel az élő előnézet ellenőrzését vagy böngészőteszt futtatását.
• Kérj egyszerű szavas magyarázatot, ha nem követsz egy változtatást. Ez a leggyorsabb módja annak, hogy megértsd, mit csinál az appod.

A vibe coding promptok puskája harminc, mindhárom beállításban működő promptot tartalmaz.

Biztonsági megjegyzések mindháromhoz

• Ne illessz be valódi API-kulcsot vagy jelszót Claude-beszélgetésbe. A Mythexszel a titkok a projekt titok-beállításaiba kerülnek, a Claude pedig látja a neveiket, de nem az értékeiket.
• Nézd meg, ki mit láthat, mielőtt publikálsz. „Megnyithat egy bejelentkezett felhasználó más felhasználó rekordjait?” az első kérdés, amit fel kell tenni.
• Nézd át az érzékeny kódot. A Claude jó kódoló, de a vibe coding azt jelenti, hogy nem olvasol minden sort, ezért válaszd ki azokat, amelyek számítanak. Lásd: biztonságos-e a vibe coding?.

Ha ChatGPT-t is használsz, a kísérő útmutató a vibe coding ChatGPT-vel és Codexszel témával foglalkozik. Ha pedig egészen kihagynád a beállítást, nyisd meg az AI app-építőt, és írd le az appodat ott.

Kérdések