> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Flowstep डिज़ाइन को चैट या कैनवास के माध्यम से संपादित करें और पुनरावृत्त करें

> किसी भी Flowstep-जनित स्क्रीन को मैनुअल विज़ुअल संपादन या चैट-आधारित प्रॉम्प्ट के माध्यम से परिष्कृत करें — जब तक डिज़ाइन सही न हो, जितनी बार आवश्यक हो पुनरावृत्त करें।

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.25.48.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=0a67045dde91f73cae39afde3d359269" alt="Screenshot 2026 05 06 At 14 25 48" width="2338" height="1510" data-path="images/Screenshot-2026-05-06-at-14.25.48.png" />
</Frame>

Flowstep डिज़ाइन जनन के बाद पूरी तरह संपादनीय हैं। आप AI द्वारा पहली बार बनाए गए डिज़ाइन तक सीमित नहीं हैं—आप एडिटर में विज़ुअल को सीधे समायोजित कर सकते हैं, चैट का उपयोग करके सादे भाषा में परिवर्तनों का वर्णन कर सकते हैं, या Flowstep से भिन्नताएं और नई स्क्रीन बनाने के लिए कह सकते हैं। अपनी आवश्यकता के अनुसार कोई भी विधि चुनें।

## संपादित करने के दो तरीके

<Tabs>
  <Tab title="मैनुअल विज़ुअल संपादन">
    कैनवास पर सीधे तत्वों को चुनकर और संशोधित करके परिवर्तन करें। यह विधि सटीक समायोजन के लिए सबसे अच्छी है—एक घटक को स्थानांतरित करना, रंग बदलना, लेबल अपडेट करना, या स्पेसिंग को ठीक करना।

    <Steps>
      <Step title="वह तत्व चुनें जिसे आप बदलना चाहते हैं">
        अपने डिज़ाइन में किसी भी घटक या लेयर पर क्लिक करके इसे चुनें।
      </Step>

      <Step title="अपने परिवर्तन करें">
        रंग, आकार, स्थिति, या टेक्स्ट सामग्री जैसी प्रॉपर्टीज़ को समायोजित करने के लिए एडिटर नियंत्रण का उपयोग करें।
      </Step>

      <Step title="परिणाम की समीक्षा करें">
        आपके परिवर्तन कैनवास पर तुरंत लागू होते हैं। संपादन जारी रखें या अगली स्क्रीन पर जाएं।
      </Step>
    </Steps>
  </Tab>

  <Tab title="चैट-आधारित संपादन">
    सादे भाषा में वह परिवर्तन बताएं जो आप चाहते हैं और Flowstep आपके लिए डिज़ाइन को अपडेट करेगा। यह विधि व्यापक या संरचनात्मक परिवर्तनों के लिए तेजी से है—लेआउट को समायोजित करना, किसी सेक्शन को दोबारा सोचना, या स्टाइल दिशा लागू करना।

    <Steps>
      <Step title="चैट पैनल खोलें">
        वह स्क्रीन चुनें जिसे आप संपादित करना चाहते हैं, फिर चैट इनपुट खोलें।
      </Step>

      <Step title="अपने परिवर्तन का वर्णन करें">
        टाइप करें कि आप Flowstep को क्या अपडेट करना चाहते हैं। यदि इससे मदद मिले तो बताएं कि क्या बदलना चाहिए और क्यों।
      </Step>

      <Step title="अपडेटेड डिज़ाइन की समीक्षा करें">
        Flowstep परिवर्तन लागू करता है और आपको परिणाम दिखाता है। यदि यह बिल्कुल सही नहीं है, तो आगे परिष्कृत करने के लिए एक अनुवर्ती संदेश भेजें।
      </Step>
    </Steps>

    संपादन और पुनर्जनन चयनित स्क्रीन को **in place** अपडेट करते हैं न कि एक नई स्क्रीन जोड़ते हैं — जब Flowstep परिवर्तन को स्ट्रीम करता है, तो जिस तत्व पर वह काम कर रहा है, वह हरी धराशायी सीमा के साथ हाइलाइट होता है। बिना स्क्रीन चुने जनन एक नई स्क्रीन जोड़ता है।
  </Tab>
