Vibe Coding ઉદાહરણો: 10 વાસ્તવિક એપ પ્રકાર, પ્રોમ્પ્ટ અને શું ખોટું થયું

સૌથી સામાન્ય vibe coding ઉદાહરણો નાની, ઉપયોગી વેબ એપ છે: ટ્રેકર, બુકિંગ પેજ, આંતરિક ટૂલ્સ, ક્લાયન્ટ પોર્ટલ, લેન્ડિંગ પેજ, ક્વિઝ, ડેશબોર્ડ અને સરળ AI ટૂલ્સ. નીચે તેમાંથી દસ છે. દરેક માટે તમે જોશો કોણ બનાવે છે, પહેલો પ્રોમ્પ્ટ, સામાન્ય રીતે શું ખોટું થાય છે, અને તેને ઠીક કરતો ફોલો-અપ પ્રોમ્પ્ટ.

આ લોકો AI એપ બિલ્ડર્સ પાસે સૌથી વધુ લાવતા પ્રોજેક્ટોનું મિશ્રણ છે, કોઈ એક વ્યક્તિના કેસ સ્ટડી નહીં. પ્રોમ્પ્ટ કોપી કરવા યોગ્ય છે. નિષ્ફળતાઓ એ છે જે વારંવાર આવે છે, અને તેથી જ તે ઉપયોગી ભાગ છે. જો vibe coding પોતે તમારા માટે નવું છે, તો vibe coding શું છે થી શરૂ કરો.

1. વ્યક્તિગત બજેટ ટ્રેકર

કોણ બનાવે છે: જે વ્યક્તિઓએ સ્પ્રેડશીટ અજમાવી અને છોડી દીધી.

પહેલો પ્રોમ્પ્ટ:

માસિક બજેટ ટ્રેકર બનાવો. હું રકમ, કેટેગરી (ખોરાક, ભાડું, પરિવહન, મજા, અન્ય), તારીખ અને નોંધ સાથે ખર્ચ ઉમેરું છું. દરેક કેટેગરીનો આ મહિનાનો કુલ સરવાળો બાર ચાર્ટ તરીકે અને તાજેતરના ખર્ચની યાદી બતાવો. હું દરેક કેટેગરી માટે બજેટ સેટ કરી શકું અને કેટલું બાકી છે તે જોઈ શકું.

શું ખોટું થયું: ચાર્ટ દરેક ખર્ચ ગણતો હતો જે ક્યારેય દાખલ થયો હતો, માત્ર આ મહિનાનો નહીં, એટલે બીજા મહિને દરેક કેટેગરી વધુ ખર્ચ બતાવતી હતી. ઉપરાંત, અલ્પવિરામ સાથે ટાઈપ કરેલી રકમ ("1,200") 1 તરીકે સાચવાઈ.

ઠીક કરતો પ્રોમ્પ્ટ:

ચાર્ટ અને કુલ સરવાળામાં ફક્ત પસંદ કરેલા મહિનાના ખર્ચ શામેલ કરો. ટોચ પર મહિનો પસંદ કરવાનું ફીલ્ડ ઉમેરો, ડિફોલ્ટ વર્તમાન મહિનો. ઉપરાંત અલ્પવિરામ અથવા જગ્યા સાથે ટાઈપ કરેલી રકમ સ્વીકારો અને તેને સંખ્યા તરીકે સાચવો.

પાઠ: "આ મહિનો" એક નિયમ છે. નિયમો મોટેથી કહો.

2. નાના સલૂન માટે બુકિંગ પેજ

કોણ બનાવે છે: નાના બિઝનેસના માલિકો જે ફોન અને DM દ્વારા બુકિંગથી થાકી ગયા છે.

પહેલો પ્રોમ્પ્ટ:

મારા સલૂન માટે બુકિંગ પેજ બનાવો. ગ્રાહકો સેવા, તારીખ અને ખાલી સમય સ્લોટ પસંદ કરે, પછી નામ અને ફોન દાખલ કરે. મારી પાસે લોગિનની પાછળનું ખાનગી એડમિન પેજ છે, જે દિવસ પ્રમાણે બુકિંગ બતાવે છે.

શું ખોટું થયું: બે ગ્રાહકોએ એક મિનિટના અંતરે એક જ 10:00 સ્લોટ બુક કર્યો, કારણ કે પેજ પહેલીવાર લોડ થાય ત્યારે જ ઉપલબ્ધતા તપાસતું હતું. 90 મિનિટના કલર બુકિંગે પછીના સ્લોટ પણ બ્લોક કર્યા નહીં.

