Παραδείγματα vibe coding: 10 πραγματικοί τύποι εφαρμογών, prompts και τι πήγε στραβά

Τα πιο συνηθισμένα παραδείγματα vibe coding είναι μικρές, χρήσιμες web εφαρμογές: trackers, σελίδες κρατήσεων, εσωτερικά εργαλεία, πύλες πελατών, landing pages, quiz, dashboards και απλά εργαλεία AI. Παρακάτω βλέπεις δέκα από αυτά. Για καθένα βλέπεις ποιος το χτίζει, το πρώτο prompt, τι συνήθως πάει στραβά και το prompt διόρθωσης που το λύνει.

Αυτά είναι συνθέσεις των έργων που φέρνουν πιο συχνά οι άνθρωποι στους κατασκευαστές εφαρμογών AI, όχι μελέτες περίπτωσης ενός συγκεκριμένου ατόμου. Τα prompts μπορείς να τα αντιγράψεις. Οι αστοχίες είναι αυτές που επανέρχονται ξανά και ξανά, και γι' αυτό είναι το χρήσιμο μέρος. Αν το ίδιο το vibe coding είναι καινούργιο για σένα, ξεκίνα με το τι είναι το vibe coding.

1. Ένας προσωπικός προϋπολογισμός

Ποιος το χτίζει: άτομα που δοκίμασαν τα υπολογιστικά φύλλα και τα παράτησαν.

Πρώτο prompt:

Χτίσε έναν μηνιαίο προϋπολογισμό για μένα. Προσθέτω έξοδα με ποσό, κατηγορία (φαγητό, ενοίκιο, μετακίνηση, διασκέδαση, άλλο), ημερομηνία και σημείωση. Δείξε το σύνολο αυτού του μήνα ανά κατηγορία σε ραβδόγραμμα και μια λίστα με τα πρόσφατα έξοδα. Μπορώ να ορίσω προϋπολογισμό ανά κατηγορία και να βλέπω πόσα μένουν.

Τι πήγε στραβά: το διάγραμμα μετρούσε κάθε έξοδο που είχε καταχωρηθεί ποτέ, όχι μόνο αυτού του μήνα, οπότε από τον δεύτερο μήνα κάθε κατηγορία φαινόταν υπερβολική. Επίσης, τα ποσά που πληκτρολογούνταν με κόμμα («1,200») αποθηκεύονταν ως 1.

Prompt διόρθωσης:

Το διάγραμμα και τα σύνολα πρέπει να περιλαμβάνουν μόνο έξοδα του επιλεγμένου μήνα. Πρόσθεσε στην κορυφή επιλογέα μήνα, με προεπιλογή τον τρέχοντα μήνα. Επίσης, δέξου ποσά με κόμματα ή κενά και αποθήκευσέ τα ως αριθμούς.

Μάθημα: το «αυτός ο μήνας» είναι κανόνας. Πες τους κανόνες φωναχτά.

2. Μια σελίδα κρατήσεων για μικρό κομμωτήριο

Ποιος το χτίζει: μικροί επιχειρηματίες που κουράστηκαν να κλείνουν ραντεβού με τηλέφωνο και μηνύματα.

Πρώτο prompt:

Χτίσε μια σελίδα κρατήσεων για το κομμωτήριό μου. Ο πελάτης διαλέγει υπηρεσία, ημερομηνία και ελεύθερη ώρα, και μετά βάζει όνομα και τηλέφωνο. Έχω μια ιδιωτική σελίδα διαχειριστή, πίσω από σύνδεση, που δείχνει τις κρατήσεις ανά ημέρα.

Τι πήγε στραβά: δύο πελάτες έκλεισαν την ίδια ώρα 10:00 μέσα σε ένα λεπτό, επειδή η σελίδα έλεγχε τη διαθεσιμότητα μόνο όταν φορτωνόταν για πρώτη φορά. Επίσης, μια κράτηση χρώματος 90 λεπτών δεν μπλόκαρε τις ώρες που ακολουθούσαν.

Prompt διόρθωσης:

Όταν ο πελάτης υποβάλλει κράτηση, έλεγξε στον διακομιστή ότι κάθε ώρα που καλύπτει είναι ακόμα ελεύθερη, και απέρριψέ την με το μήνυμα «Αυτή η ώρα μόλις κλείστηκε» αν δεν είναι. Μια υπηρεσία μπλοκάρει όλη τη διάρκειά της, οπότε μια κράτηση 90 λεπτών στις 10:00 μπλοκάρει τις 10:00, 10:30 και 11:00.

Μάθημα: ό,τι μπορούν να κάνουν δύο άνθρωποι ταυτόχρονα χρειάζεται έλεγχο στον διακομιστή. Δες πώς χτίζεται μια εφαρμογή κρατήσεων για την πλήρη εκδοχή.

