Paano Mag-prompt sa AI App Builders (May Before-and-After na Halimbawa)

Ang magandang prompt para sa AI app builder ay naglalarawan ng produkto, hindi ng code: sino ang gumagamit nito, ano ang ginagawa nila step by step, anong data ang itinatago nito, at sino ang pinapayagang makakita ng ano. Pagkatapos magkaroon ng unang bersyon, humingi ng isang tiyak na pagbabago sa bawat mensahe, sabihin kung ano ang dapat manatiling pareho, at ilarawan ang mga problema bilang “ginawa ko ang X, inaasahan ko ang Y, pero Z ang nakuha ko.” Ang tatlong gawing ito ang nag-aayos sa karamihan ng nakakadismayang resulta.

Ipinapakita ng natitirang bahagi ng gabay na ito ang mga pattern nang detalyado, may before-and-after na halimbawa na puwede mong iangkop.

Bakit iba ang pag-prompt sa app builder kaysa sa pakikipag-chat sa AI

Kapag nagtanong ka sa chat assistant, ang malabong prompt ay nagbibigay ng malabong sagot at lilipat ka na lang. Kapag nag-prompt ka sa AI app builder, ang sagot ay tumatakbong programa. Bawat puwang sa paglalarawan mo ay pinupunan ng hula, at ang mga hulang iyon ay nagiging code, database tables, at screens na kailangan mong tanggapin o baguhin.

Kaya ang layunin ng prompt ay hindi magmukhang matalino. Ito ay para mabawasan ang mahahalagang desisyong iniiwan sa pagkakataon. Hindi mo kailangan ng teknikal na bokabularyo para dito. Kailangan mo lang maging tiyak sa mga bagay na ikaw lang ang nakakaalam: ang iyong users, ang iyong workflow, at ang iyong mga patakaran.

Ano ang isasama sa unang prompt

Bago ka magsulat ng kahit ano, sagutin muna ang mga tanong na ito. Bawat isa ay nagsasara ng puwang na hulaan sana ng AI.

Hindi ito napapansin pero mahalaga ang huling hilera. Ang pagsasabi ng ayaw mo ay pumipigil sa AI na magdagdag ng blog, pricing page, at newsletter signup na hindi mo naman hiniling.

Before at after: ang unang prompt

Before:

Gumawa ka ng app para sa gym ko.

Kailangang hulaan ng builder ang lahat: miyembro ba o staff? Klase o personal training? May payments ba? Makakakuha ka ng bagay na mukhang website ng gym pero walang silbi sa kailangan mo.

After:

Gumawa ng class booking app para sa maliit na yoga studio. Nakikita ng mga miyembro ang mga klase ngayong linggo (pangalan, instructor, oras, natitirang slots), nag-book ng slot, at nakakapagkansela hanggang dalawang oras bago ang klase. Nag-sign up ang mga miyembro gamit ang email at password. Nag-log in ang may-ari ng studio para magdagdag ng klase, makita kung sino ang naka-book, at markahan ang attendance. Itago ang mga klase, miyembro, at booking sa database. Kalmado at magaan ang disenyo na maayos sa phone. Walang payments muna.

Maikli pa rin ang ikalawang bersyon. Sinasagot lang nito ang mga tanong sa talahanayan sa itaas.

Ilarawan ang behaviour, hindi ang implementation

Madalas mas maganda ang resulta kapag inilarawan mo kung ano ang dapat mangyari sa halip na kung paano ito itatayo.

Before:

Magdagdag ng useEffect na kumukuha ng bookings at modal component para sa pag-edit.

After:

Kapag na-click ng may-ari ang isang booking, magbukas ng panel kung saan puwede nilang baguhin ang oras o kanselahin ito. Dapat agad lumabas ang mga pagbabago sa listahan.

Ang unang prompt ay nagkukulong sa AI sa isang partikular na teknik na baka hindi bagay sa pagkakagawa ng app. Ang ikalawa ay sinasabi ang resulta at hinahayaang piliin ng AI ang tamang paraan para sa code na naisulat na nito. Kung developer ka at may malakas kang kagustuhan, sabihin ito, pero ipares sa resulta.