ઠીક કરતો પ્રોમ્પ્ટ:

ગ્રાહક બુકિંગ સબમિટ કરે ત્યારે સર્વર પર તપાસો કે તે આવરી લેતો દરેક સ્લોટ હજી ખાલી છે, અને જો નહીં તો "તે સમય હમણાં જ લેવાઈ ગયો" સાથે નકારો. સેવા તેની પૂરી લંબાઈ બ્લોક કરે છે, એટલે 10:00 વાગ્યે 90 મિનિટનું બુકિંગ 10:00, 10:30 અને 11:00 બ્લોક કરે છે.

પાઠ: જે કામ બે લોકો એકસાથે કરી શકે તેને સર્વર-સાઇડ તપાસની જરૂર છે. સંપૂર્ણ વર્ઝન માટે બુકિંગ એપ કેવી રીતે બનાવવી જુઓ.

3. QR કોડ સાથે રેસ્ટોરન્ટ મેનુ

કોણ બનાવે છે: કેફે અને રેસ્ટોરન્ટના માલિકો જે મેનુ વારંવાર ફરીથી છાપે છે.

પહેલો પ્રોમ્પ્ટ:

મારા કેફે માટે મોબાઇલ મેનુ વેબસાઇટ બનાવો. નાસ્તો, લંચ, પીણાં અને ડેઝર્ટ માટે વિભાગો, દરેક આઇટમમાં નામ, કિંમત, ટૂંકું વર્ણન અને આહાર ટૅગ (વેગન, ગ્લુટેન-ફ્રી). આઇટમ સંપાદિત કરવા અને તેને વેચાઈ ગઈ તરીકે ચિહ્નિત કરવા માટે મને એડમિન પેજ જોઈએ છે. મેનુ તરફ જતો છાપી શકાય એવો QR કોડ બતાવો.

શું ખોટું થયું: કંઈ તૂટ્યું નહીં, પરંતુ કેફેના Wi-Fi પર મેનુ ધીમું હતું કારણ કે દરેક આઇટમ માટે ફોનના પૂરા કદના ફોટા લોડ થતા હતા.

ઠીક કરતો પ્રોમ્પ્ટ:

મેનુ ફોટા ખૂબ ભારે છે. અપલોડ કરેલી છબીઓને વધુમાં વધુ 800px પહોળાઈ સુધી રીસાઇઝ કરો, તેને કમ્પ્રેસ કરો અને મુલાકાતી સ્ક્રોલ કરે તેમ આળસથી લોડ કરો.

પાઠ: ફક્ત તમારી ઓફિસમાં નહીં, ધીમા કનેક્શન પર પરીક્ષણ કરો.

4. ટીમ માટે સાધનો અથવા સ્ટોક ટ્રેકર

કોણ બનાવે છે: ઓપરેશન્સના લોકો જે વહેંચાયેલી સ્પ્રેડશીટ બદલી રહ્યા છે.

પહેલો પ્રોમ્પ્ટ:

અમારી વેરહાઉસ ટીમ માટે ઇન્વેન્ટરી ટૂલ બનાવો. વસ્તુઓમાં નામ, SKU, જથ્થો, સ્થાન અને લઘુત્તમ સ્તર હોય. સ્ટાફ લોગિન કરી શકે અને સ્ટોક ઉમેરી શકે, કારણ સાથે સ્ટોક દૂર કરી શકે, અને લઘુત્તમથી નીચેની વસ્તુઓની યાદી લાલ રંગમાં હાઇલાઇટ થયેલી જોઈ શકે. દરેક ફેરફારનો ઇતિહાસ અને કોણે કર્યો તે રાખો.

શું ખોટું થયું: ઇતિહાસમાં નામને બદલે "user 3" દેખાતું હતું, અને ઉપલબ્ધ કરતાં વધુ સ્ટોક દૂર કરવાથી જથ્થો ઋણ થઈ ગયો.

ઠીક કરતો પ્રોમ્પ્ટ:

ઇતિહાસમાં વ્યક્તિનું ID નહીં, નામ બતાવો. એવી દૂર કરવાની ક્રિયાને મંજૂરી ન આપો જે જથ્થો શૂન્યથી નીચે લઈ જાય; તેના બદલે "ફક્ત 4 સ્ટોકમાં" બતાવો.

