కాపీ చేసుకోగల 30 వైబ్ కోడింగ్ ప్రాంప్ట్‌లు (చీట్ షీట్)

అత్యుత్తమ వైబ్ కోడింగ్ ప్రాంప్ట్‌లు చిన్నవి, నిర్దిష్టమైనవి మరియు ప్రవర్తన గురించినవి: యాప్‌ను ఎవరు ఉపయోగిస్తారు, వారు ఏమి చేయగలరు, అది ఏమి ఉంచుతుంది, మరియు అది ఎలా కనిపిస్తుంది. దిగువన మొదటి నిర్మాణం నుంచి ప్రచురణ వరకు మీరు ఉన్న దశ ప్రకారం వర్గీకరించిన 30 కాపీ-అతికించగల ప్రాంప్ట్‌లు ఉన్నాయి. [బ్రాకెట్లలో] ఉన్న భాగాలను మీ స్వంత వివరాలతో మార్చండి.

ఇవి ఏ AI యాప్ బిల్డర్ లేదా కోడింగ్ ఏజెంట్‌లోనైనా పనిచేస్తాయి. వీటి వెనుక ఉన్న కారణం కావాలంటే, AI యాప్ బిల్డర్‌లకు ప్రాంప్ట్‌లు ఎలా రాయాలి మా సుదీర్ఘ గైడ్ సూత్రాలను వివరిస్తుంది. ఈ పేజీ చీట్ షీట్.

ఈ చీట్ షీట్‌ను ఎలా ఉపయోగించాలి

• ఒక మొదటి-నిర్మాణ ప్రాంప్ట్‌తో ప్రారంభించండి, తర్వాత మిగతావి ఒకదాని తర్వాత ఒకటి ఉపయోగించండి.
• ప్రతి ప్రాంప్ట్ తర్వాత పరీక్షించండి. తదుపరిది పంపే ముందు మార్పును క్లిక్ చేసి చూడండి.
• పనిచేసేది ఉంచండి. ఇక్కడి చాలా ఫాలో-అప్ ప్రాంప్ట్‌లు "మిగతావన్నీ అలాగే ఉంచు" అనే మాటతో ముగుస్తాయి, అందుకు కారణం ఉంది.
• ఖచ్చితమైన టెక్స్ట్ అతికించండి. ఎర్రర్ మెసేజ్‌లు, బటన్ లేబుళ్లు మరియు స్క్రీన్‌పై ఉన్న పదాలు ప్రతిసారీ వివరణలను అధిగమిస్తాయి.

మొదటి-నిర్మాణ ప్రాంప్ట్‌లు

ఇవి యాప్ ఆకారాన్ని నిర్ణయిస్తాయి. ప్రతిదీ వినియోగదారులు, చర్యలు, డేటా మరియు రూపాన్ని పేర్కొంటుంది.

1. ఒక సరళమైన ట్రాకర్

నా కోసం [అలవాటు] ట్రాకర్ నిర్మించు. నేను పేరు మరియు రంగుతో [అలవాటు]ను జోడించగలను, రోజుకు ఒకసారి టిక్ చేయగలను, 30 రోజుల గ్రిడ్ మరియు నా ప్రస్తుత స్ట్రీక్ చూడగలను. రిఫ్రెష్ తర్వాత కూడా ప్రతిదీ ఉండేలా సేవ్ చేయి. ఫోన్‌లో పనిచేసే శుభ్రమైన, కనిష్ఠ డిజైన్.

2. ఒక చిన్న వ్యాపారం కోసం బుకింగ్ పేజీ

