Πώς να γράψετε prompts για εργαλεία δημιουργίας εφαρμογών με AI (με παραδείγματα πριν και μετά)
Ένα καλό prompt για εργαλείο δημιουργίας εφαρμογών με AI περιγράφει το προϊόν, όχι τον κώδικα: ποιος το χρησιμοποιεί, τι κάνει βήμα βήμα, τι δεδομένα κρατά και ποιος επιτρέπεται να βλέπει τι. Αφού υπάρξει η πρώτη έκδοση, ζητήστε μία συγκεκριμένη αλλαγή ανά μήνυμα, πείτε τι πρέπει να μείνει ίδιο και περιγράψτε τα προβλήματα ως «έκανα X, περίμενα Y, πήρα Z». Αυτές οι τρεις συνήθειες διορθώνουν τα περισσότερα απογοητευτικά αποτελέσματα.
Το υπόλοιπο αυτού του οδηγού δείχνει τα μοτίβα αναλυτικά, με παραδείγματα πριν και μετά που μπορείτε να προσαρμόσετε.
Γιατί το prompting ενός εργαλείου δημιουργίας εφαρμογών είναι διαφορετικό από τη συνομιλία με AI
Όταν κάνετε μια ερώτηση σε βοηθό συνομιλίας, ένα γενικό prompt παίρνει γενική απάντηση και προχωράτε. Όταν κάνετε prompt σε εργαλείο δημιουργίας εφαρμογών, η απάντηση είναι ένα πρόγραμμα που τρέχει. Κάθε κενό στην περιγραφή σας γεμίζει με εικασία, και αυτές οι εικασίες γίνονται κώδικας, πίνακες βάσης δεδομένων και οθόνες που μετά πρέπει να κρατήσετε ή να αναιρέσετε.
Άρα ο στόχος ενός prompt δεν είναι να ακούγεται έξυπνο. Είναι να αφήνει λιγότερες σημαντικές αποφάσεις στην τύχη. Δεν χρειάζεστε τεχνικό λεξιλόγιο γι' αυτό. Χρειάζεται να είστε συγκεκριμένοι για όσα μόνο εσείς ξέρετε: τους χρήστες σας, τη ροή εργασίας σας και τους κανόνες σας.
Τι να συμπεριλάβετε στο πρώτο prompt
Πριν γράψετε οτιδήποτε, απαντήστε σε αυτές τις ερωτήσεις. Κάθε μία κλείνει ένα κενό που αλλιώς θα μάντευε το AI.
| Συμπεριλάβετε | Γιατί έχει σημασία | Παράδειγμα |
|---|---|---|
| Το προϊόν σε μία πρόταση | Θέτει το πλαίσιο για κάθε μεταγενέστερη απόφαση | «Ένα site κρατήσεων για ένα κουρείο με δύο θέσεις» |
| Ποιος το χρησιμοποιεί | Καθορίζει τις οθόνες και τον τόνο | «Πελάτες χωρίς ραντεβού στα κινητά και ο ιδιοκτήτης σε φορητό υπολογιστή» |
| Η κύρια ροή, βήμα βήμα | Αυτό που πρέπει να δουλέψει πρώτα | «Διαλέγω υπηρεσία, διαλέγω ώρα, βάζω όνομα και τηλέφωνο, παίρνω επιβεβαίωση» |
| Τα δεδομένα που κρατά | Γίνεται ο σχεδιασμός της βάσης | «Υπηρεσίες, κρατήσεις, πελάτες» |
| Ποιος μπορεί να βλέπει ή να αλλάζει τι | Καθορίζει τη σύνδεση και τα δικαιώματα | «Μόνο ο ιδιοκτήτης βλέπει όλες τις κρατήσεις» |
| Εμφάνιση και αίσθηση, σύντομα | Αποφεύγει το γενικό προεπιλεγμένο στυλ | «Σκούρο, απλό, μεγάλα κουμπιά» |
| Τι να αφήσετε έξω προς το παρόν | Κρατά την πρώτη έκδοση μικρή | «Χωρίς πληρωμές ή κριτικές ακόμα» |
Αυτή η τελευταία γραμμή είναι υποτιμημένη. Το να λέτε τι δεν θέλετε εμποδίζει το AI να προσθέσει ένα blog, μια σελίδα τιμών και μια φόρμα εγγραφής στο newsletter που δεν ζητήσατε.
Πριν και μετά: το πρώτο prompt
Πριν:
Φτιάξε μου μια εφαρμογή για το γυμναστήριό μου.
Το εργαλείο πρέπει να μαντέψει τα πάντα: μέλη ή προσωπικό; Μαθήματα ή personal training; Πληρωμές; Θα πάρετε κάτι που μοιάζει με site γυμναστηρίου και δεν κάνει όσα χρειάζεστε.
Μετά:
Φτιάξε μια εφαρμογή κρατήσεων μαθημάτων για ένα μικρό studio γιόγκα. Τα μέλη βλέπουν τα μαθήματα αυτής της εβδομάδας (όνομα, εκπαιδευτής, ώρα, διαθέσιμες θέσεις), κάνουν κράτηση μιας θέσης και ακυρώνουν έως δύο ώρες πριν. Τα μέλη εγγράφονται με email και κωδικό. Ο ιδιοκτήτης του studio συνδέεται για να προσθέτει μαθήματα, να βλέπει ποιος έχει κλείσει και να σημειώνει παρουσίες. Αποθήκευσε μαθήματα, μέλη και κρατήσεις σε βάση δεδομένων. Ήρεμος, ανοιχτόχρωμος σχεδιασμός που δουλεύει καλά σε κινητά. Χωρίς πληρωμές ακόμα.
Η δεύτερη εκδοχή είναι ακόμα σύντομη. Απλώς απαντά στις ερωτήσεις του παραπάνω πίνακα.
Περιγράψτε τη συμπεριφορά, όχι την υλοποίηση
Συχνά θα πάρετε καλύτερα αποτελέσματα περιγράφοντας τι πρέπει να συμβαίνει, αντί για το πώς να χτιστεί.
Πριν:
Πρόσθεσε ένα useEffect που φέρνει τις κρατήσεις και ένα component modal για επεξεργασία.
Μετά:
Όταν ο ιδιοκτήτης πατά μια κράτηση, άνοιξε ένα πάνελ όπου μπορεί να αλλάξει την ώρα ή να την ακυρώσει. Οι αλλαγές να φαίνονται αμέσως στη λίστα.
Το πρώτο prompt κλειδώνει το AI σε μια συγκεκριμένη τεχνική που μπορεί να μην ταιριάζει στον τρόπο που έχει χτιστεί η εφαρμογή. Το δεύτερο λέει το αποτέλεσμα και αφήνει το AI να επιλέξει τη σωστή προσέγγιση για τον κώδικα που ήδη έγραψε. Αν είστε προγραμματιστής και έχετε ισχυρή προτίμηση, πείτε την, αλλά συνοδέψτε την με το αποτέλεσμα.
Να είστε συγκεκριμένοι με τους κανόνες
Οι επιχειρησιακοί κανόνες είναι το σημείο όπου οι εφαρμογές που χτίζονται με AI συχνά πάνε στραβά, επειδή είναι προφανείς για εσάς και αόρατοι για το AI. Γράψτε τους ρητά.
- Όρια: «Ένα μέλος μπορεί να έχει το πολύ τρεις μελλοντικές κρατήσεις.»
- Χρονισμός: «Οι ακυρώσεις κλείνουν δύο ώρες πριν ξεκινήσει το μάθημα.»
- Ακραίες περιπτώσεις: «Αν το μάθημα είναι γεμάτο, δείξε κουμπί λίστας αναμονής αντί για Κράτηση.»
- Δικαιώματα: «Οι εκπαιδευτές βλέπουν τις παρουσίες των δικών τους μαθημάτων, αλλά όχι των άλλων εκπαιδευτών.»
Κάθε ένα από αυτά είναι μία πρόταση. Αν λείπει οποιοδήποτε, η εφαρμογή είτε δεν θα επιβάλλει τον κανόνα είτε θα εφεύρει τη δική της εκδοχή.
Μετά την πρώτη έκδοση: μία αλλαγή ανά μήνυμα
Όταν κάτι τρέχει στην προεπισκόπηση, περάστε από την περιγραφή ολόκληρου του προϊόντος σε μικρές, ελέγξιμες αλλαγές.
Πριν:
Το σχέδιο δεν είναι σωστό, η κράτηση δεν λειτουργεί καλά και θέλω προβολή ημερολογίου και email.
Μετά (ως τέσσερα ξεχωριστά μηνύματα):
- Όταν κλείνω την τελευταία θέση σε ένα μάθημα, εμφανίζεται ακόμα «1 θέση διαθέσιμη». Να εμφανίζει «Πλήρες» και να κρύβει το κουμπί Κράτηση.
- Πρόσθεσε ημερολόγιο προβολής εβδομάδας στη σελίδα προγράμματος, με μία στήλη ανά ημέρα. Κράτα την τρέχουσα προβολή λίστας ως επιλογή.
- Κάνε τις κάρτες μαθημάτων πιο συμπαγείς σε κινητά: μικρότερο padding, όνομα εκπαιδευτή στην ίδια γραμμή με την ώρα.
- Στείλε στο μέλος email επιβεβαίωσης όταν κάνει κράτηση.
Γιατί δουλεύει αυτό:
- Κάθε αλλαγή είναι αρκετά μικρή ώστε το AI να την κάνει σωστά σε ένα πέρασμα.
- Μπορείτε να τη δοκιμάσετε πριν προχωρήσετε.
- Αν μία πάει στραβά, μπορείτε να επιστρέψετε μόνο εκείνο το βήμα χωρίς να χάσετε τα υπόλοιπα.
Πείτε τι να κρατήσει
Όταν ζητάτε αλλαγή σε κάτι που ήδη δουλεύει, πείτε τι δεν πρέπει να αλλάξει. Αυτός είναι ο πιο εύκολος τρόπος να σταματήσετε τις παλινδρομήσεις (πράγματα που δούλευαν και χαλάνε μετά από επεξεργασία).
Ανασχεδίασε την κεφαλίδα της αρχικής με μεγαλύτερο τίτλο και φωτογραφία δεξιά. Κράτα την πλοήγηση, τα χρώματα και όλα όσα είναι κάτω από την κεφαλίδα ακριβώς όπως είναι.
Το ίδιο ισχύει και για τα δεδομένα: «Πρόσθεσε πεδίο τηλεφώνου στα μέλη. Μην αφαιρείς ούτε μετονομάζεις υπάρχοντα πεδία.»
Χρησιμοποιήστε screenshots και ακριβές κείμενο
Οι λέξεις όπως «το πράγμα πάνω» είναι ασαφείς. Τα περισσότερα εργαλεία δημιουργίας εφαρμογών δέχονται εικόνες, και ένα screenshot με μια σύντομη σημείωση είναι πιο γρήγορο από μια παράγραφο περιγραφής.
- Επισυνάψτε ένα screenshot και γράψτε «το κουμπί που έχω κυκλώσει κόκκινο επικαλύπτει το μενού σε κινητά».
- Επικολλήστε το ακριβές κείμενο κάθε μηνύματος σφάλματος αντί να το παραφράζετε.
- Παραθέστε ακριβώς τις ετικέτες που βλέπετε στην οθόνη: «το κουμπί Αποθήκευση αλλαγών στη σελίδα Ρυθμίσεων».
Για σφάλματα συγκεκριμένα, χρησιμοποιήστε αυτή τη μορφή:
Στη σελίδα κρατήσεων, πάτησα Ακύρωση σε μια κράτηση για αύριο. Περίμενα να εξαφανιστεί από τη λίστα μου. Αντί γι' αυτό δεν έγινε τίποτα και η κράτηση εξακολουθεί να υπάρχει μετά την ανανέωση. Διόρθωσέ το και έλεγξε ότι η ακύρωση λειτουργεί.
Ο οδηγός μας για πώς να αποσφαλματώσετε μια εφαρμογή χτισμένη με AI πηγαίνει βαθύτερα σε αυτό.
Σχεδιάστε πρώτα για μεγάλες αλλαγές
Για οτιδήποτε αγγίζει πολλά μέρη της εφαρμογής (προσθήκη λογαριασμών χρηστών σε εφαρμογή που δεν είχε, προσθήκη πληρωμών, αλλαγή του τρόπου οργάνωσης των δεδομένων), ζητήστε πλάνο πριν από οποιαδήποτε αλλαγή κώδικα.
Πριν αλλάξεις οτιδήποτε, εξήγησε πώς θα πρόσθετες λογαριασμούς ομάδας: ποιοι νέοι πίνακες, ποιες σελίδες αλλάζουν και τι συμβαίνει με τους υπάρχοντες χρήστες. Μην αλλάξεις κώδικα ακόμα.
Διαβάστε το πλάνο. Αν παρεξηγεί κάτι, η διόρθωση μιας παραγράφου κοστίζει πολύ λιγότερο από τη διόρθωση ενός τελειωμένου χαρακτηριστικού. Πολλά εργαλεία έχουν αφιερωμένη λειτουργία γι' αυτό· στο Mythex είναι η λειτουργία Plan, μαζί με τις Build και Ask.
Τι να αποφύγετε
| Αποφύγετε | Γιατί | Αντί γι' αυτό |
|---|---|---|
| «Κάν' το καλύτερο» / «Κάν' το να ξεχωρίζει» | Κανένας στόχος, άρα το AI αλλάζει τυχαία | Ονομάστε την αλλαγή: «περισσότερο κενό ανάμεσα στις ενότητες, μεγαλύτεροι τίτλοι» |
| Ένα τεράστιο prompt με δέκα λειτουργίες | Τα λάθη συσσωρεύονται· δύσκολο να δοκιμαστεί | Μία λειτουργία ανά μήνυμα |
| Επικόλληση κλειδιών API στο chat | Τα κλειδιά καταλήγουν στο ιστορικό συνομιλίας | Χρησιμοποιήστε τα secrets ή τις ρυθμίσεις περιβάλλοντος του εργαλείου |
| Διαπληκτισμός με ένα χαλασμένο αποτέλεσμα | Κάθε διόρθωση στοιβάζεται πάνω στο σφάλμα | Επιστρέψτε πίσω, μετά διατυπώστε διαφορετικά |
| Να καθορίζετε κώδικα που δεν καταλαβαίνετε | Κλειδώνει μια κακή προσαρμογή | Περιγράψτε τη συμπεριφορά που θέλετε |
| Ζήτημα «ασφάλεια επιπέδου επιχείρησης» | Δεν σημαίνει κάτι συγκεκριμένο | Γράψτε τους πραγματικούς κανόνες: ποιος βλέπει τι |
Για τα κλειδιά API: αν χρειάζεστε υπηρεσία πληρωμών ή email, βάλτε τα κλειδιά της στα secrets του έργου και όχι στο prompt. Δείτε τι είναι οι μεταβλητές περιβάλλοντος και τα secrets αν είναι καινούργιο για εσάς.
Επαναχρησιμοποιήσιμα πρότυπα prompts
Προσαρμόστε αυτά αντικαθιστώντας τα μέρη σε αγκύλες.
Νέα εφαρμογή:
Φτιάξε μια [τύπος εφαρμογής] για [ποιος]. Αυτοί [κύρια ροή, βήμα βήμα]. [Δεύτερος τύπος χρήστη] συνδέεται για να [τι κάνει]. Αποθήκευσε [δεδομένα] σε βάση δεδομένων. [Εμφάνιση και αίσθηση]. Άφησε έξω [πράγματα για αργότερα].
Νέα λειτουργία:
Πρόσθεσε [λειτουργία] στη [σελίδα]. Όταν ο [χρήστης] κάνει [ενέργεια], [τι πρέπει να συμβαίνει]. Μόνο ο [ποιος] μπορεί να [το κάνει]. Κράτα [υπάρχοντα στοιχεία] όπως είναι.
Αλλαγή σχεδίασης:
Στη [σελίδα], άλλαξε [συγκεκριμένο στοιχείο] σε [συγκεκριμένη αλλαγή]. Κράτα [τι να μείνει]. Έλεγξε ότι φαίνεται σωστά σε οθόνη πλάτους κινητού.
Σφάλμα:
Στη [σελίδα], έκανα [βήματα]. Περίμενα [αναμενόμενο]. Αντί γι' αυτό [πραγματικό, και το ακριβές κείμενο σφάλματος]. Διόρθωσέ το και επαλήθευσε ότι η ροή λειτουργεί.
Ερώτηση χωρίς αλλαγές:
Μην αλλάξεις κώδικα. Εξήγησε πώς λειτουργεί [μέρος της εφαρμογής] και πού αποθηκεύονται τα [δεδομένα].
Γράφοντας μια μεγαλύτερη προδιαγραφή
Για μεγαλύτερα έργα, μπορεί να βοηθήσει να γράψετε πρώτα ένα σύντομο brief μίας σελίδας και να το επικολλήσετε ως αρχικό prompt: τους χρήστες, τις βασικές ροές, τα δεδομένα, τους κανόνες και τι είναι εκτός πεδίου. Μπορείτε ακόμα και να βοηθήσετε το AI να το συντάξει· ο οδηγός μας για πώς να γράψετε ένα PRD με AI εξηγεί πώς. Απλώς κρατήστε το πρώτο αίτημα κατασκευής στη βασική ροή και προσθέστε το υπόλοιπο βήμα βήμα.
Prompting στο Mythex
Όλα τα παραπάνω δουλεύουν στο Mythex. Μερικά συγκεκριμένα που βοηθούν:
- Λειτουργίες Build, Plan και Ask. Χρησιμοποιήστε το Plan για μεγάλες ή ριψοκίνδυνες αλλαγές και το Ask όταν θέλετε εξήγηση χωρίς επεξεργασίες.
- Checkpoints. Μετά από κάθε επιτυχημένη αλλαγή το Mythex αποθηκεύει checkpoint, και το Revert to this point σε μια απάντηση επαναφέρει το έργο. Μπορείτε επίσης να επεξεργαστείτε ένα προηγούμενο μήνυμα και να το στείλετε ξανά, για να δοκιμάσετε διαφορετικό prompt από εκείνο το σημείο.
- Κάρτα secrets. Όταν ο πράκτορας χρειάζεται κλειδί API, το ζητά μέσω κάρτας στο chat, ώστε η τιμή να αποθηκεύεται ως secret του έργου και όχι να γράφεται στο μήνυμά σας.
- Εικόνες. Επισυνάψτε screenshots ή mockups και ο πράκτορας θα τα δει.
Η τεκμηρίωση έχει μια σύντομη σελίδα για τα αποτελεσματικά prompts και μία για την επανάληψη χωρίς ξαναχτισμό. Αν ξεκινάτε από το μηδέν, το πώς να χτίσετε μια εφαρμογή με AI περνά από ένα πλήρες έργο, και το πώς να σχεδιάσετε μια καλοφτιαγμένη εφαρμογή με AI καλύπτει prompts για οπτική επεξεργασία.
Ερωτήσεις
Πόσο μεγάλο πρέπει να είναι ένα prompt για εργαλείο δημιουργίας εφαρμογών με AI;
Για την πρώτη έκδοση, μια σύντομη παράγραφος τεσσάρων έως οκτώ προτάσεων συνήθως αρκεί: ποιος χρησιμοποιεί την εφαρμογή, η κύρια ροή, τα δεδομένα που κρατά και ποιος μπορεί να βλέπει τι. Μετά από αυτό, τα πιο σύντομα prompts που ζητούν μία αλλαγή τη φορά δουλεύουν καλύτερα από τα μακριά.
Πρέπει να πω στο AI ποιο framework ή γλώσσα να χρησιμοποιήσει;
Μόνο αν έχετε λόγο, όπως ένας προγραμματιστής που θα αναλάβει τον κώδικα ή μια υπηρεσία που δουλεύει μόνο με συγκεκριμένη τεχνολογία. Αλλιώς περιγράψτε το προϊόν και αφήστε το εργαλείο να επιλέξει λογικές προεπιλογές.
Γιατί το AI αλλάζει πράγματα που δεν του ζήτησα;
Συνήθως επειδή το prompt ήταν γενικό («κάνε το καλύτερο») ή δεν είπε τι να κρατήσει. Ονομάστε ακριβώς το στοιχείο που θέλετε να αλλάξει, πείτε τι πρέπει να μείνει ίδιο και ζητήστε μία αλλαγή ανά μήνυμα.
Είναι καλύτερο να διορθώσω ένα κακό αποτέλεσμα με περισσότερα prompts ή να ξεκινήσω από την αρχή;
Αν η τελευταία αλλαγή έκανε τα πράγματα χειρότερα, επιστρέψτε στην προηγούμενη έκδοση και διατυπώστε διαφορετικά, αντί να στοιβάζετε διορθώσεις πάνω της. Ξεκινήστε νέο έργο μόνο όταν έχει αλλάξει η ίδια η ιδέα.