પાઠ: ફક્ત શું શક્ય બનવું જોઈએ તે નહીં, શું અશક્ય હોવું જોઈએ તે વર્ણવો. ઇન્વેન્ટરી એપ બનાવવા પરની અમારી માર્ગદર્શિકા બાકીનું આવરી લે છે.

5. ફ્રીલાન્સર અથવા સ્ટુડિયો માટે ક્લાયન્ટ પોર્ટલ

કોણ બનાવે છે: ડિઝાઇનર્સ, એકાઉન્ટન્ટ્સ, કન્સલ્ટન્ટ્સ અને એજન્સીઓ.

પહેલો પ્રોમ્પ્ટ:

ક્લાયન્ટ પોર્ટલ બનાવો. હું ક્લાયન્ટોને ઈમેલ દ્વારા આમંત્રિત કરું છું. દરેક ક્લાયન્ટ લોગિન કરે અને ફક્ત પોતાના પ્રોજેક્ટ, ફાઈલો અને ઇન્વોઇસ જુએ, અને ટિપ્પણીઓ મૂકી શકે. હું એડમિન તરીકે લોગિન કરું અને બધું જોઉં.

શું ખોટું થયું: આ યાદીની સૌથી મહત્વની નિષ્ફળતા હતી. પેજ દરેક ક્લાયન્ટને માત્ર તેના પોતાના પ્રોજેક્ટ બતાવતા હતા, પરંતુ એડ્રેસ બારમાં નંબર બદલવાથી સર્વર કોઈપણ પ્રોજેક્ટ પાછો આપતું હતું. એક ક્લાયન્ટ તરીકે ફરતા રહેવાથી તે ક્યારેય દેખાયું નહીં.

ઠીક કરતો પ્રોમ્પ્ટ:

પ્રોજેક્ટ, ફાઈલો, ટિપ્પણીઓ અથવા ઇન્વોઇસ પાછા આપતો દરેક સર્વર રૂટ તપાસો. દરેકે ખાતરી કરવી જોઈએ કે લોગિન થયેલો ક્લાયન્ટ રેકોર્ડનો માલિક છે, નહીંતર "મળ્યું નથી" પાછું આપવું. પછી તેનું પરીક્ષણ કરો: ક્લાયન્ટ A તરીકે લોગિન કરો અને તેના ID દ્વારા ક્લાયન્ટ B નો પ્રોજેક્ટ ખોલવાનો પ્રયાસ કરો.

પાઠ: સ્ક્રીન પર કંઈક છુપાવવું એ તેને સુરક્ષિત કરવા જેવું નથી. આ વિશે વધુ vibe coding સુરક્ષિત છે? માં.

6. વેઇટલિસ્ટ સાથે લોન્ચ પેજ

કોણ બનાવે છે: સ્થાપકો જે કંઈક બનાવતા પહેલાં તેનો વિચાર ચકાસે છે.

પહેલો પ્રોમ્પ્ટ:

એવી એપ માટે લેન્ડિંગ પેજ બનાવો જે ટ્યુટરોને લેસન શેડ્યૂલ કરવામાં અને ચુકવણી એકત્ર કરવામાં મદદ કરે. હીરો હેડલાઇન, સબહેડિંગ, ઈમેલ સાઇન-અપ, ત્રણ ફાયદા, કેવી રીતે કામ કરે તે વિભાગ અને FAQ. સાઇન-અપ ડેટા સાથે તારીખ સાથે ડેટાબેઝમાં સાચવો, અને મને ખાનગી પેજ પરથી CSV તરીકે ડાઉનલોડ કરવા દો.

શું ખોટું થયું: દિવસોમાં યાદી બોટ્સના નકામા સાઇન-અપથી ભરાઈ ગઈ, અને પેજમાં શીર્ષક કે વર્ણન નહોતું, એટલે શેર કરેલી લિંક ખાલી પ્રિવ્યૂ બતાવતી હતી.

ઠીક કરતો પ્રોમ્પ્ટ:

સાઇન-અપ ફોર્મમાં મૂળભૂત બોટ સંરક્ષણ ઉમેરો (છુપાયેલું હનીપોટ ફીલ્ડ અને IP દીઠ કલાકે 5 સાઇન-અપની મર્યાદા). પેજ શીર્ષક, meta વર્ણન અને સોશિયલ શેરિંગ છબી ઉમેરો.

પાઠ: જાહેર ફોર્મ મળી જાય છે. વેઇટલિસ્ટ પેજ કેવી રીતે બનાવવું જુઓ.

