𝗩𝟭.𝟬 ਤੋਂ 𝗩𝟮.𝟬 ਤੱਕ: 𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗣𝗶𝗽𝗲𝗹𝗶𝗻𝗲 ਬਾਰੇ ਮੁੜ ਵਿਚਾਰ
ਮੈਂ ਹਾਲ ਹੀ ਵਿੱਚ ਆਪਣੇ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ, vibe-coding-universal ਵਿੱਚ ਇੱਕ ਛੋਟੀ ਜਿਹੀ ਟਾਈਪੋ (typo) ਨੂੰ ਠੀਕ ਕੀਤਾ ਹੈ। ਮੈਂ ਇੱਕ ਲੇਬਲ ਨੂੰ v2.0 (ਪੁਰਾਣਾ) ਤੋਂ v1.0 (ਪੁਰਾਣਾ) ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ।
ਇਸ ਛੋਟੇ ਜਿਹੇ ਬਦਲਾਅ ਨੇ ਇੱਕ ਵੱਡੀ ਸਮੱਸਿਆ ਨੂੰ ਸਾਹਮਣੇ ਲਿਆਂਦਾ। ਮੈਨੂੰ ਖੁਦ ਵੀ ਆਪਣੇ ਵਰਜ਼ਨ ਦਾ ਨਾਮ ਨਹੀਂ ਪਤਾ ਸੀ। ਜੇਕਰ ਮੈਂ ਉਲਝਣ ਵਿੱਚ ਹਾਂ, ਤਾਂ ਤੁਹਾਡੇ ਯੂਜ਼ਰਜ਼ ਵੀ ਉਲਝ ਜਾਣਗੇ।
ਮੇਰਾ ਪਹਿਲਾ ਵਰਜ਼ਨ ਸਾਧਾਰਨ ਸੀ। ਇਸਨੇ AI ਨੂੰ ਲੋੜਾਂ (requirements) ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ 7 ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਇਸਨੇ Claude Code ਜਾਂ Cursor ਵਰਗੇ ਟੂਲਜ਼ ਲਈ ਇੱਕ ਗਾਈਡ ਫਾਈਲ ਤਿਆਰ ਕੀਤੀ। ਇਹ ਕੰਮ ਕਰ ਰਿਹਾ ਸੀ, ਪਰ ਇਸ ਵਿੱਚ ਕੁਝ ਕਮੀਆਂ ਸਨ:
- AI ਨੂੰ ਰੰਗਾਂ, ਫੋਂਟਾਂ ਅਤੇ ਸਪੇਸਿੰਗ ਦਾ ਅੰਦਾਜ਼ਾ ਲਗਾਉਣਾ ਪੈਂਦਾ ਸੀ।
- ਡਿਜ਼ਾਈਨ ਅਤੇ ਟਾਸਕ ਇੱਕੋ ਫਾਈਲ ਵਿੱਚ ਸਨ।
- AI ਅਸਲ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਦੀ ਬਜਾਏ ਆਪਣੀ ਯਾਦਦਾਸ਼ਤ 'ਤੇ ਨਿਰਭਰ ਸੀ।
Version 2.0 ਸਿਰਫ਼ ਇੱਕ ਅਪਡੇਟ ਨਹੀਂ ਹੈ। ਇਹ ਕੰਮ ਕਰਨ ਦਾ ਇੱਕ ਨਵਾਂ ਤਰੀਕਾ ਹੈ।
V1.0 ਬਨਾਮ V2.0:
V1.0:
- ਲੋੜਾਂ (requirements) ਦੇ ਸਵਾਲਾਂ ਦੇ 7 ਰਾਊਂਡ।
- ਕੋਈ ਡਿਜ਼ਾਈਨ ਨਿਯਮ ਨਹੀਂ।
- ਇੱਕ ਸਿੰਗਲ ਗਾਈਡ ਫਾਈਲ।
- ਕੋਈ ਬਾਹਰੀ ਰੈਫਰੈਂਸ ਨਹੀਂ।
V2.0:
- 7 ਰਾਊਂਡ ਲੋੜਾਂ + 7 ਰਾਊਂਡ ਡਿਜ਼ਾਈਨ ਪਸੰਦਾਂ।
- ਰੰਗਾਂ, ਫੋਂਟਾਂ ਅਤੇ ਲੇਆਉਟ ਨਿਯਮਾਂ ਦੇ ਨਾਲ ਪੂਰੀ DESIGN_SPEC.md।
- ਇੱਕ ਮੁਕੰਮਲ Build Spec ਪੈਕੇਜ (PRD, Design, Architecture, Tasks)।
- Stripe, Linear, ਅਤੇ Apple ਵਰਗੇ 71 ਬ੍ਰਾਂਡ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮਾਂ ਤੱਕ ਪਹੁੰਚ।
- AI ਦੀ ਵਰਤੋਂ ਲਈ ਸਹੀ CSS tokens।
ਜ਼ਿਆਦਾਤਰ ਲੋਕ ਮਾੜੇ AI prompts ਲਿਖਦੇ ਹਨ। ਉਹ ਪੁੱਛਦੇ ਹਨ, "ਤੁਹਾਨੂੰ ਕਿਹੜਾ ਡਿਜ਼ਾਈਨ ਸਟਾਈਲ ਪਸੰਦ ਹੈ?" ਇਹ ਬਹੁਤ ਜ਼ਿਆਦਾ ਅਸਪਸ਼ਟ ਹੈ।
V2.0 ਇਸਦੀ ਬਜਾਏ ਮਲਟੀਪਲ ਚੁਆਇਸ (multiple choice) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਹਰ ਰਾਊਂਡ ਵਿੱਚ 4 ਤੋਂ 6 ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ ਇੱਕ ਸਵਾਲ ਪੁੱਛਿਆ ਜਾਂਦਾ ਹੈ।
- ਰਾਊਂਡ 1: ਪ੍ਰੋਜੈਕਟ ਦੀ ਕਿਸਮ (SaaS, Dashboard, AI tool, ਆਦਿ)।
- ਰਾਊਂਡ 2: ਵਿਜ਼ੂਅਲ ਰੈਫਰੈਂਸ (Stripe, Apple, Vercel, ਆਦਿ)।
- ਰਾਊਂਡ 3: ਰੰਗ ਦਾ ਮੂਡ (Cool, Warm, Neutral)।
7 ਰਾਊਂਡਾਂ ਤੋਂ ਬਾਅਦ, ਸਿਸਟਮ 71 ਬ੍ਰਾਂਡ ਸਿਸਟਮਾਂ ਤੋਂ ਡਿਜ਼ਾਈਨ ਟੋਕਨਾਂ (design tokens) ਨੂੰ ਕੱਢਦਾ ਹੈ। ਇਹ ਇੱਕ CSS variable ਲਿਸਟ ਆਊਟਪੁੱਟ ਕਰਦਾ ਹੈ। ਇਹ AI ਨੂੰ ਸਹੀ ਹਦਾਇਤਾਂ ਦਿੰਦਾ ਹੈ।
ਵਰਜ਼ਨ ਦੀ ਗਲਤੀ ਇਸ ਲਈ ਹੋਈ ਕਿਉਂਕਿ V1.0 ਅਤੇ V2.0 ਵਿਚਕਾਰ ਦਾ ਅੰਤਰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸੀ। ਮੈਂ ਦੋਵਾਂ ਨੂੰ "ਕਰੰਟ" (current) ਵਰਜ਼ਨ ਵਜੋਂ ਦੇਖ ਰਿਹਾ ਸੀ।
ਜੇਕਰ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕੋਈ ਵੱਡਾ ਬਦਲਾਅ ਆਉਂਦਾ ਹੈ, ਤਾਂ ਸਪਸ਼ਟ ਵਰਜ਼ਨ ਲੇਬਲ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਯੂਜ਼ਰਜ਼ ਤੁਹਾਡੇ ਢਾਂਚੇ (structure) ਨੂੰ ਸਮਝਣ ਲਈ 5 ਮਿੰਟ ਨਹੀਂ ਲਗਾਉਣਗੇ। ਉਹ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ 10 ਸੈਕਿੰਡ ਦਿੰਦੇ ਹਨ।
ਆਪਣੇ ਅਗਲੇ ਅਪਡੇਟ ਤੋਂ ਪਹਿਲਾਂ, ਆਪਣੇ ਆਪ ਨੂੰ ਪੁੱਛੋ:
ਕੀ ਇੱਕ ਨਵਾਂ ਯੂਜ਼ਰ 3 ਸੈਕਿੰਡ ਵਿੱਚ ਇਸ ਤੁਲਨਾ ਨੂੰ ਸਮਝ ਸਕਦਾ ਹੈ?
ਜੇਕਰ ਜਵਾਬ 'ਨਹੀਂ' ਹੈ, ਤਾਂ ਆਪਣਾ ਕੋਡ ਠੀਕ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਆਪਣਾ ਟੈਕਸਟ ਠੀਕ ਕਰੋ।
Optional learning community: https://t.me/GyaanSetuAi