Vibe Coding gamit ang Claude: Claude Chat, Claude Code at Pagbuo mula sa Claude

Gumagana ang vibe coding gamit ang Claude sa tatlong paraan. Ang Claude chat ay gumagawa ng maliliit na app na isang pahina mismo sa usapan. Ang Claude Code ay ahenteng nag-e-edit ng totoong proyekto sa makina mo o sa cloud, para sa mga taong komportable sa codebase. At ang Claude kasama ang app builder sa pamamagitan ng MCP ay nagpapahintulot na bumuo, mag-preview at mag-publish ng kumpletong app na may database nang hindi umaalis sa usapan ng Claude. Nakadepende kung alin ang bagay sa kung ano ang ginagawa mo at kung gaano karami ng setup ang gusto mong pamahalaan.

Sakop ng gabay na ito ang tatlo, kasama ang mga prompt at ang limitasyon ng bawat isa. Para sa ideya sa likod ng lahat ng ito, tingnan ang ano ang vibe coding.

Opsyon 1: Claude chat para sa maliliit na tool

Sa regular na Claude app, puwede kang humingi ng bagay na interactive at isusulat ito ni Claude bilang code na tumatakbo sa tabi ng usapan: calculator, flashcard drill, maliit na laro, o chart mula sa datos na i-paste mo. Binabago mo ito sa pamamagitan ng pagsagot.

Nakakatulong dito ang prompt na kumpleto sa sarili:

Gumawa ng interactive na tool kung saan mag-paste ako ng listahan ng gastos (isa bawat linya, "halaga, kategorya") at magpapakita ito ng pie chart ayon sa kategorya at kabuuan. Isama ang halimbawang listahan para gumana agad.

Mabuti para sa: mabilis na tool na isang pahina na ikaw mismo ang gagamit o ibabahagi bilang link, at sa pag-aaral, dahil puwede mong hilingin kay Claude na ipaliwanag ang bawat bahagi.

Saan ito humihinto: tumatakbo ang mga ito sa loob ng kapaligiran ng Claude. Walang sariling persistent na database, walang user account, walang custom domain, at walang lugar para magpatakbo ng server. Kapag lumampas na ang ideya sa isang pahina, kailangan mo ng isa sa susunod na dalawang opsyon.

Opsyon 2: Claude Code para sa totoong codebase

Ang Claude Code ay coding agent ng Anthropic. Gumagana ito sa terminal mo, sa mga editor gaya ng VS Code at JetBrains, sa desktop app, at sa web. Binibigyan mo ito ng gawain sa simpleng salita, at binabasa nito ang proyekto mo, nag-e-edit ng file, nagpapatakbo ng command at test, at ipinapakita kung ano ang nagbago. Sa oras ng pagsulat na ito, kasama ito sa bayad na plan ng Claude at available sa pamamagitan ng API; tingnan ang site ng Anthropic para sa kasalukuyang plan.

Ang tipikal na sesyon ng vibe coding ay ganito:

Magdagdag ng /bookings page na naglilista ng mga booking ng kasalukuyang user, pinakabago muna, na may cancel button na naka-disable kapag wala nang dalawang oras bago ang klase. Gamitin ang umiiral na auth helper. Patakbuhin ang mga test kapag tapos ka na.

Mabuti para sa: mga developer at technical founder na may proyekto na, gustong ganap na kontrolin ang stack, at handang patakbuhin at i-deploy ito mismo. Mahusay ito sa mga pagbabagong sumasaklaw sa maraming file at sa pagsunod sa mga kombensiyon na nasa codebase na.

Saan ito nangangailangan ng mas maraming trabaho: kailangan mo ng development setup, at hindi nagho-host ng anuman ang Claude Code. Ang database, mga secret, deployment at domain ay ikaw ang mag-aayos. Para sa paghahambing sa iba pang developer tool, tingnan ang Cursor vs Windsurf vs Claude Code.

Mga ugaling gumagana nang maayos sa Claude Code

• Humingi ng plano bago ang malalaking pagbabago. "Ilatag ang mga hakbang at file na gagalawin mo, tapos maghintay ka."
• Magtago ng project notes file. Binabasa ng Claude Code ang project memory file (CLAUDE.md) para sa mga kombensiyon, kaya hindi mo na kailangang ulit-ulitin ang mga ito.
• Suriin ang diff. Kahit nasa vibe coding ka, tingnan ang mabilisan kung ano ang nagbago sa mga sensitibong bahagi: auth, payments, anumang may datos ng user.
• Mag-commit nang madalas. Ang maliliit na commit ay nagpapadali sa pagbawi ng masamang hakbang.

Opsyon 3: Bumuo at mag-publish mula sa Claude gamit ang Mythex

