Interactive website ऐसी साइट बनाता है जो सच में काम करती है — कई पेजों में असली HTML, CSS और JavaScript, प्रीव्यू में लाइव, क्लिक और स्टीयर होने लायक़. यह वेबसाइट के मॉकअप और वेबसाइट के बीच का फ़र्क़ है.
साइट रन क्या बनाता है
इसे किसी प्रोजेक्ट की तरह ब्रीफ़ करें — "कॉफ़ी सब्सक्रिप्शन के लिए लैंडिंग साइट: hero, तीन blends, pricing, footer" — और एजेंट साइट बनाता है: पेज, nav, इंटरैक्शन, रिस्पॉन्सिव लेआउट. प्रीव्यू खुद साइट है, लोकली चलती हुई — उसे स्क्रॉल करें, लिंक क्लिक करें, चौड़ाई ड्रैग करें, इंटरैक्शन चलते देखें.
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.”
असली का मतलब असली
साइट प्रोजेक्ट फ़ोल्डर में असली कोड है — आप फ़ाइलें खोल सकते हैं, मार्कअप पढ़ सकते हैं, आउटपुट शिप कर सकते हैं. यह ईमानदारी उसके लिए मायने रखती है जिसके लिए साइट है: ऐसा काम करता प्रोटोटाइप जिसे आप किसी के सामने रख सकते हैं, ऐसा लैंडिंग पेज जिसे आप सच में डिप्लॉय कर सकते हैं, ऐसा proof of concept जो कॉन्सेप्ट के काम करने का सबूत हो.
- नेविगेशन — कहीं पहुँचने वाले लिंक, gate से जाँचे हुए
- इंटरैक्शन — मेन्यू, मोडल, स्क्रॉल इफ़ेक्ट, काम करते कंट्रोल
- रिस्पॉन्सिव — पाँच चौड़ाइयाँ जिन्हें gate जाँचता है, व्यूपोर्ट में लाइव
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
- गायब पेज या ग़लत इंटरैक्शन के लिए फ़ॉलो-अप ("nav को मोबाइल पर drawer में सिकुड़ना चाहिए")
- उसी साइट पर अलग प्रयास के लिए Versions
gate इसे साइट की तरह जाँचता है: हर चौड़ाई पर लाइव nav, कंट्रास्ट, hit targets, फ़ोन साइज़ पर सच में काम करता लेआउट — सिर्फ़ यह नहीं कि वह रेंडर होती है.
यह किसमें अच्छा है
- लैंडिंग पेज — मार्केटिंग साइट, लॉन्च पेज, प्रोडक्ट पेज
- काम करते प्रोटोटाइप — सिर्फ़ लुक नहीं, इंटरैक्शन साबित करें
- छोटी असली साइटें — पर्सनल पेज, इवेंट साइट, पोर्टफ़ोलियो
- इंटरैक्टिव डेमो — ऐसी चीज़ जिसे लोग सच में क्लिक कर सकें
Website बनाम mockup बनाम mobile app
- Interactive website — काम करती साइट, मल्टी-पेज, असली व्यवहार
- UI mockups — इंटरफ़ेस की तस्वीर, डेस्कटॉप या web-आकार की
- Mobile app — फ़ोन-आकार की स्क्रीन, touch-स्केल कंट्रोल
अगर उसे काम करना है — सिर्फ़ काम करती दिखना नहीं — तो यही टेम्पलेट है.
टिप: polish से पहले साइट का ढाँचा शिप करें — "पहले चारों पेज काम करते बनाओ" एक नेविगेट होने लायक़ साइट देता है जिसे आप स्टीयर कर सकते हैं, बजाय एक perfect होमपेज और तीन मृत लिंक के जिन्हें gate वैसे भी फ़्लैग करेगा.
एक्सपोर्ट करना
साइटें ZIP या HTML में एक्सपोर्ट होती हैं — वे फ़ाइलें जिन्हें आप जस का तस डिप्लॉय करते हैं — या विज़ुअल रिकॉर्ड के लिए PNG / PDF में. प्रोजेक्ट फ़ोल्डर अगले स्टीयर या साइट के अगले वर्ज़न का सोर्स रखता है.