Maging tiyak sa mga patakaran

Dito kadalasang nagkakamali ang mga app na ginawa ng AI, dahil obvious ito sa iyo at hindi nakikita ng AI. Ispelling mo ito nang buo.

• Mga limitasyon: “Ang isang miyembro ay may hanggang tatlong susunod na booking.”
• Oras: “Nagsasara ang pagkansela dalawang oras bago magsimula ang klase.”
• Mga edge case: “Kapag puno ang klase, magpakita ng waitlist button sa halip na Book.”
• Permissions: “Makikita ng mga instructor ang attendance ng sarili nilang klase pero hindi ng ibang instructor.”

Ang bawat isa ay isang pangungusap lang. Kapag nawala ang alinman dito, hindi ipapatupad ng app ang patakaran o mag-iimbento ito ng sariling bersyon.

Pagkatapos ng unang bersyon: isang pagbabago sa bawat mensahe

Kapag may tumatakbo na sa preview, lumipat mula sa paglalarawan ng buong produkto patungo sa paghingi ng maliliit at masusuri na pagbabago.

Before:

Mali ang disenyo, hindi maayos ang booking, at gusto ko ng calendar view at mga email.

After (apat na hiwalay na mensahe):

1. Kapag na-book ko ang huling slot sa klase, nakasulat pa rin na “1 spot left.” Dapat nakasulat na “Full” at nakatago ang Book button.
2. Magdagdag ng week view calendar sa schedule page, isang column bawat araw. Panatilihin ang kasalukuyang list view bilang opsyon.
3. Gawing mas siksik ang class cards sa phone: mas maliit na padding, nasa iisang linya ang pangalan ng instructor at oras.
4. Magpadala ng confirmation email sa miyembro kapag nag-book siya.

Bakit gumagana ito:

• Sapat na maliit ang bawat pagbabago para tama itong magawa ng AI sa isang pass.
• Puwede mong subukan ang bawat isa bago lumipat sa susunod.
• Kapag may nagkamali, puwede mong ibalik lang ang hakbang na iyon nang hindi nawawala ang iba.

Sabihin kung ano ang dapat manatili

Kapag humihingi ka ng pagbabago sa bagay na gumagana na, sabihin sa AI kung ano ang hindi dapat magbago. Ito ang pinakamadaling paraan para maiwasan ang regression (mga bagay na dating gumagana at nasira pagkatapos ng edit).

I-redesign ang home page hero na may mas malaking headline at larawan sa kanan. Panatilihin ang navigation, mga kulay, at lahat ng nasa ibaba ng hero nang eksaktong pareho.

Pareho ito sa data: “Magdagdag ng phone number field sa members. Huwag tanggalin o palitan ang pangalan ng alinmang umiiral na field.”

Gumamit ng screenshot at eksaktong teksto

Ang mga salitang tulad ng “yung nasa itaas” ay malabo. Karamihan sa AI app builders ay tumatanggap ng larawan, at mas mabilis ang screenshot na may maikling tala kaysa sa talatang paglalarawan.

• Mag-attach ng screenshot at sabihing “ang button na may bilog na pula ay sumasagi sa menu sa phone.”
• I-paste ang eksaktong teksto ng error message sa halip na i-paraphrase ito.
• I-quote nang eksakto ang mga label sa screen: “ang Save changes button sa Settings page.”

Para sa mga bug, gamitin ang ganitong hugis:

Sa bookings page, nag-click ako ng Cancel sa booking para bukas. Inaasahan kong mawawala ito sa listahan ko. Pero walang nangyari at nandoon pa rin ang booking pagkatapos mag-refresh. Ayusin ito at i-check na gumagana ang pagkansela.

Mas malalim na tinatalakay ng how to debug an AI-built app ang paksang ito.

Magplano muna para sa malalaking pagbabago

Para sa anumang gumagalaw sa maraming bahagi ng app, gaya ng pagdagdag ng user accounts sa app na wala pa nito, pagdagdag ng payments, o pagbabago sa estruktura ng data, humingi ng plano bago magbago ng code.

