بنائی ہوئی، محض بنوائی ہوئی نہیں: ویب سائٹ ڈیزائن کا فوری کورس

15 تصورات، آپ کی پہلی حقیقی تعمیر

دائیں جانب والی سائٹ ایک اندرونی ڈیزائنر کی ہے۔ یہاں صرف فرق دکھانے کے لیے ہے۔ اس کورس میں آگے جس کلائنٹ کے لیے ہم ویب سائٹ بنائیں گے وہ الگ شخصیت ہیں: لاہور کی محاسبہ کار عائشہ رحمان۔

کسی اے آئی سے اپنے لیے ویب سائٹ بنوائیں۔ وہ بن جائے گی۔ لوڈ ہوگی۔ اسکرول ہوگی۔ اور اے آئی کی ہر دوسری ویب سائٹ جیسی دکھائی دے گی۔

آپ یہ ویب سائٹ کئی بار دیکھ چکے ہیں۔ اوپر بڑی تصویر۔ درمیان میں بڑا جملہ۔ قطار میں تین چھوٹے خانے۔ رنگین بٹن۔ اور "اپنے ورک فلو میں انقلاب لائیں" جیسی سرخی۔

اے آئی کی بیشتر ویب سائٹس ایسی ہی لگتی ہیں۔ وہ خراب نہیں ہوتیں۔ وہ اس سے بھی بدتر ہوتی ہیں: سب ایک جیسی۔

اس فرق کے دو لفظ ہیں اور یہی اس کورس کا نام ہے۔ کچھ ویب سائٹس سوچ سمجھ کر بنائی جاتی ہیں۔ بیشتر صرف خودکار طور پر بنوائی جاتی ہیں۔ دوسری قسم وہ ہے جو کمپیوٹر کسی رہنمائی کے بغیر دیتا ہے۔ پہلی قسم میں کسی نے حقیقی انتخاب کیے ہوتے ہیں۔

یہ کورس آپ کو سوچ سمجھ کر ویب سائٹس بنانا سکھاتا ہے۔

آپ کو ڈیزائنر ہونے یا ہاتھ سے کوڈ لکھنے کی ضرورت نہیں۔ آپ کو ایجنٹک کوڈنگ فوری کورس کے ٹولز اور اس صفحے کے خیالات درکار ہیں۔ اختتام تک آپ ایک حقیقی ویب سائٹ بنا چکے ہوں گے: کہانی، اصل تصاویر، فون پر چلنے والا نسخہ اور ایسا ویب پتہ جسے دنیا میں کوئی بھی کھول سکے۔

ایک خیال باقی کورس سمجھنا آسان بنا دیتا ہے۔ اچھا ڈیزائن کبھی مہنگے ٹولز یا باصلاحیت لوگوں کے اندر رہتا تھا۔ اب ایسا نہیں۔ سوچ سمجھ کر بنائی اور محض خودکار طور پر بنوائی گئی چیز کے درمیان فرق کرنے والے قواعد ایک فائل میں لکھے جا سکتے ہیں۔ کوئی بھی اے آئی وہ فائل پڑھ کر قواعد پر عمل کر سکتی ہے۔

اس لیے پورا کورس ایک جملے میں:

ذوق اب ایک فائل ہے۔

ذوق کا مطلب جاننا ہے کہ کیا اچھا لگتا ہے۔ فائل آپ کے کمپیوٹر پر ایک دستاویز ہے۔ دونوں کو جوڑیں تو پورا خیال سامنے آتا ہے: اچھا دکھنے کی سمجھ دستاویز میں محفوظ کی جا سکتی ہے اور اے آئی تعمیر سے پہلے اسے پڑھتی ہے۔

پہلے یہ پڑھیں

پہلے Claude Code اور OpenCode: ایک فوری کورس پڑھیں۔ اس نے آپ کو ٹولز سکھائے تھے۔ موجودہ کورس انہی سے حقیقی چیز بناتا ہے۔ اگر مہارت، منصوبہ بندی موڈ یا قواعد کی فائل جیسی اصطلاحات نئی ہیں تو پہلے وہ کورس پڑھیں۔ اس کے بعد یہ بہت آسان ہوگا۔

کتاب کی ایک ساخت ہے اور اس میں اس کورس کی جگہ جاننا مفید ہے۔ پچھلے کورسز نے ٹولز سکھائے۔ اگلے کورسز وہ انجینئرنگ شعبے سکھاتے ہیں جو بڑے پیمانے پر کام کو قابل اعتماد بناتے ہیں۔ یہ درمیان کا کورس ہے جہاں آپ مشین کے بارے میں سیکھنا روک کر اسے حقیقی کام کی طرف موڑتے ہیں۔

یہ ترتیب جان بوجھ کر ہے۔ ویب سائٹ جاری کرنے اور کام کی حقیقی خرابی محسوس کرنے کے بعد تفصیلات، لوپس اور جانچ کار کہیں زیادہ سمجھ آتے ہیں۔

اس صفحے پر ملنے والے الفاظ

اس کورس کے لیے تکنیکی پس منظر ضروری نہیں۔ چند الفاظ بار بار آئیں گے، اس لیے ان کا سادہ مطلب یہاں ہے۔ ضرورت پر اس خانے میں واپس آئیں۔

لفظ	یہاں مطلب
ماڈل	خود اے آئی، جو الفاظ اور کوڈ لکھتی ہے۔ Claude اور Kimi K3 ماڈلز ہیں۔
ٹول (جسے ہارنیس بھی کہتے ہیں)	وہ پروگرام جو اے آئی کو آپ کے کمپیوٹر پر فائلیں کھولنے، بدلنے اور کمانڈز چلانے دیتا ہے۔ اس کورس کے دو ٹولز Claude Code اور OpenCode ہیں۔
مہارت	ہدایات کی فائل جسے ایک بار محفوظ کرتے ہیں۔ اے آئی اسے پڑھ کر عمل کرتی ہے، جیسے ترکیب کا کارڈ یا ملازم کی رہنما کتاب۔
پرامپٹ	وہ بات جو آپ اے آئی کو ٹائپ کرتے ہیں۔
سیاق	وہ سب کچھ جو اے آئی ابھی دیکھ سکتی ہے: آپ کے پیغامات اور کھولی ہوئی فائلیں۔ اس کی حد ہے، جیسے محدود جگہ والی میز۔
اے آئی کا گھسا پٹا ڈیزائن	ایسا ڈیزائن جو سوچ سمجھ کر بنایا ہوا نہیں بلکہ خودکار لگے، یعنی وہ سادہ اوسط شکل جس میں ہر اے آئی جا گرتی ہے۔
کوڈ	وہ ہدایات جن میں ویب سائٹ لکھی جاتی ہے۔ آپ انہیں ٹائپ نہیں کریں گے۔ اے آئی لکھے گی اور آپ نتیجہ جانچیں گے۔
ڈیپلائے	ویب سائٹ کو انٹرنیٹ پر رکھنا تاکہ دوسرے لوگ اسے کھول سکیں۔
نظام CLI	ایسا پروگرام جسے بٹن دبانے کے بجائے کمانڈ ٹائپ کر کے چلاتے ہیں۔
رابطہ API	ایک پروگرام کا دوسرے پروگرام سے خودکار بات کرنے کا طریقہ۔
جانچ (یا ہک)	چھوٹا پروگرام جو کام کے بارے میں ہاں یا نہیں بتاتا اور جواب نہ ہو تو روک دیتا ہے۔
ڈومین	کسی کی ملکیت والا ویب پتہ، جیسے ayesharehman.pk۔
نظام DNS	ویب پتے کو اس جگہ سے جوڑنے والا نظام جہاں ویب سائٹ حقیقت میں موجود ہے۔
اشتراکی کارڈ (تصویر OG)	WhatsApp یا سماجی ایپ میں ربط چسپاں کرنے پر ظاہر ہونے والی تصویر اور عنوان۔
:::

ڈیزائن سے پہلے تین باتوں پر یقین رکھیں

تین خیالات اس صفحے کی ہر دوسری بات کو سنبھالتے ہیں۔ انہیں سیکھیں تو باقی سب سمجھ آئے گا۔

خیال 1۔ ہر اے آئی کی ایک پسندیدہ شکل ہوتی ہے۔

اے آئی نے لاکھوں ویب سائٹس سے سیکھا۔ جب آپ کہتے ہیں "اسے اچھا دکھائیں" تو وہ دیکھا ہوا سب سے عام جواب دیتی ہے: عام ترین رنگ، خاکہ اور فونٹ۔

یہ اے آئی کی سستی نہیں بلکہ اوسط ہونا ہے، کیونکہ اس نے اوسط ہی سیکھی۔ برادری اس نتیجے کو «اے آئی کا گھسا پٹا ڈیزائن» کہتی ہے۔

اس کے حقیقی ہونے کا ثبوت موجود ہے۔ کمپنی Anthropic نے Claude Code کے لیے سرکاری frontend-design plugin جاری کیا ہے۔ وہ فائل تین شکلیں گنواتی ہے جن میں Claude کو نہ روکا جائے تو وہ جا گرتا ہے، اور انہیں استعمال نہ کرنے کو کہتی ہے۔ اے آئی بنانے والی کمپنی نے اپنی ہی اے آئی کی عادات سے بحث کے لیے فائل لکھی۔ اگر انہیں ایسا کرنا پڑا تو عادات حقیقی ہیں۔

(یہ پلگ اِن ہے، اس لیے اسے Claude Code کے پلگ اِن نظام سے ایک بار انسٹال کرتے ہیں۔ پھر Claude ڈیزائن کے کام میں اسے خود استعمال کرتا ہے۔)

خیال 2۔ ڈیزائن کو دیکھ کر جانچتے ہیں۔

ایجنٹک کوڈنگ فوری کورس نے کتاب کا اہم ترین اصول سکھایا: اے آئی پر اتنا ہی بھروسا کریں جتنا اس کا کام جانچ سکتے ہیں۔

کوڈ جانچنا آسان ہے کیونکہ آزمائش چل کر کامیاب یا ناکام ہوتی ہے۔ ڈیزائن مشکل محسوس ہوتا ہے۔ "کیا یہ اچھا لگتا ہے؟" ایسا سوال نہیں جس کا کمپیوٹر جواب دے سکے۔

اس لیے یہ کورس دیکھنے کو جانچ میں بدلتا ہے۔ ہم صفحے کی تصویر لے کر اے آئی کو دکھاتے، معلوم بری عادات کی فہرست آزماتے اور دوسری اے آئی سے جائزہ لیتے ہیں۔ جب "کیا یہ درست لگتا ہے؟" واقعی قابل آزمائش بن جائے تو اے آئی کوڈ کی طرح اپنا ڈیزائن بھی درست کر سکتی ہے۔

خیال 3۔ ذوق فائل کی صورت میں ایک اے آئی سے دوسری تک جاتا ہے۔

اے آئی ویب صفحہ بنانا جانتی ہے۔ وہ آپ کا فیصلہ نہیں جانتی: کون سے خاکے بور ہیں، کون سے فونٹس ساتھ چلتے ہیں اور صفحہ کب مکمل ہے۔

یہ فیصلہ فائل میں رکھیں تو کوئی بھی اے آئی پڑھ سکتی ہے۔ وہی فائل آج Claude اور Kimi K3 کے ساتھ، اور اگلے سال آنے والی اے آئی کے ساتھ چلے گی۔ اے آئی بدلتی ہے، آپ کی فائل رہتی ہے۔

اسی لیے ٹولز کے نام بدلنے کے بہت بعد بھی یہ کورس مفید رہے گا۔

آپ کے استعمال کے تین ٹولز

ان میں سے دو آپ جانتے ہیں۔ تیسرا نیا ہے:

	Claude Code	OpenCode	Kimi K3
یہ کیا ہے	کمپنی Anthropic کا ٹول جو اے آئی کو کمپیوٹر پر کام دیتا ہے	اسی قسم کا اوپن سورس ٹول جو کسی بھی اے آئی کے ساتھ چلتا ہے	کمپنی Moonshot AI کا اے آئی ماڈل
یہاں کام	کام چلاتا ہے	زیادہ ماڈل انتخاب کے ساتھ کام چلاتا ہے	ڈیزائن میں خاص طور پر اچھی اے آئی
استعمال کی وجہ	نظام Claude کے ساتھ بہترین چلتا ہے	دوسرے اے آئی ماڈلز کے استعمال کا سستا راستہ	فی الحال ویب صفحات کے ڈیزائن میں بہترین اور کم خرچ

یوں سمجھیں: ٹولز Claude Code اور OpenCode ورکشاپ ہیں۔ ماڈل Kimi K3 ایسا کارکن ہے جسے کسی بھی ورکشاپ میں لا سکتے ہیں۔ ورکشاپ وہی رہتی ہے، کارکن بدل سکتا ہے۔

ڈیزائن کے لیے Kimi K3 کیوں؟ لوگوں نے حقیقی ڈویلپرز کو کئی اے آئی ماڈلز کے ویب صفحات دکھائے، مگر بنانے والی اے آئی نہیں بتائی۔ ڈویلپرز نے اکثر Kimi K3 کے صفحات منتخب کیے۔ دو وجوہ:

• یہ دیکھ سکتی ہے۔ صفحہ بنانے کے بعد اس کی تصویر دیکھ کر غلط دکھنے والی چیز درست کرتی ہے۔ بیشتر ماڈلز اپنا کام نہیں دیکھتے، صرف کوڈ سے اندازہ لگاتے ہیں۔ دیکھنا بڑا فائدہ ہے۔
• یہ کم خرچ ہے۔ بہترین امریکی ماڈلز کی قیمت کا ایک حصہ لیتی ہے، اس لیے بل کی فکر کے بغیر ڈیزائن کے دس نسخے آزما سکتے ہیں۔

پسند کرنے سے پہلے ایک تنبیہ۔ "بہترین" اے آئی ہر چند مہینے بدلتی ہے۔ کوئی دوسرا ماڈل جلد Kimi K3 سے آگے نکلے گا۔ نام یاد نہ کریں بلکہ عادت یاد رکھیں: دیکھیں اس وقت ڈیزائن میں کون سی اے آئی بہترین ہے اور وہی ڈیزائن کے لیے استعمال کریں۔ آج وہ Kimi K3 ہے، اس لیے کورس یہی استعمال کرتا ہے۔

note

یہ معلومات جولائی 2026 تک تازہ ہیں۔ ماڈلز، قیمتیں اور مقابلے کی درجہ بندیاں بار بار بدلتی ہیں۔ بجٹ بنانے سے پہلے LMArena اور فراہم کنندگان کے تازہ قیمت صفحات دیکھیں۔

اس صفحے کی ہر کمانڈ اشاعت سے پہلے چلائی گئی

یہاں بیان شدہ انسٹال کمانڈز، نظام CLI کے اختیارات، فائل راستے اور فولڈر ساختیں صاف مشین پر چلائی گئیں، دستاویزات سے نقل نہیں ہوئیں۔ جہاں زندہ ٹولز اپنے تشہیری صفحات سے مختلف تھے وہاں کورس ٹولز کی پیروی کرتا ہے۔ دو چیزیں پھر بھی بدلتی ہیں: نسخہ نمبر اور قیمتیں۔ کمانڈ یہاں سے مختلف چلے تو ٹرمینل پر بھروسا کر کے ٹول کی موجودہ دستاویزات دیکھیں۔

اپنا ٹول چنیں، صفحہ پیروی کرے گا

ایجنٹک کوڈنگ فوری کورس کی طرح Claude Code اور OpenCode کے مختلف حصوں پر سوئچر ہے۔ ایک منتخب کریں تو صفحے کے تمام سوئچرز اسی کی پیروی کریں گے۔

یہ کورس کیا احاطہ کرتا ہے

حصہ	موضوع	آپ کیا سیکھیں گے
حصہ 1	بنیادیں	اے آئی ویب سائٹس ایک جیسی کیوں، چار حصوں کا ڈھیر، ڈیزائن ماڈل کا انتخاب اور رابطہ
حصہ 2	ذوق بطور مہارت	مہارت Hallmark، پسندیدہ سائٹس سے سیکھنا، کلائنٹ کا برانڈ درست رکھنا
حصہ 3	تعمیر	ایک کہانی ایک اسکرول، میڈیا پائپ لائن، پہلے موبائل، کئی صفحات اور راستہ بندی
حصہ 4	ڈیزائن کی تصدیق	ڈیزائن اچھا ہونے کی جانچ اور دوسری رائے
حصہ 5	اجرا	سائٹ آن لائن کرنا، کلائنٹس کے ساتھ کام، لاگت کم رکھنا
حصہ 6	مکمل عملی مثال	دونوں ٹولز میں عائشہ کی عملی ویب سائٹ، آغاز سے زندہ ربط تک

عمل سے سیکھتے ہیں؟ پہلے حصہ 6 پر جائیں، پھر واپس آئیں۔

---

📚 تدریسی معاون

مکمل سلائیڈ شو کھولیں

مکمل پریزنٹیشن دیکھیں، ویب سائٹ ڈیزائن کا فوری کورس

---

حصہ 1: بنیادیں

1۔ اے آئی ویب سائٹس ایک جیسی کیوں دکھتی ہیں

