Interactive website ایسی سائٹ بناتا ہے جو اصل میں کام کرے — کئی صفحات پر اصلی HTML، CSS اور JavaScript، پریویو میں لائیو، قابل کلک اور قابل سٹیئر۔ یہ ویب سائٹ کے موک اپ اور ویب سائٹ کے بیچ کا فرق ہے۔
سائٹ رن کیا بناتا ہے
اسے کسی پروجیکٹ کی طرح بریف کریں — "کافی سبسکرپشن کے لیے لینڈنگ سائٹ: ہیرو، تین blends، پرائسنگ، فوٹر" — اور ایجنٹ سائٹ بناتا ہے: صفحات، نیو، انٹریکشنز، responsive لے آؤٹ۔ پریویو خود سائٹ ہے، مقامی طور پر چل رہی — اسے اسکرول کریں، لنکس کلک کریں، چوڑائی ڈریگ کریں، انٹریکشنز کو فائر ہوتے دیکھیں۔
Mobile app · Devin · subagent · 9 screens · 5 files
Canopy — A plant-care prototype you can click through — nine states, light and dark, keyboard and offline fixtures.
▸ the prompt that made it▾ the prompt that made it
“Build the full flow from the product contract as a clickable HTML prototype, one screen per file plus an overview. Light and dark. Include the keyboard-open fixture for the add-plant form, a long Vietnamese plant name, and a large-text variant of the Today screen. Fixture data only; no network.”
اصلی کا مطلب اصلی
سائٹ پروجیکٹ فولڈر میں اصلی کوڈ ہے — آپ فائلیں کھول سکتے ہیں، مارک اپ پڑھ سکتے ہیں، آؤٹ پٹ شپ کر سکتے ہیں۔ یہ دیانتداری اس کے لیے اہم ہے کہ سائٹ کس کام کی ہے: ایک چلنے والا پروٹوٹائپ جسے آپ کسی کے سامنے رکھ سکیں، ایک لینڈنگ پیج جسے آپ واقعی deploy کر سکیں، ایک proof of concept جو ثابت کرے کہ کانسیپٹ کام کرتا ہے۔
- نیویگیشن — وہ لنکس جو کہیں جاتے ہیں، گیٹ سے چیک شدہ
- انٹریکشنز — مینیوز، موڈلز، اسکرول ایفیکٹس، کام کرنے والے کنٹرولز
- Responsive — وہ پانچ چوڑائیاں جو گیٹ چیک کرتی ہے، ویو پورٹس میں لائیو
Mobile app · Devin · swe-2-high · 22 min
Living Sky Weather — Five phone screens, five skies — animated weather that re-tints the whole interface per condition.
▸ the prompt that made it▾ the prompt that made it
“Design a mobile weather app as 5 phone screens (390×844) for Nha Trang: sunny noon, cloudy afternoon, tropical rain, thunderstorm at night, and clear night with stars. The top half of each screen is an animated sky (canvas or CSS: sun glare, drifting clouds, rain streaks, lightning flash, stars) that matches the condition and time. Content: current temperature, feels-like, hourly strip (12 hours), 7-day list with bars for temperature ranges, UV, rain chance, and a severe weather alert card for the storm screen. UI colors adapt per condition while keeping text contrast ≥ 4.5:1. Include a reduced-motion version.”
سائٹ کو سٹیئر کرنا
مکمل سٹیئرنگ ٹول کٹ لاگو ہے — یہ اب بھی فولڈر میں فائلیں ہیں:
- غلط عنصر پر ⌥-click کریں، بالکل اسی نوڈ پر کمنٹ کریں
- لائیو پیرامیٹرز کے لیے Tweaks — تھیم، spacing، motion
- غائب صفحہ یا غلط انٹریکشن کے لیے follow-ups ("نیو کو موبائل پر drawer میں سکیڑنا چاہیے")
- اسی سائٹ پر مختلف ٹیک آزمانے کے لیے versions
گیٹ اسے بطور سائٹ چیک کرتی ہے: ہر چوڑائی پر لائیو نیو، کانٹراسٹ، ہٹ ٹارگٹس، فون سائز پر واقعی کام کرنے والا لے آؤٹ — نہ صرف یہ کہ یہ رینڈر ہوتی ہے۔
یہ کن چیزوں میں اچھا ہے
- لینڈنگ پیجز — مارکیٹنگ سائٹ، لانچ پیج، پروڈکٹ پیج
- کام کرنے والے پروٹوٹائپس — انٹریکشن ثابت کریں، صرف شکل نہیں
- چھوٹی اصلی سائٹس — ذاتی صفحہ، ایونٹ سائٹ، پورٹ فولیو
- انٹریکٹو ڈیموز — کچھ ایسا جسے لوگ واقعی کلک کر سکیں
ویب سائٹ بمقابلہ موک اپ بمقابلہ موبائل ایپ
- Interactive website — کام کرنے والی سائٹ، ملٹی پیج، اصلی رویّہ
- UI mockups — انٹرفیس کی تصویر، ڈیسک ٹاپ یا ویب شکل
- Mobile app — فون شکل کی اسکرینیں، ٹچ اسکیل کنٹرولز
اگر اسے کام کرنا ہے — نہ صرف کام کرتا لگنا — تو یہی ٹیمپلیٹ ہے۔
مشورہ: پالش سے پہلے سائٹ کا ڈھانچا شپ کریں — "پہلے چاروں صفحے کام کرنے والے بنائیں" ایک نیویگایبل سائٹ اترتی ہے جسے آپ سٹیئر کر سکیں، بجائے ایک کامل ہوم پیج اور تین مردہ لنکس کے جنہیں گیٹ ویسے بھی فلیگ کرے گی۔
ایکسپورٹ کرنا
سائٹس ZIP یا HTML میں ایکسپورٹ ہوتی ہیں — وہ فائلیں جنہیں آپ جوں کی توں deploy کرتے ہیں — یا بصری ریکارڈ کے لیے PNG / PDF میں۔ پروجیکٹ فولڈر اگلی سٹیئر یا سائٹ کے اگلے ورژن کے لیے سورس رکھتا ہے۔