UI mockups & wireframes इंटरफ़ेस की तस्वीरें बनाता है — वे स्क्रीन जो कोई ऐप या साइट रखती हो, ब्रीफ़ जितनी fidelity माँगे. यह "यह कैसा दिखेगा?" का टेम्पलेट है, इससे पहले कि कुछ असली बनाया जाए.
Hi-fi मॉकअप या lo-fi वायरफ़्रेम
ब्रीफ़ fidelity तय करता है:
- मॉकअप — "फ़ोटो ऐप की सेटिंग्स स्क्रीन, डार्क थीम" — hi-fi स्क्रीन देता है, असली टाइप, रंग और कंट्रोल के साथ, शिप होने के क़रीब
- वायरफ़्रेम — "ऑनबोर्डिंग फ़्लो का वायरफ़्रेम, चार स्क्रीन" — lo-fi स्ट्रक्चर देता है: ब्लॉक, हाइरार्की, लेबल, अभी बहस करने के लिए कोई स्टाइल नहीं
दोनों असली फ़ाइलें हैं जिन्हें आप स्टीयर कर सकते हैं, स्थिर तस्वीरें नहीं — किसी कंट्रोल को पिन करें, लेआउट पर कमेंट करें, डेंसिटी tweak करें, किसी भी नतीजे की तरह.
UI mockup · Devin · swe-2-high · 24 min
Mission Control — A launch dashboard at 10 Hz — countdown, telemetry, go/no-go poll, hold state. Dense and aligned.
▸ the prompt that made it▾ the prompt that made it
“Design a rocket launch mission control dashboard (1920×1080). Panels: master countdown (T-minus), vehicle status diagram (stages, tanks with fill levels), streaming telemetry charts (altitude, velocity, acceleration, tank pressure) with simulated data, weather constraints with pass/fail, a go/no-go poll of 8 stations that turn green one by one, event log, and a trajectory plot. Include a 'hold' state that can be triggered, turning affected panels amber with a reason. Data updates live at 10 Hz without layout shift. Night-console direction, dense but perfectly aligned, tabular numerals everywhere.”
एक स्क्रीन या एक सेट
एक स्क्रीन माँगें और एक मिलेगी; फ़्लो माँगें और एजेंट सेट बनाता है — ऑनबोर्डिंग, डैशबोर्ड, सेटिंग्स — artboard की एक पंक्ति के तौर पर, जिसमें आप चल सकते हैं या grid में देख सकते हैं. प्रीव्यू पूरे समय लाइव रहता है: उसमें क्लिक करके घूमें, होवर करें, एजेंट के बनाए स्टेट आज़माएँ.
Wireframe · Devin · e2e · gate PASS
Checkout Flow — Cart to confirmation in four lo-fi frames — annotations, order summary, and every state in between.
▸ the prompt that made it▾ the prompt that made it
“Wireframe: a checkout flow: cart, shipping, payment, confirmation.”
यह किन कामों में अच्छा है
- दिशा की खोज — एक ही स्क्रीन के तीन प्रयास, सस्ते में
- शुरुआती प्रोडक्ट का काम — spec बनने से पहले किसी फ़ीचर का स्क्रीन सेट
- साइन-ऑफ़ के लिए वायरफ़्रेम — स्टाइल की बहस के बिना स्ट्रक्चर
- प्रतिस्पर्धी विश्लेषण — "यह फ़्लो कैसा दिखेगा?" बिना उसे बनाए
मॉकअप को स्टीयर करना
स्टीयरिंग में सब कुछ लागू होता है — यह वही इंजन है:
- जो हिस्सा ग़लत है उसे ⌥-click करें, ठीक उस नोड पर कमेंट करें
- डिज़ाइन के उजागर पैरामीटर के लिए Tweaks
- गायब स्क्रीन या ग़लत दिशा के लिए फ़ॉलो-अप
- "एक ही फ़्लो के दो अलग प्रयास" के लिए Variants
gate फिर भी चलता है — मॉकअप किसी भी नतीजे की तरह जाँचा जाता है, क्योंकि जो तस्वीर व्यवहार्यता के बारे में झूठ बोले वह काम की नहीं.
मॉकअप बनाम वेबसाइट बनाम मोबाइल ऐप
- UI mockups — इंटरफ़ेस की तस्वीर, डेस्कटॉप या वेब-आकार की
- Mobile app — फ़ोन-साइज़ स्क्रीन, टच टारगेट, मोबाइल नेविगेशन
- Interactive website — ऐसी साइट जो सच में काम करे, मल्टी-पेज
जब डिलीवरेबल देखने के बजाय क्लिक करने लायक़ चीज़ हो, वह मॉकअप नहीं — वेबसाइट है (या mobile app अगर वह फ़ोन-आकार की है).
टिप: ब्रीफ़ में fidelity बताएँ — "hi-fi mockup" बनाम "lo-fi wireframe" अलग चीज़ें बनाते हैं, और जो वायरफ़्रेम आप hi-fi चाहते थे वह बेकार रन है. शब्द एजेंट के शुरू करने से पहले उम्मीद तय करता है.
एक्सपोर्ट करना
मॉकअप साझा करने के लिए PNG या PDF में एक्सपोर्ट होते हैं — उन्हीं साइज़ों पर रेंडर की हुई स्क्रीनें जिन पर आप उन्हें पेश करेंगे. सोर्स फ़ाइलें अगले स्टीयर या अगले वर्ज़न के लिए प्रोजेक्ट फ़ोल्डर में रहती हैं.