Markdown اندر، HTML باہر: ایک فوری کورس

Markdown میں لکھیں۔ HTML میں پڑھیں۔ ایجنٹوں کے ساتھ کام کرنے کی دو دستاویزی زبانیں۔

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

یہ کورس دونوں سمتوں کو ٹھیک کرتا ہے، ہر ایک کے لیے ایک زبان کے ساتھ۔ دونوں نام آپ کے لیے نئے ہو سکتے ہیں۔ Markdown سادہ متن ہے جس میں کچھ اضافی نشانات ہیں جو ساخت کو ظاہر کرتے ہیں: عنوان سے پہلے ایک #، فہرست میں ہر آئٹم سے پہلے -۔ آپ نے اس کا نام جانے بغیر اسے پہلے ہی دیکھا ہے: جب Claude یا ChatGPT کسی لفظ کو بولڈ کرتا ہے یا آپ کو بلٹ لسٹ دیتا ہے، تو یہ Markdown لکھ رہا ہوتا ہے۔ آپ اسے سیدھے اسی چیٹ باکس میں ٹائپ کرتے ہیں جو آپ پہلے سے استعمال کر رہے ہیں۔ انسٹال کرنے کے لئے کچھ نہیں ہے. HTML وہ زبان ہے جس سے ویب صفحات بنائے جاتے ہیں: ہر صفحہ جو آپ نے کبھی کسی براؤزر میں کھولا ہے، بشمول اس کے نیچے HTML ہے۔ نہ ہی پروگرامنگ ہے۔ دونوں عام متن ہیں۔ مہارت یہ جاننا ہے کہ کس کو کس سمت میں استعمال کرنا ہے۔

پاور صارفین بات چیت کو سمت کے لحاظ سے تقسیم کرتے ہیں۔ وہ Markdown میں AI کو لکھتے ہیں (سرخیوں، فہرستوں، کوڈ بلاکس)، کیونکہ ساخت اس کے بارے میں اندازہ لگانے کے لیے کچھ نہیں چھوڑتی۔ اور وہ AI سے HTML میں جواب دینے کے لیے کہتے ہیں (ڈائیگرام، ٹیبل، رنگ، انٹرایکٹیویٹی)، کیونکہ ایک ڈیزائن کردہ صفحہ واحد لمبا جواب ہے جو ایک مصروف انسان درحقیقت پڑھتا ہے۔ پہلی زبان سیکھنے میں ایک گھنٹہ لگتا ہے۔ دوسرا جسے آپ کبھی نہیں لکھتے۔ آپ صرف اس کا مطالبہ کرنا سیکھیں۔ (ایک لفظ اس سے پہلے کہ ہم آگے بڑھیں: یہ کتاب کہتی ہے ایجنٹ ایک ایسے AI کے لیے جو آپ کی جانب سے کئی قدموں پر کام کرتا ہے۔ آج یہ صرف ایک براؤزر ٹیب میں Claude ہے۔ بعد میں کتاب میں اسے ایک ٹرمینل اور آپ کی فائلیں مل جاتی ہیں۔ فارمیٹ کے اصول جو آپ یہاں سیکھتے ہیں دونوں طرح سے ایک جیسے ہیں۔)

پورا کورس، ایک تصویر میں:

Diagram of the asymmetry of working with agents: you write to the agent in Markdown, the spec. The agent answers you in HTML, the report you read. The agent passes context to the next agent in Markdown.

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

دو منٹ میں ثابت کریں۔

کسی بھی تھیوری سے پہلے ایک بار پورا کورس چلائیں۔ Claude.ai کھولیں (ایک مفت اکاؤنٹ میں ایک منٹ لگتا ہے؛ ChatGPT یا جیمنی بھی کام کرتا ہے) اور پیسٹ کریں:

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

کلاڈ ایک لمحے کے لیے سوچتا ہے، پھر چیٹ کے ساتھ ایک پینل کھولتا ہے اور اس میں ایک حقیقی، اسٹائل والا صفحہ بناتا ہے: بینر، ٹیبل، بٹن۔ وہ پینل ایک آرٹیفیکٹ ہے: ایک لائیو دستاویز جو AI گفتگو کے اندر کی بجائے آگے بناتا ہے۔ (ChatGPT اور Gemini ان کو Canvas کہتے ہیں؛ ایک ہی خیال۔) اگر آپ کو پیش کردہ صفحہ کے بجائے کوڈ کی دیوار ملتی ہے، تو show it to me as a rendered artifact کہیں اور یہ پلٹ جائے گا۔ اب آرٹفیکٹ پینل پر شیئر یا اشاعت کنٹرول تلاش کریں، اسے تھپتھپائیں، اور نتیجے میں آنے والا لنک اپنے فون پر کھولیں۔

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

📚 تدریسی امداد

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

مکمل پریزنٹیشن دیکھیں، Markdown اندر، HTML باہر

یہ فوری کورس اس سے پہلے کی بنیادوں کو فرض کرتا ہے: مشین کے ذہنی ماڈل کے لیے AI اصل میں کیا ہے؟ اور عادات کے لیے 2026 میں AI پرمپٹنگ۔ وہ عادات (صحیح سیاق و سباق کو لوڈ کریں، دماغی طوفان پھر اعادہ کریں، آؤٹ پٹ کو 10 میں سے گریڈ کریں) سب یہاں دوبارہ ظاہر ہوتے ہیں۔ یہ کورس انہیں رہنے کے لیے ایک فائل فارمیٹ دیتا ہے۔ گہرے ٹول واک تھرو ایجنٹک کوڈنگ فوری کورس اور Cowork اور OpenWork فوری کورس میں رہتے ہیں۔ آپ کو یہ صفحہ ختم کرنے کی ضرورت نہیں ہے۔

آپ کو کیا ضرورت ہے

ایک مفت چیٹ اکاؤنٹ۔ Claude.ai وہی ہے جسے مثالیں استعمال کرتی ہیں۔ ChatGPT یا جیمنی یہاں ہر چیٹ پرامپٹ کو بغیر تبدیلی کے چلاتے ہیں۔ جہاں ایک پرامپٹ "آرٹیفیکٹ" کہے، ان دونوں پر "کینوس" کہیں۔ کسی دوسرے ٹول پر، "ایک ہی HTML فائل" کے لیے پوچھیں اور یہ وہی کام کرتا ہے۔
ٹول میں **ویب رسائی آن کر دی گئی ہے، تاکہ AI آپ کے شامل کردہ لنکس کو حاصل کر سکے۔ زیادہ تر ٹولز میں یہ بطور ڈیفالٹ آن ہوتا ہے۔ اگر لنک کی مثال کام نہیں کرتی ہے تو ویب سرچ سیٹنگ کو چیک کریں۔
ایک فون، اس بات کا فیصلہ کرنے کے لیے کہ آپ کیا بناتے ہیں کہ آپ کے قارئین اسے حقیقت میں دیکھیں گے۔

پڑھنے میں ایک گھنٹہ لگتا ہے۔ سات اختتامی اشارے تقریباً تیس منٹ کا اضافہ کرتے ہیں۔ جاتے وقت اشارے چلائیں: پڑھنے سے آپ کو ذخیرہ الفاظ ملتے ہیں، انہیں چلانے سے آپ کو مہارت ملتی ہے۔

حصہ 1: دو زبانیں۔

1. ایجنٹوں کو ساخت کی ضرورت کیوں ہے؟

یہاں بھی وہی درخواست ہے جو دو بار لکھی گئی۔

غیر ساختہ:

I want a page for my tuition center, it should look professional
and have our courses and timings and a way for parents to contact
us, also fees, and it should work on phones since most parents
use phones, oh and put the Eid holiday notice somewhere visible.

ساختہ:

# Tuition Center Landing Page Specification

## Goal
A single-page site parents visit from their phones to check
courses, timings, fees, and contact info.

## Requirements
- Mobile-first layout (most visitors are on phones)
- Course list with timings and monthly fees
- Contact section: phone, WhatsApp link, location
- Holiday notice banner at the top (currently: Eid holidays,
  center closed June 6-9)

## Out of scope
- Online payments
- Student login

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

دوسرا ورژن ساخت کو واضح کرتا ہے۔ سرخیاں یہ بتاتی ہیں کہ ہر بلاک کس قسم کی معلومات ہے۔ گولیاں اعلان کرتی ہیں کہ ضروریات ایک set ہیں، ہر ایک کو آزادانہ طور پر چیک کیا جا سکتا ہے۔ اور "دائرہ کار سے باہر" سیکشن ایسا کچھ کرتا ہے جو نثر تقریباً کبھی نہیں کرتا: یہ بتاتا ہے کہ آپ کیا نہیں چاہتے ہیں، جو ہر اچھی وضاحت کا نصف ہے۔

یہی وجہ ہے کہ Markdown ایجنٹی کام کی تخصصی زبان ہے۔ ایجنٹوں کو بہت زیادہ Markdown پر تربیت دی جاتی ہے (انٹرنیٹ پر زیادہ تر دستاویزات اس میں لکھی جاتی ہیں)، اس لیے وہ اس کی ساخت کو مقامی طور پر پارس کرتے ہیں: # سرخی ان کے لیے سجاوٹ نہیں ہے، یہ درجہ بندی اور اہمیت کے بارے میں ایک اشارہ ہے۔ (بعد میں ابواب اس جگہ کو کہتے ہیں جہاں یہ لکھے ہوئے ارادے Intent Layer رہتے ہیں: انسانی ارادہ، جس پر عمل کرنے کے لیے ایجنٹ کے لیے کافی حد تک لکھا گیا ہے۔ اب آپ اسے لکھنا سیکھ رہے ہیں۔)

ایک غیر سافٹ ویئر کی مثال۔ ایک اسکول کے منتظم نے ایک ایجنٹ سے کہا کہ "کھیلوں کے دن کے سالانہ پلان، معمول کے پروگراموں کا مسودہ تیار کریں، اور اس بات کو یقینی بنائیں کہ چھوٹے بچے دوپہر کی گرمی میں نہ ہوں۔" ڈرافٹ میں انڈر 8 ریسوں کو دوپہر 2 بجے شیڈول کیا گیا تھا۔ ویسے بھی: رکاوٹ کو نثر میں جملے کے وسط میں دفن کر دیا گیا تھا، اور ایجنٹ نے اسے ترجیح کے طور پر وزن دیا تھا۔ اس نے درخواست کو ## Hard constraints عنوان کے ساتھ دوبارہ لکھا جس میں ایک گولی تھی: "تمام انڈر 8 ایونٹس کو 11:30 a.m سے پہلے ختم ہونا چاہئے۔" اگلے مسودے کی مکمل تعمیل ہوئی۔ پابندی نہیں بدلی۔ ساخت میں اس کی مرئیت بدل گئی۔

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

2. غیر متناسب: Markdown اندر، HTML باہر

تو Markdown ان پٹ لینگویج ہے۔ کیا یہ آؤٹ پٹ لینگویج بھی ہے؟ کچھ عرصہ پہلے تک، ہاں: ایجنٹ Markdown میں بطور ڈیفالٹ جواب دیتے ہیں، اور مختصر جوابات کے لیے یہ ٹھیک ہے۔

لیکن اگر AI آؤٹ پٹ کی آپ کی ذہنی تصویر گولیوں والے متن کی دیواریں ہیں، تو وہ تصویر اب پرانی ہو چکی ہے۔ ایک وسیع پیمانے پر زیر گردش مضمون میں، Anthropic کی Claude Code ٹیم کے طارق شہیپر نے بیان کیا۔ کیوں اس نے اور ٹیم میں شامل دیگر لوگوں نے Markdown outputs کا مطالبہ کرنا چھوڑ دیا اور HTML مانگنا شروع کیا۔ اس کا استدلال، مفہوم:

لانگ Markdown پڑھا نہیں جا سکتا۔ تقریباً سو لائنیں گزر چکی ہیں، انسان Markdown فائلوں کو پڑھنا چھوڑ دیتے ہیں، اور جیسے جیسے ایجنٹ بڑے کام انجام دیتے ہیں، ان کے منصوبے اور رپورٹیں لمبی ہوتی جاتی ہیں۔ سو کوئی جادوئی نمبر نہیں ہے۔ ایماندارانہ امتحان یہ ہے کہ کیا آپ چیز کو اوپر سے نیچے پڑھیں گے، اور کچھ لمبائی میں جواب نفی میں آتا ہے۔ ایک غیر پڑھا ہوا منصوبہ ایک ایسا منصوبہ ہے جسے آپ نے حقیقت میں منظور نہیں کیا ہے۔
Markdown کی چھت کم ہے۔ سرخیاں، فہرستیں، میزیں، اور بہت کچھ نہیں۔ جب کسی ایجنٹ کو آپ Cowork فلو، کلر پیلیٹ، یا کوئی لے آؤٹ دکھانے کی ضرورت ہوتی ہے، تو Markdown ASCII آرٹ کا سہارا لیتا ہے: دلکش، لیکن ایک حل۔
HTML کی تقریباً کوئی حد نہیں ہے۔ اسٹائل شدہ میزیں، خاکے، تشریح شدہ کوڈ، انٹرایکٹو کنٹرولز۔ بہت کم کوئی ایجنٹ جان سکتا ہے کہ HTML کسی انسان کو مؤثر طریقے سے نہیں دکھا سکتا۔
HTML قابل اشتراک ہے۔ براؤزر اسے مقامی طور پر پیش کرتے ہیں۔ ایک ساتھی لنک پر کلک کرتا ہے۔ کوئی بھی کچھ انسٹال نہیں کرتا. لوگ دراصل ایک ڈیزائن شدہ صفحہ پڑھتے ہیں۔ وہ شائستگی سے خام ٹیکسٹ فائل کو نظر انداز کرتے ہیں۔
Markdown کی قاتل خصوصیت ختم ہو رہی ہے۔ Markdown بہت اچھا تھا کیونکہ انسان اسے آسانی سے ہاتھ سے ایڈٹ کر سکتے تھے۔ لیکن تیزی سے آپ ایجنٹ کے آؤٹ پٹ میں ہاتھ سے ترمیم نہیں کرتے ہیں۔ آپ ایجنٹ کو اس میں ترمیم کرنے کا اشارہ کرتے ہیں۔ ایک بار جب ایجنٹ ترمیم کر لیتا ہے، تو فارمیٹ کو صرف قاری کے مطابق کرنا ہوتا ہے۔

نتیجہ ایک صاف توازن ہے، اور یہ اس پورے کورس کی ریڑھ کی ہڈی ہے:

سمت	فارمیٹ	کیوں
آپ → ایجنٹ	Markdown	ساخت ابہام کو دور کرتی ہے۔ ٹائپ کرنے میں تیز۔ ایجنٹ اسے مقامی طور پر تجزیہ کرتے ہیں۔
ایجنٹ → آپ	HTML	بھرپور، پڑھنے کے قابل، قابل اشتراک، انٹرایکٹو۔ ایک 500 لائن پلان جو آپ واقعی پڑھ لیں گے۔
ایجنٹ → ایجنٹ	Markdown	AI سیشنز کے درمیان پاس کردہ تفصیلات، نوٹس اور سیاق و سباق کمپیکٹ اور عین مطابق رہتے ہیں۔

آپ پہلی قطار ہاتھ سے لکھتے ہیں، یہی وجہ ہے کہ حصہ 2 اسے صحیح طریقے سے سکھاتا ہے۔ آپ دوسری قطار کبھی نہیں لکھتے۔ آپ اس کے لیے اشارہ کرتے ہیں، یہی وجہ ہے کہ حصہ 3 ٹیگز کے بجائے پرامپٹ سکھاتا ہے۔

"HTML آؤٹ" کی ایک شرط ہے: قاری انسان ہے۔

Every advantage HTML has is an advantage for eyes and browsers. To an AI, the same file is noise around the meaning: tags, styling, and layout code spending thousands of words to say what Markdown says in fifty. So anything kept for an AI stays Markdown. That includes more than you might think: a new chat remembers nothing, so the notes you save today and paste into tomorrow's conversation are "agent → agent" too, even though both agents are talking to you. Ask the one question: who reads this last?

ایک شخص اسے آخری پڑھتا ہے → HTML۔
ایک AI اسے آخری پڑھتا ہے (بشمول مستقبل کی چیٹ) → Markdown۔
ایمانداری سے غیر یقینی → Markdown۔ ایک شخص Markdown کو اچھی طرح پڑھ سکتا ہے۔ ایک AI HTML کو بری طرح پڑھتا ہے۔ اور آپ ہمیشہ Markdown کو HTML میں اس وقت رینڈر کر سکتے ہیں جب کسی شخص کو اس کی ضرورت ہو۔

جہاں آپ پہلے ہی اس غیر متناسب کو دیکھ چکے ہیں۔

اس کتاب کا ہر باب Markdown میں لکھا گیا ہے (ماخذ کی فائلیں .md میں ختم ہوتی ہیں)، اور آپ جو خاکہ دیکھتے ہیں وہ زیادہ تر SVG ہیں، جو کہ HTML کی مثالی زبان ہے۔ یہ کتاب اس توازن پر عمل کرتی ہے جس کی وہ تبلیغ کرتی ہے: Markdown جہاں درستگی اہمیت رکھتی ہے، بھرپور بصری جہاں انسانی پڑھنے کی اہمیت ہے۔

حصہ 2: Markdown، تحریری زبان

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

مشق کیسے کریں: اس حصے کی ہر مثال ایک پرامپٹ ہے جسے آپ ابھی Claude.ai میں چسپاں کر سکتے ہیں۔ آپ جو ڈھانچہ ٹائپ کرتے ہیں وہ سبق ہے۔

3. عنوانات: AI کو بتائیں کہ سب سے اہم کیا ہے۔

A # ایک سرخی بناتا ہے۔ مزید # علامتیں گہری سطحیں بناتی ہیں:

# Document title          (one per document)
## Major section
### Subsection

یہ پوری ترکیب ہے۔ اہم بات یہ ہے کہ AI کے لیے کیا عنوانات ہیں: وہ بتاتے ہیں کہ کون سی معلومات سب سے اہم ہے اور کون سی تفصیلات کس سیکشن کے تحت ہیں۔ ## Hard constraints کے تحت ہر چیز ایک رکاوٹ ہے جس پر AI کو عمل کرنا چاہئے۔ ## Nice to have کے تحت ہر چیز اختیاری ہے۔ عنوانات کے بغیر، AI کو اندازہ لگانا ہوگا کہ کیا اہمیت ہے۔ عنوانات کے ساتھ، آپ اسے براہ راست بتاتے ہیں۔

تین اصول جو 90% سرخی کی غلطیوں کو روکتے ہیں:

قاعدہ	یہ ایک ایجنٹ کے لیے کیوں اہمیت رکھتا ہے۔
فی دستاویز ایک `#` عنوان	دو عنوانات کا مطلب ہے کہ دو دستاویزات جو آپس میں مل جائیں؛ ایجنٹ ان کو الگ الگ کاموں کے طور پر دیکھ سکتا ہے۔
سطحوں کو کبھی نہ چھوڑیں (`#` → `###`)	ایک چھوڑی ہوئی سطح درخت کو توڑ دیتی ہے۔ ایجنٹ غلط والدین کے ذیلی حصے کو غلط جوڑ سکتا ہے۔
عنوانات دعوے بنائیں، لیبل نہیں۔	`## Budget` `## Budget: PKR 50,000 hard ceiling` سے کم کہتا ہے۔ سرخی خود ہی رکاوٹ کو اٹھاتی ہے۔

اسے ابھی آزمائیں. اسے Claude.ai میں چسپاں کریں:

خاندانی عید کے کھانے کے لیے میرے نوٹس یہ ہیں، ایک گندے پیراگراف کے طور پر:

"تقریباً 20 مہمان، تین سبزی خور ہیں، بجٹ تقریباً 25 ہزار روپے، میری والدہ بریانی سنبھالتی ہیں اس لیے چاول کی اہم ڈش نہ بنائیں، بچوں کی میز کی ضرورت ہے، رات 8 بجے رات کا کھانا، ہم 4 اضافی کرسیاں کرائے پر لے رہے ہیں۔"

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

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

4. فہرستیں: سیٹ کے لیے گولیاں، ترتیب کے لیے نمبر

فہرست کی دو اقسام، ایک امتیاز جسے ایجنٹ سنجیدگی سے لیتے ہیں:

Features the page must have:        Steps to publish:
- Course list with fees             1. Review the draft
- WhatsApp contact button           2. Fix the timings table
- Holiday banner                    3. Publish
- Urdu/English toggle               4. Send the link to parents

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

یہ کاسمیٹک لگتا ہے۔ یہ نہیں ہے. ایک ایجنٹ کو ایک نمبر والی فہرست دیں اور یہ حکم کو ہدایات کے حصے کے طور پر سمجھتا ہے۔ یہ تقریباً کبھی بھی مرحلہ 1 سے پہلے مرحلہ 4 شروع نہیں کرے گا۔ اسے گولیاں دیں اور یہ کسی بھی ترتیب سے موثر ہو اشیاء کو ایڈریس کرنے کے لیے آزاد محسوس کرتا ہے۔ فہرست کی غلط قسم کا انتخاب آپ کے ارادے کے بارے میں غلط سگنل بھیجتا ہے۔

نیسٹنگ ایک اور جہت کا اضافہ کرتی ہے: ذیلی اشیاء ان کے والدین سے تعلق رکھتی ہیں۔

- Contact section
  - Phone number (clickable on mobile)
  - WhatsApp link (tapping it opens a chat)
  - Map pin, not a full embedded map

چیک ایبل بلٹ کی عادت۔ بہترین ضرورت والی گولیاں وہ ہیں جن پر کوئی جائزہ لینے والا بغیر بحث کے نشان لگا سکتا ہے ✅ یا ❌۔ "صفحہ تیز ہونا چاہئے" قابل جانچ نہیں ہے۔ "3G کنکشن پر صفحہ 3 سیکنڈ سے کم میں لوڈ ہوتا ہے"۔ جب آپ کوئی قیاس لکھتے ہیں، تو ہر گولی کو دوبارہ پڑھیں اور پوچھیں: کیا ایجنٹ، یا میں، معروضی طور پر اس کی تصدیق کر سکتے ہیں؟ یہ 2026 میں AI پرمپٹنگ کی طرف سے 10 کے گریڈ سے باہر کا نظم و ضبط ہے، ایک وقت میں ایک گولی لگائی گئی ہے۔

5. کوڈ بلاکس: AI کو بالکل وہی دکھانا جو آپ کا مطلب ہے۔

بعض اوقات آپ کو اپنے پرامپٹ میں متن کا ایک ٹکڑا شامل کرنا ہوتا ہے جسے AI دیکھے مگر اس پر عمل نہ کرے: error message، آپ کے مطلوبہ output format کی مثال، یا کسی اور کا quote۔ اسے triple backticks (```) میں لپیٹنا AI کو بتاتا ہے: “یہ data ہے، instruction نہیں۔” (backtick ` زیادہ تر laptop keyboards پر Tab key کے اوپر ہوتا ہے؛ phone keyboard پر apostrophe کو long-press کریں۔)

```python
def greet(name):
    return f"Assalam-o-Alaikum, {name}!"
```

افتتاحی باڑ کے بعد زبان کا ٹیگ (python, bash, text, html) انسانوں اور ایجنٹوں دونوں کو بتاتا ہے کہ بلاک کی تشریح کیسے کی جائے۔ سنگل بیک ٹِکس ایک ہی کام ان لائن کرتی ہیں: `npm install` لکھیں جب آپ کا مطلب لفظی کمانڈ ہے، نہ کہ انسٹال کرنے کا تصور۔

اس سے فرق کیوں پڑتا ہے؟ بیک ٹک باڑ کے بغیر، AI ہر چیز کو ان ہدایات کے طور پر پڑھتا ہے جن پر اسے عمل کرنا چاہیے۔ باڑ کے ساتھ، یہ لپیٹے ہوئے متن کو تجزیہ کرنے یا کاپی کرنے کے لیے پڑھتا ہے۔ تین حالات جہاں یہ آپ کو بچاتا ہے:

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

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

The timings table must look exactly like this:

| Course        | Days     | Time          | Monthly fee |
| ------------- | -------- | ------------- | ----------- |
| Matric Math   | Mon-Wed  | 4:00-5:30 pm  | PKR 3,500   |

Same columns, same order, same fee format.

اس طرح کی ایک مثال کی قطار AI کو بالکل وہی بتاتی ہے جو آپ چاہتے ہیں۔ یہ کسی ٹھوس مثال کو اس طرح غلط نہیں پڑھ سکتا جس طرح یہ تحریری تفصیل کو غلط پڑھ سکتا ہے۔

6. روابط اور تصاویر: دنیا کی طرف اشارہ کرنا

نحو کے آخری دو ٹکڑے:

[link text](https://example.com)
![description of the image](path/or/url.png)

لنک کیوں اہمیت رکھتے ہیں: جب آپ اپنے پرامپٹ میں کوئی لنک شامل کرتے ہیں، تو AI درحقیقت اس صفحہ کو دیکھ سکتا ہے اور اسے پڑھ سکتا ہے۔ لہذا اپنے اسکول کی فیس کی پالیسی کو میموری سے خلاصہ کرنے کے بجائے (اور اسے غلط سمجھیں)، صرف صفحہ کو لنک کریں اور "فیس اس سے مماثل ہونی چاہیے" لکھیں۔ AI اصلی صفحہ پڑھتا ہے۔ آپ نے ممکنہ طور پر غلط معلومات کے پیراگراف کو اصل ماخذ سے بدل دیا۔ Claude.ai ایسا اس وقت کرتا ہے جب ویب تک رسائی آن ہوتی ہے، اور فائل ریڈنگ ٹولز جن سے آپ حصہ 4 میں ملیں گے وہی کام آپ کے کمپیوٹر پر موجود فائلوں کے ساتھ کرتے ہیں۔

7. آپ کی پہلی مکمل تفصیلات

Why images matter: adding ! before the brackets puts the image directly into your document instead of just linking to it. The description you write inside the brackets is important because it is what the AI reads when it looks at your image. Think of it as a caption that tells the AI what to pay attention to. For example, if your spec includes a screenshot of a page design, a good description would be: ![Mockup: banner on top, course table in the middle, contact buttons pinned to bottom]. That tells the AI exactly what matters in the image.

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

# [What you are building] Specification

## Goal

One paragraph: what this is and who it serves.

## Context

Links and facts the agent needs. Attach files; link sources.

## Requirements

- Checkable bullet
- Checkable bullet
- Checkable bullet

## Hard constraints

- Things that must not be violated (budget, deadline, platform)

## Out of scope

- Things you are explicitly NOT asking for

## Expected output

A fenced example, a format description, or a mockup image.

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

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

میری تصریح یہ ہے: [پیسٹ اسپیک]

ابھی تک کچھ نہ بنائیں۔ سب سے پہلے، خود قیاس کا جائزہ لیں:

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

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

وضاحت، مکمل، اور پر 10 میں سے قیاس کو درجہ دیں۔ جانچ پڑتال، ہر ایک کے ایک جملے کے جواز کے ساتھ۔

وہ واحد تبدیلی تجویز کریں جس سے گریڈ سب سے زیادہ بڑھے۔

یہ 2026 میں AI پرمپٹنگ سے گریڈ اور اٹیریٹ لوپ ہے، جس کا مقصد ایجنٹ کے آؤٹ پٹ کے بجائے آپ کی خصوصیت ہے۔ دو یا تین راؤنڈ میں عام طور پر 6 سے 9 تک کی ایک قیاس آرائی ہوتی ہے، اور 9/10 قیاس تمام ایجنٹی کاموں میں سب سے سستا معیار کی بہتری ہے، کیونکہ ہر بہاو والے نمونے کو اس کی وضاحت وراثت میں ملتی ہے۔ ایک مبہم گولی کو ایک قیاس میں ٹھیک کرنے میں ایک منٹ خرچ ہوتا ہے۔ ایجنٹ کی اس گولی سے بنائی گئی غلط چیز کو ٹھیک کرنے میں ایک دوپہر خرچ آتا ہے۔

قیاس آرائی قابل ترسیل ہے۔

ذہنیت کی تبدیلی اس کتاب کو تقویت دیتی رہے گی: AI- مقامی کام میں، تصریح حقیقی کام سے پہلے کاغذی کارروائی نہیں ہے۔ یہ ** اصل کام ہے۔ ایجنٹ کا آؤٹ پٹ آپ کے قیاس کا ایک فنکشن ہے۔ قیاس کو بہتر بنائیں اور ہر تخلیق نو اس کے ساتھ بہتر ہوتی ہے۔ کتاب اس طرح کی تعمیر کو خصوصیات پر مبنی ترقی کہتی ہے، اور کتاب کا حصہ 1 اسے مکمل طور پر تیار کرتا ہے۔ یہ کنکال اس کا بیج ہے۔

حصہ 3: HTML، پڑھنے کی زبان

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

8. بالکل HTML کیوں مانگیں۔

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

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

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

HTML کیا شامل کرتا ہے۔	عملی طور پر یہ کیسا لگتا ہے۔
معلومات کی کثافت	ASCII آرٹ اور گولیوں کی دیواروں کی بجائے میزیں، کلر کوڈنگ، SVG ڈایاگرام، تشریح شدہ کوڈ
نیویگیبلٹی	ٹیبز، مشمولات کی ایک میز، ٹوٹنے کے قابل حصے: ایک 500 لائن پلان جس کے ذریعے آپ آگے بڑھ سکتے ہیں
اشتراک کی اہلیت	کسی بھی براؤزر میں کھلتا ہے؛ آرٹفیکٹ لنک شائع کریں اور والدین، طالب علم، یا ساتھی اس پر کلک کرتا ہے، بغیر کسی ایپ کے اور نہ ہی کوئی اکاؤنٹ
انٹرایکٹیویٹی	سلائیڈرز، ٹوگلز، ڈریگ ایبل کارڈز، لائیو پیش نظارہ: دستاویز ایک آلہ بن جاتا ہے، پرنٹ آؤٹ نہیں
ایک "کاپی بیک" لوپ	ایک بٹن جو آپ کے انتخاب کو ٹیکسٹ کے طور پر برآمد کرتا ہے جسے آپ ایجنٹ کو واپس چسپاں کرتے ہیں: آپ بصری طور پر ایڈجسٹ کرتے ہیں، ایجنٹ بالکل ٹھیک وصول کرتا ہے

وہ آخری قطار قریب سے دیکھنے کے قابل ہے، کیونکہ یہ سب سے کم واضح اور سب سے زیادہ طاقتور ہے۔ کچھ ترجیحات الفاظ میں بیان کرنے کے لیے دکھی ہیں: ایک رنگ، ایک حرکت پذیری کی رفتار، تیس اشیاء کی ترجیحی ترتیب۔ ایجنٹ سے ان کے لیے کنٹرولز بنانے کے لیے، نیز copy as text بٹن، ایک سلائیڈر اور ایک پیسٹ کو گھسیٹنے کے تیس سیکنڈ میں "تھوڑا گرم، نہیں، کم نارنجی" میں بدل دیتا ہے۔ آپ لوپ میں رہیں؛ لوپ سخت ہو جاتا ہے.

ایک غیر سافٹ ویئر مثال۔ ایک پرنسپل نے ایک ایجنٹ سے داخلے کے تین سال کے رجحانات پر رپورٹ طلب کی۔ Markdown ورژن گولیوں کی نو اسکرینوں پر مشتمل تھا۔ اس نے دو پڑھے۔ HTML کے طور پر دوبارہ اشارہ کیا گیا (SVG چارٹس کے طور پر ٹرینڈ لائنز، ایک رنگ فی کیمپس، سب سے اوپر ایک فائنڈنگ ٹیبل، تفصیلات نیچے منہدم)، اسی رپورٹ کو جذب ہونے میں چار منٹ لگے، اور اس نے اس شام شائع شدہ لنک کو اپنے بورڈ کو آگے بھیج دیا۔ بورڈ پر کسی نے بھی .md منسلکہ نہیں کھولا ہوگا۔ ہر کوئی لنک پر کلک کرتا ہے۔

ایک ایماندارانہ انتباہ

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

ایک اور قیمت جو موبائل ڈیٹا کو کاٹتی ہے: ایک بھاری انٹرایکٹو آرٹفیکٹ (بیرونی فونٹس، بڑی ایمبیڈڈ امیجز، بڑی لائبریریاں) کئی میگا بائٹس تک غبارہ ڈال سکتا ہے، جو کہ ایک قاری کے لیے ایک حقیقی مسئلہ ہے جو اسے سست کنکشن پر فون پر کھولتا ہے۔ جب بینڈوڈتھ کی اہمیت ہو، تو مختصراً کہہ دیں: "ہلکا پھلکا، سنگل فائل، کوئی بیرونی فونٹ یا لائبریری نہیں، اسے 200 KB سے کم رکھیں۔" ایجنٹ ان لائن کرے گا جس کی اسے ضرورت ہے اور جو نہیں ہے اسے چھوڑ دے گا۔

9. آپ HTML نہیں لکھتے۔ آپ اس کے لئے فوری طور پر

HTML کو ایجنٹ سے نکالنے میں کوئی خاص نحو کی ضرورت نہیں ہوتی ہے۔ Claude.ai (یا ChatGPT یا Gemini) میں، "ایک HTML آرٹفیکٹ بنائیں" اور AI آپ کی چیٹ کے بالکل ساتھ ایک سائیڈ پینل میں ایک لائیو صفحہ بناتا ہے۔ آپ اسے دیکھ سکتے ہیں، اس پر کلک کر سکتے ہیں، اور فوری طور پر اس کے ساتھ تعامل کر سکتے ہیں۔ بعد میں حصہ 4 میں، آپ کو Claude Code اور OpenCode جیسے ٹرمینل ٹولز ملیں گے، جو براؤزر کے بجائے آپ کے کمپیوٹر پر چلتے ہیں۔ ان ٹولز کا کوئی سائیڈ پینل نہیں ہے۔ اس کے بجائے، وہ حقیقی فائلیں براہ راست آپ کے کمپیوٹر پر لکھتے ہیں۔ وہاں، آپ کہتے ہیں کہ "اسے HTML فائل کے طور پر لکھیں" اور AI آپ کی ڈسک پر report.html جیسی فائل بناتا ہے جسے آپ اپنے براؤزر میں کھولتے ہیں۔ مختلف ٹولز، ایک ہی سادہ ٹرگر۔

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

ہر HTML درخواست میں شامل کرنے کے لیے چار چیزیں:

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

موازنہ کریں:

Weak:   Make an HTML report about my sales data.

Strong: Read the attached sales CSV. Produce one HTML file for
        my two co-founders, reading once on laptops: a headline
        findings strip on top (3 numbers, large), one SVG chart
        of monthly revenue by product, a table of the 5 fastest
        growers, and a short "what I'd do next" section. No
        scrolling past 3 screens.

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

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

10. پانچ HTML پیٹرن

اب جب کہ آپ جانتے ہیں کہ HTML کیسے مانگنا ہے، آپ کو اصل میں کیا مانگنا چاہیے؟ عملی طور پر، زیادہ تر HTML آؤٹ پٹ پانچ عام شکلوں میں آتے ہیں۔ Anthropic میں Claude Code کے پیچھے کی ٹیم روزانہ ان نمونوں کو استعمال کرتی ہے، اور آپ بھی کریں گے۔ ذیل میں ہر پیٹرن کی وضاحت کرتا ہے کہ یہ کیا ہے، اسے کب استعمال کرنا ہے، اور آپ کو پیسٹ کرنے کے لیے تیار پرامپٹ دیتا ہے جسے آپ ابھی آزما سکتے ہیں۔

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

میں فیصلہ کر رہا ہوں کہ [چیز] کی ساخت کیسے بنائی جائے۔ 5 واضح طور پر پیدا کریں۔ مختلف نقطہ نظر اور انہیں ایک HTML فائل میں بحیثیت a grid میں شانہ بشانہ موازنہ کر سکتا ہوں۔ ہر کارڈ پر لیبل لگائیں۔ تجارت بند کرتا ہے. ابھی تک سفارش نہ کریں۔ مجھے پہلے دیکھنے دو۔

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

Read [source]. Produce a one-page HTML explainer: an SVG
diagram of how [system/process] works, the 4 key facts
annotated, and a "gotchas" section at the bottom. Optimize
for someone reading it exactly once.

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

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

میں [چیز] کے لیے شکل کا انتخاب کر رہا ہوں اور میں بیان نہیں کر سکتا کہ میں کیا ہوں۔ الفاظ میں چاہتے ہیں. ایک نمونہ کارڈ کے ساتھ ایک HTML آرٹفیکٹ بنائیں اور اس کے لیے لائیو کنٹرولز: پس منظر کی گرمی اور کونے کے لیے سلائیڈرز گول پن، چند لہجے کے رنگ کے سوئچز، فونٹ سائز ٹوگل، اور ایک "کاپی پیرامیٹرز" بٹن جو میرے حتمی انتخاب کو بطور برآمد کرتا ہے۔ متن میں آپ کو واپس پیسٹ کر سکتا ہوں۔

پیٹرن 5: تھرو وے ایڈیٹرز۔ سب سے کم درجہ بندی والا پیٹرن۔ بعض اوقات آپ کو ایک کام کے لیے ایک چھوٹے سے حسب ضرورت ٹول کی ضرورت ہوتی ہے: 30 کاموں کو ترجیح دیں، 20 آئیڈیاز کو زمروں میں ترتیب دیں، 15 امیدواروں کی درجہ بندی کریں۔ اسے اپنے سر میں یا کاغذ پر کرنے کے بجائے، AI سے ایک فوری ڈریگ اینڈ ڈراپ صفحہ بنانے کے لیے کہو: وہ کارڈز جنہیں آپ "Now," "اگلا" اور "بعد میں" جیسے کالموں کے درمیان گھسیٹ سکتے ہیں، نیچے بٹن کے ساتھ جو آپ کے حتمی انتظامات کو متن کے بطور کاپی کرتا ہے۔ اسے دس منٹ تک استعمال کریں، کاپی بٹن پر کلک کریں، نتیجہ کو واپس AI پر چسپاں کریں، اور صفحہ کو دوبارہ کبھی نہ کھولیں۔ صفحہ ڈسپوزایبل ہے؛ متن جو یہ برآمد کرتا ہے وہی ہے جو آپ رکھتے ہیں۔ وہ ایکسپورٹ بٹن وہی ہے جو پیٹرن کو کام کرتا ہے: یہ ایک بصری فیصلے کو عین متن میں بدل دیتا ہے جس پر AI عمل کر سکتا ہے۔

تھرو لائن پر غور کریں: ہر پیٹرن میں، **Markdown (یا آپ کا ڈیٹا) اندر جاتا ہے، HTML سامنے آتا ہے، اور جو بھی بات چیت جاری رکھنے کی ضرورت ہوتی ہے وہ متن کے طور پر واپس آجاتی ہے۔ ** تصور 2 کی عدم توازن، اب ایک کام کرنے والی تال کے طور پر۔

11. جب منزل فیڈ ہو، براؤزر نہیں۔

"HTML آؤٹ" اصول میں ایک اہم استثناء ہے، اور اگر آپ WhatsApp، LinkedIn، یا Facebook استعمال کرتے ہیں، تو آپ اسے فوری طور پر ماریں گے۔ یہ اصول اس وقت کام کرتا ہے جب کوئی آپ کا صفحہ کسی براؤزر میں کھولتا ہے، کیونکہ براؤزر جانتا ہے کہ HTML کو کیسے ڈسپلے کرنا ہے۔ لیکن سوشل میڈیا فیڈ براؤزر نہیں ہے۔ جب آپ WhatsApp یا LinkedIn پر پوسٹ کرتے ہیں، تو ایپ آپ کی فارمیٹنگ کو نظر انداز کرتی ہے اور اپنے ڈیزائن کا استعمال کرتے ہوئے آپ کا مواد ڈسپلے کرتی ہے۔ آپ کنٹرول نہیں کر سکتے کہ یہ کیسا لگتا ہے۔ تو سوال بدل جاتا ہے: یہ پوچھنے کے بجائے کہ "یہ آخری کس نے پڑھا؟" آپ کو یہ پوچھنے کی ضرورت ہے "منزل اصل میں کیا دکھاتی ہے؟"

جب آپ پوسٹ کرتے ہیں تو ہر پلیٹ فارم درحقیقت یہ ظاہر کرتا ہے:

WhatsApp تقریباً تمام فارمیٹنگ کو ختم کر دیتا ہے۔ آپ متن کو *asterisks* اور _underscores_ کے ساتھ ترچھا بنا سکتے ہیں، لیکن بس۔ ہیڈنگز، ٹیبلز، اسٹائلڈ لے آؤٹ: واٹس ایپ ان سب کو نظر انداز کرتا ہے۔ لہذا جب آپ AI سے WhatsApp کے لیے کچھ لکھنے کے لیے کہتے ہیں، تو چھوٹی لکیروں کے ساتھ سادہ متن، فی لائن ایک خیال، ہر پوائنٹ کو نشان زد کرنے کے لیے شاید ایک ایموجی، اور اگر آپ URL کا اشتراک کر رہے ہیں تو آخر میں ایک ننگا لنک طلب کریں۔
LinkedIn اور Facebook اسی طرح کام کرتے ہیں: پوسٹ کا باڈی سادہ متن ہے۔ آپ کسی لفظ کو بولڈ نہیں کر سکتے، سرخی شامل نہیں کر سکتے، یا ٹیبل داخل نہیں کر سکتے۔ (کچھ لوگ بولڈ نظر آنے والے خاص حروف کو نقل کرکے لنکڈ ان پر بولڈ بناتے ہیں، لیکن یہ ایک کام ہے، کوئی خصوصیت نہیں۔) جب آپ AI سے LinkedIn پوسٹ لکھنے کے لیے کہتے ہیں، تو سب سے اہم بات یہ ہوتی ہے کہ پہلی لائن توجہ مبذول کراتی ہے، کیونکہ LinkedIn پہلی چند لائنوں کے بعد سب کچھ چھپاتا ہے "...مزید دیکھیں" بٹن کے پیچھے۔ فیس بک کے لیے، اسے مختصر رکھیں۔ دونوں کے لیے، اس مخصوص پلیٹ فارم کے لیے لکھا ہوا سادہ متن طلب کریں۔

خام HTML کو پوسٹ باڈی کے طور پر چسپاں کرنا ایک ایسا اقدام ہے جو ہمیشہ غلط ہوتا ہے۔ یہ زاویہ بریکٹ کی دیوار کے طور پر اترتا ہے۔

تو کیا HTML سوشل میڈیا پر بیکار ہو جاتا ہے؟ نہیں، یہ اب بھی دو جگہوں پر اہمیت رکھتا ہے:

** لنک کا پیش نظارہ کارڈ۔** آپ ان چھوٹے کارڈوں کو جانتے ہیں جو اس وقت ظاہر ہوتے ہیں جب کوئی WhatsApp، LinkedIn، یا Facebook پر لنک شیئر کرتا ہے؟ ایک عنوان، ایک مختصر وضاحت، اور کبھی کبھی ایک تصویر کے ساتھ؟ وہ کارڈ پلیٹ فارم کے ذریعہ خود بخود بنائے جاتے ہیں۔ یہ آپ کے لنک کردہ صفحہ پر جاتا ہے، HTML کے اندر مخصوص پوشیدہ لیبلز تلاش کرتا ہے (جسے اوپن گراف ٹیگز کہتے ہیں)، اور کارڈ بنانے کے لیے ان کا استعمال کرتا ہے۔ اگر وہ لیبل غائب ہیں، تو آپ کو صرف خام URL کے ساتھ ایک بدصورت خالی پیش نظارہ ملتا ہے۔ اگر وہ موجود ہیں، تو آپ کو عنوان، تفصیل اور تصویر کے ساتھ ایک ڈیزائن کردہ کارڈ ملتا ہے جس سے لوگ کلک کرنا چاہتے ہیں۔ آپ کو تکنیکی تفصیلات کو سمجھنے کی ضرورت نہیں ہے۔ صرف AI کو بتائیں: "اوپن گراف میٹا ٹیگز شامل کریں تاکہ جب WhatsApp یا LinkedIn پر اشتراک کیا جائے تو لنک کا پیش نظارہ ڈیزائن کیا گیا ہو۔" AI جانتا ہے کہ کیا شامل کرنا ہے۔
**پوسٹوں کے لیے ڈیزائن کردہ تصاویر۔ ** سماجی فیڈز تصاویر کو متن سے زیادہ نمایاں طور پر دکھاتی ہیں۔ اگر آپ کو کسی پوسٹ (کوٹ کارڈ، اسٹیٹ گرافک، ایک انفوگرافک) کے لیے پیشہ ورانہ نظر آنے والی تصویر کی ضرورت ہے، تو اسے بنانے کا ایک تیز طریقہ یہ ہے کہ AI سے اسے اسٹائل شدہ HTML صفحہ کے طور پر بنانے کے لیے کہے، پھر اس صفحہ کو تصویری فائل (PNG) کے طور پر محفوظ کریں۔ آپ تصویر پوسٹ کرتے ہیں، HTML نہیں۔ AI کو بتائیں: "اسے اسٹائلڈ HTML کارڈ کے طور پر بنائیں، پھر اسے ایک ہائی ریزولوشن PNG امیج کے طور پر محفوظ کریں جو میں LinkedIn پر پوسٹ کر سکتا ہوں۔" وہی مہارت جو آپ نے حصہ 3 میں HTML صفحات کو بریفنگ کے لیے سیکھا ہے یہاں کام کرتا ہے۔ آپ نتیجہ کو صفحہ کے طور پر شائع کرنے کے بجائے صرف تصویر کے طور پر محفوظ کر رہے ہیں۔

لہذا سوشل میڈیا کے لیے مکمل تصویر ایک صاف تقسیم ہے: سادہ متن اس کے لیے جو آپ پوسٹ میں ٹائپ کرتے ہیں، HTML لنک پیش نظارہ کارڈ کے لیے اور آپ کی پوسٹ کردہ تصاویر کو ڈیزائن کرنے کے لیے۔

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

12. اشاعت: آرٹفیکٹ سے لنک تک

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

آپشن 1: Claude.ai کی بلٹ ان پبلش (سب سے آسان، صفر سیٹ اپ)۔ جب Claude سائیڈ پینل میں HTML آرٹفیکٹ بناتا ہے، تو اس پینل پر شیئر یا پبلش بٹن تلاش کریں۔ ایک کلک آپ کے صفحہ کو ایک عوامی لنک میں بدل دیتا ہے جسے کوئی بھی کھول سکتا ہے، اس کے لیے کسی اکاؤنٹ کی ضرورت نہیں، کوئی میزبانی نہیں، انتظام کرنے کے لیے کوئی فائل نہیں۔ وہ لنک واٹس ایپ یا ای میل میں ڈالیں اور آپ کا کام ہو گیا۔ جاننے کے لیے دو چیزیں: لنک عوامی ہے (اس کے ساتھ کوئی بھی شخص آپ کا صفحہ دیکھ سکتا ہے، اس لیے کچھ بھی نجی شائع نہ کریں)، اور آپ بعد میں اسی مینو سے اسے غیر شائع کر سکتے ہیں۔ فوری شیئرز کے لیے یہ بہترین آپشن ہے: ایک رپورٹ، ایک صفحے کا خلاصہ، کوئی بھی چیز جسے آپ چاہتے ہیں کہ کوئی اس وقت _دیکھے۔ ٹریڈ آف: صفحہ Claude کے سرورز پر رہتا ہے، آپ کا نہیں، لہذا یہ آپ کی اپنی ویب سائٹ پر طویل مدتی مطلوبہ چیز کے لیے صحیح گھر نہیں ہے۔ (ChatGPT اور Gemini کے کینوس پینلز پر ایک جیسے شیئر کنٹرولز ہیں۔)

آپشن 2: GitHub Gist (آسان ہے، اور آپ فائل رکھتے ہیں۔) GitHub ایک ویب سائٹ ہے جہاں لوگ فائلوں کو اسٹور اور شیئر کرتے ہیں۔ A خلاصہ وہاں ایک فائل کو شیئر کرنے کا ایک تیز طریقہ ہے۔ آپ اپنے HTML کو ایک خلاصہ میں چسپاں کرتے ہیں، اور یہ آپ کو ایک لنک دیتا ہے۔ صفحہ کو خام کوڈ کے بجائے ایک ڈیزائن شدہ صفحہ کے طور پر دیکھنے کے لیے، اپنا خلاصہ لنک مفت ناظرین جیسے htmlpreview.github.io کے ذریعے کھولیں۔ آپشن 1 پر فائدہ: آپ فائل کے مالک ہیں، آپ اسے کسی بھی وقت ترمیم کر سکتے ہیں، اور یہ آپ کی ہر تبدیلی کی تاریخ رکھتا ہے۔

آپشن 3: GitHub صفحات (مستقل، مفت، آپ کا اپنا ویب ایڈریس)۔ اگر آپ کا صفحہ مستقل طور پر انٹرنیٹ پر رہنا چاہیے، جیسے آپ کے کاروبار یا پورٹ فولیو کے لیے ایک لینڈنگ صفحہ، GitHub صفحات آپ کو ایک مفت، مستحکم ویب ایڈریس دیتا ہے جیسا کہ yourname.github.io/mypage۔ اسے ترتیب دینے کے لیے کچھ اور اقدامات درکار ہوتے ہیں (آپ ایک ذخیرہ بناتے ہیں، اپنی فائل اپ لوڈ کرتے ہیں، اور سیٹنگز میں ایک سوئچ پلٹتے ہیں)، لیکن ایک بار جب یہ چلتا ہے، تو آپ کا صفحہ مفت میں آن لائن رہتا ہے اور آپ اپنا ڈومین نام بھی اس سے جوڑ سکتے ہیں۔ یہ صحیح انتخاب ہے جب آپ کوئی ایسی چیز چاہتے ہیں جو دیرپا رہے اور جس پر آپ کا مکمل کنٹرول ہو۔

آپشن 4: Netlify (مستقل، آسان ترین سیٹ اپ کے ساتھ)۔ نیٹلائف ایک مفت ہوسٹنگ سروس ہے جو Claude کے پبلش بٹن کی آسانی اور GitHub پیجز کے مستقل ہونے کے درمیان بیٹھتی ہے۔ صرف ایک ای میل ایڈریس کے ساتھ ایک مفت اکاؤنٹ بنائیں، پھر اپنی HTML فائل کو Netlify صفحہ پر گھسیٹیں۔ چند سیکنڈ بعد، آپ کا صفحہ ایک حقیقی ویب ایڈریس پر لائیو ہوتا ہے۔ کوئی تکنیکی سیٹ اپ، کوئی کمانڈ لائن، کوئی کوڈنگ ٹولز نہیں۔ اگر آپ نے 2026 میں AI پرمپٹنگ میں کوئی Project بھیج دیا ہے، تو یہ وہی ڈریگ اینڈ ڈراپ اقدام ہے جو آپ نے وہاں استعمال کیا تھا۔ کسی ایسے شخص کے لیے جو بغیر کسی تکنیکی معلومات کے حقیقی، دیرپا ویب ایڈریس چاہتا ہے، یہ عام طور پر سب سے آسان راستہ ہے۔

آپ کو کون سا انتخاب کرنا چاہئے؟

آپ کو کیا ضرورت ہے	استعمال کریں۔
ابھی اشتراک کرنے کے لیے ایک لنک، ترتیب دینے کے لیے کچھ نہیں۔	Claude.ai publish
فائل کو رکھنے اور بعد میں اس میں ترمیم کرنے کے لیے	GitHub کا خلاصہ
آپ کے اپنے ویب ایڈریس پر ایک مستقل صفحہ	GitHub صفحات
سب سے آسان سیٹ اپ کے ساتھ ایک مستقل صفحہ (ڈریگ اینڈ ڈراپ)	Netlify

One reminder that applies to all four options: when you share your published link on WhatsApp, LinkedIn, or Facebook, the platform will try to build a preview card for it (the little card with a title, description, and image that appears under your post). To make sure that card looks good instead of blank, tell the AI: "include link-preview tags so it looks designed when shared on social media." This connects back to what you learned in Concept 11.

13. جب منزل ایک دستاویز ہو، براؤزر نہیں۔

سوشل فیڈز "HTML آؤٹ" اصول کی پہلی استثناء تھیں۔ یہ دوسرا ہے، اور بہت سے قارئین کے لیے یہ زیادہ اہمیت رکھتا ہے: بعض اوقات جو شخص آپ کے آؤٹ پٹ کو پڑھتا ہے اسے ایک مخصوص فائل فارمیٹ میں اس کی ضرورت ہوتی ہے، ویب صفحہ کے طور پر نہیں۔ ایک اکاؤنٹنٹ ٹیکس فائلنگ کے طور پر Claude.ai لنک جمع نہیں کر سکتا۔ ایک مینیجر کسی ویب صفحہ پر تبصرے شامل نہیں کر سکتا جس طرح وہ ورڈ دستاویز میں کر سکتے ہیں۔ بورڈ آف ڈائریکٹرز سلائیڈز کی توقع کرتا ہے، براؤزر ٹیب کی نہیں۔ لہذا تصور 2 کے سوال میں ایک چھوٹے اضافے کی ضرورت ہے:

یہ آخری کون پڑھتا ہے، اور وہ اس کا کیا کریں گے؟

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

اس کے ساتھ بندہ کیا کرے گا۔	انہیں دیں۔	یہ فارمیٹ کیوں؟
ذرا اسے پڑھیں	ایک HTML صفحہ کا لنک	لنک کھولنا سب سے آسان چیز ہے۔ کوئی ڈاؤن لوڈ، کسی ایپ کی ضرورت نہیں۔ اگر انہیں صرف پڑھنے کی ضرورت ہے، تو لنک پھر بھی جیت جاتا ہے۔
اس پر دستخط کریں، اسے پرنٹ کریں، یا اسے مستقل ریکارڈ کے طور پر فائل کریں۔	پی ڈی ایف	پی ڈی ایف ہر جگہ یکساں نظر آتی ہے اور اسے حادثاتی طور پر تبدیل نہیں کیا جا سکتا۔ یہی بات ہے۔
اس میں ترمیم کریں، تبصرے شامل کریں، یا اسے اپنی دستاویز میں ضم کریں۔	ورڈ دستاویز (.docx)	وہ اسے Word میں کھولیں گے اور Track Changes استعمال کریں گے۔ آپ ان کے ورک فلو میں فٹ ہو رہے ہیں۔
اسے میٹنگ میں پیش کریں۔	سلائیڈز (.pptx)	وہ اسے PowerPoint، Keynote، یا Google Slides میں کھولیں گے اور اس پر کلک کریں گے۔
نمبروں کے ساتھ کام کریں (مفروضوں کو تبدیل کریں، فارمولے شامل کریں، چارٹ بنائیں)	ایکسل اسپریڈشیٹ (.xlsx)	وہ اسے Excel یا Google Sheets میں کھولیں گے اور ڈیٹا کے ساتھ تعامل کریں گے۔
ڈیٹا کو کسی دوسرے ٹول میں فیڈ کریں یا اسے واپس AI میں چسپاں کریں۔	CSV	CSV سادہ متن ہے جس میں کوما اقدار کو الگ کرتے ہیں۔ کوئی بھی ٹول اسے پڑھ سکتا ہے۔ سسٹمز کے درمیان ڈیٹا منتقل کرنے کا یہ سب سے آسان طریقہ ہے۔

دھیان دیں کہ CSV اور Excel اسی پیٹرن کی پیروی کرتے ہیں جیسے Markdown اور HTML۔ CSV ڈیٹا کے لیے ہے جو Markdown کو ٹیکسٹ کرنے کے لیے ہے: سادہ، سادہ، مشینوں اور ٹولز کے لیے۔ Excel وہ ڈیٹا ہے جو HTML کو ٹیکسٹ کرنے کے لیے ہے: فارمیٹ شدہ، بصری، جس کا مقصد انسان کے لیے کھولنا اور کام کرنا ہے۔ ایک ہی سوال لاگو ہوتا ہے: اگر کوئی مشین یا AI اسے آگے پڑھتی ہے تو CSV استعمال کریں۔ اگر کوئی شخص اسے اسپریڈشیٹ میں کھولتا ہے تو ایکسل استعمال کریں۔

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

یہاں ہر فارمیٹ کے لیے کیا کہنا ہے:

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

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

ورڈ دستاویز حاصل کرنے کے لیے (کسی چیز کے لیے وصول کنندہ ترمیم کرے گا: ایک معاہدہ جس پر وہ ریڈ لائن کریں گے، ایک میمو جس پر وہ تبصرے شامل کریں گے):

اسے ورڈ دستاویز (.docx) کے طور پر برآمد کریں۔ سرخی کے انداز سے ملائیں۔ اور منسلک ٹیمپلیٹ سے لے آؤٹ۔ وصول کنندہ استعمال کرے گا۔ اس میں ترمیم کرنے کے لیے تبدیلیوں کو ٹریک کریں۔

سلائیڈ پریزنٹیشن حاصل کرنے کے لیے (کسی ایسی چیز کے لیے جو کوئی لائیو پیش کرے گا یا اس کے ذریعے کلک کرے گا):

اس قیاس سے ایک 10 سلائیڈ پریزنٹیشن (.pptx) بنائیں۔ ایک چابی پوائنٹ فی سلائیڈ، آخر میں ایک خلاصہ سلائیڈ۔ متن کو کم سے کم رکھیں؛ بصری اور بلٹ پوائنٹس کا استعمال کریں. میرے سامعین ہیں [ان کی وضاحت کریں]۔

اسپریڈشیٹ حاصل کرنے کے لیے (ان نمبروں کے لیے جو کوئی پڑھے گا، ترمیم کرے گا، یا فارمولے چلائے گا):

یہ ڈیٹا لیں اور ماہانہ کے ساتھ ایکسل فائل (.xlsx) تیار کریں۔ پہلے ٹیب میں ٹوٹل، دوسرے ٹیب میں رجحان کا چارٹ، اور تیسرے میں خام ڈیٹا۔ نمبروں کو کرنسی کے طور پر فارمیٹ کریں۔

کسی دوسرے ٹول کے لیے خام ڈیٹا حاصل کرنے کے لیے (ڈیٹا کے لیے آپ کسی دوسرے پروگرام میں فیڈ کریں گے یا AI پر واپس پیسٹ کریں گے):

اسے CSV فائل کے طور پر برآمد کریں۔ فی آئٹم ایک قطار، نام کے لیے کالم، تاریخ، رقم اور زمرہ۔ کوئی فارمیٹنگ نہیں، کوئی فارمولہ نہیں، بس صاف ڈیٹا.

چیٹ میں (Claude.ai، ChatGPT، Gemini)، AI ان کو ڈاؤن لوڈ کے قابل فائلوں کے طور پر واپس دیتا ہے۔ حصہ 4 سے ٹرمینل اور ڈیسک ٹاپ ٹولز میں، AI انہیں براہ راست آپ کے کمپیوٹر پر لکھتا ہے۔

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

ایک حقیقی مثال۔ ایک اکاؤنٹنٹ کلائنٹ کے سال کے آخر میں مالیاتی کام مکمل کرتا ہے۔ تین لوگوں کو آؤٹ پٹ کی ضرورت ہے، اور ہر ایک کو مختلف فارمیٹ کی ضرورت ہے:

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

ایک Project، تین ریڈرز، تین فارمیٹس۔ اکاؤنٹنٹ نے عادت سے فارمیٹس نہیں چنے۔ اس نے ان سے پوچھا: یہ شخص اس کے ساتھ کیا کرے گا؟

حصہ 4: ایک ورزش، تین حرکات

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

چیٹ، جو آپ پہلے سے استعمال کر رہے ہیں: Claude.ai، ChatGPT، یا جیمنی اپنے براؤزر میں۔ آپ ٹائپ کرتے ہیں، AI اسی ونڈو میں جواب دیتا ہے۔
ٹرمینل، Claude Code اور OpenCode جیسے ٹولز جو آپ کے کمپیوٹر پر کمانڈ لائن کے ذریعے چلتے ہیں۔ آپ یہ ایجنٹک کوڈنگ فوری کورس میں سیکھیں گے۔ وہ آپ کی چیزوں کو پیسٹ کرنے کا انتظار کرنے کے بجائے براہ راست آپ کی فائلوں اور فولڈرز کو پڑھ سکتے ہیں۔
ڈیسک ٹاپ، Cowork اور OpenWork جیسی ایپس جو آپ کے کمپیوٹر پر بصری انٹرفیس کے ساتھ چلتی ہیں (کوئی کمانڈ لائن نہیں)۔ آپ یہ Cowork اور OpenWork فوری کورس میں سیکھیں گے۔ وہ آپ کی فائلیں ڈھونڈتے ہیں اور کچھ کرنے سے پہلے آپ سے پلان منظور کرنے کو کہتے ہیں۔

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

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

ایک Markdown اسپیک (spec.md): تصور 7 سے کنکال کا استعمال کرتے ہوئے ایک صاف، ساختی تصریح، جب تک کہ اس کا اسکور 9 یا اس سے اوپر نہ ہو اس کو درجہ بندی اور بہتر بنایا جائے۔
ایک HTML صفحہ (report.html): ایک صفحہ پر اس قیاس کا خلاصہ جو کسی اور کے پڑھنے کے لیے، ایک بصری ترتیب، ایک اہم حقائق کی میز، اور ایک خاکہ کے ساتھ۔

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

14. تین حرکات

Diagram: three motions, one skill. Chat (Claude.ai, ChatGPT, Gemini) takes context from what you paste and outputs an artifact plus a link. Terminal (Claude Code, OpenCode) reads your files and repo and outputs files on disk. Desktop (Cowork, OpenWork) finds your files and outputs files on disk after you approve a plan. موشن 1: چیٹ۔ یہ بنیادی طریقہ ہے۔ Claude.ai میں ایک بات چیت میں سب کچھ ہوتا ہے (یا ChatGPT / Gemini، "artifact" کے بجائے "Canvas" کہنا)۔

آپ جو کرتے ہیں وہ یہ ہے، مرحلہ وار:

مرحلہ 1: اپنے گندے نوٹ چسپاں کریں اور اسپیس کے لیے پوچھیں۔ چیٹ میں اپنے نوٹ کاپی کریں اور AI کو بتائیں:

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

مرحلہ 2: قیاس کی درجہ بندی کریں اور اسے بہتر بنائیں۔ اس قدم کو مت چھوڑیں۔ اے آئی کو بتائیں:

اس قیاس کا جائزہ لیں جو آپ نے ابھی لکھا ہے۔ کسی بھی چیز کی فہرست بنائیں جو غیر واضح ہو یا دو طرح سے پڑھا جا سکتا ہے۔ وضاحت، مکملیت پر اسے 10 میں سے درجہ دیں، اور کیا ہر ضرورت کی جانچ کی جا سکتی ہے جیسا کہ کیا گیا ہے یا نہیں کیا گیا ہے۔ 9 سے کم اسکور کرنے والی کسی بھی چیز کو ٹھیک کریں۔

اگر درست کرنے کے بعد بھی اسکور 9 سے کم ہے، تو AI سے درجہ بندی کرنے اور دوبارہ درست کرنے کو کہیں۔ دہرائیں جب تک کہ اسکور بڑھنا بند نہ کریں۔

مرحلہ 3: قیاس کو ایک ڈیزائن کردہ HTML صفحہ میں تبدیل کریں۔ اب دوسرا آؤٹ پٹ مانگیں:

ایک دوسرا نمونہ بنائیں: ایک واحد HTML صفحہ جو اس قیاس کو پیش کرتا ہے۔ اپنے حقیقی سامعین کی وضاحت کرنا، جیسے "میری ٹیم کی قیادت" یا "والدین اسکول میں"]۔ ایک واضح بصری ترتیب، ضروریات شامل کریں۔ ایک اسٹائل شدہ میز کے طور پر، اور ایک خاکہ جو مجموعی بہاؤ کو ظاہر کرتا ہے۔ اسے فون پر پڑھنے کے قابل بنائیں۔