کسی اے آئی میں "میرے لیے لینڈنگ صفحہ بنائیں" لکھیں اور نتیجہ دیکھیں۔ اوپر بڑی تصویر۔ درمیان میں بڑی سرخی، اکثر ایک لفظ شوخ رنگ میں۔ قطار میں تین خانے، ہر ایک پر چھوٹا نشان۔ خوش گاہک کا قول۔ نیچے فوٹر۔ کہیں جامنی یا نیلا سبز رنگ۔

یہ بدصورت نہیں۔ یہی الجھن ہے۔ یہ اے آئی کے دیکھے ہوئے ہر ویب صفحے کا محض اوسط ہے، اور اوسط کی کوئی شخصیت نہیں ہوتی۔

ایسا کیوں ہوتا ہے؟ اے آئی انتخاب نہیں کرتی، پیش گوئی کرتی ہے۔ "میرے لیے اچھی ویب سائٹ بنائیں" جیسے کھلے سوال پر وہ سب سے ممکن جواب دیتی ہے، یعنی سیکھی ہوئی ہر چیز میں سب سے عام چیز۔ ہر شخص کے لیے ہر بار یہی ہوتا ہے۔ اسی لیے اتنی ویب سائٹس ایک جیسی ہیں۔ لاکھوں لوگوں کو وہی اوسط دیا جا رہا ہے۔

کوڈنگ فوری کورس میں یہی رویہ دیکھا تھا۔ اے آئی سے پانچ بار "یہ نقل صاف کریں" کہیں تو پانچ قدرے مختلف طریقے ملتے ہیں، اس لیے طریقہ مستقل کرنے کو مہارت کی فائل محفوظ کرتے ہیں۔ ڈیزائن بھی بالکل ایسا ہے۔ فرق صرف یہ ہے کہ ڈیزائن کا مسئلہ ہر کوئی دیکھ سکتا ہے۔

ثبوت یہ ہے کہ اے آئی کمپنیاں خود مانتی ہیں۔ کمپنی Anthropic نے Claude Code کا سرکاری ڈیزائن پلگ اِن جاری کیا ہے۔ فائل تین شکلیں گنواتی ہے جن میں بے روک اے آئی ڈیزائن جا گرتا ہے۔ یہ کریم کے درست رنگ (#F4F1EA) تک بتاتی ہے:

1. نرم کریم پس منظر، بڑی سجیلی سیرف سرخی اور نارنجی بھورا بٹن۔
2. تقریبا سیاہ پس منظر، ایک تیزابی سبز یا سرخ نمایاں رنگ۔
3. اخبار جیسی شکل: باریک لکیریں، چوکور کونے اور متن کے گھنے کالم۔

مہارت انہیں "انتخاب کے بجائے طے شدہ شکلیں" کہتی ہے اور ماڈل کو تب تک استعمال نہ کرنے کو کہتی ہے جب تک خلاصہ یہی شکل نہ مانگے۔

اسے دوبارہ پڑھیں۔ اے آئی بنانے والی کمپنی نے اپنی ہی اے آئی سے بحث کے لیے فائل لکھی۔ یہی فائل پورے کورس کا نقطۂ آغاز ہے۔

اس کے درست الفاظ بھی دیکھیں۔ وہ نہیں کہتی کہ Claude تین شکلوں میں گرتا ہے۔ وہ کہتی ہے کہ اس وقت اے آئی سے بنوایا گیا ڈیزائن تین شکلوں میں گرتا ہے۔ یہ عادات ایک کمپنی کی انوکھی بات نہیں، ایک ہی ویب سے سیکھے پورے شعبے کی ہیں۔

اس کے دو نتائج ہیں جو آگے کی ہر بات بناتے ہیں:

• عادات اے آئی ماڈلز کے درمیان سفر کرتی ہیں، اس لیے دوسری رائے خود بخود دوسری نظر نہیں۔ فائل Anthropic تین شکلوں کو عمومی اے آئی ڈیزائن کا ٹھکانا کہتی ہے، اپنے ماڈل کا نہیں۔ مختلف کمپنیاں تقریبا ایک ہی ویب پر تربیت دیتی ہیں، اس لیے ایک ہی اوسط کی طرف جاتی ہیں۔ آگے جب دوسری اے آئی پہلی کے کام کا جائزہ لے گی (تصور 12) تو امید ہوگی کہ اندھا مقام مشترک نہ ہو۔ دونوں جتنی دور ہوں اتنا بہتر۔ صرف قواعد کی فائل سلسلہ قابل اعتماد طور پر توڑتی ہے۔
• حل کبھی "زیادہ زور سے پرامپٹ" نہیں۔ "منفرد بنائیں" خود عام درخواست ہے، اس لیے عام جواب ملتا ہے۔ حل ساختی ہے: ذوق کی فائل مخصوص نمونے روکے، ساختی تنوع لازم کرے اور نتیجہ واپس دینے سے پہلے دروازوں پر جانچے۔ یہی حصہ 2 ہے۔

2۔ چار حصوں کا ڈھیر

کورس کی ہر ویب سائٹ چار حصوں سے بنتی ہے۔ انہیں سیکھیں تو باقی ہر چیز کی جگہ مل جائے گی:

حصہ	کیا کرتا ہے	ہم کیا استعمال کرتے ہیں
ماڈل	صفحہ بنانے والا کوڈ لکھتا ہے	ڈیزائن کے لیے Kimi K3، جائزے کے لیے Claude
ذوق	اے آئی کو بور طے شدہ شکل سے روکتا ہے	Hallmark مہارت کی فائل اور Anthropic کا frontend-design پلگ اِن
میڈیا	اصل تصاویر اور ویڈیو، کیونکہ خانے اور متن برانڈ نہیں ہوتے	مفت تصاویر سے معاوضہ والی ویڈیو تک چار راستے (تصور 9)
میزبان	صفحہ حقیقی ویب پتے پر انٹرنیٹ پر رکھتا ہے	نظام Vercel، جسے اے آئی خود سنبھال سکتی ہے

دیکھیں فہرست میں کیا نہیں: ویب سائٹ بنانے والا، سانچوں کی دکان یا کھینچ کر چھوڑنے والا مدیر۔ آپ کا جانا ہوا ٹول سب کرتا ہے۔

ایک مفید مثال میں چھوٹی ورکشاپ سوچیں۔ ماڈل کارکن، ذوق کی فائل اس کی رہنما کتاب، میڈیا سامان کی الماری اور میزبان وہ دروازہ ہے جہاں سے مکمل کام باہر جاتا ہے۔

انہی چار خانوں سے کام کی قیمت لگتی ہے۔ معاوضہ دینے والے کلائنٹ کے لیے ہر خانے سے گزر کر نرخ دیں۔ کام کو کون سی اے آئی چاہیے؟ برانڈ کے لیے کتنی ڈیزائن تحقیق؟ تصویر یا ویڈیو کا کتنا بجٹ؟ سائٹ کہاں رہے گی؟

چار خانے، رسید پر چار سطریں۔

3۔ ڈیزائن ماڈل کا انتخاب

کوڈنگ فوری کورس کا سادہ اصول تھا: کیا کرنا ہے طے کرنے کے لیے طاقت ور اے آئی، اور اسے کرنے کے لیے سستی اے آئی۔ ڈیزائن اس جدول میں تیسری قطار بڑھاتا ہے۔

کام	کس کا انتخاب
منصوبہ بندی، ڈھانچہ، الجھی چیز کی ڈیبگنگ	آپ کا سب سے قابل ماڈل
منظور شدہ منصوبے پر عمل: معمول کی ترامیم، وضع کاری، آزمائشیں	سستا یا مفت ماڈل
بصری ڈیزائن اور سامنے کے حصے کی نفاست	اس سہ ماہی ڈیزائن مقابلے کا قائد

ڈیزائن کو الگ قطار کیوں چاہیے؟ ڈیزائن میں اچھائی صرف عمومی ذہانت سے نہیں، دو اور چیزوں سے آتی ہے:

• مشق۔ کچھ اے آئی کمپنیاں اپنے ماڈل کو دوسروں سے زیادہ ویب ڈیزائن کے کام پر تربیت دیتی ہیں۔
• دیکھنے کی صلاحیت۔ اپنے صفحے کی تصویر دیکھنے والی اے آئی انسانی ڈیزائنر کی طرح بناتی، دیکھتی اور درست کرتی ہے۔ صرف اپنا کوڈ پڑھنے والی اے آئی اندھی ڈیزائن کرتی ہے۔ Kimi K3 دیکھ سکتی ہے اور اس کے صفحات پسند کیے جانے کی بڑی وجہ یہی ہے۔

تین عادات تشہیری شور کی پیروی سے بچائیں گی:

• اعلانات کے بجائے اندھی آزمائشوں پر بھروسا کریں۔ LMArena جیسی سائٹس پر حقیقی لوگ مختلف ماڈلز کے صفحات بنانے والے کا نام جانے بغیر موازنہ اور ووٹ کرتے ہیں۔ یہ کمپنی کی اپنی تعریف سے بہتر ثبوت ہے۔ جولائی 2026 میں Kimi K3 ویب ڈیزائن میں اول مگر مجموعی درجہ بندی میں Claude اور GPT سے نیچے تھی۔ سبق یہی فرق ہے: ڈیزائن میں بہترین اور مجموعی طور پر بہترین دو الگ مقابلے ہیں۔
• ایک اے آئی سے بنوائیں، دوسری سے فیصلہ۔ Kimi K3 صفحہ بناتی اور Claude جائزہ لیتا ہے۔ تصور 12 طریقہ دکھاتا ہے۔
• قائد بدلنے کی توقع رکھیں اور دیکھیں کہ اس کی قیمت کتنی کم ہے۔ اگلی سہ ماہی کے قائد طاقت ور ماڈل کو وہی ذوق فائل دیں تو تقریبا ویسا اچھا کام ملے گا، کیونکہ سوچ سمجھ کر بنائے اور محض بنوائے صفحے کا بیشتر فرق اب ماڈل کے بجائے فائل میں ہے۔ یہی کورس کی پوری دلیل اور آپ کی حفاظتی پالیسی ہے۔ لیڈربورڈ کے اوپر نام سے آپ کا تعلق سب سے کم ہونا چاہیے۔

ماڈل Kimi K3 کے دو حقیقی نقصانات ہیں۔ یہ طے شدہ طور پر گہرا سوچتی ہے، اس لیے آہستہ اور توقع سے زیادہ بولتی ہے۔ ڈیزائن میں ٹھیک، چھوٹے کاموں میں پریشان کن۔ اس کی کم قیمت اس رعایت پر بھی منحصر ہے جو گفتگو صاف رہنے پر ملتی ہے، جسے تصور 15 بیان کرتا ہے۔

4۔ اپنے ٹول میں کوئی بھی ماڈل

کوڈنگ فوری کورس نے ٹول میں دوسری اے آئی چلانا دکھایا تھا۔ Kimi K3 کے لیے یہی کریں گے۔ یہ ان چند جگہوں میں ہے جہاں Claude Code اور OpenCode واقعی مختلف ہیں، اس لیے اپنا ٹیب چنیں۔

ترتیب سے پہلے اصل کام ایک جملے میں: ٹول عام طور پر سوالات ایک کمپنی کی اے آئی کو بھیجتا ہے۔ آپ بھیجنے کا پتہ بدل رہے ہیں تاکہ سوالات Kimi K3 کو جائیں۔ ٹول کی کوئی اور چیز نہیں بدلتی۔

طے شدہ طور پر Claude Code، Claude سے بات کرتا ہے۔ مگر Moonshot نے اپنی خدمت کو Claude Code کے پیغامات والی ہی وضع قبول کرنے کے لیے بنایا، اس لیے اضافی سافٹ ویئر کے بغیر Claude Code، Kimi K3 سے بات کر سکتا ہے۔

آپ کو platform.kimi.ai سے کلید چاہیے۔ کلید پاس ورڈ جیسی ہے جو کمپیوٹر کو ان کی اے آئی استعمال کرنے دیتی اور آپ کے اکاؤنٹ سے جڑی ہے۔ آغاز سے پہلے دو باتیں:

• پہلے اکاؤنٹ میں تھوڑی رقم ڈالیں۔ خالی اکاؤنٹ پر کلید نہیں چلتی۔
• سب سے کم معاوضہ والی سطح ہر منٹ بہت کم پیغامات دیتی ہے، اس لیے اے آئی آہستہ نہیں بلکہ خراب محسوس ہوتی ہے۔ فیصلہ کرنے سے پہلے پہلی سطح سے آگے جانے جتنی رقم ڈالیں۔

اب جس پروجیکٹ فولڈر میں Kimi K3 استعمال کرنی ہے اس کی .claude/settings.json میں یہ چسپاں کریں۔ (اسے عام کام سے الگ فولڈر میں رکھیں تاکہ دوسرے منصوبے Claude استعمال کرتے رہیں۔)

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.moonshot.ai/anthropic",
    "ANTHROPIC_AUTH_TOKEN": "YOUR_MOONSHOT_API_KEY",
    "ANTHROPIC_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_FABLE_MODEL": "kimi-k3[1m]",
    "CLAUDE_CODE_SUBAGENT_MODEL": "kimi-k3[1m]",
    "CLAUDE_CODE_AUTO_COMPACT_WINDOW": "1048576",
    "ENABLE_TOOL_SEARCH": "false"
  }
}

یہ بلاک بڑا لگتا ہے مگر صرف تین باتیں کہتا ہے: پیغامات کہاں بھیجنے ہیں، کون سا پاس ورڈ اور کون سی اے آئی استعمال کرنی ہے۔ پانچ تنبیہات، سب مشکل تجربے سے سیکھی گئیں:

• ہر ماڈل سطر مقرر کریں، صرف پہلی نہیں۔ Claude Code پس منظر کے چھوٹے کاموں کے لیے خاموشی سے مختلف ماڈلز استعمال کرتا ہے۔ صرف مرکزی ماڈل بدلیں تو پس منظر کے کام ایسے Claude ماڈل مانگیں گے جو Moonshot کے پاس نہیں، اور الجھے طریقوں سے ناکام ہوں گے۔ اسی لیے بھولی جانے والی Fable سطر سمیت ہر ANTHROPIC_DEFAULT_* سطر موجود ہے۔
• اگر Claude Code پہلے استعمال کیا ہے تو اپنا ANTHROPIC_API_KEY حذف کریں۔ پرانی کلید اوپر کے ANTHROPIC_AUTH_TOKEN سے ٹکراتی ہے، مگر خرابی کا پیغام وجہ نہیں بتاتا۔ صاف مشین سے شروع نہ کرنے والوں کے لیے یہ سب سے عام ناکامی ہے۔
• ترتیب کو /status سے جانچیں، /model سے نہیں۔ فہرست /model صرف Claude کے اپنے ماڈلز دکھاتی ہے۔ وہاں Kimi کبھی نظر نہیں آئے گی؛ یہ معمول ہے، خرابی نہیں۔ اس کے بجائے /status لکھیں۔ اسے kimi-k3 اور Moonshot کا پتہ دکھانا چاہیے۔
• آپ کی کلید اب فائل میں سادہ متن ہے۔ اسے عوامی جگہ کبھی اپ لوڈ نہ کریں۔ .claude/settings.json کو اپنی .gitignore فائل میں شامل کریں تاکہ غلطی سے شیئر نہ ہو۔
• اس راستے پر ویب مواد لانا بند ہوجاتا ہے۔ Moonshot کا نقطۂ اتصال ابھی یہ خدمت نہیں دیتا۔ باقی سب چلتا ہے۔

آخری ترتیب CLAUDE_CODE_AUTO_COMPACT_WINDOW کو نقل کرنے کے بجائے سمجھیں۔ Claude Code گفتگو بھرنے کے قریب خود صاف کرتا ہے، مگر اسے "بھری ہوئی" کا حجم بتانا پڑتا ہے۔ عدد 1048576، Kimi K3 کی دس لاکھ ٹوکن والی کھڑکی کو پورا لکھتا ہے۔ اسے چھوڑیں تو صفائی بہت جلد یا بالکل نہیں ہوگی۔

ایک صاف بات: Moonshot اس ترتیب کی معاونت کرتی ہے، Anthropic نہیں۔ کمپنی Anthropic کہہ چکی ہے کہ Claude Code کے پیغامات دوسری کمپنیوں کے ماڈلز کو بھیجنے کی جانچ یا معاونت نہیں کرتی۔ Claude Code کی تازہ کاری سے یہ ٹوٹے تو کسی نے درست کرنے کا وعدہ نہیں کیا۔ آپ اے آئی چننے کی آزادی کے بدلے سرکاری معاونت دے رہے ہیں۔ یہ مناسب سودا ہے، بشرطیکہ آپ جانتے ہوں۔

ٹول OpenCode کسی بھی اے آئی کے ساتھ کام کے لیے بنا، اس لیے یہ آسان راستہ ہے۔ یہاں OpenRouter سب سے زیادہ مدد کرتا ہے۔

خدمت OpenRouter آپ کو تقریبا ہر اے آئی ماڈل سے جوڑتی ہے: Kimi K3، GPT، Gemini اور کئی مفت ماڈلز۔ ہر کمپنی کا اکاؤنٹ بنانے کے بجائے ایک اکاؤنٹ اور ایک بل۔ اسے کئی دروازے کھولنے والی ایک کلید سمجھیں۔

ترتیب میں تقریبا ایک منٹ:

1. پتے openrouter.ai/keys پر کلید بنائیں اور تھوڑی پیشگی رقم ڈالیں۔
2. کمانڈ opencode چلائیں، /connect لکھیں، openrouter چنیں اور کلید چسپاں کریں۔
3. کمانڈ /models لکھ کر moonshotai/kimi-k3 چنیں (فہرست میں دیا درست شناختی نام؛ نام بدلتے ہیں، فہرست پر بھروسا کریں)۔

بس اتنا ہی۔ پہلے سیکھی ہر چیز چلتی ہے اور Kimi K3 فہرست میں ایک اور انتخاب ہے۔

کورس کے لیے اچھی ترتیب: ڈیزائن بنانے کو Kimi K3، چھوٹے کاموں کو سستا ماڈل، اور تصور 12 کے جائزے میں دوسری رائے کے لیے Claude یا GPT بھی جڑا ہوا۔

دو باتوں پر نظر رکھیں۔ OpenRouter، Moonshot سے براہ راست رابطے سے قدرے زیادہ رقم لیتا ہے کیونکہ جوڑنے کا کام کرتا ہے۔ سیکھتے وقت ٹھیک ہے۔ Kimi K3 لمبے جواب بھی لکھتی ہے، اس لیے ٹول کے دکھائے استعمال کے عدد پر نظر رکھیں۔ لمبے جواب مہنگے ہیں۔

کرائے کے تاج کا اصول

کوئی راستہ چنیں، عادات اپنے ٹول اور فائلوں کے گرد بنائیں، ایک اے آئی ماڈل کے گرد کبھی نہیں۔ درجہ بندی کی چوٹی والی اے آئی کرائے کا تاج پہنے ہے جو کسی اور کو مل جائے گا۔ آپ کی فائلیں رہیں گی۔

---

حصہ 2: ذوق بطور مہارت

5۔ مؤثر ذوق کی فائل Hallmark

حصہ 1 نے مسئلہ بیان کیا۔ ایک مفت فائل اس کا بیشتر حصہ درست کرتی ہے۔

مہارت نظام Hallmark حسن المغربی کی ڈیزائن مہارت ہے جو Together AI کے نام سے شائع ہوئی۔ یہ مفت اور سب کے لیے ہے، اور 2026 کی مقبول ترین مہارتی فائلوں میں شامل ہوئی۔ اپنے کام کو ایک جملے میں یوں بیان کرتی ہے: اے آئی کے بنائے صفحات کو سوچ سمجھ کر بنایا ہوا دکھانا، محض خودکار طور پر بنوایا ہوا نہیں۔

یہ پوری کتاب میں مہارت کی فائل کی طاقت کی واضح ترین مثال بھی ہے۔ کوڈنگ فوری کورس کا وعدہ یاد رکھیں: اے آئی عمومی علم لاتی ہے اور مہارت آپ کا مخصوص فیصلہ۔ Hallmark ماہرین کا بنایا وہی وعدہ ہے جو آپ کو مفت ملا۔

دونوں ٹولز میں جدید طریقے سے انسٹال کریں:

npx skills add Nutlope/hallmark

اس سے تعاملی انتخاب کھلتا ہے۔ یہ مہارت ڈھونڈتا، مشین پر نصب ایجنٹس دکھاتا اور پوچھتا ہے کہاں نصب کرنی ہے۔ عموما Claude Code، OpenCode اور Codex پہلے سے منتخب ہوتے ہیں، اس لیے بیشتر قارئین صرف Enter دبائیں۔ بلا سوال نصب کرنے کے دو اختیارات مفید ہیں: -g ہر پروجیکٹ کے لیے صارف کی سطح پر نصب کرتا اور -y تصدیق چھوڑتا ہے؛ یوں npx skills add Nutlope/hallmark -g -a claude-code -y ایک سطر کا نسخہ ہے۔ تازہ کاری کے لیے کسی وقت دوبارہ چلائیں، اور npx skills list نصب چیزیں دکھاتا ہے۔

فائلیں ~/.claude/skills/hallmark/ نامی فولڈر میں آتی ہیں۔ OpenCode بھی یہی فولڈر پڑھتا ہے، اس لیے ایک تنصیب دونوں ٹولز کے لیے کافی ہے۔

فولڈر ایک بار کھول کر اندر دیکھیں۔ اس کی تنظیم خود سبق ہے۔ ایک مختصر مرکزی فائل SKILL.md ہے، اور ساتھ references فولڈر میں باقی سب: 58 جانچوں کی فہرست، فونٹس، رنگ، فاصلوں، 21 صفحاتی شکلوں اور موضوعات کی فائلیں۔

ایسی تقسیم کیوں؟ اے آئی اضافی فائلیں صرف ضرورت پر پڑھتی ہے۔ مرکزی فائل چھوٹی رہتی ہے، اس لیے لوڈ رکھنے کی قیمت تقریبا صفر ہے۔ یہ کوڈنگ فوری کورس کا عین سبق ہے، جسے کسی اور نے آپ کے لیے بنا دیا۔

تنصیب خود ایک صاف بات سکھاتی ہے: ٹول یاد دلاتا ہے کہ مہارتیں ایجنٹ کی مکمل اجازتوں سے چلتی ہیں اور استعمال سے پہلے دیکھی جائیں۔ اسے لفظی سنجیدگی سے لیں؛ مہارت وہ ہدایات ہیں جن پر ایجنٹ عمل کرے گا۔ اس کورس یا کہیں اور سے نصب ہر چیز کی SKILL.md پڑھیں۔

فائل کے اندر Hallmark خوبصورت تصویروں کا مجموعہ نہیں بلکہ کام کرنے والے حصے ہیں:

• یہ پہلے صفحے کی شکل چنتی ہے۔ رنگوں سے پہلے 21 مختلف شکلوں سے ساخت منتخب کرتی ہے۔ یہی Hallmark کو خاص بناتا ہے۔ "اسے مختلف بنائیں" کی بیشتر کوششیں صرف رنگ بدلتی ہیں۔ Hallmark ڈھانچہ بدلتی ہے۔ دو مختلف کلائنٹس کے صفحات میں حصوں کی ترتیب ایک نہیں ہونی چاہیے۔ اسی ڈھانچے کو نیا رنگ دینا وہ مسئلہ ہے جسے یہ حل کرتی ہے۔
• بیس نام دار موضوعات اور Custom۔ ہر موضوع مربوط شناخت ہے: رنگوں کا مجموعہ، حروف کی جوڑی اور فاصلوں کا مزاج (فہرست میں Specimen، Atelier، Brutal، Newsprint، Studio، Manifesto، Terminal، Midnight، Almanac، Garden، Riso، Sport، Bloom، Coral، Cobalt، Aurora، Editorial، Carnival، Lumen اور Hum ہیں)۔ انتخاب آزاد نہیں؛ خلاصے کی صنف کے اندر گردشی اصول اسے تمام منصوبوں میں ایک موضوع پر رکنے سے روکتا ہے۔ کوئی موضوع تخلیقی ارادے کے مطابق نہ ہو تو Custom شروع سے مخصوص رنگ اور فونٹس بناتا ہے، وہی دروازے مگر نیچے کوئی سانچہ نہیں۔ عام خلاصوں میں یہ شاخ نظر نہیں آتی۔
• کام واپس دینے سے پہلے طویل فہرست۔ مہارت مکمل صفحہ معلوم بری عادات پر جانچتی اور دکھانے سے پہلے خود تنقید کرتی ہے۔ ایک سبق آموز تفصیل: پروجیکٹ کا سامنے والا صفحہ 57 جانچیں کہتا ہے مگر نصب فہرست کا عنوان 58 ہے۔ دستاویزی اعداد بدلتے ہیں؛ صفحہ اور ٹول میں اختلاف ہو تو ٹول مانیں۔ ایک بار محفوظ کی ہوئی سخت فہرست تھکن کی سست درخواست سے بہتر ہے۔
• حفاظتی اصول۔ موجودہ ویب سائٹ پر Hallmark پہلے بتائے اور منظوری لیے بغیر فائلیں یا حصے حذف نہیں کرے گی۔ ڈیزائن مہارت کسی کی سائٹ تباہ کرنے کی اجازت نہیں۔

چار طریقے۔ Hallmark چار مختلف کام کرتی ہے۔ نئے صفحے پر پہلا طے شدہ کام ہے؛ باقی تین نام سے مانگتے ہیں۔ کس موقع پر کون سا مناسب ہے، مہارت کا بیشتر سبق یہی ہے:

کمانڈ	کیا کرتی ہے	کب استعمال
کمانڈ default	نیا صفحہ: شکل منتخب، قواعد لاگو، 58 جانچیں	نئی چیز شروع کرتے وقت
کمانڈ audit	موجودہ صفحے کی خرابیاں گنواتی، کچھ نہیں بدلتی	صاف جائزہ درکار ہو (تصور 11)
کمانڈ redesign	پرانی شکل چھوڑ، الفاظ اور برانڈ رکھ کر مختلف تعمیر	صفحہ چلتا مگر خودکار بنا لگے
کمانڈ study	پسندیدہ ویب سائٹ دیکھ کر کامیابی کی وجوہ لکھتی ہے	اچھی سائٹ سے سیکھنا ہو (تصور 6)

نسب: کمپنی Anthropic کی frontend-design مہارت

نظام Hallmark اچانک نہیں آیا۔ اس کی فائل اپنے خیالات کے ذرائع بتاتی ہے، جن میں Claude Code کا Anthropic frontend-design پلگ اِن شامل ہے۔

دونوں فائلوں کا موازنہ مفید ہے کیونکہ ایک مسئلہ مختلف طریقوں سے حل کرتی ہیں۔

مہارت Anthropic فیصلہ سکھاتی ہے: چھوٹے اسٹوڈیو کے ڈیزائنر کی طرح کام کریں۔ صفحے کے اوپر حقیقی بات کہیں۔ فونٹس کو شخصیت اٹھانے دیں۔ ایک جگہ جرات مند اور باقی جگہ پرسکون رہیں۔ مکمل کہنے سے پہلے اپنے کام کی تصویر دیکھیں۔

نظام Hallmark مشینری دیتا ہے: صفحاتی شکلوں کی فہرست، نام دار موضوعات، عددی جانچیں اور لازمی خود جائزہ۔

دونوں مفید اور ساتھ چلتے ہیں۔ Anthropic کا پلگ اِن نصب کریں تو روزمرہ ڈیزائن میں خود مدد کرتا ہے۔ مکمل عمل کے لیے Hallmark کو نام سے بلائیں۔ تنبیہ: Kimi K3 جیسے غیر Claude ماڈل خود مہارت چننے میں کم قابل اعتماد ہیں، اس لیے امید کے بجائے ہر بار Hallmark کا نام لکھیں۔

کیا مہارت ہر بار ایک ہی صفحہ بناتی ہے؟ نہیں۔ اے آئی میں کچھ بے ترتیبی ہمیشہ ہے؛ مہارت اسے ختم نہیں بلکہ انتخاب محدود کرتی ہے۔ Hallmark وہی تھکی شکل روک دیتی ہے، دو کوششیں یکساں نہیں بناتی۔ جو بات ہر بار لازما درست ہو، اس کے لیے ایسا اصول چاہیے جسے اے آئی نظرانداز نہ کر سکے؛ تصور 11 طریقہ دکھاتا ہے۔

6۔ مطالعہ کریں، نقل نہیں

ڈیزائن بہتر کرنے کا تیز راستہ پسندیدہ مثال دکھا کر کہنا ہے: "اس جیسا احساس دیں۔"

شہرت خراب کرنے کا تیز راستہ اس سائٹ کی عین نقل ہے۔

کمانڈ study اس کشمکش کو اچھی طرح سنبھالتی ہے اور اس کا طریقہ ڈیزائن کے بارے میں بہت کچھ سکھاتا ہے۔

کمانڈ study کو پسندیدہ ویب سائٹ یا صرف اس کی تصویر دکھائیں۔ یہ کامیابی کی وجوہ لکھتی ہے: صفحے کی شکل، ساتھ چلنے والے فونٹس، مرکزی رنگ اور خالی جگہ کی مقدار۔ سب design.md نامی فائل میں محفوظ ہوتا ہے۔

یہ سائٹ نقل نہیں کرے گی۔ خیالات لیتی ہے، نقاط نہیں۔ دو سائٹس ایسے خیالات بانٹ سکتی ہیں جیسے دو طالب علم ایک استاد؛ تعلق دکھتا ہے مگر وہ ایک شخص نہیں۔

نقل غلط اور قانونی مشکل بھی بن سکتی ہے۔ تین عملی وجوہ اتنی ہی اہم ہیں:

• فائل سفر کرتی ہے۔ design.md لکھا ہوا ذوق ہے۔ اسے دوسری اے آئی، ٹول، ساتھی یا منظوری کے لیے کلائنٹ کو دیں تو حوالگی کے بعد بھی ڈیزائن سمت رہتی ہے۔
• یہ نظر تربیت دیتی ہے۔ تین پسندیدہ سائٹس کی فائلیں پڑھیں تو ہر جگہ ساخت اور فونٹس نظر آنے لگیں گے۔ مہارت کام کرتے ہوئے سکھاتی ہے۔
• یہ مبتدی کا مشکل مسئلہ حل کرتی ہے۔ بیشتر لوگ مطلوبہ شکل بیان نہیں کر سکتے مگر پسندیدہ سائٹ دکھا سکتے ہیں۔ study اشارے کو ہدایات بناتی ہے۔

قابل عمل اصول: ہر پروجیکٹ میں دو یا تین سائٹس کا مطالعہ کریں، صرف ایک کا کبھی نہیں۔

ایک مثال نقل کی طرف کھینچتی ہے۔ تین مثالیں خیالات جوڑنے پر مجبور کرتی ہیں: ایک کی شکل، دوسری کے فونٹس، تیسری کی سادگی۔ اصلی محسوس ہونے والا کام امتزاج سے آتا ہے۔

7۔ برانڈ اخذ کرنا: کلائنٹ کا DNA پہلے ہی آن لائن ہے

تصور 6 پسندیدہ سائٹس کے بارے میں تھا۔ کلائنٹ کا کام اس کے برعکس ہے۔ جس ڈیزائن کا احترام ضروری ہے وہ پہلے موجود ہے کیونکہ وہ کلائنٹ کا برانڈ ہے: نشان، رنگ، فونٹس اور بولنے کا انداز۔ یہ غلط ہوں تو آپ کی کوئی دوسری چیز ان کے لیے اہم نہیں رہے گی۔

مرکزی خیال: مخصوص چیزیں مانگیں، سب کچھ نہیں۔

پوری ویب سائٹ اے آئی کو دیں تو کوڈ، اسکرپٹس اور کوکی کھڑکیوں کا ڈھیر ملتا ہے۔ اس میں دبی اے آئی اعتماد سے ایسا رنگ گھڑ سکتی ہے جو وہاں ہے ہی نہیں۔ ماڈلز غیر یقینی میں بھی پراعتماد اندازہ دیتے ہیں۔ آپ کا کام اندازہ ناممکن بنانا ہے۔

راستہ 1: اپنی اے آئی سے درست طور پر پوچھیں (مفت)۔ کلائنٹ کی سائٹ کھلوا کر ثبوت کے ساتھ درست چیزیں مانگیں:

اس صفحے سے سب سے زیادہ استعمال ہونے والے تین برانڈ رنگوں کے درست رموز، فونٹس کے نام اور نشان کی فائل کا پتہ درج کریں۔ ہر چیز کے لیے کوڈ کی وہ سطر نقل کریں جہاں یہ ملی۔

آخری جملہ اہم ہے۔ اکیلا رنگی رمز اندازہ ہے۔ جس سطر سے آیا ہو اس کے ساتھ رمز خود جانچا جا سکتا ہے۔ ہمیشہ ثبوت مانگیں۔

راستہ 2: اسی مقصد کا ٹول استعمال کریں (معاوضہ، زیادہ صاف)۔ Firecrawl جیسی خدمات الجھے ویب صفحات کو اے آئی کے لیے صاف منظم معلومات بناتی ہیں۔ کچھ برانڈ کا نشان، رنگ اور فونٹس سیدھے دیتی ہیں۔ ایک کلائنٹ کے لیے پہلا راستہ ٹھیک ہے۔ ہر ہفتے یہ کام ہو تو معاوضہ والا ٹول غلطیوں کی پوری قسم ختم کر کے اپنی قیمت نکال لیتا ہے۔ یہ جاننا بھی مناسب ہے کہ اس کورس کی بنیادی ویڈیوز کو ایسے ٹولز کی تشہیر کا معاوضہ ملا تھا۔ خیال درست ہے؛ مخصوص برانڈ آج کی قیمتیں دیکھ کر آپ چنیں۔

راستہ 3: سیدھا کلائنٹ سے پوچھیں؛ اسے کبھی نہ چھوڑیں۔ حقیقی کاروبار کے پاس حقیقی فائلیں ہوتی ہیں: درست نشان، سرکاری رنگ، کبھی برانڈ دستاویز۔ اوپر کی ہر چیز پہلے مسودے کے لیے ہے۔ کچھ زندہ کرنے سے پہلے اصل فائلیں مانگیں۔ آنکھ سے دوبارہ بنایا نشان آخر پکڑا جائے گا اور شرمندگی ہوگی۔

جواب جیسے بھی ملیں، ایک ہی فائل design.md میں جاتے ہیں۔ انہیں واضح طور پر قواعد لکھیں، تجاویز نہیں۔