3. Ένα μενού εστιατορίου με QR κωδικό

Ποιος το χτίζει: ιδιοκτήτες καφέ και εστιατορίων που ανατυπώνουν τα μενού πολύ συχνά.

Πρώτο prompt:

Χτίσε μια ιστοσελίδα μενού για κινητά για τον καφέ μου. Ενότητες για πρωινό, μεσημεριανό, ποτά και γλυκά, κάθε είδος με όνομα, τιμή, σύντομη περιγραφή και ετικέτες διατροφής (vegan, χωρίς γλουτένη). Θέλω σελίδα διαχειριστή για να επεξεργάζομαι τα είδη και να σημειώνω ότι τελείωσαν. Δείξε έναν QR κωδικό που μπορώ να εκτυπώσω και που οδηγεί στο μενού.

Τι πήγε στραβά: τίποτα δεν χάλασε, αλλά το μενού ήταν αργό στο Wi-Fi του καφέ, επειδή φορτώνονταν φωτογραφίες πλήρους μεγέθους από κινητά για κάθε είδος.

Prompt διόρθωσης:

Οι φωτογραφίες του μενού είναι πολύ βαριές. Μείωσε τις ανεβασμένες εικόνες σε μέγιστο πλάτος 800px, συμπίεσέ τες και φόρτωσέ τες καθώς ο επισκέπτης κάνει κύλιση.

Μάθημα: δοκίμασε σε αργή σύνδεση, όχι μόνο στο γραφείο σου.

4. Παρακολούθηση εξοπλισμού ή αποθέματος για ομάδα

Ποιος το χτίζει: άνθρωποι των λειτουργιών που αντικαθιστούν ένα κοινό υπολογιστικό φύλλο.

Πρώτο prompt:

Χτίσε ένα εργαλείο αποθήκης για την ομάδα μας. Τα είδη έχουν όνομα, κωδικό SKU, ποσότητα, τοποθεσία και ελάχιστο επίπεδο. Το προσωπικό συνδέεται και μπορεί να προσθέτει απόθεμα, να αφαιρεί απόθεμα με αιτιολογία και να βλέπει μια λίστα με τα είδη κάτω από το ελάχιστο, τονισμένα με κόκκινο. Κράτα ιστορικό κάθε αλλαγής και ποιος την έκανε.

Τι πήγε στραβά: το ιστορικό έδειχνε «χρήστης 3» αντί για ονόματα, και η αφαίρεση περισσότερου αποθέματος από όσο υπήρχε έκανε την ποσότητα αρνητική.

Prompt διόρθωσης:

Δείξε το όνομα του ατόμου στο ιστορικό, όχι το ID του. Μην επιτρέπεις αφαίρεση που θα έριχνε την ποσότητα κάτω από μηδέν· δείξε «Μόνο 4 σε απόθεμα» αντί γι' αυτό.

Μάθημα: περίγραψε τι πρέπει να είναι αδύνατο, όχι μόνο τι πρέπει να είναι δυνατό. Ο οδηγός μας για τη δημιουργία εφαρμογής διαχείρισης αποθέματος καλύπτει το υπόλοιπο.

5. Πύλη πελατών για ελεύθερο επαγγελματία ή γραφείο

Ποιος το χτίζει: σχεδιαστές, λογιστές, σύμβουλοι και γραφεία.

Πρώτο prompt:

Χτίσε μια πύλη πελατών. Προσκαλώ πελάτες με email. Κάθε πελάτης συνδέεται και βλέπει μόνο τα δικά του έργα, αρχεία και τιμολόγια, και μπορεί να αφήνει σχόλια. Εγώ συνδέομαι ως διαχειριστής και βλέπω τα πάντα.

Τι πήγε στραβά: αυτό είναι το πιο σημαντικό σφάλμα της λίστας. Οι σελίδες έδειχναν σε κάθε πελάτη μόνο τα δικά του έργα, αλλά ο διακομιστής επέστρεφε οποιοδήποτε έργο, αν άλλαζες τον αριθμό στη γραμμή διεύθυνσης. Η κλικ-κλικ πλοήγηση ως ένας πελάτης δεν το αποκάλυπτε ποτέ.

Prompt διόρθωσης:

Έλεγξε κάθε διαδρομή διακομιστή που επιστρέφει έργα, αρχεία, σχόλια ή τιμολόγια. Καθεμία πρέπει να επιβεβαιώνει ότι ο συνδεδεμένος πελάτης είναι ο ιδιοκτήτης της εγγραφής, και αλλιώς να επιστρέφει «δεν βρέθηκε». Μετά δοκίμασέ το: συνδέσου ως πελάτης Α και προσπάθησε να ανοίξεις το έργο του πελάτη Β με το ID του.