Kung gusto mo ng Claude pero kailangan mo pa rin ng totoong app sa dulo (database, login, file storage, pampublikong URL), puwede mong ikonekta ang Claude sa AI app builder sa pamamagitan ng MCP, ang protocol na nagpapahintulot kay Claude na gumamit ng mga tool na naka-host sa ibang lugar. (Ano ang MCP ay nagpapaliwanag nito sa simpleng salita.)

May MCP server ang Mythex. Kapag nakakonekta na, puwedeng gumawa si Claude ng Mythex project, isulat ang code sa pribadong cloud sandbox, magsimula ng live preview, magdagdag ng database at file storage, at i-publish ang app. Ang bawat resulta ay may kasamang link para mapanood mo ang project nang live sa Mythex.

Paano ikonekta

1. Sa Mythex, buksan ang Account settings at kopyahin ang MCP URL: https://mcp.mythex.ai/mcp.
2. Sa Claude, pumunta sa Settings → Connectors → Add custom connector, i-paste ang URL at i-click ang Connect.
3. May bubukas na Mythex page. Mag-sign in kung kailangan at piliin ang Allow access. Walang API key na kokopyahin.
4. Bumalik sa Claude at hilingin ang gusto mo.

Kahit sino ay puwedeng kumonekta sa anumang plan; kailangan ng sandbox tools ang Mythex Pro ($25 bawat buwan). Nananatili sa Claude plan mo ang paggamit ng Claude, at ang oras ng sandbox, mga preview at hosting ay galing sa mga Mythex credit mo. Kumpletong gabay ay nasa bumuo ng Mythex apps mula sa Claude, Cursor o Codex.

Unang prompt na subukan

Gamit ang Mythex, gumawa ng bagong project: simpleng CRM para sa maliit kong design studio. Mga contact na may pangalan, kumpanya, email, telepono, yugto (lead, active, past) at mga tala. Board view ayon sa yugto kung saan puwede kong i-drag ang mga contact sa pagitan ng mga column, at search box. Magdagdag ng database para manatili ang datos, at login para ako lang ang makakakita. Simulan ang preview at ipadala sa akin ang link kapag tumatakbo na.

Tapos magpatuloy sa parehong usapan, isang pagbabago sa bawat pagkakataon:

Sa Mythex project, magdagdag ng petsa ng "susunod na follow-up" sa mga contact at isang listahan sa home screen ng mga follow-up na dapat gawin ngayong linggo. Suriin ito sa preview.

I-publish ang CRM at ibigay ang live URL.

Mabuti para sa: mga taong pinakamahusay mag-isip sa Claude at gustong naka-host ang resulta, may database, nang hindi nagse-set up ng server. Puwede ka ring lumipat: magsimula sa Claude at magpatuloy sa Mythex chat, o kabaligtaran, dahil iisang project ito.

Alin ang dapat mong gamitin?

Mga tip sa prompt na mas mahalaga sa Claude

Mahigpit na sinusunod ng Claude ang detalyadong tagubilin, at may dalawang panig ito.

• Sabihin kung ano ang hindi dapat baguhin. "Panatilihin ang layout at mga kulay; ang form validation lang ang palitan."
• Magbigay ng kahulugan ng tapos na. "Ang tapos ay kapag na-save ang bagong contact, lumalabas sa board, at nananatili pagkatapos mag-refresh."
• Hilingin sa kanyang suriin ang sariling gawa. Sa Claude Code, ibig sabihin nito ay pagpapatakbo ng test; sa Mythex, ibig sabihin ay pagsuri sa live preview o pagpapatakbo ng browser test.
• Humingi ng paliwanag sa simpleng salita kapag hindi mo naiintindihan ang isang pagbabago. Ito ang pinakamabilis na paraan para malaman kung ano ang ginagawa ng app mo.

May 30 prompt ang aming cheat sheet ng vibe coding prompts na gumagana sa alinman sa tatlong setup.

Mga paalala sa kaligtasan para sa lahat ng tatlo

• Huwag mag-paste ng totoong API key o password sa usapan sa Claude. Sa Mythex, nasa secrets settings ng project ang mga secret, at nakikita ng Claude ang mga pangalan nila pero hindi ang mga halaga.
• Suriin kung sino ang makakakita ng ano bago mag-publish. "Puwede bang buksan ng naka-log in na user ang records ng ibang user?" ang unang tanong na dapat itanong.
• Suriin ang sensitibong code. Mahusay na coder ang Claude, pero ang vibe coding ay nangangahulugang hindi mo binabasa ang bawat linya, kaya piliin ang mga linyang mahalaga. Tingnan ang ligtas ba ang vibe coding?.

Kung gumagamit ka rin ng ChatGPT, sakop ng kasamang gabay ang vibe coding gamit ang ChatGPT at Codex. At kung mas gusto mong laktawan ang setup, buksan ang AI app builder at ilarawan doon ang app mo.

Mga tanong