فرق حقیقی ہے۔ تصور 6 کی پسندیدہ سائٹس سمت ہیں، یعنی لینے کے خیالات۔ کلائنٹ کے برانڈ رنگ قواعد ہیں؛ زیادہ خوبصورت چیز ملنے پر بدل نہیں سکتے۔ ذوق کی مہارت انہی قواعد کے اندر ڈیزائن کرتی ہے۔

---

حصہ 3: تعمیر

8۔ ایک کہانی، ایک اسکرول

اپنی جانی ہوئی بہترین ویب سائٹس کھولیں اور مشترک بات دیکھیں۔ صفحہ اوپر نیچے رکھے حصوں کا ڈھیر نہیں بلکہ اسکرول کی ترتیب میں سنائی گئی کہانی ہے۔

ہر پردے پر ایک خیال۔ ہر پردہ اگلا دیکھنے کی خواہش پیدا کرے۔ اسکرول سے کہانی آگے بڑھتی ہے۔

صفحے کو سوچا سمجھا محسوس کرانے کا یہ کورس کا طاقت ور ترین اور آسانی سے منصوبہ بننے والا خیال ہے:

• تعمیر شروع ہونے سے پہلے کہانی لکھیں۔ پانچ سے آٹھ قدم، ہر ایک کی ایک سطر۔ فلم کی طرح انہیں «دھڑکنیں» کہتے ہیں۔ شہد کی کمپنی کے لیے: جنگلی چھتا، پھر قطرہ گرتا ہے، مرتبان بھرتا ہے، اندر کیا ہے، کون بناتا ہے، پھر خریداری۔ آگے محاسبہ کار کے لیے: رسیدوں کا جوتے والا ڈبہ، پھر چھانٹی، کھاتے خود متوازن، واضح ماہانہ تصویر، پیچھے موجود شخصیت، پھر ملاقات طے کریں۔ دھڑکنیں لکھیں، ان پر بحث و اتفاق کریں اور تعمیر سے پہلے فائل میں محفوظ کریں۔
• ہر پردے پر ایک خیال۔ پردہ دو نکات کہے تو کوئی نہیں کہتا۔ اسے دو پردوں میں بانٹیں۔
• صفحے کے اوپر اصل چیز دکھائیں، "جدید کاروبار کے لیے اختراعی حل" جیسا نعرہ نہیں۔ شہد کی سائٹ گرتے شہد سے کھلتی ہے۔ محاسبہ کار کی سائٹ رسیدوں کے اس ڈبے سے جسے ہر چھوٹا کاروباری فورا پہچانتا ہے۔
• ایک لمحہ جرات مندانہ، باقی سب پرسکون رکھیں۔ ایسی ایک چیز جسے ملاقاتی بعد میں دوست کو بتا سکے: حرکت، اسکرول پر ردعمل یا حروف کا نمایاں استعمال۔ ایک جگہ جرات اعتماد لگتی ہے؛ ہر جگہ الجھن۔

کہانی کی ریڑھ آپ کا جوابی معاہدہ اور میڈیا شاٹ فہرست بھی ہے۔ اسے سنبھالیں: تصور 9 ہر دھڑکن کی تصویر بناتا اور تصور 10 وہی ریڑھ مختلف پردے کی شکل کے لیے دوبارہ عکس بند کرتا ہے۔ ایک نمونہ، تین کام؛ اسی لیے ذہن کے بجائے لکھا جاتا ہے۔

آخری دھڑکن کو واقعی کچھ کرنا چاہیے۔ ہر کہانی ایک عمل پر ختم ہوتی ہے: وقت لیں، خریدیں، پیغام یا رکنیت۔

یہ جال تقریبا ہر پہلی ویب سائٹ پکڑتا ہے۔ سادہ سائٹ صرف فائلیں ہے؛ پیغام لینے کا پیچھے کوئی نظام نہیں۔ اس لیے کہانی کے آخر کا خوبصورت بٹن اس وقت تک کچھ نہیں کرتا جب تک طریقہ نہ چنیں۔ تین صاف انتخاب، سستا پہلے:

انتخاب 1: WhatsApp ربط۔ اسے اضافی چیز نہیں چاہیے اور بیشتر چھوٹے کاروباروں کے لیے بہترین جواب ہے۔ ایسا ربط:

https://wa.me/923001234567?text=Hello,%20I%20would%20like%20to%20book%20a%20consultation

پہلے سے لکھے پیغام کے ساتھ WhatsApp کھولتا ہے۔ نہ نظام، نہ فارم، نہ جانچ۔ سب سے بہتر یہ کہ پیغام وہیں آتا ہے جہاں مالک سارا دن گاہکوں کو جواب دیتا ہے۔ بیشتر سانچے ایسا رابطہ فارم دیتے ہیں جسے کوئی نہیں دیکھتا۔ WhatsApp بٹن آسانی سے بہتر ہے۔

انتخاب 2: فارم کی خدمت۔ Formspree جیسی کمپنیاں صفحے پر عام فارم لگاتی اور لوگوں کی بھیجی چیز ای میل کرتی ہیں۔ مفت منصوبہ چھوٹے کاروبار کے لیے کافی ہے۔ کلائنٹ واقعی فارم چاہے تو استعمال کریں۔

انتخاب 3: سرور پر چھوٹا پروگرام۔ نظام Vercel (تصور 13) ویب سائٹ کے ساتھ چھوٹے پروگرام چلا سکتا ہے، اس لیے بڑا منصوبہ ضرورت پر مناسب نظام بنا سکتا ہے۔ پہلے دو انتخاب بڑھ کر یہاں آتے ہیں؛ آغاز یہاں سے نہیں۔

جو چنیں، منصوبہ بندی میں کہانی کے اندر لکھیں۔ "دھڑکن 6: مشاورت طے کریں، +92 300... کا WhatsApp ربط" ایسی سطر ہے جس کے گرد منصوبہ اور بعد میں جانچ ہوسکتی ہے۔ تصور 11 دکھاتا ہے کہ مکمل زندہ صفحے میں چلتا ربط یقینی کیسے بنائیں۔

بے کار بٹن پر ختم ہونے والی کہانی ویب سائٹ نہیں، اشتہار ہے۔

ترتیب پر ایک بات: پہلے ایک صفحہ سیکھیں۔ کورس کی ہر چیز ایک صفحے پر آسان ہے۔ مگر حقیقی کلائنٹ کا کام ایک صفحے سے آگے بڑھتا ہے، اس لیے حصہ 3 کے آخر میں کئی صفحات کا حصہ بتاتا ہے کہ مزید کمروں پر کیا بدلتا ہے۔

9۔ میڈیا پائپ لائن

ہر اس ویب سائٹ کا صاف راز جس نے آپ کو روک کر دیکھنے پر مجبور کیا: تصاویر آدھا کام کر رہی ہیں۔

اچھے فونٹس اور ساخت آپ کو اوسط سے اوپر اٹھاتے ہیں۔ مگر صرف رنگین خانوں اور متن کا صفحہ جگہ نہیں، دستاویز محسوس ہوتا ہے۔ اصل تصاویر اور ویڈیو صفحے کو ایسی جگہ بناتے ہیں جہاں آپ پہنچے ہوں۔

اسی لیے تصاویر کورس کا لازمی حصہ ہیں، آخر کی سجاوٹ نہیں۔

یہ واحد حصہ بھی ہے جہاں رقم واقعی آپ کی صلاحیت بدلتی ہے۔ اس لیے اسے مفت سے مہنگے چار راستوں میں سکھاتے ہیں۔ ہر راستہ حقیقی اچھی ویب سائٹ بنا سکتا ہے۔ ہر پروجیکٹ کے لیے راستہ چنیں اور درست طور پر جانیں وہ کیا دیتا ہے۔

راستہ 1: اصل تصاویر (ہمیشہ مفت)۔ Unsplash اور Pexels کی پیشہ ور تصاویر کی بڑی لائبریریاں معاوضہ دینے والے کلائنٹس سمیت مفت استعمال ہوسکتی ہیں۔ قواعد پڑھیں: تصاویر استعمال کرسکتے ہیں، خود تصاویر دوبارہ بیچ نہیں سکتے۔

دو عادات مفت تصاویر کو مفت جیسا دکھنے سے روکتی ہیں:

• روشنی ملائیں۔ پورے صفحے پر ایک قسم کی روشنی اور مزاج والی تصاویر چنیں۔ ملی جلی روشنی صفحے کو اجنبی تصویروں سے جوڑا ہوا دکھاتی ہے۔
• مقصد سے کاٹیں۔ تصویر جیسی ملی ویسی قبول نہ کریں۔ مطلوبہ چیز دکھانے کے لیے کاٹیں۔

وہ انتخاب نہ بھولیں جو تقریبا کوئی استعمال نہیں کرتا: مقامی کاروبار کے لیے اچھی شام کی روشنی میں فون کیمرہ ہر بار عام ذخیرہ تصاویر سے بہتر ہے۔ کلائنٹ کے اصل دفتر کی اصل تصویر کوئی اے آئی نہیں بنا سکتی۔

راستہ 2: اے آئی کی تصاویر، مفت (ایک شرط کے ساتھ)۔ کبھی مطلوبہ تصویر کہیں موجود نہیں ہوتی: غیر معمولی عکاسی کا انداز یا ایسا مصنوعہ جس کی تصویر ابھی نہیں بنی۔ اے آئی بنا سکتی ہے۔

اس پورے راستے کی شرط: مفت میں معیار یا سہولت مل سکتی ہے، دونوں نہیں۔

بہترین تصویر ساز اے آئی صرف اس وقت مفت ہے جب کلک خود کریں۔ جنہیں آپ کی اے آئی خود چلا سکتی ہے وہ کمزور یا کم قابل اعتماد ہیں۔ ہر پروجیکٹ کے لیے چنیں:

راستہ 2ا: بہترین اے آئی کے ساتھ ہاتھ سے، یعنی ChatGPT کا مفت منصوبہ۔ OpenAI کی تصویری اے آئی فی الحال وسیع دستیاب طاقت ور انتخابوں میں ہے۔ ہدایات قریب سے مانتی، تصویر میں پڑھنے کے قابل متن رکھ سکتی ہے (بیشتر نہیں)، اور تصاویر کے مجموعے میں یکساں انداز رکھتی ہے تاکہ پورے صفحے کی تصاویر ایک ساتھ لگیں۔

یہ chatgpt.com پر روزانہ محدود تصاویر کے ساتھ مفت ہے۔ OpenAI مقرر عدد شائع نہیں کرتی اور وہ بدلتا ہے، اس لیے اپنا اکاؤنٹ دیکھیں۔ مفت خودکار نسخہ نہیں، اسی لیے یہ راستہ ہاتھ سے ہے۔

ہاتھ کے کام کو بوجھ کے بجائے فائدہ بنانے والا بہاؤ: آپ کی اے آئی ہدایت لکھے اور آپ بٹن دبائیں۔

منظرنامے میں ہر دھڑکن کی ایک وضاحت پہلے موجود ہے۔ اے آئی سے انہیں نکھروائیں، ہر ایک خود chatgpt.com میں چسپاں کریں، نتائج assets/ فولڈر میں 01-shoebox.png جیسے نام سے محفوظ کریں، اور اے آئی صفحے میں لگائے۔ دس منٹ کی نقل و چسپاں سے بہترین دستیاب تصویری معیار مفت ملتا ہے۔

روزانہ حد مدد بھی کرتی ہے۔ چند تصاویر روز ایک منصوبہ بند تعمیر کی رفتار ہیں اور چالیس تصاویر بنا کر ایک چلنے کی امید والی بری عادت ناممکن ہوتی ہے۔

راستہ 2ب: خودکار مگر کمزور، یعنی مفت خدمات جنہیں اے آئی خود بلا سکے۔ جب کام آپ کے بغیر چلتا رہے، جیسے خام مسودے، عارضی تصاویر یا جماعتی منصوبے، تو تین انتخاب ہیں۔ خدمت Pollinations.ai بغیر اکاؤنٹ حقیقی مفت خودکار تصاویر کے قریب ترین ہے۔ خدمت Cloudflare Workers AI روزانہ حقیقی مفت مقدار دیتی ہے۔ مفت منصوبہ Google مختلف اوقات میں مفت تصاویر دیتا رہا ہے۔

آخری مثال میں سبق ہے۔ صرف 2026 میں Google نے موجودہ تصویری اے آئی کے مفت ہونے کا فیصلہ ایک سے زیادہ بار بدلا۔ یاد رکھنے کی بات کمپنی کا نام نہیں: مفت منصوبے موسم جیسے ہیں۔ تعمیر کے دن تازہ صفحہ دیکھیں اور کلائنٹ کو ایسی مفت مقدار کا وعدہ نہ کریں جو اگلے مہینے غائب ہو۔

دونوں کا اچھا استعمال: جگہیں طے کرنے کے خام مسودے 2ب سے، منظور تصاویر درست طور پر 2ا سے دوبارہ۔ مسودہ سستا، تکمیل اچھی۔

راستہ 3: ہر تصویر کے چند سینٹ دیں۔ پروجیکٹ میں ذرا سا بجٹ ہو تو راستہ 2 کی شرط ختم ہوجاتی ہے۔

راستہ 2ا کی وہی عمدہ تصویری اے آئی خودکار بھی چل سکتی ہے، اور ہر تصویر کی قیمت ہے: کم معیار تقریبا آدھا سینٹ، درمیانے کے چند سینٹ، اعلی کے قریب بیس سینٹ۔ قیمتیں بدلتی ہیں، جانچیں۔

ان قیمتوں پر معیار اور سہولت دونوں ملتے ہیں۔ اے آئی منظرنامے کی ہر تصویر خود اعلی معیار میں بناتی ہے اور پوری ویب سائٹ کی تصاویر ایک ڈالر سے کم پڑتی ہیں۔ بیشتر حقیقی کلائنٹ کام یہیں ہوتا ہے۔

خدمات fal.ai اور Replicate ایک اکاؤنٹ سے کئی کمپنیوں کی تصویری اے آئی میں یہی کرتی ہیں، جیسے تصور 4 میں متن کے لیے OpenRouter۔

اسے سستا رکھنے کی جانی ہوئی عادت: مسودے کم معیار میں، اعلی معیار کی ادائیگی سب کی منظوری کے بعد۔

راستہ 4: کریڈٹس والی معاوضہ ویڈیو، یعنی نمایاں منظر۔ اسکرول کے ساتھ پردے پر بہتا شہد اسی راستے سے آتا ہے۔ حقیقی رقم لگتی ہے اور اچھے استعمال پر قابل قدر ہے۔

خدمت Higgsfield ایک اکاؤنٹ سے 30 سے زیادہ تصویری، ویڈیو اور صوتی اے آئی ماڈلز تک رسائی دیتی ہے، جن میں Gemini Omni Flash، Seedance، Veo، Kling اور دوسرے شامل ہیں۔ ہمارے لیے تین باتیں اہم ہیں:

• آپ کی اے آئی اسے سیدھا استعمال کرسکتی ہے۔ کمانڈ npm install -g @higgsfield/cli سے ایک بار نصب اور higgsfield auth login سے ایک بار سائن ان کریں۔ پھر ویڈیو بنانا عام نشست میں فائل ترمیم جیسا کام ہے۔ اے آئی کام بھیجتی، انتظار کرتی اور نتیجہ لاتی ہے۔

• ماڈل چننا ضروری نہیں۔ مطلوبہ منظر بیان کریں، مثلا "قریب سے، شیشے پر ٹپکتا شہد، پیچھے گرم روشنی، فون کے لیے لمبی شکل، چار سیکنڈ"، اور خدمت 30 سے زیادہ ماڈلز میں بہترین چنتی ہے۔ ایک چیز کم سیکھنی پڑتی ہے۔

• خرچ سے پہلے قیمت جانچ سکتے ہیں۔ کمانڈ higgsfield generate cost ویڈیو بنائے بغیر بتاتی ہے کہ قیمت کیا ہوتی۔ منظر اسی طرح بیان کریں جیسے بناتے وقت؛ حقیقی مثال:

  higgsfield generate cost workflow draw_to_video --duration 8.2 --resolution 720p

  یہ میڈیا حصے کی مفید ترین کمانڈ ہے کیونکہ "خرچ سے پہلے منصوبہ" کو عملی بناتی ہے: منظرنامے کے ہر منظر کی قیمت، مجموعہ، فیصلہ، پھر تخلیق۔ اے آئی کو عکس بندی سے پہلے نرخ دینا سکھائیں۔

کمپنی Higgsfield کئی میں ایک ہے؛ fal.ai، Replicate اور اے آئی کمپنیاں خود بھی ملتا جلتا کام کرتی ہیں۔ اسے اس لیے دکھاتے ہیں کہ فی الحال ٹولز سے آسانی سے جڑتی ہے، اور پچھلی صاف گوئی کے ساتھ، اس بہاؤ کو مقبول بنانے والی کئی ویڈیوز کا معاوضہ دیتی ہے۔ خیال سیکھیں: اے آئی نشست میں ویڈیو کو معمول کا قدم بنانا۔ کمپنی بدلی جاسکتی ہے۔

کون سی ویڈیو اے آئی مانگیں؟ خدمت خود چن سکتی ہے، مگر ویب سائٹ کے لیے دو ماڈلز تقریبا سب کچھ اور الگ کام کرتے ہیں:

• نظام Google کا ماڈل Gemini Omni Flash فی الحال آزمائشی ہے، یعنی بغیر اطلاع بدل یا منتقل ہوسکتا ہے۔ یہ منظر ڈھونڈتا ہے۔ اس سے انسان کی طرح کہیں "وہی منظر، آہستہ بہاؤ، گرم روشنی" تو صفر سے آغاز کے بجائے پچھلی ویڈیو بہتر اور روشنی و منظر یکساں رکھتا ہے۔ منظر طے کرتے وقت استعمال کریں۔
• کمپنی ByteDance کا ماڈل Seedance 2.0، جسے seedance_2_0 کے نام سے دیکھیں گے، منظر مقفل کرتا ہے۔ اسے نو حوالہ تصاویر تک، برانڈ تصاویر، منظور شدہ عکس اور نشان دے سکتے ہیں، اور یہ ہموار حرکت میں سب سے مستحکم ہے۔ اسکرول سے جڑی ویڈیو چکر میں جھلملائے یا ہلے نہیں، اس لیے استحکام اہم ہے۔ آخری نسخے کے لیے استعمال کریں۔

دونوں کا ایک اصول: پہلے سے ڈھونڈیں، دوسرے سے مقفل کریں۔ معیار ماڈل کے نام کا حصہ نہیں بلکہ الگ --resolution ترتیب ہے، اوپر قیمت والی کمانڈ کی طرح۔ یہی بجٹ کا قابو ہے: منظر کو 720p پر قیمت دیں، کلائنٹ کو 720p مسودہ دکھائیں اور ہاں کے بعد مکمل معیار کی ادائیگی کریں۔

مستقل تنبیہ: ویڈیو اے آئی کورس کی ہر چیز سے تیز بدلتی ہے۔ یہ جولائی 2026 کے بہترین ہیں۔ تعمیر کے دن بہترین انتخاب جانچیں۔

ہر راستے کا ایک اصول: کہانی سے ہر دھڑکن کی ایک تصویر بنائیں، واضح نام سے assets/ فولڈر میں محفوظ کریں، اور یہ آخری خاکہ بننے سے پہلے ہو۔

خالی جگہ بھرنے کے لیے آخر میں لگائی تصاویر ہمیشہ ایسی ہی دکھتی ہیں۔

عملی مشورہ: بہت تصاویر میں تلاش ہو تو مددگار اے آئی کو الگ گفتگو میں بھیجیں اور صرف بہترین چند لائیں۔ مرکزی گفتگو میں چالیس تصاویر اسے بھر دیں گی، جیسا کوڈنگ فوری کورس نے خبردار کیا۔

اجازت پر مختصر بات، کیونکہ کلائنٹ کا کام کاروباری استعمال ہے۔

مفت تصویری سائٹس کے قواعد پڑھنا آپ جانتے ہیں۔ اے آئی تصاویر کے بھی قواعد ہیں۔ بیشتر کمپنیاں فی الحال بنائی چیز کا تجارتی استعمال دیتی ہیں، مگر قواعد کمپنیوں، مفت اور معاوضہ منصوبوں میں مختلف اور وقت کے ساتھ بدلتے ہیں۔ کچھ مفت منصوبے کاروباری استعمال نہیں دیتے، اس لیے انہیں مسوداتی ٹول سمجھیں۔

تقریبا ہر جگہ چند چیزیں ممنوع ہیں: حقیقی لوگوں کے چہرے، دوسری کمپنیوں کے نشانات اور نام دار زندہ فن کار کے انداز کی نقل۔

چار سادہ عادات محفوظ رکھتی ہیں:

1. آخری تصاویر والی خدمت کے موجودہ قواعد پڑھیں۔
2. بنائی چیز کا ریکارڈ رکھیں: استعمال شدہ وضاحت، خدمت اور تاریخ۔ منظرنامے میں بیشتر پہلے ہے۔
3. کلائنٹ کے کام میں پہچانا جانے والا حقیقی شخص یا دوسری کمپنی کا نشان کبھی نہ رکھیں۔
4. کلائنٹ کو بتائیں کون سی تصاویر اے آئی نے بنائیں۔ حوالگی نوٹ کا ایک جملہ بعد کی ہر ناخوش گوار گفتگو روکتا ہے۔

یہ قانونی مشورہ نہیں۔ ضابطہ بند صنعت کے کلائنٹ کے لیے حقیقی وکیل ہوتے ہیں۔ مگر یہ چار عادات پیشہ ور کام کا معمول کا معیار ہیں۔

10۔ موبائل بنیادی آلہ ہے

اے آئی ویب سائٹ کا ہر نمونہ جو آپ نے دیکھا چوڑے کمپیوٹر پردے پر ریکارڈ ہوا۔ آپ کی ویب سائٹ کے بیشتر ملاقاتی ایک ہاتھ میں فون رکھیں گے۔

اس کتاب کے تقریبا ہر قاری کے لیے فون دوسرا پردہ نہیں، اصل پردہ ہے۔ صرف لیپ ٹاپ پر اچھی سائٹ صرف بنانے والے کو متاثر کرتی ہے۔

ایک خیال دونوں پردوں کا ڈیزائن سادہ بناتا ہے:

وہی کہانی، مختلف شکل کے لیے دوبارہ عکس بند۔

فون نسخہ بنانے والا ہدایت کار نئی کہانی نہیں لکھتا۔ مناظر رہتے ہیں، ہر منظر کا چوکھٹا بدلتا ہے۔ عملی مطلب:

• کہانی نہیں بدلتی۔ جوتے کا ڈبہ، چھانٹی، توازن، وضاحت، شخصیت، ملاقات طے کرنا، ہر آلے پر چھ کے چھ۔ مفید آزمائش: دھڑکن فون پر چھوڑی جا سکے تو وہ سجاوٹ تھی، کہانی نہیں۔ کمپیوٹر نسخے سے بھی ہٹائیں۔
• تصاویر دوبارہ لی جاتی ہیں۔ چوڑی ویڈیو کو دبا کر نہیں، اسی موضوع کی لمبی ویڈیو بنائیں۔ معاوضہ راستوں میں دونوں شکلیں اور دونوں کی ادائیگی، اس لیے بجٹ میں رکھیں۔ مفت راستوں میں آغاز سے دونوں شکلیں چنیں۔
• خاکہ کہاں بدلے گا جان بوجھ کر طے کریں۔ اے آئی کو صاف کہیں: "768 نقاط سے تنگ پردوں پر لمبی ویڈیو، ہر حصہ پوری چوڑائی، توازن کی حرکت بہت بڑی، کیونکہ فون پر وہی پورا منظر ہے۔" پھر براؤزر کھڑکی تنگ اور چوڑی کھینچ کر تبدیلی کا لمحہ دیکھیں۔ ہموار یا بدصورت نظر آتا ہے، اس لیے تصور 11 کا کام ہے۔
• انگوٹھے ماؤس کے اشارے نہیں۔ بٹن انگوٹھے کے لیے بڑے ہوں۔ اہم چیز کو منڈلانا نہ چاہیے کیونکہ فون پر منڈلانا نہیں۔ متن چٹکی سے بڑا کیے بغیر پڑھا جائے۔ ان میں ناکامی انداز نہیں بلکہ بیشتر ملاقاتیوں کے لیے خراب سائٹ ہے۔

فون نسخہ کب بنائیں؟ کمپیوٹر نسخے کے فورا بعد اسی کاری نشست میں، جب اے آئی ہر فیصلہ یاد رکھتی ہے۔ دوسرے دن یا ہفتے بھر کے دوسرے کام کے بعد نہیں۔ دو الگ نشستیں دو قدرے مختلف ویب سائٹس بناتی ہیں اور کلائنٹ سے پہلے آپ کو معلوم نہیں ہوگا۔

پوری تعمیر میں جگہ؟ ڈیزائن طے ہونے کے فورا بعد اور جانچ شروع ہونے سے پہلے:

computer version → phone version → screenshots at both widths → audit → second opinion → publish

ترتیب کی سادہ وجہ: جانچ دونوں نسخوں کو جانچے۔ فون نسخہ جائزے کے بعد چھوڑیں تو آدھی ویب سائٹ کا جائزہ ہوا۔

ایک صفحے سے کئی تک: کئی صفحات اور راستہ بندی

اب تک ہر چیز جان بوجھ کر ایک صفحے پر سکھائی گئی کیونکہ یہ عادات وہاں آسان ہیں۔

مگر حقیقی کلائنٹ کام بڑھتا ہے۔ عائشہ آخر خدمات کا صفحہ، مضامین کا حصہ اور شاید ہر تخصص کا صفحہ چاہیں گی۔

اچھی خبر: سیکھی چیز نہیں بدلتی۔ کئی صفحات والی سائٹ نئی قسم نہیں۔ وہی کام ہر صفحے پر ایک بار، ساتھ تین نئے قواعد۔

قاعدہ 1: ہر صفحے کو وجود کی اپنی وجہ اور کہانی چاہیے۔

صفحات بڑھانے کا غلط طریقہ ایک کہانی کو ٹکڑے کرنا ہے، جس سے "تعارف" صفحے پر دو تنہا پیراگراف رہ جاتے ہیں جو اسکرول میں تھے۔

درست طریقہ "ہر پردے پر ایک خیال" کی آزمائش ایک درجہ اوپر استعمال کرتا ہے۔ نیا صفحہ تب بنتا ہے جب ملاقاتی کا کام مختلف ہو۔ خدمات کی تفصیل موازنہ، مضامین پڑھنا، دفتر ڈھونڈنا؛ تین کام، اس لیے تین صفحات۔

آزمائش میں کامیاب ہر صفحے کو تصور 8 کی طرح لکھی اور منظور اپنی کہانی ملتی ہے، جو اپنے عمل پر ختم ہوتی ہے۔

سب پہلے ایک منصوبے میں لکھیں: ہر صفحہ، کام اور دھڑکنیں۔ دوسرا صفحہ بنانے سے پہلے منصوبہ منظور کریں۔

پھر فہرست سجاوٹ کے بجائے منصوبے سے سیدھی آتی ہے۔ مختصر رکھیں، اشیا کو ملاقاتی کے کام کا نام دیں اور ہر صفحے پر یکساں رکھیں۔

محتاط کام کو لاپروا سے الگ کرنے والی چھوٹی بات: "صفحہ نہیں ملا" پردہ بھی ڈیزائن کریں۔ یہ صفحہ ہے، اسے بھی وہی توجہ چاہیے۔

قاعدہ 2: پوری سائٹ میں ایک شکل۔

یہاں Hallmark کا مرکزی خیال الٹ جاتا ہے اور لوگ الجھتے ہیں، اس لیے آہستہ پڑھیں۔

مختلف کلائنٹس کے درمیان مہارت یکسانیت سے لڑتی ہے۔ دو کلائنٹس کی ویب سائٹس ایک ڈھانچہ نہ بانٹیں۔

ایک کلائنٹ کی سائٹ کے اندر یکسانیت ہی مطلوب ہے۔ پانچ صفحات ایک عمارت کے پانچ کمروں جیسے ہوں: وہی رنگ، فونٹس، فاصلے، سب ایک design.md کے زیر حکم۔

جرات مندانہ لمحہ خاص رہے اور مرکزی صفحے پر ہو۔ ہر صفحے پر پوری قوت سے دہرائیں تو خاص نہیں، دیواری نقش بن جاتا ہے۔

عمل میں شکل طے کرنے کے لیے مرکزی صفحہ پہلے بنائیں۔ پھر ہر دوسرے صفحے کے لیے کہیں: "وہی ڈیزائن فائل، وہی شکل، نئی کہانی۔"

دوسری اے آئی سائٹ کا جائزہ لے (تصور 12) تو خاص طور پر پوچھیں کیا صفحات یکساں محسوس ہوتے ہیں۔ صفحات کے چھوٹے فرق بنانے والا کام کے اندر سے نہیں دیکھ سکتا۔

قاعدہ 3: ویب پتے صرف فائلیں ہیں، جب تک نقل مسئلہ نہ بنے۔

ایک بات مشکل لگتی مگر نہیں: سادہ ویب سائٹ میں فائل ہی پتہ ہے:

• فائل index.html مرکزی صفحہ ہے
• فائل services.html پتے /services.html پر ہے
• فائل articles/index.html پتے /articles پر ہے

روابط انہیں جوڑتے ہیں اور میزبان فولڈر کو جوں کا توں آن لائن رکھتا ہے۔ کوئی نظام نہیں سیکھنا۔ ہمیشہ یہاں سے شروع کریں۔

صفائی کی ایک ترتیب: اگر /services کو /services.html پر ترجیح دیں تو صفحات کے ساتھ vercel.json فائل میں { "cleanUrls": true } رکھیں۔ پھر Vercel پتوں سے .html ہٹا دیتا ہے۔ یہ طے شدہ طور پر بند ہے، اس لیے نہ چھیڑیں تو کچھ نہیں ٹوٹتا۔

کئی صفحات کی اصل مشکل پتے نہیں بلکہ نقل ہے۔ فہرست اور فوٹر ہر فائل میں الگ نقل ہیں۔ ایک فہرست کی پانچ نقول، قدرے مختلف ہونے کے پانچ مواقع؛ کسی دن ایک صفحے پر پرانا ربط رہ جائے گا۔

کوڈنگ فوری کورس سے یہ احساس جانتے ہیں: ایک بات تیسری بار سمجھائیں تو علم ایک جگہ رہنا چاہتا ہے۔

دو جواب، ہلکے سے بھاری:

• ہلکا جواب: سادہ فائلیں رکھیں اور خودکار جانچ شامل کریں جو صفحات کی فہرستیں یکساں نہ ہوں تو محفوظ نہ کرے۔ اب اختلاف محض بعید نہیں، ناممکن ہے۔
• بھاری جواب: چند سے زیادہ صفحات یا باقاعدہ نئے مضامین پر ایسے نظام میں جائیں جو فہرست ایک بار لکھ کر دوبارہ استعمال کرے۔ Astro اس سائٹ کے لیے مناسب ہے، اور اے آئی ایک ہدایت پر ترتیب اور موجودہ صفحات منتقل کرسکتی ہے۔

فیصلہ وہی ہے جو کوڈنگ فوری کورس نے ٹولز کے بارے میں سکھایا: بھاری نظام تب لیں جب حقیقی مسئلہ اس کا حق بنائے، پہلے نہیں۔

باقی سب ہر صفحے پر ایک بار دہرایا جاتا ہے: دونوں چوڑائیوں کی تصاویر، جائزہ، فون نسخہ، سائٹ نقشہ اندراج، وزن کی حد اور لاگت کی ایک سطر۔ زیادہ صفحات کا مطلب زیادہ سطح ہے، سیکھنے کے زیادہ خیالات نہیں؛ اسی لیے ایک سے شروع کیا۔

---

حصہ 4: ڈیزائن کی تصدیق

11۔ بصری تصدیقی لوپ

پوری کتاب کا اہم ترین نمونہ ایک لوپ ہے: کوشش، جانچ، درستگی، تکرار۔ اے آئی کام کرتی، کوئی چیز جانچتی، اور ناکامی کا پیغام اگلی ہدایت بنتا ہے۔ جانچ کامیاب ہونے تک اے آئی چلتی رہتی ہے، درمیان میں کوئی نہیں۔

کوڈنگ فوری کورس میں جانچ کار آزمائش تھی۔ ڈیزائن کو یوں جانچنا ناممکن لگتا تھا کیونکہ "یہ درست دکھتا ہے" کمپیوٹر کی کامیابی یا ناکامی نہیں۔

یہ تصور اسے درست کرتا ہے۔ نرم سے سخت تین جانچ کار:

جانچ کار 1: صفحاتی تصویر، اے آئی کو آنکھیں دیں۔

یہ کورس کی واحد سب سے قیمتی اور سادہ عادت ہے۔ تعمیر کے ہر دور کے بعد اے آئی مکمل صفحے کی تصویر لے کر اسے دیکھتی ہے، کوڈ کو نہیں۔

یہ اتنا اہم کیوں؟ اپنا کوڈ پڑھتی اے آئی نہیں بتا سکتی کہ دو متنی حصے ایک دوسرے پر بیٹھے ہیں، ویڈیو لوڈ نہ ہوئی، بٹن پس منظر کے رنگ جیسا ہے یا تنگ پردے پر خاکہ بکھر گیا۔

تصویر پر ایک نظر چاروں فورا پکڑتی ہے۔

اسی لیے Kimi K3 ڈیزائن موازنے جیتتی ہے، اور Anthropic کی مہارت اسے قابل نقل جملے میں سمیٹتی ہے: "ایک تصویر 1000 ٹوکن کے برابر ہے۔" ٹوکن وہ قیمت ہیں جو اے آئی پڑھنے میں دیتی ہے۔ یہ محاورہ نہیں بلکہ دعوی ہے کہ دیکھنا کوڈ پڑھنے سے بہتر اور سستا بھی ہے۔

قواعد کی فائل میں رکھ کر خودکار بنائیں:

ہر اہم تبدیلی کے بعد صفحے کی تصویر 1440 نقاط اور 390 نقاط چوڑائی پر لیں، اور مکمل کہنے سے پہلے دونوں دیکھیں۔

دونوں ٹولز یہ کرسکتے ہیں۔ اپنے ٹول سے Playwright نامی پروگرام ترتیب دلوائیں۔ پورا کام تقریبا بارہ سطروں کا کوڈ ہے جو ایک بار لکھتا ہے: براؤزر کھولنا، ہر چوڑائی پر صفحہ لوڈ، تصویر محفوظ، بند۔