7. શિક્ષક માટે ક્વિઝ એપ

કોણ બનાવે છે: શિક્ષકો અને ટ્રેનર્સ જેમને LMS કરતાં હળવું કંઈક જોઈએ છે.

પહેલો પ્રોમ્પ્ટ:

મારા વર્ગ માટે ક્વિઝ એપ બનાવો. હું બહુવિકલ્પ પ્રશ્નો સાથે ક્વિઝ બનાવું છું, દરેકનો એક સાચો જવાબ. વિદ્યાર્થીઓ કોડ અને પોતાના પહેલા નામથી જોડાય, પ્રશ્નોના જવાબ આપે અને અંતે પોતાનો સ્કોર જુએ. હું દરેક ક્વિઝ માટે પરિણામોનું ટેબલ જોઉં.

શું ખોટું થયું: સાચા જવાબો પ્રશ્નો સાથે બ્રાઉઝરને મોકલાતા હતા, એટલે જિજ્ઞાસુ વિદ્યાર્થી પેજ સોર્સમાં વાંચી શકતો હતો. વિદ્યાર્થીઓ 100% મળે ત્યાં સુધી ફરીથી સબમિટ પણ કરી શકતા હતા.

ઠીક કરતો પ્રોમ્પ્ટ:

સાચા જવાબો બ્રાઉઝરને મોકલશો નહીં. સબમિશન પછી સર્વર પર જવાબો તપાસો. દરેક ક્વિઝ માટે વિદ્યાર્થીના નામ દીઠ એક જ સબમિશનની મંજૂરી આપો, અને કોઈ ફરી પ્રયાસ કરે તો શિક્ષકને બતાવો.

પાઠ: બ્રાઉઝર વપરાશકર્તાનું છે. ત્યાં જે કંઈ છે તે વાંચી શકાય છે.

8. નાનું AI ટૂલ

કોણ બનાવે છે: માર્કેટર્સ, લેખકો અને સ્થાપકો જેમને કેન્દ્રિત AI સહાયક જોઈએ છે.

પહેલો પ્રોમ્પ્ટ:

એક ટૂલ બનાવો જે ઉત્પાદન વર્ણનને જુદા જુદા સ્વરમાં (મૈત્રીપૂર્ણ, નિષ્ણાત, રમતિયાળ, ટૂંકું, લાંબું) પાંચ સોશિયલ મીડિયા પોસ્ટમાં ફેરવે. AI API વાપરો. હું વર્ણન પેસ્ટ કરું, પ્લેટફોર્મ પસંદ કરું, અને કોપી બટન સાથે પોસ્ટ મેળવું.

શું ખોટું થયું: પહેલા વર્ઝને સીધો બ્રાઉઝરમાંથી AI સેવાને બોલાવી હતી, પેજની અંદર API કી સાથે, જેને કોઈપણ કોપી કરીને બિલ વધારી શકતો હતો.

ઠીક કરતો પ્રોમ્પ્ટ:

AI કોલ સર્વર પર ખસેડો. API કીને સિક્રેટ તરીકે સાચવો, ક્યારેય ફ્રન્ટએન્ડ કોડમાં નહીં. દરેક મુલાકાતી માટે દિવસના 20 જનરેશન સુધી મર્યાદા રાખો.

પાઠ: કી સર્વર પર સિક્રેટમાં રહે. API કી સુરક્ષિત કેવી રીતે રાખવી અને તમારી એપમાં AI સુવિધાઓ કેવી રીતે ઉમેરવી જુઓ.

9. અરબી અને અંગ્રેજી બિઝનેસ વેબસાઇટ

કોણ બનાવે છે: ગલ્ફ અને વ્યાપક અરબ વિશ્વના બિઝનેસ જે બે ભાષાઓમાં સેવા આપે છે.

પહેલો પ્રોમ્પ્ટ:

મારી ઇન્ટિરિયર ડિઝાઇન કંપની માટે અરબી અને અંગ્રેજીમાં ભાષા સ્વિચ સાથે વેબસાઇટ બનાવો. પેજ: હોમ, સેવાઓ, પોર્ટફોલિયો, વિશે અને સંપર્ક. અરબી સંપૂર્ણપણે જમણેથી ડાબે હોવી જોઈએ.