నా [హెయిర్ సెలూన్] కోసం బుకింగ్ పేజీ నిర్మించు. కస్టమర్లు ఒక సేవ ([కట్ 30 నిమిషాలు, కలర్ 90 నిమిషాలు]), తేదీ మరియు [9:00 నుంచి 18:00] మధ్య ఖాళీ టైమ్ స్లాట్ ఎంచుకుని, పేరు, ఫోన్ మరియు ఈమెయిల్ నమోదు చేస్తారు. ఇద్దరు వ్యక్తులు ఒకే స్లాట్ బుక్ చేయలేరు. లాగిన్ వెనుక ఉండే ప్రైవేట్ అడ్మిన్ పేజీ కావాలి, అది రోజు వారీగా రాబోయే బుకింగ్‌లను జాబితా చేస్తుంది.

3. ఒక అంతర్గత టూల్

నా టీమ్ [పరికరాల రుణాలను] ట్రాక్ చేయడానికి ఒక అంతర్గత టూల్ నిర్మించు. ప్రతి ఐటమ్‌కు పేరు, కోడ్ మరియు స్థితి (అందుబాటులో ఉంది, రుణంలో ఉంది, పాడైంది) ఉంటాయి. సిబ్బంది లాగిన్ అయి ఒక ఐటమ్‌ను తమకు తీసుకుని తిరిగి ఇవ్వగలరు. స్థితి ప్రకారం ఫిల్టర్లతో పట్టిక మరియు ప్రతి ఐటమ్ ఎవరి వద్ద ఉందో చరిత్ర చూపించు.

4. వెయిట్‌లిస్ట్‌తో ల్యాండింగ్ పేజీ

[నా ఉత్పత్తి: బిజీ తల్లిదండ్రుల కోసం భోజన ప్రణాళిక యాప్] కోసం ఒక-పేజీ వెబ్‌సైట్ నిర్మించు. హెడ్‌లైన్, ఒక-వాక్య సబ్‌హెడ్డింగ్ మరియు ఈమెయిల్ సైన్-అప్‌తో హీరో. తర్వాత మూడు ప్రయోజనాలు, ఒక చిన్న ఎలా పనిచేస్తుందో విభాగం మరియు FAQ. సైన్-అప్ ఈమెయిల్‌లను డేటాబేస్‌లో సేవ్ చేయి మరియు ప్రైవేట్ అడ్మిన్ పేజీలో జాబితా చూపించు.

5. ఒక క్లయింట్ పోర్టల్

నా [డిజైన్ స్టూడియో] కోసం క్లయింట్ పోర్టల్ నిర్మించు. ప్రతి క్లయింట్ లాగిన్ అయి తమ సొంత ప్రాజెక్ట్‌లను మాత్రమే చూస్తారు, స్థితి, నేను అప్‌లోడ్ చేసిన ఫైళ్లు మరియు కామెంట్ థ్రెడ్‌తో. నేను అడ్మిన్‌గా లాగిన్ అయి అందరు క్లయింట్లను చూస్తాను. క్లయింట్లు ఒకరి డేటాను ఎప్పుడూ చూడకూడదు.

6. ఒక కాలిక్యులేటర్ లేదా కోట్ టూల్

నా [క్లీనింగ్ బిజినెస్] కోసం కోట్ కాలిక్యులేటర్ నిర్మించు. ఇన్‌పుట్‌లు: బెడ్‌రూమ్‌ల సంఖ్య, బాత్‌రూమ్‌లు, అదనపు సేవలు (ఓవెన్, కిటికీలు, ఫ్రిజ్) మరియు తరచుదనం (ఒకసారి, వారానికి, నెలకు). ఎంపికలు మారినప్పుడు ధర చూపించు, విభజనతో. ధరలు: [మీ ధర జాబితాను అతికించండి]. కోట్ అభ్యర్థనను ఈమెయిల్ ద్వారా నాకు పంపే బటన్ జోడించు.

ప్లానింగ్ ప్రాంప్ట్‌లు

పెద్ద ఫీచర్ ముందు, లేదా ఏదైనా ఎలా వివరించాలో ఖచ్చితంగా తెలియనప్పుడు వీటిని ఉపయోగించండి.

7. నిర్మించే ముందు ప్లాన్ చేయండి