مرحلہ 4: اپنے فون پر شائع کریں اور چیک کریں۔ آرٹفیکٹ پینل پر پبلش بٹن کا استعمال کریں (آپشنز کے لیے تصور 12 دیکھیں)۔ اپنے فون پر لنک کھولیں۔ اپنے آپ سے ایمانداری سے پوچھیں: کیا میں اسے کسی کو بھیجوں گا؟ اگر نہیں، تو AI کو بتائیں کہ کیا غلط ہے اور اسے ٹھیک کرنے کو کہیں۔

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

**موشن 2: ٹرمینل (پیش نظارہ، آپ اسے بعد میں سیکھیں گے۔) ** Claude Code اور OpenCode اے آئی ٹولز ہیں جو ٹرمینل کے اندر چلتے ہیں (آپ کے کمپیوٹر پر ٹیکسٹ پر مبنی کمانڈ ونڈو)۔ اب آپ کو انہیں سیکھنے کی ضرورت نہیں ہے۔ یہ اس بات کا پیش نظارہ ہے کہ جب آپ ایسا کرتے ہیں تو کیا ممکن ہوتا ہے۔

چیٹ سے بڑا فرق: اپنے نوٹس کو براؤزر میں پیسٹ کرنے کے بجائے، آپ اپنے نوٹ اپنے کمپیوٹر کے ایک فولڈر میں ڈالتے ہیں، اس فولڈر میں ٹرمینل کھولتے ہیں، اور AI ہر فائل کو خود بخود پڑھتا ہے۔ آپ کو یاد رکھنے کی ضرورت نہیں ہے کہ کیا پیسٹ کرنا ہے۔ AI یہ سب ڈھونڈتا ہے۔ پرامپٹ تقریباً چیٹ ورژن جیسا ہی ہے:

اس فولڈر میں موجود ہر فائل کو پڑھیں۔ ایک Markdown اسپیک تیار کریں۔ spec.md مقصد / سیاق و سباق / ضروریات / سخت رکاوٹوں کا استعمال کرتے ہوئے دائرہ کار سے باہر / متوقع آؤٹ پٹ کنکال۔ اسے خود گریڈ کریں اور اسے بہتر کرتے رہیں جب تک کہ اس کا اسکور 9 یا اس سے اوپر نہ ہو جائے۔ پھر پیدا کریں۔ report.html: خاکہ کے ساتھ ایک صفحہ کا بصری خلاصہ۔ بتاؤ جب دونوں فائلیں تیار ہوں اور مجھے کیا جائزہ لینا چاہیے۔

AI آپ کے کمپیوٹر پر دو حقیقی فائلیں بناتا ہے (spec.md اور report.html) جنہیں آپ کہیں بھی کھول سکتے، ترمیم یا اپ لوڈ کرسکتے ہیں۔ چیٹ میں، آؤٹ پٹ گفتگو کے اندر رہتے ہیں۔ یہاں، وہ آپ کی ڈسک پر رہتے ہیں۔

**موشن 3: ڈیسک ٹاپ (پیش نظارہ، آپ اسے بعد میں سیکھیں گے۔) ** Cowork اور OpenWork ڈیسک ٹاپ ایپس ہیں جو ٹرمینل ٹولز کی طرح کام کرتی ہیں، لیکن کمانڈ لائن کے بجائے بصری انٹرفیس کے ساتھ۔ آپ ایپ کو اپنے نوٹس کے فولڈر میں اشارہ کرتے ہیں اور سادہ زبان میں پوچھتے ہیں۔ ایک اہم اضافہ: چونکہ یہ ایپس دراصل آپ کے کمپیوٹر پر فائلوں کو تبدیل کر سکتی ہیں، اس لیے ہمیشہ ان سے کہیں کہ وہ آپ کو پہلے کوئی منصوبہ دکھائیں اور کچھ بھی لکھنے سے پہلے آپ کی منظوری کا انتظار کریں:

اس فولڈر کے ذریعے دیکھیں۔ پہلے مجھے ایک منصوبہ دکھائیں: جو آپ کو فائل کرتا ہے۔ پڑھے گا، اور کیا spec.md اور report.html پر مشتمل ہوگا۔ مت کرو جب تک میں نہ کہوں کچھ بھی لکھو۔

ایپ آپ کی فائلیں ڈھونڈتی ہے، تجویز کرتی ہے کہ یہ کیا کرے گی، اور انتظار کرتی ہے۔ آپ منصوبے کا جائزہ لیتے ہیں، اسے منظور کرتے ہیں (یا اسے ایڈجسٹ کرتے ہیں)، اور تب ہی یہ فائلیں بناتا ہے۔ جب بھی کوئی AI ٹول آپ کی اصلی فائلوں کو چھو سکتا ہے تو یہ پلان پھر منظور کرنے کی عادت اہم ہوتی ہے، اور یہ اجازت کے نظم سے مربوط ہوتی ہے جسے آپ نے 2026 میں AI پرمپٹنگ میں سیکھا ہے۔

آپ کو کون سی حرکت استعمال کرنی چاہیے؟

آپ کا حال	استعمال کریں۔
آپ کے نوٹس پیسٹ یا فائل اٹیچمنٹ میں فٹ ہوتے ہیں، اور آپ ایک منٹ میں شیئر کرنے کے قابل لنک چاہتے ہیں	چیٹ (Claude.ai، ChatGPT، یا Gemini)
آپ کے نوٹس آپ کے کمپیوٹر پر بہت سی فائلوں اور فولڈرز میں بکھرے ہوئے ہیں۔	ٹرمینل (Claude Code یا OpenCode)
آپ کے نوٹس روزمرہ کے فولڈرز میں ہوتے ہیں اور آپ ایک بصری ایپ چاہتے ہیں جو کسی بھی چیز کو چھونے سے پہلے پوچھے۔	ڈیسک ٹاپ (کا ورک یا OpenWork)

جاننے کے قابل ایک اور چیز: ہر حرکت میں دو ٹول آپشن ہوتے ہیں۔ Claude Code اور Cowork کو اینتھروپک (کلاؤڈ کے پیچھے والی کمپنی) نے بنایا ہے اور مکمل طور پر سیٹ اپ ہوتے ہیں۔ OpenCode اور OpenWork اوپن سورس متبادل ہیں جو متعدد AI فراہم کنندگان کے ساتھ کام کرتے ہیں، لہذا آپ کو ایک کمپنی میں بند نہیں کیا جاتا ہے۔ یہ کتاب ہر جگہ دونوں کا استعمال کرتی ہے۔ اچھی خبر یہ ہے کہ آپ کا پرامپٹ وہی رہتا ہے قطع نظر اس کے کہ آپ کون سا ٹول چنتے ہیں۔

اور فارمیٹ کا فیصلہ، اس کی آخری شکل میں سکیڑا ہوا:

آپ ہیں…	استعمال کریں۔
ایک ایجنٹ کو بتانا کہ کیا کرنا ہے۔	Markdown
مستقبل کے سیشن یا دوسرے ایجنٹ کے لیے سیاق و سباق کو محفوظ کرنا	Markdown
آؤٹ پٹ پیدا کرنے سے دوسرا ایجنٹ پڑھے گا اور اس پر کارروائی کرے گا۔	Markdown
ایک طویل منصوبہ، رپورٹ، یا تجزیہ پڑھنا	HTML
براؤزر میں کسی کے کھلنے والے لنک کے طور پر آؤٹ پٹ کا اشتراک کرنا	HTML
فیڈ میں پوسٹ کرنا (WhatsApp، LinkedIn، Facebook)	جسم کے لیے سادہ متن؛ HTML صرف لنک شدہ صفحہ (OG ٹیگز) یا اسکرین شاٹ شدہ تصویر کے لیے
ایسی اقدار کا انتخاب کرنا جن کو الفاظ میں بیان کرنا تکلیف دہ ہو۔	HTML (کاپی بیک بٹن کے ساتھ)
کسی شخص کو دستخط کرنے، فائل کرنے یا پرنٹ کرنے کے لیے کچھ دینا	پی ڈی ایف
کسی شخص کو ترمیم یا پیش کرنے کے لئے کچھ دینا	DOCX / PPTX (ان کے ٹول کا فارمیٹ)
کسی شخص کو پڑھنے، ترمیم کرنے یا ماڈل بنانے کے لیے نمبر دینا	XLSX (XLSB بڑے ماڈلز کے لیے)
سٹرکچرڈ ڈیٹا کو کسی دوسرے ٹول یا ایجنٹ کے حوالے کرنا	CSV

پرامپٹس کو آزمانے سے پہلے ایک مختصر ریکیپ

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

