Build mode: अपना असली UI विज़ुअली एडिट करें

Build mode अडॉप्ट किए कोडबेस के प्रीव्यू को विज़ुअल एडिटर बना देता है: अपने चलते ऐप में एलिमेंट पर क्लिक करें, उसे स्क्रीन पर बदलें — टेक्स्ट, spacing, रंग — और बदलाव 1design/<slug> ब्रांच पर असली कोड में वापस लिखा जाता है. यह UI को उसी जगह एडिट करना है जहाँ UI रहता है.

इसे खोलना

codebase प्रोजेक्ट पर, Preview और Sketch के बगल का Build टैब पैनल को Build mode में बदलता है: आपका ऐप लाइव रेंडर होता है, और एडिट लेयर उस पर सक्रिय हो जाती है. होवर कर्सर के नीचे के एलिमेंट को हाइलाइट करता है; क्लिक उसे चुनता है और उसकी एडिट सरफ़ेस खोलता है — वे प्रॉपर्टी जो एलिमेंट एक्सपोज़ करता है, जगह पर एडिट होने लायक़.

Build mode — एडिटिंग के लिए एलिमेंट चुने हुए चलता ऐप

स्क्रीन पर एडिट करना

एडिट सरफ़ेस उन्हीं प्रॉपर्टी को कवर करती है जो विज़ुअली समझ आती हैं:

  • Text — कॉपी पर क्लिक करें, बदलाव टाइप करें
  • Spacing — चुने एलिमेंट पर padding और gap
  • Color — fill या टेक्स्ट का रंग, प्रोजेक्ट के टोकन से
  • Type — टेक्स्ट एलिमेंट पर साइज़, weight, family

बदलाव प्रीव्यू पर लाइव लागू होते हैं — आप एडिट को उस जगह देखते हैं जहाँ वह उतरता है, नतीजे से अलग किसी प्रॉपर्टी पैनल में नहीं.

कोड में वापस लिखना

विज़ुअल एडिट मॉक ओवरले नहीं है — वह एलिमेंट की असली स्टाइल में मैप होता है और 1design/<slug> ब्रांच पर उस फ़ाइल में बदलाव लिखता है जो उन्हें स्वामी करती है. अगला टर्न या अगला बिल्ड उसे किसी भी कोड बदलाव की तरह पढ़ता है — worktree diff ठीक उतने एडिट से बढ़ता है जितना आपने किया.

रेपो अडॉप्ट करें, टर्न भेजें, ब्रांच बार आगे की कमिट दिखाता है.

diff-scoped जाँच

codebase प्रोजेक्ट पूरे कोडबेस की जगह diff वेरीफ़ाई करते हैं — टर्न की (या एडिट की) बदली फ़ाइलें जाँची जाती हैं, और ब्रांच बार का Review changes दिखाता है कि ठीक क्या हिला. विज़ुअल एडिट भी दूसरों जैसा ही diff है — वह अपनी छुई फ़ाइलों तक सीमित, ब्रांच पर उतरता है.

Build बनाम Preview बनाम Sketch

  • Preview — चलते ऐप को देखें; कमेंट और पिन से स्टीयर करें
  • Build — UI विज़ुअली एडिट करें, बदलाव कोड में लिखते हैं
  • Sketch — .1d स्केच ड्रॉप करें जो कंपोनेंट में मैप होते हैं

Build mode उस एडिट के लिए है जो दिखता है — वह बटन जो बड़ा होना चाहिए, वह हेडिंग जो कसी होनी चाहिए. जब बदलाव नया फ़्लो या कई-एलिमेंट का reshuffle हो, तब ब्रीफ़ ही टूल रहता है.

रिव्यू और मर्ज

Build-mode एडिट एजेंट टर्न वाली उसी worktree ब्रांच पर रहते हैं — ब्रांच बार आगे की कमिटें ट्रैक करता है, Review changes काम का बनाया diff दिखाता है, और Merge into main ठीक होने पर उसे वापस लाता है. एडिट-से-कोड रास्ता असली है, तो मर्ज भी असली मर्ज है.

यह किसमें अच्छा है

  • विज़ुअल पास — पूरे ऐप में spacing, रंग, टाइप, जगह पर एडिट किए हुए
  • कॉपी एडिट — शब्द स्क्रीन पर ही ठीक करें
  • टोकन ट्यूनिंग — रंग या साइज़ हिलाएँ और उसे कोड में उतरते देखें
  • आख़िरी मील — वह polish पास जहाँ ब्रीफ़ ओवरकिल है

टिप: Build-mode एडिट कोड हैं, तो मर्ज से पहले diff रिव्यू करें — विज़ुअल ट्वीक ईमानदार कोड है, लेकिन "स्क्रीन पर सही दिखता है" और "फ़ाइल में सही पढ़ता है" दोनों ब्रांच मर्ज होने से पहले जाँचने लायक़ हैं.

संबंधित