دو تفصیلات تصاویر کو واقعی مفید بناتی ہیں۔ صرف پہلا دکھنے والا حصہ نہیں، پورا صفحہ لیں کیونکہ اسکرول کہانی نیچے رہتی ہے۔ سائٹ آن لائن ہو (تصور 13) تو کمپیوٹر کی نقل نہیں، زندہ صفحے کی تصاویر لیں۔

جانچ کار 2: جائزہ، ذوق کو فہرست بنائیں۔

کمانڈ audit صفحہ پڑھ کر مخصوص مسائل کی فہرست دیتی ہے۔ کچھ بدلتی نہیں، صرف بتاتی ہے۔

لوپ کو عین فہرست چاہیے کیونکہ ہر نکتہ اگلی ہدایت ہے۔ بنائیں، جائزہ لیں، فہرست درست کریں، دوبارہ جائزہ؛ فہرست خالی ہونے تک۔

دیکھیں کیا ہوا۔ "اسے کم عام بنائیں" کبھی ناکام نہ ہونے والی ہدایت ہے، اس لیے کچھ نہیں چلا سکتی۔ "یہ سات مخصوص مسائل درست کریں" مکمل اور جانچی جاسکتی ہے۔ پہلی قسم کے جملے کو دوسری میں بدلنا پوری ترکیب ہے۔

جانچ کار 3: خودکار اصول، ہمیشہ درست رہنے والی باتوں کی ضمانت۔

کچھ باتیں اے آئی کے فیصلے پر نہیں چھوڑی جاسکتیں۔ انہیں ہر بار درست ہونا ہے۔ کوڈنگ فوری کورس نے انہیں پہچاننا اور خودکار نافذ کرنا سکھایا تاکہ اے آئی چاہے بھی تو چھوڑ نہ سکے۔

ویب سائٹ کے عام اصول:

• ہر تصویر کے ساتھ متنی وضاحت تاکہ پردہ خواں استعمال کرنے والے جانیں کیا دکھاتی ہے
• کوئی فائل حجم کی حد سے بڑی نہیں
• کچھ محفوظ ہونے سے پہلے سائٹ بغیر خرابی تعمیر ہوتی ہے

کوڈنگ فوری کورس کی تنبیہ: یہ جانچیں اے آئی سے نہیں، خود لکھیں۔ اپنی عادات کے خلاف آزمائش مانگنے پر اے آئی مدد کرتے ہوئے اسے آسانی سے کامیاب بنا دے گی۔

یہاں بہت لوگ خود کو دھوکا دیتے ہیں، اس لیے توجہ سے پڑھیں۔ قواعد کی فائل میں "ہر تصویر کی وضاحت ہونی چاہیے" ایسی ہدایت ہے جس پر اے آئی عموما عمل کرے گی۔ یہ ایسا اصول نہیں جسے وہ توڑ نہیں سکتی۔ فرق بھولنے کے دن نظر آتا ہے۔

حقیقی جانچ چھوٹا پروگرام ہے جو ہاں یا نہیں بتاتا ہے۔ اسے پروجیکٹ میں check-site.mjs کے نام سے محفوظ کریں۔ یہ Node.js ہے جو npx اور Vercel کی وجہ سے پہلے موجود ہے، اس لیے Windows، macOS اور Linux پر یکساں چلتا ہے:

import { readdirSync, statSync, readFileSync } from "fs";
import { join, extname } from "path";

const MAX = 500 * 1024; // 500KB
const MEDIA = [
  ".png",
  ".jpg",
  ".jpeg",
  ".webp",
  ".avif",
  ".svg",
  ".gif",
  ".mp4",
  ".webm",
];
const problems = [];

function walk(dir) {
  // look in every folder, not just this one
  let out = [];
  for (const name of readdirSync(dir)) {
    if (name === "node_modules" || name.startsWith(".")) continue;
    const full = join(dir, name);
    out = statSync(full).isDirectory()
      ? out.concat(walk(full))
      : out.concat(full);
  }
  return out;
}
const files = ["site", "assets"].flatMap(walk); // only what actually publishes

for (const f of files.filter((f) => extname(f) === ".html")) {
  const html = readFileSync(f, "utf8");
  for (const tag of html.match(/<img\b[\s\S]*?>/gi) || []) {
    // even across line breaks
    if (!/\balt\s*=/i.test(tag)) problems.push(`MISSING DESCRIPTION  ${f}`);
  }
}
for (const f of files.filter((f) => MEDIA.includes(extname(f).toLowerCase()))) {
  if (statSync(f).size > MAX)
    problems.push(`TOO BIG  ${f}  ${Math.round(statSync(f).size / 1024)}KB`);
}

if (problems.length) {
  console.error(problems.join("\n"));
  process.exit(1);
}
console.log("All checks passed.");

اسے node check-site.mjs سے چلائیں۔ خرابی ہو تو فائل کا نام چھاپ کر ناکامی پر رک جاتا ہے۔ سب درست ہو تو بتاتا ہے۔

دونوں طرح آزمائیں کیونکہ ناکامی دیکھنا مقصد ہے۔ اچھے صفحے پر یہ All checks passed کہتا ہے۔ اب ایک alt="..." حذف کر کے دوبارہ چلائیں:

MISSING DESCRIPTION  site/index.html

یہ ناکامی لوپ چلاتی ہے۔ اے آئی اسکرپٹ چلا کر MISSING DESCRIPTION: services.html پڑھتی، عین فائل درست اور دوبارہ چلاتی ہے۔ کسی کو دیکھنا یا یاد نہیں رکھنا پڑا۔

اسکرپٹ کی ہر سطر سمجھنا ضروری نہیں۔ اس کا فرق سمجھیں: قواعد کی فائل مانگتی ہے، اسکرپٹ فیصلہ کرتا ہے۔

کام کی غلطیاں سیکھتے ہوئے قواعد بڑھائیں۔ ہر صفحے پر یکساں فہرست۔ صفحے میں حقیقی چلتا رابطہ ربط۔ عنوان اب بھی "Home" نہ ہو۔ ڈاؤن لوڈ پیکج میں چھ قواعد ہیں، ہر ایک اس لیے کہ کبھی کچھ غلط ہوا۔

یہ بھی جانیں کہ یہ کیا نہیں پکڑ سکتا۔ مکمل عائشہ پروجیکٹ میں دھڑکن 3 کا کھاتہ PKR 217,950 تھا جبکہ دھڑکن 4 پر PKR 217,930۔ محاسبہ کار کی ویب سائٹ پر۔ جائزے، اے آئی اور تصاویر نے نہیں پکڑا کیونکہ سب دیکھ رہے تھے صفحہ درست لگتا ہے، اور لگتا تھا۔ تین اعداد جمع کرنے والے شخص نے پکڑا۔

اس لیے ہر قابل جانچ چیز خودکار کریں اور بچی توجہ اس حصے پر خرچ کریں جو کبھی خودکار نہ ہوسکا۔ یہ تسلی کا انعام نہیں، یہی کام ہے۔

پہلی تعمیر سے رکھنے کے قابل قواعد کے دو گروہ۔

گروہ ایک: ہر شخص سائٹ استعمال کرسکے۔ متن اور پس منظر میں پڑھنے جتنا فرق ہو۔ ماؤس کے بجائے کلیدی تختہ چلانے والے دیکھ سکیں کہاں ہیں۔ حرکت کم مانگنے والے آلے پر حرکات رکیں کیونکہ کچھ لوگ بیمار ہوتے ہیں۔ Anthropic کی ڈیزائن مہارت اسے خاموشی سے بنایا فرش کہتی ہے، فخر کے بغیر۔ یہی درست رویہ ہے: یہ کم از کم معیار ہے، خصوصیت نہیں۔

گروہ دو: صفحہ لوڈ ہونے کے لیے کافی ہلکا ہو۔ دنیا کے بیشتر حصوں، بالخصوص پاکستان میں، بہت ملاقاتی درمیانے فون اور فی میگابائٹ قیمت والا ڈیٹا استعمال کرتے ہیں۔ خوبصورت 40 میگابائٹ ویڈیو انہیں متاثر نہیں کرتی، جانے کی وجہ بنتی ہے۔

اس لیے حدود مقرر اور خودکار نافذ کریں:

• پہلی اسکرین کسی ویڈیو سے پہلے تقریبا 1 میگابائٹ سے کم میں لوڈ ہو
• ہر ویڈیو کے پیچھے ساکن تصویر تاکہ ویڈیو سے پہلے صفحہ اچھا لگے
• نیچے کی تصاویر صرف ملاقاتی کے وہاں اسکرول پر لوڈ ہوں
• خود چلنے والی ویڈیو خاموش ہو، کیونکہ اچانک آواز لوگ ٹیب بند کراتی ہے

آپ کے تیز رابطے پر شاندار مگر ملاقاتی کے فون پر ناکام سائٹ بیشتر سامعین کے لیے ناکام ہے۔ ذوق کے برخلاف کمپیوٹر ہر بات جانچ سکتا ہے۔

جہاں آپ اب بھی کھڑے ہیں۔ لوپ درست اور غیر عام نتیجے تک پہنچتا ہے، اس کلائنٹ کے لیے درست تک نہیں: کیا صفحہ عائشہ جیسا، جرات مندانہ لمحہ مؤثر، کہانی کی دھڑکنیں سانس لیتی ہیں۔ یہ فیصلہ کبھی سونپا نہیں جاسکتا، اور اوپر تیسرا یقین وجہ بتاتا ہے: بھروسا عین قابل جانچ حد تک۔ لوپ کا تحفہ یہ ہے کہ آپ کا فیصلہ صرف جہاں ضروری ہو وہاں خرچ کرتا ہے۔

12۔ مختلف ماڈلز سے ڈیزائن جائزہ

کوڈنگ فوری کورس کا اصول: جس اے آئی نے چیز بنائی وہ اس کی بدترین جائزہ کار ہے۔

ڈیزائن اصول کو مضبوط کرتا اور تصور 1 وجہ بتاتا ہے: اے آئی اپنی عادات نہیں دیکھ سکتی۔ اندر سے پسندیدہ شکل عادت نہیں بلکہ "ویب سائٹس ایسی ہوتی ہیں" لگتی ہے۔ مختلف سیکھنے والی اے آئی فورا پکڑتی ہے۔

ترتیب یوں:

1. ایک اے آئی بنائے۔ Kimi K3 یا Claude صفحہ بنائے۔
2. مختلف کمپنی کی اے آئی جائزہ لے۔ وہی اے آئی دوبارہ یا اسی کمپنی کا بہن ماڈل نہیں، واقعی مختلف۔ جائزہ کار کو اصل خلاصہ، design.md اور صفحاتی تصاویر دیں۔ صرف کوڈ پڑھنے والا ڈیزائن جائزہ اداکاری ہے۔ سخت سوال مانگیں: صفحے کا خلاصے سے موازنہ، اے آئی جیسا دکھنے کی تین جگہیں اور وجہ، فون پر کہانی، رنگوں اور فونٹس کا design.md سے درست میل، نتائج فائل میں، کوئی تبدیلی نہیں۔
3. بنانے والا نتائج پڑھ کر درست کرے۔ دونوں ماڈلز مختلف ہوں تو آپ فیصلہ کریں۔

مختلف کمپنی پر اصرار کیوں؟ تصور 1 کی آزمائش میں Kimi K3 صفحات نے دوسری اے آئی جیسی عادات دکھائیں، غالبا اسی سے سیکھیں۔ دو ماڈلز ایک کمپنی کے بغیر بھی اندھا مقام بانٹ سکتے ہیں۔ دوسری جگہ کا جائزہ کار وہ چیز پکڑنے کا سستا راستہ ہے جو بنانے والا خود میں نہیں دیکھتا۔

ایک اضافی فائدہ: فائل میں محفوظ جائزہ کلائنٹ کو دکھا سکتے ہیں۔ "آزاد جائزے نے پانچ مسائل ڈھونڈے اور سب درست ہیں" کہنا بہت اچھا ہے۔

---

حصہ 5: اجرا

13۔ ڈیپلائے: فولڈر سے ربط تک

کمپیوٹر کے فولڈر میں ویب سائٹ مشق ہے۔ حقیقی پیشکش تب شروع ہوتی ہے جب دوسرے شہر کا شخص اسے فون پر کھول سکے۔

ویب سائٹ آن لائن کرنا کبھی الگ پورا کورس تھا: سرورز، پتے، حفاظتی اسناد۔ آج اے آئی آپ کے لیے کرسکتی ہے۔

کورس خدمت Vercel استعمال کرتا ہے۔ اس کا مفت منصوبہ سیکھنے اور کلائنٹ کو کام دکھانے کے لیے کافی ہے، اور اے آئی اسے سیدھا سنبھال سکتی ہے۔ ایک بار اکاؤنٹ بنائیں، پھر اے آئی سے کہیں:

Connect to Vercel via the CLI and deploy this project.

اے آئی ضروری چیز نصب، سائن ان کے لیے ایک بار براؤزر کھول اور سائٹ آن لائن کردیتی ہے۔

دو کمانڈز اہم ہیں، اور ان کا فرق مشق اور حقیقی پیشکش کا فرق ہے:

• کمانڈ vercel عارضی پیش منظر پتہ بناتی ہے، کلائنٹ کو "یہ دیکھیں" کے ساتھ بھیجنے کے لیے۔
• کمانڈ vercel --prod سائٹ حقیقی کاروباری پتے پر رکھتی ہے۔

ہر تبدیلی پر تازہ پیش منظر ملتا ہے۔ کلائنٹ کے ساتھ تال: بنائیں، پیش منظر بھیجیں، رائے لیں، دوبارہ بنائیں، نیا پیش منظر۔ منظوری تک حقیقی سائٹ نہیں بدلتی۔

تین عادات کافی ہیں:

• پیش منظر تبدیلی کے لیے، حقیقی پتہ مکمل چیزوں کے لیے۔ حقیقی پتے پر زیر تکمیل کام نہ دکھائیں اور کلائنٹ کو پرانے پیش منظر پر نہ چھوڑیں۔
• آخری جانچ زندہ صفحے پر کریں، کمپیوٹر پر نہیں۔ آن لائن ہونے پر فونٹس، ویڈیوز اور روابط نئے طریقوں سے ناکام ہوتے ہیں۔ تصور 11 کی تصویری جانچ دونوں چوڑائیوں پر زندہ پیش منظر پتے کی کریں، انسان سے پہلے۔
• دوسری خدمات یہی کام کرتی ہیں۔ Netlify، Cloudflare Pages اور GitHub Pages اسی طرح چلتی ہیں۔ مہارت اے آئی سے اشاعت کروانا ہے؛ کمپنی ترجیح ہے۔

اپنا ویب پتہ حقیقی اختتامی لکیر ہے۔

کوئی کلائنٹ .vercel.app پر ختم پتے والی سائٹ کو مکمل نہیں سمجھتا، اور درست ہے۔ پتہ برانڈ کا حصہ ہے۔

حاصل کرنا مختصر کام ہے:

1. کسی فروخت کنندہ سے پتہ خریدیں۔ پاکستان میں .pk پتہ PKNIC اور .com کسی بین الاقوامی فروخت کنندہ سے۔
2. اسے Vercel پروجیکٹ کی ترتیبات میں شامل کریں۔
3. خدمت Vercel دو یا تین قدریں دکھاتی ہے جنہیں فروخت کنندہ کی ترتیبات میں نقل کرنا ہے۔ اے آئی پردوں سے گزار سکتی ہے۔

چلنے میں چند منٹ سے چند گھنٹے لگتے ہیں۔

دو پیشہ ور عادات ساتھ ہیں۔ پتہ کلائنٹ کے نام اور ان کے زیر اختیار اکاؤنٹ میں خریدیں۔ کلائنٹ کے ویب پتے کا مالک آزاد کارکن اچھی نیت سے بھی یرغمال بنا لیتا ہے۔ حفاظتی تالا یہاں خودکار ہے، اس لیے براؤزر کی حفاظتی تنبیہ ہو تو پتے کی ترتیبات غلط ہیں، سائٹ نہیں۔

یقینی بنائیں کہ لوگ اسے ڈھونڈ سکیں۔ نہ ملنے والی سائٹ خاموشی سے ناکام ہوتی ہے۔ ایک مختصر مرحلہ بنیادیں ڈھانپ کر ہمیشہ فائدہ دیتا ہے:

• حقیقی صفحاتی عنوان۔ "عائشہ رحمان، چارٹرڈ اکاؤنٹنٹ، لاہور"، "Home" نہیں۔ یہی تلاش نتائج اور براؤزر ٹیب میں آتا ہے۔
• صفحے کی ایک جملے کی وضاحت، تلاش نتائج کی فہرست دیکھتے انسان کے لیے۔
• اشتراکی تصویر۔ بیشتر سبق اسے چھوڑتے ہیں اور یہاں یہی اہم ہے۔ WhatsApp پر ربط بھیجیں تو تصویر اور عنوان کا چھوٹا کارڈ آتا ہے۔ خوبصورت کارڈ والا ربط کھلتا ہے، خالی سرمئی نہیں۔ میڈیا پائپ لائن کا ایک اور کام: صفحے کے اوپر کو 1200 ضرب 630 نقاط میں برآمد اور og.png کے نام سے محفوظ کریں۔
• تلاش گاہوں کے لیے صفحات کی فہرست، جو اے آئی چند سیکنڈ میں بناتی ہے، اور کلائنٹ کے اپنے اکاؤنٹ سے Google پر اندراج۔