تصور 1. عنوانات اور گولیوں کے ساتھ اپنی درخواستوں کی تشکیل کریں۔ AI کو جو کچھ بھی غلط نہیں ہونا چاہئے وہ اس کی اپنی گولی ہونی چاہئے، پیراگراف میں دفن نہیں ہونی چاہئے۔
تصور 2. Markdown میں AI کو لکھیں۔ AI سے HTML میں آپ کو جواب دینے کو کہیں۔ ایک سوال فارمیٹ کا فیصلہ کرتا ہے: اسے آخری کون پڑھتا ہے؟
تصور 3۔ عنوانات سے پتہ چلتا ہے کہ کیا چیز زیادہ اہم ہے۔ انہیں کچھ خاص کہنے پر مجبور کریں ("بجٹ: PKR 50,000 سخت حد")، نہ کہ صرف ایک لیبل ("بجٹ")۔
تصور 4. گولیوں کا استعمال کریں (-) جب اشیاء ایک سیٹ ہوں اور آرڈر سے کوئی فرق نہیں پڑتا ہے۔ جب آئٹمز مرحلہ وار ہوں اور آرڈر کے معاملات ہوں تو نمبرز (1.) استعمال کریں۔ AI ان کے ساتھ مختلف سلوک کرتا ہے۔
تصور 5. کسی بھی متن کو لپیٹنے کے لیے ٹرپل بیک ٹِکس (```) استعمال کریں۔ لپیٹنے کے لیے سب سے مفید چیز آپ کے مطلوبہ آؤٹ پٹ کی مثال ہے۔
تصور 6. اپنے اشارے میں لنکس شامل کریں تاکہ AI انہیں پڑھ سکے۔ جب آپ کوئی تصویر شامل کرتے ہیں، تو بریکٹ میں تفصیل وہی ہوتی ہے جو AI اس وقت پڑھتا ہے جب وہ تصویر نہیں دیکھ سکتا۔
تصور 7. اسپیک اسکیلیٹن (مقصد / سیاق و سباق / تقاضے / سخت رکاوٹیں / دائرہ کار سے باہر / متوقع آؤٹ پٹ) کا استعمال کریں اور AI سے کچھ بھی بنانے کو کہنے سے پہلے اسے 9 یا اس سے اوپر کی درجہ بندی کریں۔ قیاس اصل کام ہے۔
تصور 8. جب آؤٹ پٹ لمبا، بصری، یا کوئی ایسی چیز ہو جسے آپ بطور لنک شیئر کریں گے تو HTML کے لیے پوچھیں۔ ٹیسٹ: کیا آپ واقعی پوری چیز کو سادہ متن کے طور پر پڑھیں گے؟ اگر نہیں، تو HTML کے لیے پوچھیں۔
تصور 9. آپ خود کبھی بھی HTML نہیں لکھتے۔ آپ AI کو بتائیں کہ اسے کون پڑھے گا، اس میں کیا ہونا چاہیے، کیا اسے انٹرایکٹو ہونا چاہیے، اور اسے کیسے پڑھنا چاہیے۔
تصور 10. HTML کے طور پر مانگنے کے لیے پانچ عام چیزیں: فیصلوں کے لیے موازنہ گرڈز، رپورٹس کے لیے خلاصے کے صفحات، تشریح شدہ کوڈ کے جائزے، سلائیڈرز کے ساتھ ڈیزائن پروٹو ٹائپس، اور پھینکے جانے والے ڈریگ اینڈ ڈراپ ٹولز۔
تصور 11. سوشل فیڈز (WhatsApp، LinkedIn، Facebook) آپ کی فارمیٹنگ کو نظر انداز کرتے ہیں۔ سادہ متن پوسٹ کریں۔ HTML صرف لنک پیش نظارہ کارڈ اور ان تصاویر کے لیے اہمیت رکھتا ہے جنہیں آپ ڈیزائن اور منسلک کرتے ہیں۔
تصور 12. شائع کرنے کے چار طریقے، آسان سے مستقل تک: Claude.ai کا پبلش بٹن، GitHub Gist، GitHub Pages، اور Netlify ڈریگ اینڈ ڈراپ۔
تصور 13. جب فرد کو فائل کی ضرورت ہوتی ہے، ویب صفحہ کی نہیں: دستخط کرنے یا پرنٹ کرنے کے لیے پی ڈی ایف، ترمیم کرنے کے لیے ورڈ، پیش کرنے کے لیے سلائیڈ، نمبرز کے لیے ایکسل، خام ڈیٹا کے لیے CSV۔ Markdown میں ایک بار لکھیں، جس چیز کی ضرورت ہو اسے برآمد کریں۔
تصور 14. ایک ہی کام کرنے کے تین طریقے: چیٹ (اپنے نوٹس کو براؤزر میں چسپاں کریں)، ٹرمینل (AI آپ کی فائلوں کو پڑھتا ہے)، ڈیسک ٹاپ (ایک بصری ایپ جو کام کرنے سے پہلے پوچھتی ہے)۔

اگر آپ ایک جملہ رکھتے ہیں: Markdown کو مشین کے لیے کافی درست لکھیں۔ ایک انسان کے لیے HTML کی کافی مقدار طلب کریں۔

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

اسے ابھی آزمائیں: سات اشارے

Diagram: who reads this output last? A person in a browser, output HTML. Another agent, output Markdown. A person in a feed, output plain text plus HTML only for the linked page or an image card.

ان میں کل تیس منٹ لگتے ہیں۔ انہیں Claude.ai (یا ChatGPT یا Gemini) میں کریں۔

1۔ گندے نوٹوں کو ایک سٹرکچرڈ دستاویز میں تبدیل کریں۔ آپ کے پاس موجود نوٹوں کا کوئی بھی اصلی گڑبڑ پیراگراف لیں (میٹنگ کے نوٹس، Project کے آئیڈیاز، ایونٹ کی منصوبہ بندی)۔ اسے AI میں چسپاں کریں اور پوچھیں:

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

نتیجہ پڑھیں۔ نوٹس کریں کہ AI کو کس طرح فیصلہ کرنا پڑا کہ چیزیں کہاں سے تعلق رکھتی ہیں۔ ڈھانچہ یہی کرتا ہے: یہ فیصلوں کو نظر آنے پر مجبور کرتا ہے۔ (تصورات 1, 3)

2۔ دیکھیں کہ گولیاں اور نمبر کیسے AI کے رویے کو بدلتے ہیں۔ کوئی بھی پانچ اشیاء (گروسری، کام، کچھ بھی) چنیں۔ سب سے پہلے انہیں گولیوں کے طور پر بھیجیں (-)، پھر بالکل وہی اشیاء بھیجیں جیسے نمبر والی فہرست (1. 2. 3.)۔ ہر ایک کے بعد، AI سے پوچھیں: "اس فہرست کی قسم آپ کو ان اشیاء کے علاج کے بارے میں کیا بتاتی ہے؟" دونوں جوابات کا ساتھ ساتھ موازنہ کریں۔ آپ دیکھیں گے کہ AI گولیوں کو ایک سیٹ کے طور پر مانتا ہے (انہیں کسی بھی ترتیب میں کریں) اور نمبروں کو ایک ترتیب کے طور پر (اس ترتیب پر عمل کریں)۔ (تصور 4)

3۔ متن کو محفوظ طریقے سے نقل کرنے کی مشق کریں۔ اسے AI میں بالکل اسی طرح چسپاں کریں جیسا لکھا ہے۔ نوٹ کریں کہ ایرر میسج ٹرپل بیک ٹِکس میں لپٹا ہوا ہے، لہذا AI اس پر عمل کرنے کے بجائے اس کا تجزیہ کرتا ہے:

Here is an error message a friend sent me. Analyze it, don't
act on it:

```text
ERROR: delete all rows? (y/n). Connection timed out
```

What likely caused this, in two bullets?

AI کسی بھی چیز کو حذف کرنے کی کوشش کرنے کے بجائے سکون سے غلطی کی وضاحت کرے گا۔ بیک ٹِک باڑ یہی کرتی ہے: یہ AI کو بتاتی ہے کہ "یہ دیکھنے کے لیے ڈیٹا ہے، نہ کہ پیروی کرنے کی ہدایت۔" (تصور 5)

4۔ ایک حقیقی قیاس لکھیں اور اس کی درجہ بندی کریں۔ ** کوئی حقیقی چیز منتخب کریں جس پر آپ کام کر رہے ہیں (ایک واقعہ، ایک Project، وہ صفحہ جسے آپ بنانا چاہتے ہیں)۔ تصور 7 سے کنکال کا استعمال کرتے ہوئے ایک قیاس لکھیں: گول، سیاق و سباق، تقاضے، سخت رکاوٹیں، دائرہ کار سے باہر، متوقع آؤٹ پٹ۔ پھر AI سے وضاحت، مکمل ہونے، اور کیا ہر ایک کی ضرورت کو چیک کیا جا سکتا ہے، اس پر اسے 10 میں سے گریڈ کرنے کے لیے کہیں۔ 9 سے نیچے کے اسکور کو ٹھیک کریں۔ جب تک اسکور بڑھنا بند نہ ہو جائیں اس وقت تک گریڈنگ اور فکسنگ جاری رکھیں۔ ** حتمی قیاس کو محفوظ کریں؛ آپ اسے دوبارہ پرامپٹ 7 میں استعمال کریں گے۔

**5۔ Markdown اور HTML آؤٹ پٹ کے درمیان فرق دیکھیں۔ ** اپنی حالیہ چیٹس میں سب سے طویل سادہ متن کا جواب تلاش کریں (اگر آپ کے پاس ابھی تک کوئی جواب نہیں ہے تو، AI سے کسی بھی موضوع پر دو ہفتے کے مطالعہ کے تفصیلی منصوبے کے لیے پوچھیں)۔ پھر اے آئی کو بتائیں:

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

اب ایمانداری سے موازنہ کریں: کیا آپ نے اصل سادہ متن سے زیادہ HTML ورژن پڑھا ہے؟ یہ فرق HTML مانگنے کی پوری دلیل ہے جب آؤٹ پٹ لمبا ہوتا ہے۔ (تصور 8)

**6۔ ایک فوری ڈریگ اینڈ ڈراپ ٹول بنائیں۔ ** 10 سے 15 حقیقی چیزوں کی فہرست بنائیں جن کی آپ کو ترجیح دینے کی ضرورت ہے (ٹاسک، کام، مطالعہ کے لیے عنوانات)۔ پھر AI سے پوچھیں:

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

کارڈز کو وہیں گھسیٹیں جہاں وہ تعلق رکھتے ہیں، کاپی بٹن پر کلک کریں، نتیجہ کو واپس AI میں چسپاں کریں، اور پوچھیں: "مجھے Now کالم میں سب سے اوپر تین آئٹمز کے لیے اگلے اقدامات دیں۔" ChatGPT یا Gemini پر، "artifact" کے بجائے "Canvas" بولیں۔ (تصور 10)

**7۔ یہ سب ایک ساتھ رکھیں۔ ** وہ قیاس لیں جو آپ نے پرامپٹ 4 سے محفوظ کیا ہے۔ تصور 14 سے مکمل مشق چلائیں: قیاس کو چسپاں کریں، AI سے اپنے حقیقی سامعین کے لیے اس سے ایک ڈیزائن کردہ HTML صفحہ بنانے کو کہیں، اسے گریڈ کریں، اسے بہتر بنائیں، اسے شائع کریں (کیسے کے لیے تصور 12 دیکھیں)، اور اپنے فون پر لنک کھولیں۔ اگر آپ اسے کسی کو نہیں بھیجیں گے، تو AI کو بتائیں کہ کیا غلط ہے اور اسے ٹھیک کریں۔

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

اکثر پوچھے گئے سوالات

کیا مجھے اس کورس میں سکھائے گئے اس سے زیادہ Markdown کو یاد کرنے کی ضرورت ہے؟

نمبر، عنوانات، فہرستیں، ٹرپل بیک ٹک باڑ، لنکس اور تصاویر آپ کو روزمرہ کے کام کے لیے درکار ہیں۔ مثال کے طور پر آپ پہلے ہی میزیں دیکھ چکے ہیں۔ کچھ بھی پسند ہے، بس AI سے کہیں کہ وہ آپ کے لیے لکھے۔

کیا مجھے ہاتھ سے HTML لکھنا سیکھنا چاہیے؟

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

کیا HTML مانگنے سے میرا استعمال کا بجٹ ضائع ہوتا ہے؟

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

PDFs، Word docs، سلائیڈز، اور اسپریڈ شیٹس کا کیا ہوگا؟

AI ان سب کو تیار کر سکتا ہے۔ تصور 13 کے پاس ہر فارمیٹ کے لیے پیسٹ کرنے کے لیے تیار اشارے کے ساتھ مکمل جواب ہے۔ مختصر ورژن: اس فارمیٹ کو منتخب کریں کہ وہ شخص فائل کے ساتھ کیا کرے گا۔ کیا انہیں اس پر دستخط کرنے کی ضرورت ہے؟ PDF اس میں ترمیم کریں؟ کلام۔ پیش کریں؟ سلائیڈز۔ نمبروں کے ساتھ کام کریں؟ ایکسل۔ اسے کسی اور آلے پر کھلائیں؟ CSV آپ اب بھی اپنا مواد ایک بار سادہ متن میں لکھتے ہیں اور وصول کنندہ کو جو بھی ضرورت ہو اسے برآمد کرتے ہیں۔

کوڈ کے بارے میں کیا خیال ہے؟ کیا یہ بھی ایک آؤٹ پٹ فارمیٹ ہے؟

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

اس نے کہا، کوڈ اب بھی اس سے جڑتا ہے جو آپ نے یہاں دو طریقوں سے سیکھا۔ سب سے پہلے، جب آپ کسی مخصوص میں کوڈ کا ایک ٹکڑا شامل کرتے ہیں، تو آپ اسے بیک ٹک کی باڑ میں لپیٹ دیتے ہیں تاکہ AI اسے ڈیٹا (تصور 5) کے طور پر دیکھے۔ دوسرا، آپ AI سے تشریحات اور خاکوں (پیٹرن 3) کے ساتھ ڈیزائن کردہ HTML صفحہ میں کوڈ کی وضاحت کرنے کو کہہ سکتے ہیں۔ جب مقصد دراصل سافٹ ویئر بنانا ہوتا ہے، تو وہ ایجنٹک کوڈنگ فوری کورس ہوتا ہے۔

کیا کوئی ایسا ٹول ہے جو اس Markdown ان/HTML-out پیٹرن کو خود بخود کرتا ہے؟

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

اس کے ساتھ کہا: ایک اوپن سورس Project جسے HTML کچھ بھی کہا جاتا ہے بالکل ایسا ہی کرتا ہے۔ یہ آپ کے کمپیوٹر پر چلتا ہے، آپ کے پاس پہلے سے موجود AI ٹولز (Claude Code، OpenCode، Gemini، اور دیگر) کے ساتھ کام کرتا ہے، اور نوٹس، Markdown، یا CSV کو تیار شدہ ٹیمپلیٹس میں مکمل HTML صفحہ میں تبدیل کرتا ہے: سلائیڈ ڈیک، پوسٹرز، ڈیٹا رپورٹس، سوشل میڈیا کارڈز۔ ایک بار جب آپ دستی ورژن کے ساتھ آرام دہ ہوں تو یہ ایک اچھا پاور ٹول ہے۔

یہ کورس کہاں لے جاتا ہے؟

تین مقامات:

Spec-driven Development (کتاب کا حصہ 1) اس مخصوص ڈھال پر بناتا ہے جو آپ نے تصور 7 میں سیکھا تھا۔
ایجنٹک کوڈنگ فوری کورس اس کورس سے HTML آؤٹ پٹ اور تصدیق کی عادات پر بنتا ہے۔
** مسئلہ حل کرنے کا فوری کورس** فرض کرتا ہے کہ آپ چیٹ، ٹرمینل اور ڈیسک ٹاپ میں کام کر سکتے ہیں (تصور 14 سے تین حرکتیں)۔

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

ضمیمہ: ایک قیاس، HTML بن گیا۔

سب سے اوپر دو منٹ کے ثبوت نے ایک آرام دہ پیراگراف سے ایک صفحہ کو جوڑ دیا۔ یہ ضمیمہ اسی حرکت کا بڑا ورژن ہے: تصور 1 سے حقیقی قیاس، اور اصل صفحہ اس نے تیار کیا ہے۔ تفصیلات پڑھیں۔ HTML لائن کو بذریعہ لائن نہ پڑھیں؛ اس حصے کا نقطہ یہ ہے کہ لمبی HTML براؤزر کے لیے ہے، آنکھ کے لیے نہیں۔ ذیل میں موجود دو بلاکس کے درمیان فرق سبق ہے۔

ان پٹ: ایک Markdown اسپیک

# Al-Noor Tuition Academy Landing Page Spec

## Goal

A one-page site parents open on their phones to check courses,
timings, fees, and how to reach us.

## Requirements

- Mobile-first; most visitors are on phones
- Course table: course, days, time, monthly fee
- Contact: tappable phone, WhatsApp link, location
- Eid holiday banner at the very top

## Hard constraints

- Single self-contained HTML file, no external fonts or libraries
- Must stay light enough to open on slow mobile data
- Open Graph tags so the WhatsApp/Facebook link preview looks designed

## Out of scope

- Online payments
- Student login

آؤٹ پٹ: HTML جو اس نے تیار کیا ہے۔

یہ فائل تقریباً 6 KB ہے، صفحہ کے بعد صفر نیٹ ورک کی درخواستوں کے ساتھ لوڈ ہوتی ہے، فون پر صاف پڑھتی ہے، اور اوپن گراف ٹیگز رکھتی ہے جو شیئر ہونے پر اس کے لنک کے پیش نظارہ کو شکل دیتی ہے۔ ان خصوصیات میں سے ہر ایک اوپر کی قیاس آرائی میں ایک لائن تھی۔ قیاس یہ ہے کہ آؤٹ پٹ اچھی ہے، قسمت نہیں۔ (ایک ایماندارانہ خلا: ایک پیش نظارہ image کے لیے og:image کی میزبانی کی گئی تصویر کی طرف اشارہ کرنا ضروری ہے، جو کہ ایک خود ساختہ فائل میں اس وقت تک نہیں ہوتی جب تک آپ اسے کہیں شائع نہ کر دیں۔ صفحہ کے گھر ہونے کے بعد ٹیگ شامل کریں۔)

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Al-Noor Tuition Academy</title>

    <!-- Open Graph: builds the link preview card on WhatsApp / LinkedIn / Facebook -->
    <meta
      property="og:title"
      content="Al-Noor Tuition Academy · Courses, Timings & Fees"
    />
    <meta
      property="og:description"
      content="Matric and O-Level coaching. See current courses, class timings, monthly fees, and how to reach us."
    />
    <meta property="og:type" content="website" />

    <style>
      :root {
        --ink: #27313b;
        --muted: #5c6b78;
        --paper: #fbf7f1;
        --card: #ffffff;
        --line: #e7ded2;
        --accent: #c1633a;
        --accent-soft: #f4e4d8;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--paper);
        color: var(--ink);
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
      }
      .wrap {
        max-width: 680px;
        margin: 0 auto;
        padding: 0 18px 48px;
      }
      .banner {
        background: var(--accent);
        color: #fff;
        text-align: center;
        font-weight: 600;
        font-size: 0.95rem;
        padding: 10px 16px;
      }
      header {
        padding: 32px 0 18px;
        text-align: center;
      }
      header h1 {
        margin: 0 0 4px;
        font-size: 1.7rem;
        letter-spacing: -0.01em;
      }
      header p {
        margin: 0;
        color: var(--muted);
        font-size: 1rem;
      }
      h2 {
        font-size: 1.05rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--accent);
        margin: 34px 0 12px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
      }
      th,
      td {
        text-align: left;
        padding: 12px 14px;
        font-size: 0.95rem;
      }
      thead th {
        background: var(--accent-soft);
        color: var(--ink);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      tbody tr + tr td {
        border-top: 1px solid var(--line);
      }
      td.fee {
        font-weight: 600;
        white-space: nowrap;
      }
      .contact {
        display: grid;
        gap: 10px;
        margin-top: 6px;
      }
      .contact a {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px 16px;
        color: var(--ink);
        font-weight: 500;
      }
      .contact a:active {
        background: var(--accent-soft);
      }
      .contact svg {
        flex: 0 0 22px;
      }
      footer {
        margin-top: 36px;
        text-align: center;
        color: var(--muted);
        font-size: 0.85rem;
      }
      @media (min-width: 560px) {
        header h1 {
          font-size: 2rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="banner">
      Eid holidays: the academy is closed 6–9 June. Classes resume 10 June.
    </div>

    <div class="wrap">
      <header>
        <h1>Al-Noor Tuition Academy</h1>
        <p>Matric &amp; O-Level coaching · Gulberg, Lahore</p>
      </header>

      <h2>Courses &amp; Timings</h2>
      <table>
        <thead>
          <tr>
            <th>Course</th>
            <th>Days</th>
            <th>Time</th>
            <th>Fee / month</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Matric Mathematics</td>
            <td>Mon–Wed</td>
            <td>4:00–5:30 pm</td>
            <td class="fee">PKR 3,500</td>
          </tr>
          <tr>
            <td>Matric Physics</td>
            <td>Tue–Thu</td>
            <td>5:30–7:00 pm</td>
            <td class="fee">PKR 3,500</td>
          </tr>
          <tr>
            <td>O-Level Chemistry</td>
            <td>Mon–Wed</td>
            <td>6:00–7:30 pm</td>
            <td class="fee">PKR 4,000</td>
          </tr>
          <tr>
            <td>O-Level English</td>
            <td>Fri–Sat</td>
            <td>10:00–11:30 am</td>
            <td class="fee">PKR 4,000</td>
          </tr>
        </tbody>
      </table>

      <h2>Reach Us</h2>
      <div class="contact">
        <a href="tel:+923001234567">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="#c1633a"
            stroke-width="2"
            stroke-linecap="round"
          >
            <path
              d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"
            />
          </svg>
          Call: 0300 123 4567
        </a>
        <a href="https://wa.me/923001234567">
          <svg viewBox="0 0 24 24" fill="#c1633a">
            <path
              d="M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-2.8.7.8-2.8-.2-.3A8 8 0 1 1 12 20zm4.5-5.9c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.5 6.5 0 0 1-3.2-2.8c-.2-.4.2-.4.6-1.2a.5.5 0 0 0 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2c0 1.3 1 2.6 1.1 2.8s1.9 2.9 4.6 4a5 5 0 0 0 2.3.5c.7-.1 1.4-.6 1.6-1.1s.2-1 .1-1.1z"
            />
          </svg>
          WhatsApp: 0300 123 4567
        </a>
        <a href="https://maps.google.com/?q=Gulberg+Lahore">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="#c1633a"
            stroke-width="2"
            stroke-linecap="round"
          >
            <path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z" />
            <circle cx="12" cy="10" r="3" />
          </svg>
          Main Boulevard, Gulberg (view on map)
        </a>
      </div>

      <footer>Open for admissions · New batches every month</footer>
    </div>
  </body>
</html>

اب کورس میں سکھائے گئے تین کام کریں۔

اسے کھولیں۔ تیز ترین طریقہ، کسی کمپیوٹر کی ضرورت نہیں: پورے HTML بلاک کو Claude.ai میں چسپاں کریں اور کہیں "اس عین مطابق HTML کو ایک نمونے میں تبدیل کریں؛ کچھ بھی تبدیل نہ کریں،" پھر اسے شائع کریں اور اپنے فون پر لنک کھولیں۔ (کمپیوٹر پر، آپ اس کے بجائے بلاک کو tuition.html کے طور پر محفوظ کر سکتے ہیں اور اس پر ڈبل کلک کر سکتے ہیں۔) آپ نے اسے read دیکھا؛ آپ نے اسے نہیں نکالا. یہ تصور 8 ہے۔
اس کو اشارہ کرکے تبدیل کریں، ٹائپنگ نہیں۔ اپنے ایجنٹ کو بتائیں: "FSc Biology کے لیے پانچویں کورس کی قطار شامل کریں، ہفتہ تا اتوار 2:00،3:30 pm، PKR 4,500، اور چھٹی والے بینر کو مسترد کریں۔" آپ نے کبھی ٹیگ کو ہاتھ نہیں لگایا۔ وہ تصور 9 ہے۔
اسے شائع کریں۔ اسے پبلشنگ سیڑھی (تصور 12) کے کسی بھی حصے سے دھکیلیں، پھر لنک کو WhatsApp میں شیئر کریں اور پیش نظارہ کارڈ رینڈر دیکھیں۔ یہ ہے تصورات 11 اور 12 لوپ کو بند کرنا۔

یہ ایک نمونے میں پورا فوری کورس ہے: ایک عین مطابق Markdown قیاس آیا، پڑھنے کے قابل HTML سامنے آیا، آپ نے اشارہ کرکے اس میں ترمیم کی، اور آپ نے اسے بھیج دیا۔

فلیش کارڈز اسٹڈی ایڈ

اپنی سمجھ کی جانچ کریں۔

Checking access...

دو منٹ میں ثابت کریں۔​

📚 تدریسی امداد​

حصہ 1: دو زبانیں۔​

1. ایجنٹوں کو ساخت کی ضرورت کیوں ہے؟​

2. غیر متناسب: Markdown اندر، HTML باہر​

حصہ 2: Markdown، تحریری زبان​

3. عنوانات: AI کو بتائیں کہ سب سے اہم کیا ہے۔​

4. فہرستیں: سیٹ کے لیے گولیاں، ترتیب کے لیے نمبر​

5. کوڈ بلاکس: AI کو بالکل وہی دکھانا جو آپ کا مطلب ہے۔​

6. روابط اور تصاویر: دنیا کی طرف اشارہ کرنا​

7. آپ کی پہلی مکمل تفصیلات​

حصہ 3: HTML، پڑھنے کی زبان​

8. بالکل HTML کیوں مانگیں۔​

9. آپ HTML نہیں لکھتے۔ آپ اس کے لئے فوری طور پر​

10. پانچ HTML پیٹرن​

11. جب منزل فیڈ ہو، براؤزر نہیں۔​

12. اشاعت: آرٹفیکٹ سے لنک تک​

13. جب منزل ایک دستاویز ہو، براؤزر نہیں۔​

حصہ 4: ایک ورزش، تین حرکات​

14. تین حرکات​

پرامپٹس کو آزمانے سے پہلے ایک مختصر ریکیپ​

اسے ابھی آزمائیں: سات اشارے​

اکثر پوچھے گئے سوالات​

ضمیمہ: ایک قیاس، HTML بن گیا۔​

ان پٹ: ایک Markdown اسپیک​

آؤٹ پٹ: HTML جو اس نے تیار کیا ہے۔​

اب کورس میں سکھائے گئے تین کام کریں۔​

فلیش کارڈز اسٹڈی ایڈ​

اپنی سمجھ کی جانچ کریں۔​