Pencil MCP: ڈیزائن کوڈ میں تبدیل، فرنٹ اینڈ ڈیولپمنٹ کی رفتار 8 گنا بڑھ گئی

ہیلو، میں ہوں لیانگ شیاؤ، جو بیرون ملک مصنوعات بناتا ہے۔ سال ختم ہونے والا ہے، اس لیے سال کے اختتام سے پہلے ایک اور مضمون شائع کر رہا ہوں تاکہ آپ کے ساتھ اپنی حالیہ نئی کامیابیوں کا اشتراک کر سکوں۔

ویب صفحات اور ایپس بناتے وقت، کیا آپ نے کبھی ایسا محسوس کیا ہے:

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

خوشخبری یہ ہے کہ: اب Pencil نامی یہ MCP موجود ہے، اور ان مسائل کو بنیادی طور پر حل کیا جا سکتا ہے۔

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

یہ مضمون اس بارے میں بات کرے گا: Pencil کیا ہے، یہ استعمال کرنے کے قابل کیوں ہے، اور اسے جلدی سے کیسے شروع کیا جائے۔

01. Pencil کیا ہے؟ سادہ الفاظ میں واضح کریں

آسان الفاظ میں، Pencil ایک ایسا ٹول ہے جو ڈیزائن اور کوڈ کو جوڑ سکتا ہے۔

پہلے کا عمل اس طرح تھا:

Figma میں ڈیزائن بنائیں ڈیزائنر سائز، رنگ اور فاصلہ نوٹ کرتے ہیں ڈویلپر ڈیزائن کے مطابق کوڈ کی ایک ایک لائن لکھتے ہیں لکھنے کے بعد ڈیزائن سے موازنہ کریں، اور معلوم کریں کہ بحالی کی شرح صرف 70%-80% ہے۔ بار بار ایڈجسٹمنٹ، مواصلات...

Pencil کا حل یہ ہے:

آپ کو صرف قدرتی زبان میں ضروریات بیان کرنے کی ضرورت ہے (مثال کے طور پر، "میرے لیے ایپل کے انداز کا میوزک پلیئر ڈیزائن کریں")، اور AI براہ راست کینوس پر ڈیزائن تیار کر سکتا ہے، اور پھر ایک کلک کے ساتھ متعلقہ کوڈ تیار کر سکتا ہے (Next.js، Flutter، Vue وغیرہ سبھی تعاون یافتہ ہیں)۔

اور حیرت انگیز بات یہ ہے کہ آپ ڈیزائن کرتے وقت ایڈجسٹمنٹ کر سکتے ہیں۔ مثال کے طور پر:

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

02. مجھے کیوں لگتا ہے کہ Pencil استعمال کرنے کے قابل ہے؟

1) کارکردگی واقعی زیادہ ہے

روایتی طریقے سے ایک صفحے کا ڈیزائن بنانے میں 4-6 گھنٹے لگ سکتے ہیں۔ Pencil کے ساتھ، یہ 20-40 منٹ میں کیا جا سکتا ہے۔

اور کوڈ کی بحالی کی شرح 98%+ تک پہنچ سکتی ہے، اور بنیادی طور پر اسٹائل کو ایڈجسٹ کرنے کی ضرورت نہیں ہے۔

میں نے خود کوشش کی، اور ایک سادہ Landing Page بنانے میں، ڈیزائن سے لے کر کوڈ تک سب کچھ مکمل کرنے میں، تقریباً آدھا گھنٹہ لگا۔

2) ڈیزائن کا معیار مستحکم ہے

پہلے AI کو ڈیزائن تیار کرنے دینے پر، اکثر اس قسم کے مسائل کا سامنا کرنا پڑتا تھا:

رنگوں کا امتزاج ہم آہنگ نہیں ہے۔ فاصلہ بے ترتیبی سے ہے۔ فونٹ کا سائز غیر مساوی ہے۔

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

3) متعدد ٹیکنالوجی اسٹیکس کو سپورٹ کرتا ہے