શું ખોટું થયું: અરબી લખાણ જમણી બાજુએ સંરેખિત હતું, પરંતુ લેઆઉટ મિરર થયું નહોતું: તીરો હજી ખોટી દિશામાં હતા અને મેનુ ખોટી બાજુએ હતું. કેટલાક સ્થળોએ ફોન નંબર પણ ઉલટા દેખાતા હતા.

ઠીક કરતો પ્રોમ્પ્ટ:

અરબીમાં, આખો લેઆઉટ મિરર કરો: પેજની દિશા જમણેથી ડાબે સેટ કરો, મેનુ જમણી બાજુએ મૂકો, દિશાસૂચક આઇકન ફ્લિપ કરો, અને ફોન નંબર તથા ઈમેલ અરબી લખાણની અંદર ડાબેથી જમણે રાખો.

પાઠ: જમણેથી ડાબે એ લેઆઉટ છે, ફક્ત સંરેખણ નહીં. Mythex અરબી અને અન્ય જમણેથી ડાબે લેઆઉટ સંભાળે છે, અને તમે સીધો અરબીમાં પ્રોમ્પ્ટ કરી શકો છો.

10. ફોન એપ બને તેવું ટ્રેકર

કોણ બનાવે છે: કોચ, જિમ અને સમુદાય જૂથો જેમના વપરાશકર્તાઓ ફોન પર રહે છે.

પહેલો પ્રોમ્પ્ટ:

મારા વ્યક્તિગત તાલીમ ક્લાયન્ટ્સ માટે વર્કઆઉટ લોગ બનાવો. દરેક ક્લાયન્ટ લોગિન કરે, અઠવાડિયા માટે મેં સોંપેલી યોજના જુએ, કસરતો ટિક કરે અને વજન નોંધે. હું ચાર્ટ પર દરેક ક્લાયન્ટની પ્રગતિ જોઉં.

શું ખોટું થયું: વેબ એપ કામ કરતી હતી, પરંતુ ફોન પર વર્કઆઉટ દરમિયાન બટન ટેપ કરવા માટે ખૂબ નાના હતા અને ચાર્ટ વાંચી શકાતો નહોતો.

ઠીક કરતો પ્રોમ્પ્ટ:

તેને ફોન પર એક હાથે ઉપયોગ માટે ડિઝાઇન કરો: સ્ક્રીનના તળિયે મોટા ટેપ વિસ્તારો, દરેક સ્ક્રીન પર એક કસરત, મોટા Next અને Done બટન, અને સાદો સાપ્તાહિક પ્રગતિ ચાર્ટ.

પાઠ: જો લોકો ફોન પર વાપરશે, તો પહેલા ફોન માટે ડિઝાઇન કરો. Mythex Pro પર, પ્રકાશિત એપ પછી Google Play માટે Android એપ અને TestFlight પર મોકલાતી iPhone એપ બની શકે છે; ફોન એપ તમારી પ્રકાશિત એપ ખોલે છે, એટલે દરેક Publish તેને અપડેટ કરે છે. મોબાઇલ એપ બિલ્ડર પેજ જુઓ.

આ ઉદાહરણો પાછળના પેટર્ન

દસેય ઉદાહરણોમાં નિષ્ફળતાઓ થોડા જૂથોમાં આવે છે:

આમાંથી કોઈને તમારે કોડ વાંચવાની જરૂર નથી. તમારે જિજ્ઞાસુ, થોડા શંકાશીલ વપરાશકર્તાની જેમ પરીક્ષણ કરવાની અને તમે જે જુઓ છો તે ચોકસાઈથી વર્ણવવાની જરૂર છે.

જાતે એક અજમાવો

તમારા વિચારની સૌથી નજીકનું ઉદાહરણ પસંદ કરો, તેનો પહેલો પ્રોમ્પ્ટ કોપી કરો અને વિગતો બદલો. પછી શેર કરતાં પહેલાં ફોલો-અપ પ્રોમ્પ્ટને ચેકલિસ્ટ તરીકે વાપરો. અમારી vibe coding પ્રોમ્પ્ટ ચીટ શીટ માં 30 વધુ છે, અને vibe coding વડે એપ કેવી રીતે બનાવવી એક પ્રોજેક્ટને વિચારથી પ્રકાશિત એપ સુધી લઈ જાય છે. જ્યારે તૈયાર હો, ત્યારે તેને AI એપ બિલ્ડર માં શરૂ કરો અથવા શરૂઆત માટે ટેમ્પ્લેટ બ્રાઉઝ કરો.

પ્રશ્નો