</Tabs>

## स्क्रीन के केवल एक हिस्से को संपादित करें

आपको पूरी स्क्रीन संपादित करने की जरूरत नहीं है। एक उप-तत्व चुनें — एक कार्ड, एक बटन, एक टेक्स्ट लेबल — और आपका चैट प्रॉम्प्ट केवल इसी पर लागू होता है, बाकी स्क्रीन अप्रभावित रहती है।

* **Direct selection** मोड में स्विच करने के लिए **Shift+V** दबाएं (या **Select** टूलबार बटन पर ड्रॉपडाउन) ताकि आप अपने क्लिक के तहत सबसे गहरा तत्व चुन सकें। सामान्य चयन के लिए **V** दबाएं, या अस्थायी रूप से **Direct selection** का उपयोग करने के लिए **Cmd** (Mac) / **Ctrl** (Windows) को दबाए रखें। **Escape** **Direct selection** से बाहर निकलता है।
* **Cmd+Shift** के साथ कई स्क्रीन में उप-तत्वों का चयन करें — एक एकल प्रॉम्प्ट प्रति संदेश 6 तक स्क्रीन संपादित कर सकता है।

जब एक image element चुना जाता है (wireframe mode के बाहर), तो property panel में एक **Image** पैनल दिखाई देता है: image को preview करें, preview पर एक नई image file खींचकर या **Pick image** पर क्लिक करके इसे स्वैप करें, या **Download image** के साथ सहेजें।

## पिछले संस्करण को पुनः स्थापित करें

चैट इतिहास में प्रत्येक AI जनन अपना मूल परिणाम रखता है। यदि कोई स्क्रीन जनन के बाद से संपादित या हटाई गई है, तो इसका चैट संदेश एक **Restore** बटन दिखाता है — संपादन को वापस लेने के लिए **Restore original**, या हटाई गई स्क्रीन को वापस लाने के लिए **Restore** / **Restore all**। गलत दिशा में जाने वाले संपादन के बाद एक ज्ञात-अच्छी स्थिति में वापस जाने के लिए इसका उपयोग करें।

## एक-क्लिक कार्य

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.29.34.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=52e0f38e4c4506adbecdccc7a95be652" alt="Screenshot 2026 05 06 At 14 29 34" width="2436" height="1528" data-path="images/Screenshot-2026-05-06-at-14.29.34.png" />
</Frame>

सीधे संपादन के अलावा, आप Flowstep को विकल्पों की खोज के लिए कह सकते हैं:

* **Try again from scratch** — Flowstep को अलग लेआउट या विज़ुअल दिशा के साथ वर्तमान स्क्रीन का एक ताजा संस्करण बनाने के लिए कहें।
* **Show the next screen** — Flowstep को बताएं कि user flow में आगे क्या आता है।
* **Make it pretty** — पूरे डिज़ाइन में spacing, alignment और रंग को समायोजित करें। लेआउट समान रहता है।

ये विकल्प आपको हर बार प्रॉम्प्ट लिखे बिना तेजी से पुनरावृत्त करने देते हैं।

## परिष्कृत करने के लिए पुनरावृत्ति

डिज़ाइन शायद ही कभी पहले प्रयास पर परिपूर्ण होता है। प्रतिक्रिया के प्रत्येक दौर के लिए चैट-आधारित संपादन का उपयोग करें—वर्णन करें कि क्या काम कर रहा है और क्या नहीं, और Flowstep वहां से समायोजित करता है। स्क्रीन पर पुनरावृत्त करने की संख्या की कोई सीमा नहीं है।

<Tip>
  चैट के माध्यम से पुनरावृत्त करते समय, अधिक सटीक परिणाम प्राप्त करने के लिए विशिष्ट तत्वों को नाम या स्थान से संदर्भित करें। उदाहरण के लिए: "call-to-action button को स्क्रीन के नीचे ले जाएं और इसे full-width बनाएं" "button को ठीक करें" की तुलना में अधिक प्रभावी है।
</Tip>