چاہے آپ Next.js، Flutter، Vue یا SwiftUI بنا رہے ہوں، Pencil خود بخود متعلقہ کوڈ تیار کر سکتا ہے۔

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

03. Pencil کو کیسے انسٹال اور استعمال کریں؟

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

پہلا قدم: Pencil MCP انسٹال کریں

براہ راست اپنے IDE (VS Code، Cursor وغیرہ) میں "pencil" تلاش کریں

انسٹال کرنے کے لیے کلک کریں، کہیں اور سے ڈاؤن لوڈ نہ کریں (پائریٹڈ ورژن ڈاؤن لوڈ کرنے سے بچنے کے لیے)

نوٹ: براہ راست IDE میں تلاش کرنا سب سے محفوظ طریقہ ہے۔

دوسرا قدم: AI کو آپ کے لیے کنفیگر کرنے دیں

انسٹال کرنے کے بعد اسے کیسے کنفیگر کریں؟

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

اپنے AI پروگرامنگ اسسٹنٹ (Claude Code یا Codex) کو کھولیں، اور اس سے کہیں:

میں نے اس IDE میں "pencil" نامی یہ MCP انسٹال کر لیا ہے، براہ کرم اسے کنفیگر کرنے میں میری مدد کریں، تاکہ میرا Claude Code، Codex، VS Code اس MCP کو استعمال کر سکیں۔

پھر اسے آپ کے لیے کنفیگر کرنے کا انتظار کریں۔

تیسرا قدم: Pencil کے ساتھ ڈیزائن کرنا شروع کریں

کنفیگر کرنے کے بعد، آپ کو IDE کے بائیں جانب ایک پنسل کا آئیکن نظر آئے گا، اسے کھولنے کے لیے کلک کریں اور یہ Pencil کا کینوس ہے۔

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

مثال کے طور پر:

"میرے لیے ایپل کے انداز کا میوزک پلیئر ڈیزائن کریں"

"ایک سادہ لینڈنگ پیج بنائیں، جس کا بنیادی رنگ نیلا ہو"

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

AI کینوس پر ڈیزائن تیار کرے گا۔ اگر آپ مطمئن نہیں ہیں، تو آپ اسے مزید ایڈجسٹ کرنے کے لیے کہہ سکتے ہیں:

"فونٹ بہت چھوٹا ہے، اسے تھوڑا بڑا کریں"

"درمیانی فاصلہ تھوڑا زیادہ کریں"

"کوئی اور نرم رنگ استعمال کریں"

اس وقت تک ایڈجسٹ کرتے رہیں جب تک آپ مطمئن نہ ہو جائیں۔

چوتھا مرحلہ: کوڈ تیار کرنا

ڈیزائن تیار ہونے کے بعد، آپ AI سے کوڈ تیار کرنے کے لیے کہہ سکتے ہیں۔

آپ براہ راست کہہ سکتے ہیں:

"میرے لیے Next.js کوڈ تیار کریں"

"Flutter کوڈ تیار کریں"

"Vue 3 کوڈ تیار کریں"

AI آپ کے ڈیزائن کے مطابق خود بخود متعلقہ کوڈ تیار کرے گا۔

عملی اثر:

04. کچھ عملی استعمال کے تجربات

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

1) ضروریات کو واضح طور پر بیان کریں

شروع میں میں کہتا تھا "میرے لیے ایک ویب سائٹ بنائیں"، لیکن AI جو چیز تیار کرتا تھا وہ بالکل بھی میری مطلوبہ چیز نہیں ہوتی تھی۔

بعد میں مجھے احساس ہوا کہ جتنی واضح طور پر آپ اپنی ضروریات بیان کریں گے، اتنا ہی بہتر نتیجہ ملے گا۔

مثال کے طور پر:

ناقص وضاحت: "میرے لیے ایک لاگ ان پیج بنائیں"

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

2) آپ ریفرنس امیج اپ لوڈ کر سکتے ہیں

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

اس طرح تیار کردہ ڈیزائن آپ کی توقعات کے قریب تر ہوگا۔

3) ایک بار میں مکمل کرنے سے زیادہ اہم ہے بار بار دہرانا