اشتراکی کارڈ کی صاف آزمائش: پیش منظر ربط WhatsApp گفتگو میں چسپاں اور نتیجہ دیکھیں۔

14۔ کلائنٹ کا کام بہاؤ

اب تک آپ اپنے لیے بنا رہے تھے۔ کوئی معاوضہ دے تو اسی کام کے گرد پیشہ ور عادات درکار ہیں۔

یہ تصور انہی عادات کو حصہ 6 کے پروجیکٹ سے بتاتا ہے: لاہور کی محاسبہ کار عائشہ رحمان اپنی پیشہ ورانہ ویب سائٹ جاری کررہی ہیں۔

چھ قدم:

1. تعمیر سے پہلے تحریری اتفاق۔ ایک صفحہ کافی: سائٹ کس کے لیے، ملاقاتی کا ایک عمل، منظور کہانی دھڑکنیں، اور "مکمل" میں کتنے صفحات، فون نسخہ، اشاعت کی جگہ اور تصاویر دینے والا۔ چھ ہفتے بعد یاد مختلف ہو تو یہی صفحہ فیصلہ کرتا ہے۔ یاد معاہدہ نہیں۔
2. برانڈ ڈھونڈیں، پھر تصدیق۔ تصور 7 کا اصول: آن لائن چیز مسودہ، کلائنٹ کی بھیجی آخری۔ عائشہ کی پرانی سائٹ رنگ دیتی ہے مگر فون پر معلوم ہوتا ہے نشان بدل رہا ہے۔ ایک رابطے نے پورا پہلا نسخہ غلط بننے سے بچایا۔
3. کہانی فروخت کریں، مکمل صفحے کی تصویر نہیں۔ تعمیر سے پہلے چھ دھڑکنیں، ہر ایک سطر بھیجیں۔ کہانی منظور کرنے والا کلائنٹ اصل مواد پر رائے دیتا ہے۔ پہلے مکمل ڈیزائن دیکھنے والا نیلے کے درست رنگ پر۔ دکھانے کی ترتیب کم سمجھی گئی طاقت ہے۔
4. انہیں اپنے فون پر جائزہ دلوائیں۔ گفتگو میں تصاویر نہیں؛ پیش منظر ربط بھیج کر کہیں "فون پر کھولیں۔" یہی آلہ ان کے گاہک استعمال کرتے ہیں، اور فون نسخے کا کام خاموشی سے خود فروخت ہوتا ہے۔
5. چار خانوں سے قیمت۔ ماڈل تقریبا کچھ نہیں، رسید پر پیسے گنوانے کے بجائے جذب کریں۔ ذوق آپ کا وقت اور مرکزی سطر۔ میڈیا صاف گفتگو: "ذخیرہ تصاویر شامل، ایسی مخصوص ویڈیو X اضافی۔" تخلیق سے پہلے قیمت جانچنے سے X اندازہ نہیں، پراعتماد عدد ہے۔ میزبانی ابھی مفت، حوالگی پر ان کا اکاؤنٹ اور ویب پتہ۔
6. درست حوالگی۔ سب دیں: فائلیں، ان کے زیر اختیار اکاؤنٹ میں شائع سائٹ، ان کے نام ویب پتہ، design.md، اور چاہیں تو سادہ ملاقاتی اعداد۔

ایک چیز اور: اے آئی سے سائٹ کی چھوٹی تبدیلیاں مانگنے کا ایک صفحہ۔

یہ اس دور کی نئی چیز ہے اور کلائنٹ یاد رکھتے ہیں۔ آپ صرف ویب سائٹ نہیں بلکہ اس کی دیکھ بھال کی صلاحیت دے رہے ہیں۔

بڑھتا ہوا قدم: پہلے کلائنٹ کے بعد پورا عمل مہارت کی فائل میں محفوظ کریں؛ معاہدے کا سانچہ، برانڈ تلاش، کہانی کی وضع، جائزہ سوالات، اشاعت قدم، حوالگی فہرست۔ دوسرا کلائنٹ آدھی محنت اور پانچویں تک فائل بیشتر کام کرتی ہے۔

یہ ایک آزاد کارکن کے حجم پر اس کتاب کا مرکزی خیال ہے: رہنے والی چیز ویب سائٹ نہیں، ویب سائٹس بنانے والا نظام ہے۔

15۔ لاگت کا نظم

کوڈنگ فوری کورس نے اے آئی گفتگو سستی رکھنا سکھایا۔ ویب سائٹس دو نئی لاگتیں بڑھاتی ہیں: ہر تصویر کی قیمت اور دوسری کمپنی کی اے آئی سے بدلتی رعایت۔ تین عادات انہیں سنبھالتی ہیں۔

تصاویر بنانے سے پہلے قیمت لگائیں۔

حیرت یہ ہے کہ Kimi K3 کی تعمیر میں پوری ویب سائٹ کا تمام کوڈ چائے کے کپ سے سستا ہے۔ ایک مخصوص ویڈیو باقی سب کے مجموعے سے مہنگی ہوسکتی ہے۔ بجٹ تصاویر ہیں، اے آئی نہیں۔

خوش قسمتی سے خرچ سے پہلے قیمت جانچ سکتے ہیں۔ کمانڈ higgsfield generate cost ویڈیو بنائے بغیر قیمت بتاتی ہے۔ منظرنامہ نرخ نامہ بنتا ہے: چھ دھڑکنیں، چھ قیمتیں، ایک مجموعہ، خرچ سے پہلے فیصلہ۔

بھولنے سے بچنے کو قواعد کی فائل میں رکھیں:

کوئی تصویر یا ویڈیو بنانے سے پہلے ہر منصوبہ بند منظر کی قیمت کا اندازہ اور مجموعہ بتائیں۔

ہر جگہ یہی نظم: کچھ بننے سے پہلے ہر دھڑکن، راستہ اور شکل درج کریں، پورا مجموعہ دیکھیں، پھر آخری معیار کی ادائیگی۔ مہنگی غلطی ایک تصویر نہیں بلکہ مطلوبہ چیز آہستہ سمجھتے ہوئے تیس بنانا ہے کیونکہ پہلے لکھا نہیں۔ فون نسخہ فہرست دوگنی کرتا ہے؛ اسے نرخ میں رکھیں، بعد کی حیرت میں نہیں۔

دوسری کمپنی کی اے آئی گفتگو کی لاگت واپس لاتی ہے۔ Kimi K3 پہلے دیکھے متن کے لیے پہلی بار سے تقریبا دس گنا کم لیتی ہے۔ یہی رعایت اسے سستا محسوس کراتی ہے اور صرف گفتگو کا آغاز نہ بدلنے تک۔ گفتگو دوبارہ شروع یا اوپر ترمیم کریں تو ہر چیز پوری قیمت پر۔

دو عادات نکلتی ہیں۔ تصور 4 کے مطابق CLAUDE_CODE_AUTO_COMPACT_WINDOW مقرر کریں تاکہ خودکار صفائی ماڈل کی یاد کا حجم جانے۔ سیکھی عادت جاری رکھیں: استعمال کا عدد دیکھیں، قدرتی وقفوں پر صفائی اور اہم حقائق پہلے فائلوں میں، کیونکہ فائلیں صفائی میں غائب نہیں ہوتیں۔

جانیں ایک پروجیکٹ کی حقیقی لاگت کیا ہے۔

پہلی مکمل ویب سائٹ کے بعد حقیقی اعداد لکھیں: اے آئی اور تصاویر پر خرچ، اور کام کے گھنٹے۔

حصہ 6 کی عائشہ سائٹ پر چند ڈالر اے آئی وقت، اور تصویری بجٹ صفر، ایک ڈالر سے کم یا پہلے جانچی ویڈیو قیمت ہے۔

یہ عدد سب بدلتا ہے۔ "کیا میں مشق کی قیمت اٹھا سکتا ہوں؟" کو "ہاں، ہر ہفتے" بناتا ہے۔ کلائنٹ ویب سائٹ کی قیمت پوچھے تو اندازے کے بجائے عدد دیں گے۔

---

حصہ 6: ایک مکمل عملی مثال، دو بار

اب سب جوڑتے ہیں۔ ایک حقیقی ویب سائٹ خالی فولڈر سے زندہ ویب پتے تک، ایک بار Claude Code اور ایک بار OpenCode میں۔ دونوں کا فرق نشان زد ہے۔

مکمل پروجیکٹ ڈاؤن لوڈ کریں

نیچے ہر چیز فائلوں کی وضاحت نہیں بلکہ حقیقی فائل ہے: چلتی ویب سائٹ اور ڈیزائن شدہ 404 صفحہ، اشتراکی کارڈ، دو تصاویر، چھ دھڑکنوں کی کہانی ریڑھ، برانڈ قواعد والی design.md، قواعد فائل، Hallmark جائزہ (پہلے سات نتائج، پھر صفر)، دوسری کمپنی کی اے آئی کا آزاد جائزہ، لاگت ریکارڈ، جانچ کار، صفحاتی تصویر اسکرپٹ اور حقیقی صفحے کی دونوں چوڑائیوں پر مکمل تصاویر۔

عائشہ پروجیکٹ ڈاؤن لوڈ کریں۔ کھولیں، پھر npm run check چلائیں۔ ایک alt="..." حذف کر کے دوبارہ چلائیں اور ناکامی دیکھیں۔

پہلے docs/defect-log.md پڑھیں۔ یہ کسی وقت جاری ہونے والی آٹھ خرابیوں اور ہر ایک کو پکڑنے والے کا نام دیتی ہے۔ سب سے سنجیدہ، محاسبہ کار کا نہ ملنے والا کھاتہ، کسی خودکار جانچ نے نہیں پکڑا۔ حساب کرتے شخص نے پکڑا۔ پورا کورس اسی نسبت کی دلیل دیتا ہے۔

تعمیر

کلائنٹ لاہور کی محاسبہ کار عائشہ رحمان ہیں۔ وہ اے آئی ٹولز سے اپنا کام دوبارہ جاری کررہی ہیں، اور موجودہ ویب سائٹ پرانے نشان کا ایک صفحہ ہے۔

وہ چاہتی ہیں کہ شہر کے چھوٹے کاروباری اسکرول پر دو باتیں محسوس کریں: یہ شخصیت میری الجھن سمجھتی ہے، اور اسے پہلے ہی حل کرچکی ہے۔

منظور شدہ کہانی ریڑھ (تصور 8، عائشہ کے ساتھ مسودہ، چھ دھڑکنیں):

1. جوتے کا ڈبہ، رسیدیں، سب کا چھپا راز، گرم اور انسانی منظر
2. چھانٹی، بے ترتیبی سے زمرے
3. خود ملنے والا کھاتہ، جرات مندانہ لمحہ: اسکرول پر متوازن ہوتی متحرک کھاتہ سطر
4. ماہانہ وضاحت، ایک صاف بیان، ایک پرسکون عدد
5. شخصیت، عائشہ، دفتر، اسناد، لاہور کی اصل روشنی
6. مشاورت طے کریں، ایک عمل، ایک بٹن

آپ کیا دیں گے:

• وہی کہانی کا کمپیوٹر اور فون نسخہ
• برانڈ رنگ اور فونٹس عین درست
• دھڑکن 6 حقیقی WhatsApp ربط اور پہلے سے لکھے پیغام سے جڑی
• تلاش پذیری کی بنیاد: صفحاتی عنوان، وضاحت، WhatsApp پر اچھا اشتراکی کارڈ
• منظوری کے لیے پیش منظر ربط، حوالگی پر اپنا .pk ویب پتہ

تصاویر: دھڑکن 1، 2، 4 اور 5 کے لیے راستہ 1 کی حقیقی تصاویر۔ 1، 2 اور 4 مفت لائبریری سے۔ دھڑکن 5 ان کے اصل دفتر میں فون سے لی گئی دو تصاویر۔ دھڑکن 3 کی توازن حرکت کوڈ میں، ویڈیو نہیں۔ راستہ 4 کی مخصوص افتتاحی ویڈیو اضافی انتخاب کے طور پر پہلے جانچی قیمت کے ساتھ، فیصلہ عائشہ کا۔ تصور 14 عملی: تصویری بجٹ کلائنٹ سے گفتگو ہے، اکیلا فیصلہ نہیں۔

آٹھ قدم

قدم 1: ویب پروجیکٹ کی قواعد فائل

نظام Claude Code میں /init چلائیں، پھر بنی فائل کو صرف اس چیز تک گھٹائیں جو ماڈل دیکھ کر اخذ نہیں کرسکتا:

# ayesha-practice-site

## Layout

- `site/`: the website source. Single HTML file with embedded CSS/JS until told otherwise.
- `assets/`: all media, named by story beat (e.g. `03-ledger-*`), optimized before use.
- `design.md`: brand constraints and design direction. Read before any design work.
- `docs/plans/story-spine.md`: the approved six-beat spine. The build implements this.

## Critical rules

- Brand constraints in design.md are a spec, not a mood. Never substitute colors or fonts.
- Every image ships with an alt attribute. No asset over 500KB.
- After significant changes, screenshot at 1440px and 390px and review both before reporting done.
- The story spine's beats may not be reordered or dropped without asking.

یہ اہم کیوں: صفحاتی تصویر کا اصول اے آئی کو ہر بار اپنا کام جانچاتا ہے، صرف آپ کے یاد کرنے پر نہیں۔ design.md اصول برانڈ رنگوں کو ایسی چیز نہیں رہنے دیتا جسے اے آئی خاموشی سے بہتر بنائے۔

نظام OpenCode میں یہی مواد AGENTS.md میں۔

قدم 2: ذوق کی تہہ نصب کریں

دونوں ٹولز میں یکساں:

npx skills add Nutlope/hallmark

نظام Claude Code میں پلگ اِن نظام سے Anthropic کا frontend-design پلگ اِن بھی نصب کریں۔ پھر ڈیزائن میں خود مدد کرتا ہے۔ مکمل عمل پر Hallmark کو نام سے بلائیں۔ دونوں ساتھ چلتے ہیں۔

اگر Kimi K3 استعمال کررہے ہیں تو تصور 5 کی تنبیہ یاد رکھیں: دوسری کمپنیوں کے ماڈلز خود مہارت چننے میں کم قابل اعتماد ہیں۔ ہر ڈیزائن قدم پر Hallmark کا نام لیں۔

قدم 3: برانڈ اخذ اور سمت کا مطالعہ

پہلے تصور 7: اے آئی کو عائشہ کی پرانی سائٹ دکھا کر درست رنگ، فونٹس اور نشان مانگیں، ہر ایک کی ثبوت والی کوڈ سطر کے ساتھ۔ گہرا سبز، سنہری اور سیرف فونٹ، ہر ایک کا ثبوت ملتا ہے۔

پھر وہ فون رابطہ کریں جسے کبھی نہیں چھوڑتے۔ عائشہ بتاتی ہیں برانڈ بدل رہا ہے: سبز رہے گا، سنہری گرم عنبری ہوگا، اور نیا نشان درست فائل میں بھیجتی ہیں۔

پھر تصور 6: ان کی دو پسندیدہ ویب سائٹس پر Hallmark کی study چلائیں۔ اپنے برانڈ سمیت تین حوالے، عین وہ عدد جو نقل کے بجائے امتزاج پر مجبور کرتا ہے۔

سب design.md میں جاتا ہے، برانڈ واضح قواعد کے طور پر، تجاویز نہیں۔

دونوں ٹولز میں یکساں۔

قدم 4: منصوبہ بندی موڈ، ریڑھ سے ساخت

منصوبہ بندی موڈ میں جائیں جہاں اے آئی دیکھ مگر بدل نہیں سکتی (Claude Code میں Shift+Tab دو بار، OpenCode میں Tab)۔ کام بتائیں: چھ دھڑکنیں، design.md، فون سب سے اہم، اور کون سا جرات مندانہ لمحہ۔

اے آئی منصوبہ لاتی ہے اور یہاں غلطی مفت پکڑتے ہیں۔ پہلا منصوبہ عام صفحہ ہے: اوپر بڑی تصویر، پھر دھڑکنیں عام حصوں میں دبی۔ یہ بور طے شدہ ڈھانچہ ہے جس نے آپ کی کہانی کا لباس پہنا ہے۔

اس لیے اعتراض کریں:

اسکرول کہانی ہے۔ ہر پردے پر ایک دھڑکن۔ توازن حرکت کو پورا پردہ دیں۔ خصوصیتی خانوں کی قطار کہیں نہیں۔

منصوبہ تازہ ہوتا ہے۔ اب منظور اور فائل میں محفوظ کریں۔

قدم 5: ڈیزائن ماڈل سے تعمیر

نظام Claude Code میں فولڈر کی ترتیبات تصور 4 کے Kimi K3 کی طرف ہیں۔ /status سے تصدیق کریں، /model سے نہیں۔ منصوبہ بندی موڈ چھوڑ کر Hallmark کا نام لیتے ہوئے تعمیر دیں۔ استعمال پر نظر رکھیں؛ K3 طویل لکھتی اور یہ تعمیر کا سب سے لمبا قدم ہے۔