Μάθημα: το να κρύβεις κάτι στην οθόνη δεν είναι το ίδιο με το να το προστατεύεις. Περισσότερα στο είναι ασφαλές το vibe coding;.

6. Σελίδα παρουσίασης με λίστα αναμονής

Ποιος το χτίζει: ιδρυτές που δοκιμάζουν μια ιδέα πριν την χτίσουν.

Πρώτο prompt:

Χτίσε landing page για εφαρμογή που βοηθά δασκάλους να προγραμματίζουν μαθήματα και να εισπράττουν πληρωμές. Τίτλος, υπότιτλος, φόρμα εγγραφής με email, τρία οφέλη, ενότητα «πώς λειτουργεί» και συχνές ερωτήσεις. Αποθήκευσε τις εγγραφές σε βάση με την ημερομηνία και άφησέ με να τις κατεβάσω ως CSV από ιδιωτική σελίδα.

Τι πήγε στραβά: μέσα σε λίγες μέρες η λίστα γέμισε σκουπίδια από bots, και η σελίδα δεν είχε τίτλο ή περιγραφή, οπότε οι κοινόχρηστοι σύνδεσμοι έδειχναν κενή προεπισκόπηση.

Prompt διόρθωσης:

Πρόσθεσε βασική προστασία από bots στη φόρμα εγγραφής (ένα κρυφό πεδίο παγίδα και όριο 5 εγγραφών ανά IP την ώρα). Πρόσθεσε τίτλο σελίδας, περιγραφή και εικόνα κοινοποίησης για τα μέσα.

Μάθημα: μια δημόσια φόρμα θα βρεθεί. Δες πώς χτίζεται σελίδα λίστας αναμονής.

7. Εφαρμογή quiz για δάσκαλο

Ποιος το χτίζει: δάσκαλοι και εκπαιδευτές που θέλουν κάτι πιο ελαφρύ από ένα LMS.

Πρώτο prompt:

Χτίσε μια εφαρμογή quiz για την τάξη μου. Δημιουργώ κουίζ με ερωτήσεις πολλαπλής επιλογής και μία σωστή απάντηση σε κάθε ερώτηση. Οι μαθητές μπαίνουν με έναν κωδικό και το μικρό τους όνομα, απαντούν στις ερωτήσεις και βλέπουν τη βαθμολογία τους στο τέλος. Βλέπω έναν πίνακα αποτελεσμάτων για κάθε κουίζ.

Τι πήγε στραβά: οι σωστές απαντήσεις στέλνονταν στον browser μαζί με τις ερωτήσεις, οπότε ένας περίεργος μαθητής μπορούσε να τις διαβάσει στον πηγαίο κώδικα της σελίδας. Επίσης, οι μαθητές μπορούσαν να υποβάλλουν ξανά μέχρι να πάρουν 100%.

Prompt διόρθωσης:

Μην στέλνεις τις σωστές απαντήσεις στον browser. Έλεγξε τις απαντήσεις στον διακομιστή μετά την υποβολή. Επίτρεψε μία υποβολή ανά όνομα μαθητή ανά κουίζ, και δείξε στον δάσκαλο αν κάποιος προσπαθήσει ξανά.

Μάθημα: ο browser ανήκει στον χρήστη. Ό,τι βρίσκεται εκεί μπορεί να διαβαστεί.

8. Ένα μικρό εργαλείο AI

Ποιος το χτίζει: marketers, συγγραφείς και ιδρυτές που θέλουν έναν εστιασμένο βοηθό AI.

Πρώτο prompt:

Χτίσε ένα εργαλείο που μετατρέπει μια περιγραφή προϊόντος σε πέντε αναρτήσεις για κοινωνικά δίκτυα σε διαφορετικό ύφος (φιλικό, ειδικό, παιχνιδιάρικο, σύντομο, εκτενές). Χρησιμοποίησε API AI. Επικολλώ την περιγραφή, διαλέγω πλατφόρμα και παίρνω τις αναρτήσεις με κουμπιά αντιγραφής.

Τι πήγε στραβά: η πρώτη εκδοχή καλούσε την υπηρεσία AI απευθείας από τον browser με το κλειδί API μέσα στη σελίδα, όπου μπορούσε οποιοσδήποτε να το αντιγράψει και να ανεβάσει τον λογαριασμό.

Prompt διόρθωσης:

Μετέφερε την κλήση AI στον διακομιστή. Αποθήκευσε το κλειδί API ως μυστικό, ποτέ στον κώδικα του frontend. Περιόρισε κάθε επισκέπτη σε 20 δημιουργίες την ημέρα.

Μάθημα: τα κλειδιά ανήκουν σε μυστικά στον διακομιστή. Δες πώς να προστατεύεις τα κλειδιά API και πώς να προσθέσεις λειτουργίες AI στην εφαρμογή σου.

9. Ιστοσελίδα επιχείρησης σε αραβικά και αγγλικά

