𝗙𝗿𝗼𝗺 𝗣𝗿𝗼𝗺𝗽𝘁𝘀 𝘁𝗼 𝗔𝗜 𝗔𝗴𝗲𝗻𝘁𝘀: 𝗔 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿'𝘀 𝗚𝘂𝗶𝗱𝗲
ਫਰੰਟਐਂਡ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਸਿਰਫ਼ ਸਧਾਰਨ ਪ੍ਰੋਂਪਟਸ ਤੱਕ ਹੀ ਸੀਮਤ ਨਹੀਂ ਰਹਿਣਾ ਚਾਹੀਦਾ।
ਜੇਕਰ ਤੁਸੀਂ ਸਮਾਰਟ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ AI ਦੇ ਪੱਧਰਾਂ (hierarchy) ਨੂੰ ਸਮਝਣ ਦੀ ਲੋੜ ਹੈ।
- ਪ੍ਰੋਂਪਟਸ (Prompts): ਇੱਕ ਆਉਟਪੁੱਟ ਵਾਲੀ ਇੱਕ ਸਿੰਗਲ ਹਦਾਇਤ।
- ਚੈਟਬੋਟਸ (Chatbots): ਮੈਮੋਰੀ ਵਾਲੇ ਮਾਡਲ ਜੋ ਗੱਲਬਾਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ।
- AI ਏਜੰਟਸ (AI Agents): ਅਜਿਹੇ ਸਿਸਟਮ ਜੋ ਟੂਲਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ, ਕਈ ਪੜਾਵਾਂ ਵਾਲੀਆਂ ਯੋਜਨਾਵਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ, ਅਤੇ ਤੁਹਾਡੇ ਵੱਲੋਂ ਕੰਮ ਕਰਦੇ ਹਨ।
ਇੱਕ ਏਜੰਟ ਸਿਰਫ਼ ਗੱਲਬਾਤ ਹੀ ਨਹੀਂ ਕਰਦਾ। ਇਹ ਡੇਟਾ ਫੈਚ (fetch) ਕਰ ਸਕਦਾ ਹੈ, APIs ਨੂੰ ਕਾਲ ਕਰ ਸਕਦਾ ਹੈ, ਅਤੇ ਕਿਸੇ ਟੀਚੇ ਤੱਕ ਪਹੁੰਚਣ ਲਈ ਫੈਸਲੇ ਲੈ ਸਕਦਾ ਹੈ।
ਤੁਹਾਡੇ ਕੰਮ ਲਈ ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ:
- ਇਹ ਡਾਇਨਾਮਿਕ ਅਤੇ ਸੰਦਰਭ-ਜਾਣੂ (context-aware) UIs ਬਣਾਉਂਦਾ ਹੈ।
- ਇਹ ਯੂਜ਼ਰ ਸਪੋਰਟ ਜਾਂ ਡੈਸ਼ਬੋਰਡ ਸੈੱਟਅੱਪ ਵਰਗੇ ਵਾਰ-ਵਾਰ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਕੰਮਾਂ ਨੂੰ ਆਟੋਮੇਟ ਕਰਦਾ ਹੈ।
- ਇਹ ਡਿਜ਼ਾਈਨ ਟੂਲਸ ਅਤੇ ਕੰਮ ਕਰਦੇ ਕੋਡ ਵਿਚਕਾਰਲੇ ਪਾੜੇ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ।
ਬਿਹਤਰ ਪ੍ਰੋਂਪਟਸ ਕਿਵੇਂ ਲਿਖਣੇ ਹਨ: ਅਸਪਸ਼ਟ ਹਦਾਇਤਾਂ ਲਿਖਣਾ ਬੰਦ ਕਰੋ। ਪ੍ਰੋਂਪਟਸ ਨੂੰ ਤਕਨੀਕੀ ਸਪੈਸੀਫਿਕੇਸ਼ਨਾਂ (technical specifications) ਵਾਂਗ ਸਮਝੋ।
ਮਾੜਾ ਪ੍ਰੋਂਪਟ: Write a function to format a date.
ਚੰਗਾ ਪ੍ਰੋਂਪਟ: Write a TypeScript function that takes a JS Date and returns a string like "3 hours ago". Handle future dates by returning "just now". Use no external libraries.
ਫਰੰਟਐਂਡ ਟਾਸਕਾਂ ਲਈ ਇਸ ਚੈੱਕਲਿਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ:
- ਭੂਮਿਕਾ ਦੱਸੋ: "Reply with code only."
- ਉਦਾਹਰਣ ਦਿਓ: ਮਾਡਲ ਨੂੰ ਉਹ ਸਹੀ ਆਉਟਪੁੱਟ ਸ਼ੇਪ ਦਿਖਾਓ ਜਿਸਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ।
- ਸਟੈਕ (stack) ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ: "Use React and Tailwind. No CSS-in-JS."
- ਐਜ ਕੇਸ (edge cases) ਦੀ ਸੂਚੀ ਬਣਾਓ: "Handle null values and empty arrays."
- ਇਕਸਾਰਤਾ ਦੀ ਮੰਗ ਕਰੋ: "Use only documented APIs."
ਏਜੰਟ ਵਰਕਫਲੋ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ:
- ਇੱਕ ਮਾਡਲ ਚੁਣੋ: ਸੁਰੱਖਿਅਤ ਸਰਵਰ-ਸਾਈਡ ਫੰਕਸ਼ਨਾਂ ਰਾਹੀਂ OpenAI ਜਾਂ ਇਸ ਵਰਗੇ ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਟੂਲਸ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ: ਏਜੰਟ ਨੂੰ ਦੱਸੋ ਕਿ ਉਹ ਕਿਹੜੇ APIs ਜਾਂ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ।
- ਵਰਕਫਲੋ ਸੈੱਟ ਕਰੋ: ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਏਜੰਟ ਸੰਦਰਭ (context) ਨੂੰ ਟ੍ਰੈਕ ਕਰ ਸਕਦਾ ਹੈ ਅਤੇ ਕਦਮਾਂ ਦੀ ਯੋਜਨਾ ਬਣਾ ਸਕਦਾ ਹੈ।
- ਆਪਣੇ UI ਨਾਲ ਜੋੜੋ: ਆਪਣੇ ਫਰੰਟਐਂਡ ਤੋਂ ਏਜੰਟ ਨੂੰ ਕਾਲ ਕਰਨ ਲਈ ਇੱਕ API ਰੂਟ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਆਮ ਚੁਣੌਤੀਆਂ:
- ਲੇਟੈਂਸੀ (Latency): ਲੋਡਿੰਗ ਸਟੇਟਸ ਜਾਂ ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ UI ਰਿਸਪੌਂਸਿਵ ਰਹੇ।
- ਹੈਲੂਸੀਨੇਸ਼ਨ (Hallucinations): ਹਮੇਸ਼ਾ AI ਕੰਟੈਂਟ ਨੂੰ ਲੇਬਲ ਕਰੋ ਅਤੇ ਵੱਡੇ ਫੈਸਲਿਆਂ ਲਈ ਮਨੁੱਖੀ ਨਿਗਰਾਨੀ ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਕੰਟੈਕਸਟ ਲਿਮਿਟਸ (Context limits): ਮਾਡਲ ਨੂੰ ਫੋਕਸ ਰੱਖਣ ਲਈ ਪੁਰਾਣੇ ਸੁਨੇਹਿਆਂ ਦਾ ਸਾਰ (summarize) ਬਣਾਓ।
ਇੱਕ ਫਰੰਟਐਂਡ ਡਿਵੈਲਪਰ ਦੀ ਭੂਮਿਕਾ ਬਦਲ ਰਹੀ ਹੈ। ਤੁਸੀਂ ਟੈਂਪਲੇਟ ਲਿਖਣ ਵਿੱਚ ਘੱਟ ਸਮਾਂ ਬਿਤਾਓਗੇ ਅਤੇ ਏਜੰਟਾਂ ਦੁਆਰਾ ਲਾਗੂ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਟੀਚਿਆਂ ਅਤੇ ਸੀਮਾਵਾਂ (constraints) ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਵਿੱਚ ਜ਼ਿਆਦਾ ਸਮਾਂ ਬਿਤਾਓਗੇ।
ਛੋਟੇ ਪੱਧਰ ਤੋਂ ਸ਼ੁਰੂ ਕਰੋ। ਇੱਕ ਵਾਰ-ਵਾਰ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਕੰਮ ਜਾਂ ਇੱਕ ਕੰਪੋਨੈਂਟ ਨੂੰ ਆਟੋਮੇਟ ਕਰੋ। ਅੱਜ ਹੀ ਲੌਜਿਕ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੋ।
Source: https://dev.to/davekurian/from-prompts-to-ai-agents-a-frontend-developers-guide-to-mastery-2mlh