Bago ka magbago ng kahit ano, ipaliwanag kung paano mo idadagdag ang team accounts: anong bagong tables, aling pages ang magbabago, at ano ang mangyayari sa mga umiiral nang user. Huwag pa munang i-edit ang code.

Basahin ang plano. Kung may hindi ito naintindihan, mas mura ang pagtama ng isang talata kaysa sa pagtama ng tapos nang feature. Maraming builder ang may nakalaang mode para dito; sa Mythex, ito ay ang Plan mode, kasama ang Build at Ask.

Ano ang iwasan

Tungkol sa API keys: kung kailangan mo ng payment o email service, ilagay ang mga key nito sa secrets ng proyekto at hindi sa prompt. Tingnan ang what environment variables and secrets are kung bago pa ito sa iyo.

Mga magagamit na prompt template

Iangkop ang mga ito sa pamamagitan ng pagpalit sa mga bahaging nasa bracket.

Bagong app:

Gumawa ng [uri ng app] para sa [sino]. Ginagawa nila ang [pangunahing daloy, step by step]. Ang [ikalawang uri ng user] ay nag-log in para [ano ang ginagawa nila]. Itago ang [data] sa database. [Itsura at pakiramdam]. Iwan muna ang [mga bagay para sa susunod].

Bagong feature:

Magdagdag ng [feature] sa [page]. Kapag ginawa ng [user] ang [aksyon], [ano ang dapat mangyari]. Ang [sino] lang ang puwedeng [gawin iyon]. Panatilihin ang [mga umiiral na bagay] gaya ng dati.

Pagbabago sa disenyo:

Sa [page], palitan ang [tiyak na elemento] ng [tiyak na pagbabago]. Panatilihin ang [kung ano ang dapat manatili]. I-check kung maayos ang itsura sa screen na kasing-lapad ng phone.

Bug:

Sa [page], ginawa ko ang [mga hakbang]. Inaasahan ko ang [inaasahan]. Pero [aktuwal, kasama ang eksaktong error text]. Ayusin ito at i-verify na gumagana ang daloy.

Tanong nang walang pagbabago:

Huwag baguhin ang kahit anong code. Ipaliwanag kung paano gumagana ang [bahagi ng app] at kung saan naka-store ang [data].

Pagsulat ng mas mahabang spec

Para sa mas malalaking proyekto, makakatulong ang pagsulat muna ng isang pahinang brief at pag-paste nito bilang unang prompt: ang mga user, ang pangunahing daloy, ang data, ang mga patakaran, at kung ano ang wala sa saklaw. Puwede pa ngang tulungan ka ng AI na buuin ito. Sakop ng gabay namin sa writing a product requirements doc with AI kung paano. Panatilihin lang ang unang build request sa pangunahing daloy, at idagdag ang iba nang paunti-unti.

Pag-prompt sa Mythex

Gumagana ang lahat ng nasa itaas sa Mythex. Ilang detalye na nakakatulong:

• Build, Plan, at Ask modes. Gamitin ang Plan para sa malaki o mapanganib na pagbabago, at Ask kapag gusto mo ng paliwanag nang walang pag-edit.
• Checkpoints. Pagkatapos ng bawat matagumpay na pagbabago, nagse-save ang Mythex ng checkpoint, at ang Revert to this point sa isang reply ay ibinabalik ang proyekto. Puwede mo ring i-edit ang naunang mensahe at ipadala ulit para subukan ang ibang prompt mula sa puntong iyon.
• Secrets card. Kapag kailangan ng agent ng API key, humihingi ito sa pamamagitan ng card sa chat para ang halaga ay i-store bilang secret ng proyekto at hindi isinusulat sa mensahe mo.
• Mga larawan. Mag-attach ng screenshot o mockup at titingnan ito ng agent.

May maikling pahina ang docs tungkol sa effective prompts at isa pa tungkol sa iterating without rebuilding. Kung magsisimula ka mula sa wala, tinatalakay ng how to build an app with AI ang buong proyekto, at tinatalakay ng how to design a good-looking app with AI ang mga prompt para sa magandang itsura.

Mga tanong