Ποιος το χτίζει: επιχειρήσεις στον Κόλπο και στον ευρύτερο αραβικό κόσμο που εξυπηρετούν δύο γλώσσες.

Πρώτο prompt:

Χτίσε ιστοσελίδα για την εταιρεία εσωτερικού design μου, σε αραβικά και αγγλικά, με εναλλαγή γλώσσας. Σελίδες: αρχική, υπηρεσίες, portfolio, σχετικά και επικοινωνία. Τα αραβικά πρέπει να είναι πλήρως από δεξιά προς αριστερά.

Τι πήγε στραβά: το αραβικό κείμενο ήταν στοιχισμένο δεξιά, αλλά η διάταξη δεν ήταν καθρεφτισμένη: τα βελάκια έδειχναν λάθος κατεύθυνση και το μενού ήταν στην αντίθετη πλευρά. Επίσης, οι αριθμοί τηλεφώνου εμφανίζονταν ανάποδα σε ορισμένα σημεία.

Prompt διόρθωσης:

Στα αραβικά, καθρέφτισε ολόκληρη τη διάταξη: όρισε την κατεύθυνση της σελίδας από δεξιά προς αριστερά, βάλε το μενού δεξιά, αντέστρεψε τα εικονίδια κατεύθυνσης και κράτα τους αριθμούς τηλεφώνου και τα email από αριστερά προς δεξιά μέσα στο αραβικό κείμενο.

Μάθημα: το δεξιά προς αριστερά είναι διάταξη, όχι στοίχιση. Το Mythex υποστηρίζει αραβικά και άλλες διατάξεις από δεξιά προς αριστερά, και μπορείς να δίνεις εντολές απευθείας στα αραβικά.

10. Ένας tracker που γίνεται εφαρμογή για κινητά

Ποιος το χτίζει: προπονητές, γυμναστήρια και κοινοτικές ομάδες των οποίων οι χρήστες ζουν στα κινητά τους.

Πρώτο prompt:

Χτίσε ένα ημερολόγιο προπόνησης για τους πελάτες μου. Κάθε πελάτης συνδέεται, βλέπει το πρόγραμμα της εβδομάδας που του έχω αναθέσει, σημειώνει τις ασκήσεις και καταγράφει τα βάρη. Βλέπω την πρόοδο κάθε πελάτη σε διάγραμμα.

Τι πήγε στραβά: η web εφαρμογή λειτουργούσε, αλλά στα κινητά τα κουμπιά ήταν πολύ μικρά για πάτημα στη μέση της προπόνησης και το διάγραμμα ήταν δυσανάγνωστο.

Prompt διόρθωσης:

Σχεδίασε το για χρήση με το ένα χέρι σε κινητό: μεγάλα κουμπιά στο κάτω μέρος της οθόνης, μία άσκηση ανά οθόνη με μεγάλα κουμπιά «Επόμενη» και «Ολοκληρώθηκε», και ένα απλό εβδομαδιαίο διάγραμμα προόδου.

Μάθημα: αν οι άνθρωποι θα το χρησιμοποιούν στο κινητό, σχεδίασε πρώτα για το κινητό. Στο Mythex Pro, η δημοσιευμένη εφαρμογή μπορεί έπειτα να γίνει εφαρμογή Android για το Google Play και εφαρμογή iPhone που αποστέλλεται στο TestFlight· η εφαρμογή για κινητά ανοίγει τη δημοσιευμένη σου εφαρμογή, οπότε κάθε Publish την ενημερώνει. Δες τη σελίδα του κατασκευαστή εφαρμογών για κινητά.

Τα μοτίβα πίσω από αυτά τα παραδείγματα

Σε όλα και τα δέκα, οι αστοχίες ομαδοποιούνται σε λίγες κατηγορίες:

Κανένα από αυτά δεν απαιτεί να διαβάσεις κώδικα. Χρειάζεται να δοκιμάζεις σαν περίεργος, ελαφρώς εχθρικός χρήστης, και να περιγράφεις με ακρίβεια τι βλέπεις.

Δοκίμασε μόνος σου

Διάλεξε το παράδειγμα που μοιάζει περισσότερο με την ιδέα σου, αντέγραψε το πρώτο του prompt και άλλαξε τις λεπτομέρειες. Μετά χρησιμοποίησε το prompt διόρθωσης ως λίστα ελέγχου πριν το μοιραστείς. Η λίστα prompts για vibe coding έχει 30 ακόμα, και το πώς να χτίσεις εφαρμογή με vibe coding ακολουθεί ένα έργο από την ιδέα ως τη δημοσιευμένη εφαρμογή. Όταν είσαι έτοιμος, ξεκίνα το στον κατασκευαστή εφαρμογών AI ή δες τα πρότυπα για μια αφετηρία.

Ερωτήσεις