پانچ منٹ میں آپ کا پہلا ڈیزائن

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

پروجیکٹ بنائیں

ہوم اسکرین سے New project دبائیں — یا ہوم کمپوزر میں ہی ڈیزائن بیان کریں اور ایپ آپ کے لیے پروجیکٹ بنا دیتی ہے۔ ٹیمپلیٹ چننے سے ایجنٹ کو آؤٹ پٹ فارمیٹ بت جاتا ہے (سلائیڈ ڈیک، موبائل اسکرینز کا سیٹ، UI موک اپ) اور درست ویور اور چیکس لوڈ ہو جاتے ہیں؛ Blank فارمیٹ کا فیصلہ بریف پر چھوڑ دیتا ہے۔

ٹیمپلیٹ کارڈز کے ساتھ نئے پروجیکٹ کی شیٹ

پہلا بریف لکھیں

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

رن کے بیچ میں ایک پروجیکٹ — بائیں طرف ٹرانسکرپٹ، دائیں طرف لائیو نتیجہ

ٹرن ختم ہونے پر گیٹ رپورٹ کرتی ہے — Design checks کا سبز ہونا یعنی نتیجہ design kit کے اصول پاس کرتا ہے (کانٹراسٹ، ٹائپ سائز، ہٹ ٹارگٹس، ہر چوڑائی پر کام کرنے والی نیویگیشن)۔ نتیجہ دائیں پینل میں لائیو رہتا ہے: اس پر ہوور کریں، اس میں کلک کریں، چوڑائی ڈریگ کریں۔

ایک بار سٹیئر کریں

سرخی پسند نہیں آئی؟ پریویو میں اس پر ⌥-click کریں، ایک سطر لکھیں — "اسے سمیٹیں، زیادہ سے زیادہ دو سطریں" — اور بھیجیں۔ کمنٹ بطور پن اترتا ہے جسے ایجنٹ پڑھتا ہے، اور اگلا ٹرن بالکل اسی جگہ درست کرتا ہے۔ بڑی سمت کی تبدیلی کے لیے کمپوزر میں فالو اپ لکھیں۔

مشورہ: کیا کی سٹیئرنگ کریں، کیسے کی نہیں۔ "فولڈ کے اوپر مزید جگہ" "margin-top: 4rem لگائیں" سے بہتر ہے — design kit آپ کی سمت کو ٹوکنز میں ڈھالتا ہے جو پورا پروجیکٹ یکساں رکھتا ہے۔

بریف → بلڈ → گیٹ → لائیو پریویو، شروع سے آخر تک۔

آگے بڑھیں: ایک موبائل ایپ، MCP کے ذریعے نئے سرے سے ڈیزائن کی گئی

وہی لوپ بڑے artifacts تک scale ہوتی ہے۔ یہاں ایک Mobile app پروجیکٹ ایک عادت ٹریکنگ ایپ بناتا ہے — Today rings، streaks، ایک stats اسکرین — نیٹو SwiftUI اسٹائلنگ میں، پھر ایک MCP client (Cursor) ایپ سے باہر سے اگلا ٹرن چلاتا ہے: ایک re-design جو accent بدلتا ہے، rings کو bold کرتا ہے اور ہفتہ وار چارٹ جوڑتا ہے۔

Mobile ٹیمپلیٹ پر موبائل ایپ پروجیکٹ

بیرونی ٹرن باقی ٹرنز کی طرح اترتا ہے — ببل پر via MCP · Cursor ٹیگ کے ساتھ، رن ٹرانسکرپٹ میں لائیو، اور ختم ہونے پر گیٹ رپورٹ کرتا ہے۔ سٹوڈیو کبھی نہیں رکتا؛ کلائنٹ بس اس کی اصلی API استعمال کرتا ہے۔

MCP کے ذریعے بھیجا گیا ٹرن — پرامپٹ پر "via MCP · Cursor" ٹیگ
موبائل ایپ بنی، پھر MCP کلائنٹ نے نئے سرے سے ڈیزائن کی — شروع سے آخر تک۔

MCP — کسی بھی ایجنٹ سے سٹوڈیو چلائیں میں سرور، access پینل اور وہ سب شامل ہے جو کلائنٹ کال کر سکتا ہے۔

متعلقہ صفحات