دونوں نسخے اسی نشست میں بنائیں۔ ڈیزائن طے کرنے کو کمپیوٹر پہلے، پھر فورا فون جب اے آئی ہر فیصلہ رکھتی ہے۔ ہر دھڑکن دوبارہ ترتیب اور توازن حرکت فون کا پورا پردہ بنتی ہے۔ براؤزر تنگ اور چوڑا کھینچ کر تبدیلی دیکھیں اور عائشہ کے لیے ریکارڈ کریں۔

نظام OpenCode میں /models لکھیں، OpenRouter سے Kimi K3 چنیں اور بنائیں۔ Hallmark کا وہی نام، استعمال پر وہی نظر۔

ماڈل Kimi K3 گہرا سوچتا ہے، اس لیے Claude نشست سے آہستہ اور طویل۔ مگر نتیجہ نمایاں طور پر اوسط نہیں۔ حسابی لکیر اسکرول پر خود بنتی ہے۔ خصوصیتی خانوں کی ایک قطار بھی نہیں۔

قدم 6: میڈیا مرحلہ

منظرنامے کے مطابق مددگار اے آئی دھڑکن 1، 2 اور 4 کے لیے مفت تصویری لائبریریوں میں ایک روشنی اور مزاج ڈھونڈتی ہے۔ مددگار یہ الگ گفتگو میں کرتا ہے کیونکہ چالیس چھوٹی تصاویر مرکزی گفتگو بھر دیں گی۔ فون سے لی گئی دفتر کی دو تصاویر دھڑکن 5 کے assets/ میں جاتی ہیں۔ ہر فائل کا نام دھڑکن اور حجم حد کے اندر۔

دھڑکن کو بنوائی ہوئی تصویر چاہیے ہوتی تو راستہ 3 پر چند سینٹ یا chatgpt.com پر مفت بناتے۔

عائشہ ویڈیو کو ہاں کہتیں تو یہاں بناتے۔ Gemini Omni Flash سے بات کر کے منظر ڈھونڈیں۔ جائزے کے لیے Seedance پر 720p آخری نسخہ مقفل کریں۔ منظوری پر پہلے دی قیمت میں چوڑی اور لمبی دونوں شکلوں کا مکمل معیار لیں۔

دونوں ٹولز میں یکساں۔

قدم 7: تصدیق، صفحاتی تصاویر، جائزہ، مختلف ماڈل جائزہ

تصور 11 کے تین جانچ کار ترتیب سے۔

صفحاتی تصویر کا اصول خاموشی سے چلتا رہا۔ اب Hallmark کی audit چلائیں۔ پہلا دور سات مسائل پاتا ہے، جن میں ایک صرف ماؤس منڈلانے پر چلتا اور فون پر بالکل ناکام ہے۔ فہرست درست اور دوبارہ چلائیں، خالی ہونے تک۔

پھر تصور 12: دوسری کمپنی کی اے آئی کو خلاصہ، design.md اور صفحاتی تصاویر دیں۔ یہاں Claude، Kimi K3 کے کام کا جائزہ لے کر نتائج فائل میں لکھتا اور کچھ نہیں بدلتا۔

جائزہ کار دو باتیں پکڑتا ہے جو بنانے والا خود نہ دیکھ سکا: دھڑکن 4 کی تصویر کی روشنی باقی سے ٹھنڈی، اور سبز پس منظر پر عنبری بٹن پڑھنا مشکل۔

بنانے والا دونوں درست کرتا ہے۔ اس بار اختلاف حل نہیں کرنا پڑا، مگر سب پڑھیں کیونکہ آخری فیصلہ آپ کا ہے۔

نظام Claude Code میں جائزہ کار دوسرے worktree میں، جیسا کوڈنگ فوری کورس نے دکھایا۔ نظام OpenCode میں وہ اسی پروجیکٹ کا دوسرا منسلک فراہم کنندہ ہے۔

قدم 8: شائع اور عمل محفوظ کریں

فون نسخہ قدم 5 میں کمپیوٹر کے فورا بعد اسی نشست میں بنا، عین تصور 10 کے مطابق؛ اسی لیے قدم 7 نے دونوں چوڑائیاں جانچیں۔

اب اشاعت باقی ہے۔ تلاش پذیری کا کام: عنوان، وضاحت، صفحاتی فہرست، اشتراکی کارڈ۔ صاف آزمائش: پیش منظر ربط WhatsApp گفتگو میں چسپاں اور نتیجہ دیکھیں۔

پھر پیش منظر پتے کے لیے vercel چلائیں، زندہ صفحے کی دونوں چوڑائیوں پر آخری تصاویر لیں، اور عائشہ کو تین لفظ کے ساتھ ربط دیں: "فون پر کھولیں۔"

منظوری کے بعد: vercel --prod، ان کے اکاؤنٹ سے اپنا .pk پتہ، ان کے اکاؤنٹ سے Google اندراج، اور تصور 14 کا پیکج حوالہ۔

آخر بڑھتا قدم۔ پورا عمل مہارت فائل میں محفوظ: کہانی سانچہ، برانڈ سوالات، پہلے جائزہ پھر دوسری رائے کی ترتیب، اشاعتی فہرست۔

عائشہ کے کزن کا کپڑا برآمد کاروبار ہے۔ دوسری ویب سائٹ کل شروع ہوگی اور آدھا وقت لے گی۔

ابھی کیا ہوا

کوڈنگ فوری کورس سے آنے والی چیزیں گنیں: قواعد فائل، منصوبہ بندی موڈ، مہارتیں، مددگار ماڈلز، خودکار جانچیں، دوسری رائے، دوبارہ استعمال کے لیے محفوظ کام۔

اب نئی چیزیں گنیں: ذوق فائل، تصاویر کا راستہ، بطور آزمائش صفحاتی تصویر، اور مکمل نتیجے کے طور پر زندہ ویب پتہ۔

یہ نسبت پورا مقصد ہے۔ آپ ڈیزائنر نہیں بنے؛ جانچ مشین کو نئی قسم کے کام پر لگایا، اور مشین نے اچھے ذوق کی ایک فائل کے ساتھ باقی کیا۔

دونوں ٹولز کے فرق پھر چھوٹے تھے: Kimi K3 تک مختلف ترتیب، منصوبہ بندی موڈ کی مختلف کلید، جائزہ کار کی مختلف جگہ۔ سوچ یکساں تھی۔

سوچ اصل ٹول ہے۔ ترتیبات سجاوٹ ہیں۔

---

اس میں واقعی اچھے کیسے بنیں

کوڈنگ فوری کورس کا وہی اصول: صفحہ پڑھنا بہت کم اور تعمیر تقریبا سب کچھ کرتی ہے۔

مسائل آئیں گے۔ یہ معمول اور سیکھنے کا طریقہ ہے۔ ہر مسئلہ صفحے کے تصور کی طرف لوٹتا ہے:

سامنے آنے والا مسئلہ	کیا درست کریں
"میری ہر سائٹ ایک جیسی لگتی ہے"	ذوق فائل لوڈ نہیں یا نام سے نہیں بلاتے (تصور 5)
"اے آئی نے برانڈ رنگ نظرانداز کیے"	design.md نہیں یا رنگ واضح قواعد نہیں (تصور 7)
"لیپ ٹاپ پر خوب مگر فون پر خراب"	ایک نسخہ بنا کر دبایا؛ کہانی دوبارہ عکس بند کریں (تصور 10)
"صفحہ خوب ہے مگر کسی کو کام معلوم نہیں"	کہانی نہیں یا ایک پردے پر دو خیالات کی لڑائی (تصور 8)
"کم عام بنانے سے کچھ نہیں بدلتا"	ہدایت ناکام نہیں ہوسکتی؛ جائزہ چلا کر فہرست درست کریں (تصور 11)
"تصاویر کے بل نے حیران کیا"	منصوبے سے پہلے تصاویر بنانا شروع کیا (تصورات 9 اور 15)
"اے آئی اور میں واضح غلطی چوک گئے"	دوسری کمپنی کی اے آئی سے دیکھوائیں (تصور 12)
"دن کے آخر Kimi K3 الجھتی اور مہنگی"	اس راستے پر گفتگو صرف آپ صاف کرتے ہیں (تصورات 4 اور 15)
"سائٹ زندہ مگر بٹن بے کار"	آخری دھڑکن کسی چیز سے نہیں جڑی (تصورات 8 اور 11)
"لیپ ٹاپ پر خوب، ملاقاتی کے لیے بھاری"	حجم حد، ویڈیو کے پیچھے ساکن تصویر، تصاویر دیر سے لوڈ (تصور 11)
"پانچ صفحات پانچ ویب سائٹس لگتے ہیں"	ایک design.md سب پر حکم دے (کئی صفحات والا حصہ)

ہر ہفتے ایک ویب سائٹ روز کے آٹھ تصورات سے بہتر ہے۔

حقیقی چیز چنیں: اپنا سوانح صفحہ، دوست کی دکان، خاندانی کاروبار یا مدرسہ انجمن۔ آٹھ قدم چلائیں اور لاگت لکھیں۔

تیسری ویب سائٹ تک قدم، قدم محسوس نہیں ہوتے؛ کام کا طریقہ بن جاتے ہیں۔

آپ سیڑھی پر کہاں ہیں، مہارت کے آٹھ مراحل (کھولنے کے لیے کلک)

مہارت مراحل میں بڑھتی ہے۔ موجودہ مرحلہ اگلی مشق بتاتا ہے۔

مرحلہ	کیسا دکھتا ہے	کہاں سکھایا
مرحلہ 0۔ ذہنیت	اے آئی کی ڈیزائن عادات، دیکھ کر جانچ اور فائل میں ذوق سمجھتے ہیں۔	کورس کے اوپر تین خیالات
مرحلہ 1۔ پہلی ویب سائٹ آن لائن	ایک حقیقی صفحہ، مفت تصاویر، ایسے پتے پر زندہ جسے دوسرے نے فون پر کھولا۔	تصورات 2، 9، 10، 13
مرحلہ 2۔ ذوق لوڈ ہے	Hallmark نصب؛ اپنے صفحے کے مسائل کی فہرست پڑھ کر سب درست۔	تصورات 5 اور 11
مرحلہ 3۔ ہر بار کہانی پہلے	آخری عمل سمیت کہانی لکھے اور منظور کیے بغیر تعمیر نہیں۔	تصور 8
مرحلہ 4۔ جانچ خود چلتی ہے	ہر تعمیر میں صفحاتی تصاویر، جائزہ اور خودکار قواعد، تینوں۔	تصور 11
مرحلہ 5۔ دوسروں کے لیے تعمیر	برانڈ تلاش و تصدیق، دوسری رائے، کلائنٹ فون جائزہ، چار خانوں سے قیمت۔	تصورات 7، 12، 14
مرحلہ 6۔ عمل ایک فائل ہے	پورا عمل مہارت میں، دوسرا کلائنٹ واقعی آدھا وقت۔	تصور 14 اور حصہ 6، قدم 8
مرحلہ 7۔ عمل ایک کاروبار ہے	کلائنٹس، چار خانوں سے قیمت، ایک ڈیزائن نظام سے کئی صفحات، حوالہ جات۔	تصورات 2 اور 14، ساتھ کئی صفحات والا حصہ

بیشتر لوگ مرحلہ 1 اور 2 کے درمیان پھنس جاتے ہیں۔ چلتے صفحات شائع اور ذہین جملے جمع کرتے ہیں، بجائے ذوق فائل ایک بار لوڈ کر کے ہمیشہ کام لینے کے۔

آج کی جگہ سے ایک مرحلہ بھی چڑھیں تو کورس اپنی قیمت نکال چکا۔

---

فوری حوالہ

پندرہ تصورات، ہر ایک ایک سطر میں

1. اے آئی کا گھسا ڈیزائن ریاضی ہے، سستی نہیں۔ ہر اے آئی کی پسندیدہ شکل ہے کیونکہ عام ترین سیکھی چیز سے جواب دیتی ہے۔ Anthropic نے بھی Claude کو اپنی عادات روکنے کی فائل لکھی۔
2. چار حصے ہر سائٹ بناتے ہیں۔ ماڈل، ذوق، میڈیا، میزبان۔ ہر فیصلہ ایک خانے میں، اور انہی سے کام کی قیمت۔
3. ڈیزائن کی بہترین اے آئی مجموعی بہترین نہیں۔ الگ مقابلے ہیں۔ اندھا موازنہ دیکھیں اور کام قائد کو دیں۔
4. کوئی اے آئی ٹول میں چل سکتی ہے۔ Claude Code ترتیبات میں پتہ بدلیں یا OpenCode فہرست سے چنیں۔ /status سے جانچیں، /model سے کبھی نہیں۔ بہترین اے آئی کرائے کا تاج؛ ٹول اور فائلیں آپ کی۔
5. نظام Hallmark فائل میں ذوق ہے۔ چار کمانڈز (تعمیر، جائزہ، دوبارہ ڈیزائن، مطالعہ)، 58 جانچیں، ہر بار مختلف صفحاتی شکل۔ سب کے لیے مفت۔
6. سائٹس سے سیکھیں، نقل نہیں۔ کمانڈ study سائٹ کی کامیابی design.md میں لکھتی ہے۔ تین حوالے لیں، ایک نقل کی طرف کھینچتا ہے۔
7. برانڈ پہلے درست کریں۔ درست رنگ اور فونٹس ان کے ثبوت کے ساتھ، پھر کلائنٹ کی حقیقی فائلوں سے تصدیق۔ برانڈ رنگ قواعد ہیں، تجاویز نہیں۔
8. ایک کہانی، ایک اسکرول۔ تعمیر سے پہلے کہانی، ہر پردے پر خیال، اوپر اصل چیز، ایک جگہ جرات۔ آخری دھڑکن واقعی چلے: WhatsApp ربط، فارم یا چھوٹا پروگرام، بے کار بٹن کبھی نہیں۔
9. تصاویر کے چار راستے۔ اصل مفت تصاویر، مفت اے آئی میں ہاتھ سے معیار یا خودکار سہولت مگر دونوں نہیں، سینٹ میں دونوں، اور حقیقی رقم کی ویڈیو۔ کہانی شاٹ فہرست ہے۔
10. فون مرکزی پردہ ہے۔ وہی کہانی لمبی شکل کے لیے دوبارہ عکس بند۔ خاکہ تبدیلی جان بوجھ کر۔
11. تین جانچ کار ڈیزائن قابل آزمائش بناتے ہیں۔ صفحاتی تصاویر آنکھیں، جائزہ ذوق کی فہرست، خودکار قواعد پڑھنے لائق فرق، کلیدی تختہ اور موبائل ڈیٹا پر ہلکے صفحے کی ضمانت۔
12. مختلف کمپنی کی اے آئی سے دوسری رائے۔ اے آئی اپنی عادات نہیں دیکھتی۔ خلاصہ، ڈیزائن فائل اور تصاویر بھیجیں؛ نتائج فائل میں۔
13. اشاعت دو کمانڈز ہے۔ vercel اشتراکی پیش منظر، vercel --prod حقیقی۔ پھر کلائنٹ کا پتہ اور تلاش پذیری: عنوان، وضاحت، اشتراکی کارڈ۔ کمپیوٹر نہیں، زندہ صفحہ جانچیں۔
14. کلائنٹس کے ساتھ چھ قدم۔ تحریری اتفاق، برانڈ تلاش و تصدیق، تصاویر سے پہلے کہانی فروخت، فون جائزہ، چار خانوں سے قیمت، دیکھ بھال کی صلاحیت حوالہ۔
15. لاگت جانیں۔ تصاویر سے پہلے قیمت، گفتگو صاف، پورے پروجیکٹ کی حقیقی لاگت۔

ترتیب کا فوری حوالہ (کھولنے کے لیے کلک)

کیا کرنا ہے	Claude Code	OpenCode
ماڈل Kimi K3 چلائیں	.claude/settings.json میں Moonshot env بلاک، /status تصدیق	/connect openrouter → /models → K3
ذوق تہہ نصب کریں	npx skills add Nutlope/hallmark، ساتھ Anthropic frontend-design پلگ اِن	npx skills add Nutlope/hallmark
نشست میں میڈیا بنائیں	Higgsfield CLI/MCP، یا لانے اور APIs سے راستہ 1–2	وہی
نتیجے کی تصویر لیں	Playwright صفحاتی تصاویر ترتیب دلوائیں	وہی
ڈیپلائے کریں	"نظام CLI سے Vercel جوڑ کر پروجیکٹ ڈیپلائے کریں"	وہی
نظام K3 کا سیاق دیکھیں	CLAUDE_CODE_AUTO_COMPACT_WINDOW کو 1048576، پھر خود دیکھیں	نظام TUI میں ٹوکن عدد

ایک فیصلہ جاتی درخت میں تعمیر

New page or site?
    → Spine first (plan mode) → Hallmark default → media per beat → verify

Page exists but looks generated?
    → Hallmark audit → fix the list → if the skeleton itself is slop, redesign

Client has a brand?
    → Extract with quoted sources → confirm real assets → design.md as constraints

Admire a site?
    → Hallmark study → design.md as direction (never a clone)

Site outgrown one page?
    → A spine per page, one design.md for all → files as routes →
      framework with layouts only when repetition earns it

Before anyone sees it?
    → Screenshot both widths on the deployed URL → cross-family review → then the human

---

فلیش کارڈ مطالعاتی معاون

---

مختصر امتحان: پندرہ تصورات پر 42 سوال

سیکھی چیز آزمائیں۔ ہر نشست 15 سوالوں کا تازہ مجموعہ دکھاتی ہے۔

Checking access...