یہ مت سوچیں کہ آپ ایک ہی بار میں بہترین ڈیزائن تیار کر لیں گے، یہ حقیقت پسندانہ نہیں ہے۔

صحیح طریقہ یہ ہے کہ: پہلے ایک عام سا ڈیزائن تیار کریں، اور پھر اسے تھوڑا تھوڑا ایڈجسٹ کریں۔

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

4) کوڈ کا معیار اچھا ہے

میں نے چند بار کوشش کی، اور تیار کردہ کوڈ کا معیار کافی اچھا تھا:

کوڈ کا ڈھانچہ واضح ہے

انداز کی بحالی کی شرح زیادہ ہے (98% +)

رسپانسیو لے آؤٹ بھی اچھی طرح سے کیا گیا ہے

بنیادی طور پر اسے تھوڑا سا تبدیل کرنے کے بعد استعمال کیا جا سکتا ہے۔

05. چند اہم نکات

اگرچہ Pencil بہت کارآمد ہے، لیکن کچھ چیزیں ہیں جن پر توجہ دینے کی ضرورت ہے:

1) جمالیات کا احساس آپ پر منحصر ہے

AI آپ کے لیے ڈیزائن تیار کر سکتا ہے، لیکن یہ اچھا ہے یا نہیں اس کا فیصلہ آپ کو خود کرنا ہوگا۔

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

ڈیزائن کے لیے کچھ ریفرنس سائٹس:

Dribbble

Mobbin (خاص طور پر موبائل UI جمع کرنے کے لیے)

مختلف بہترین ویب سائٹس کے اسکرین شاٹس

2) پیچیدہ تعامل آپ کو خود لکھنا ہوگا

Pencil جامد صفحات اور معمول کے تعامل کے لیے موزوں ہے، لیکن اگر اس میں پیچیدہ اینیمیشن، اشارے وغیرہ شامل ہیں، تو آپ کو خود کوڈ لکھنے کی ضرورت ہوگی۔

تاہم زیادہ تر منظرناموں کے لیے، Pencil کافی ہے۔

3) صحیح AI ماڈل کا انتخاب بہت ضروری ہے

میں نے کئی ماڈلز آزمائے، اور مجھے معلوم ہوا کہ Claude Opus 4.5 کی بصری کارکردگی بہترین ہے۔

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

06. کارکردگی کے مقابلے کے اعداد و شمار

آخر میں میں اپنے ذاتی طور پر جانچے گئے اعداد و شمار کا ایک سیٹ شیئر کرنا چاہتا ہوں:

میرے لیے سب سے بڑی قدر یہ ہے کہ: اپنی توانائی کو "کیسے حاصل کریں" سے "کیا فنکشن کریں" پر منتقل کرنا ہے۔

07. خلاصہ

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

اگر آپ بھی فرنٹ اینڈ ڈیولپمنٹ کر رہے ہیں، یا اپنی پروڈکٹ بنا رہے ہیں، تو میں آپ کو Pencil آزمانے کی پرزور سفارش کرتا ہوں:کوڈ کے معیار میں استحکام: 98%+ بحالی، بنیادی طور پر اسٹائل کو ایڈجسٹ کرنے کی ضرورت نہیں

متعدد ٹیکنالوجی اسٹیکس کے لیے معاونت: Next.js، Flutter، Vue وغیرہ سبھی استعمال کیے جا سکتے ہیں

قدرتی زبان سے چلنے والا: انسانی زبان میں ضروریات بیان کریں، AI خود بخود تیار کرے گا

آخر میں، اگر آپ بھی آزاد ڈیولپمنٹ، AI پروگرامنگ کر رہے ہیں، تو تبصرہ کرنے میں خوش آمدید:

آپ عام طور پر ڈیزائن کیسے کرتے ہیں؟

کیا آپ نے Pencil استعمال کیا ہے؟ اس کے نتائج کیسے ہیں؟

میں ہر تبصرہ کو غور سے پڑھوں گا۔ اگلی تحریر میں ملتے ہیں۔