ఏ కోడ్ రాయడానికి ముందు, నువ్వు నిర్మించే స్క్రీన్లు, నిల్వ చేసే డేటా మరియు నా నుంచి మీకు కావాల్సిన నిర్ణయాలు సాధారణ మాటల్లో వివరించు. నా OK కోసం వేచి ఉండు.

8. గందరగోళమైన ఆలోచనను మొదటి వెర్షన్‌గా మార్చండి

ఇదే నా ఆలోచన: [నోట్స్ అతికించండి]. ఇంకా ఉపయోగకరంగా ఉండే అతి చిన్న మొదటి వెర్షన్‌ను 5–8 బుల్లెట్ పాయింట్లలో సూచించు. తర్వాతకు ఏమి వదిలేస్తావో మరియు ఎందుకో జాబితా చేయి.

9. ఏమి లేదో అడగండి

ఇది నిర్మించే ముందు ఒక డెవలపర్ నన్ను ఏ ప్రశ్నలు అడుగుతాడు? వాటిని ఒక్కొక్కటిగా అడుగు, తర్వాత నా సమాధానాలను ఒక చిన్న స్పెక్‌గా సారాంశం ఇవ్వు.

10. ఒక పెద్ద మార్పును ముందుగా తనిఖీ చేయండి

నేను [ఒకే వర్క్‌స్పేస్‌ను అనేక మంది పంచుకునే టీమ్ ఖాతాలు] జోడించాలనుకుంటున్నాను. డేటా, స్క్రీన్లు మరియు అనుమతుల్లో ఏమి మారాలి, మరియు ఏమి విరగవచ్చో వివరించు. ఇంకా ఏదీ మార్చవద్దు.

డిజైన్ ప్రాంప్ట్‌లు

11. ఒక స్పష్టమైన శైలిని నిర్ణయించండి

యాప్‌ను మళ్లీ స్టైల్ చేయి: వెచ్చని ఆఫ్-వైట్ నేపథ్యం, ముదురు టెక్స్ట్, ఒక యాక్సెంట్ రంగు [#1F6F50], గుండ్రని మూలలు, విశాలమైన అంతరం మరియు ఆధునిక సాన్స్-సెరిఫ్ ఫాంట్. లేఅవుట్ మరియు ప్రతి ఫీచర్‌ను ఖచ్చితంగా అలాగే ఉంచు.

12. ఒక రిఫరెన్స్ అనుభూతిని కాపీ చేయండి

డాష్‌బోర్డ్‌ను ప్రశాంతమైన ఫైనాన్స్ యాప్ లాగా అనిపించేలా చేయి: చాలా తెల్లని స్థలం, సంఖ్యలు పెద్దవిగా మరియు బోల్డ్‌గా, లేబుళ్లు చిన్నవిగా మరియు బూడిద రంగులో, పైన ఒక సరళమైన చార్ట్. ఏ బ్రాండ్ లోగో లేదా టెక్స్ట్‌ను కాపీ చేయవద్దు.

13. ఫోన్ లేఅవుట్‌ను సరిచేయండి

375px వెడల్పు ఉన్న ఫోన్‌లో, [Orders పేజీ] లోని పట్టిక పక్కకు స్క్రోల్ అవుతుంది మరియు బటన్లు ఒకదానిపై ఒకటి వస్తాయి. చిన్న స్క్రీన్‌లపై ప్రతి వరుసను పేర్చిన కార్డ్‌గా మార్చు. డెస్క్‌టాప్ లేఅవుట్ మార్చవద్దు.

14. ఖాళీ, లోడింగ్ మరియు ఎర్రర్ స్థితులు

[Projects జాబితా] కు సరైన స్థితులు జోడించు: మొదటి ప్రాజెక్ట్ జోడించడానికి బటన్‌తో స్నేహపూర్వక ఖాళీ స్థితి, డేటా లోడ్ అవుతుండగా లోడింగ్ స్కెలెటన్, మరియు లోడింగ్ విఫలమైతే రీట్రై బటన్‌తో స్పష్టమైన సందేశం.

15. కుడి-నుంచి-ఎడమ మద్దతు

పూర్తి కుడి-నుంచి-ఎడమ లేఅవుట్‌తో ఇంటర్‌ఫేస్ యొక్క అరబిక్ వెర్షన్ జోడించు. దిశను సూచించే చిహ్నాలు తిరగాలి; సంఖ్యలు మరియు తేదీలు లోకేల్ ఫార్మాట్ ఉపయోగించాలి. ఇంగ్లీష్ డిఫాల్ట్‌గా ఉంచు.

డేటా మరియు ఫీచర్ ప్రాంప్ట్‌లు

16. డేటాను నిలిచేలా చేయండి

ప్రస్తుతం నేను రిఫ్రెష్ చేస్తే నా డేటా మాయమవుతుంది. బదులుగా నిజమైన డేటాబేస్‌లో నిల్వ చేయి, మరియు ప్రస్తుత స్క్రీన్లు అదే విధంగా పనిచేయాలి.

17. లాగిన్ జోడించండి

ఈమెయిల్ మరియు పాస్‌వర్డ్‌తో సైన్-అప్ మరియు లాగిన్ జోడించు. ప్రతి వినియోగదారు తమ సొంత [ఎంట్రీలను] మాత్రమే చూడగలరు మరియు సవరించగలరు. టాప్ బార్‌లో వినియోగదారు ఈమెయిల్ మరియు లాగ్-అవుట్ బటన్ చూపించు.

18. పాత్రలు జోడించండి

రెండు పాత్రలు జోడించు: అడ్మిన్ మరియు మెంబర్. అడ్మిన్లు [ఉత్పత్తులను] జోడించగలరు, సవరించగలరు మరియు తొలగించగలరు; మెంబర్లు వాటిని చూడగలరు మాత్రమే. దీన్ని కేవలం బటన్లను దాచడం ద్వారా కాకుండా సర్వర్‌లో అమలు చేయి.

19. సెర్చ్ మరియు ఫిల్టర్లు జోడించండి

[కాంటాక్ట్‌ల జాబితా] పైన ఒక సెర్చ్ బాక్స్ జోడించు, నేను టైప్ చేస్తున్నప్పుడు పేరు, కంపెనీ లేదా ఈమెయిల్‌తో సరిపోలేలా, అలాగే [స్థితి] కోసం ఒక ఫిల్టర్. ప్రస్తుత క్రమబద్ధీకరణ క్రమాన్ని ఉంచు.

20. ఫైల్ అప్‌లోడ్‌లు జోడించండి

వినియోగదారులు ప్రతి [లిస్టింగ్‌కు] గరిష్ఠంగా [5] చిత్రాలు జోడించగలరు, ఒక్కొక్కటి గరిష్ఠంగా [5 MB]. లిస్టింగ్‌పై థంబ్‌నెయిల్‌లు మరియు క్లిక్ చేసినప్పుడు పెద్ద వీక్షణ చూపించు. యజమాని మాత్రమే వారి చిత్రాలను తొలగించగలరు.

21. స్ప్రెడ్‌షీట్ నుంచి దిగుమతి చేయండి

[name, email, phone, notes] కాలమ్‌లతో CSV తీసుకునే ఒక Import బటన్ జోడించు, మొదటి 10 వరుసల ప్రివ్యూ చూపించి, సేవ్ చేసే ముందు నేను నిర్ధారించగలిగేలా చేయి. ఈమెయిల్ లేని వరుసలను దాటవేయి మరియు ఎన్ని దాటవేయబడ్డాయో చెప్పు.

సరిచేసే ప్రాంప్ట్‌లు

22. బగ్‌ను స్పష్టంగా నివేదించండి

నేను [ఎడిట్ ఫారమ్‌లో Save క్లిక్ చేసినప్పుడు], "[ఖచ్చితమైన ఎర్రర్ టెక్స్ట్]" కనిపిస్తుంది మరియు మార్పు సేవ్ కాదు. ఆశించినది: మార్పు సేవ్ అవుతుంది మరియు నేను జాబితాకు తిరిగి వస్తాను. కారణం కనుగొని, ఒకటి లేదా రెండు వాక్యాల్లో వివరించి, తర్వాత సరిచేయి.

23. ఫిక్స్ లూప్‌ను ఆపండి

దీన్ని మూడుసార్లు సరిచేయడానికి ప్రయత్నించాము, ఇంకా విఫలమవుతోంది. కోడ్ మార్చడం ఆపు. అత్యంత సంభావ్య మూడు కారణాలు, ప్రతిదాన్ని ఎలా తనిఖీ చేయాలి, మరియు నీ అభిప్రాయంలో ఏది అది అని జాబితా చేయి.

24. అనుబంధ ప్రభావాలను రద్దు చేయండి

నీ చివరి మార్పు తేదీ పికర్‌ను సరిచేసింది కానీ [సైడ్‌బార్] అదృశ్యమైంది. సైడ్‌బార్‌ను ఖచ్చితంగా మునుపటిలా తిరిగి తీసుకురా, మరియు తేదీ పికర్ పరిష్కారాన్ని ఉంచు.

25. మార్చే ముందు వివరించండి

[చెక్‌అవుట్ మొత్తం] ఇప్పుడు ఎలా లెక్కించబడుతుందో, దశల వారీగా, సంబంధిత ఫైళ్లను చూపిస్తూ వివరించు. ఏమీ మార్చవద్దు.

పరీక్ష మరియు సమీక్ష ప్రాంప్ట్‌లు

26. ఎడ్జ్ కేసులు

ఒక నిజమైన వినియోగదారుడు [బుకింగ్ ఫారమ్‌ను] విరగొట్టగల 10 మార్గాలను జాబితా చేయి: ఖాళీ ఫీల్డ్‌లు, చాలా పొడవైన టెక్స్ట్, డబుల్ క్లిక్‌లు, ఇద్దరు వ్యక్తులు ఒకేసారి, తప్పు టైమ్ జోన్‌లు. ప్రతిదాన్ని పరీక్షించి విఫలమైన వాటిని సరిచేయి. నువ్వు ఏమి మార్చావో నివేదించు.

27. ఇటీవలి మార్పులను సారాంశం చేయండి

గత [ఐదు] దశల్లో నువ్వు చేసిన ప్రతి మార్పును సాధారణ మాటల్లో సారాంశం చేయి, మరియు ఇప్పటికే ఉన్న డేటాను ప్రభావితం చేయగలదాన్ని గుర్తించు.

భద్రతా ప్రాంప్ట్‌లు

వీటిని వైబ్ కోడింగ్ సురక్షితమా పై మా పేజీతో కలిపి ఉపయోగించండి.

28. డేటా యాక్సెస్‌ను తనిఖీ చేయండి

సర్వర్ కోడ్‌ను తనిఖీ చేయి: అభ్యర్థనలో ID మార్చడం ద్వారా లాగిన్ అయిన వినియోగదారు మరొకరి [రికార్డులను] చదవగలరా లేదా మార్చగలరా? యాక్సెస్ ఎక్కడ తనిఖీ అవుతుందో చూపించు మరియు ఏవైనా లోపాలను సరిచేయి.

29. బహిర్గతమైన సీక్రెట్లను తనిఖీ చేయండి

ఈ యాప్ ఉపయోగించే ప్రతి API కీ, పాస్‌వర్డ్ లేదా టోకెన్‌ను మరియు అవి ఎక్కడ నిల్వ చేయబడ్డాయో జాబితా చేయి. అవి బ్రౌజర్‌లో రన్ అయ్యే కోడ్‌లో లేదా ఫైళ్లలో కమిట్ అయిన కోడ్‌లో లేవని నిర్ధారించు. ఉంటే వాటిని సీక్రెట్స్‌కు తరలించు.

ప్రచురణ ప్రాంప్ట్‌లు

30. ప్రారంభానికి ముందు పాస్

నేను దీన్ని నిజమైన వినియోగదారుల కోసం ప్రచురించబోతున్నాను. ఒక సమీక్షకుడిలా దీన్ని పరిశీలించు: విరిగిన లింక్‌లు, తప్పిపోయిన పేజీ టైటిల్‌లు మరియు వివరణలు, ధ్రువీకరణ లేని ఫారమ్‌లు, నెమ్మదైన పేజీలు, కన్సోల్ ఎర్రర్లు, మరియు ఫోన్‌లో అసంపూర్తిగా కనిపించేవి. ప్రాముఖ్యత ప్రకారం క్రమబద్ధీకరించిన జాబితా ఇవ్వు, తర్వాత టాప్ ఐదు సరిచేయి.

నివారించాల్సిన ప్రాంప్ట్‌లు

కొన్ని ప్రాంప్ట్‌లు నమ్మకంగా చెడ్డ ఫలితాలు ఇస్తాయి:

• "ఇంకా మెరుగ్గా చేయి." ఎలా మెరుగ్గా? స్క్రీన్ మరియు మార్పును పేర్కొనండి.
• "అన్నీ సరిచేయి." AI చాలా మార్చేస్తుంది, ఏమి కదిలిందో మీకు తెలియదు.
• "[లైబ్రరీ] మరియు [ఫ్రేమ్‌వర్క్] మరియు [ప్యాటర్న్] ఉపయోగించు." కారణం ఉంటే తప్ప, ప్రవర్తనను వివరించండి మరియు స్టాక్‌ను టూల్ ఎంచుకోనివ్వండి.
• "ఇదిగో నా API కీ: …" చాట్‌లో ఎప్పుడూ రహస్యాలు అతికించవద్దు. టూల్ యొక్క సీక్రెట్స్ సెట్టింగ్స్ ఉపయోగించండి.
• ఒక సందేశంలో పది ఫీచర్లు. వాటిని విడదీయండి.

ప్రాంప్ట్‌లను అలవాటుగా మార్చడం

కొన్ని ప్రాజెక్ట్‌ల తర్వాత, వీటి నుంచి మీ సొంత వెర్షన్లు మీకు ఉంటాయి. వాటిని ఒక నోట్‌లో ఉంచండి, పనిచేసే వాటిని మళ్లీ ఉపయోగించండి. Mythex ప్రాజెక్ట్‌ల అంతటా మీరు ఎవరో మరియు మీరు ఎలా పనిచేస్తారో కూడా గుర్తుంచుకుంటుంది, కాబట్టి మీరు పదే పదే చెప్పే ప్రాధాన్యతలు, ఉదాహరణకు మీ సాధారణ శైలి లేదా స్టాక్, మళ్లీ టైప్ చేయకుండా కొనసాగుతాయి.

మొదటి ప్రాంప్ట్ కోసం ఇరుక్కుంటే, ఉచిత యాప్ ప్రాంప్ట్ జనరేటర్ ఒక-లైన్ ఆలోచనను పూర్తి ప్రారంభ ప్రాంప్ట్‌గా మారుస్తుంది. ఈ ప్రాంప్ట్‌లు ఆచరణలో ఏమి ఉత్పత్తి చేస్తాయో చూడటానికి, మా వైబ్ కోడింగ్ ఉదాహరణలు చదవండి, లేదా ప్రాంప్ట్ 1ని AI యాప్ బిల్డర్లో అతికించి బ్రాకెట్లను మీ స్వంత ఆలోచనతో మార్చండి.

ప్రశ్నలు