मुख्य सामग्री पर जाएं

1. एक स्क्रीन जनरेट करें और प्रीव्यू करें

सबसे सामान्य वर्कफ़्लो: एक स्क्रीन जनरेट करें (एक ही चरण में फ़ाइल बनाएं), फिर परिणाम देखें।
1. create-new-design { "message": "Mobile sign-in screen for a developer tool.
                                  Email/password fields, Google SSO button, dark theme." }
                     → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

2. get-screen-image  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                     → [inline PNG]
fileId को छोड़ने से नई फ़ाइल स्वचालित रूप से बनती है। इसके बजाय उस फ़ाइल में स्क्रीन जोड़ने के लिए मौजूदा fileId पास करें। अपने AI असिस्टेंट के लिए प्रॉम्प्ट:
Flowstep डिज़ाइन जनरेट करें: एक डेवलपर टूल के लिए एक मोबाइल साइन-इन स्क्रीन, ईमेल/पासवर्ड और गूगल SSO बटन के साथ, डार्क थीम में, फिर मुझे इमेज दिखाएं।

2. React कंपोनेंट को विज़ुअलाइज़ करें

एक .jsx या .tsx फ़ाइल को एक अटैचमेंट के रूप में अपलोड करें और Flowstep से एक मेल खाने वाला डिज़ाइन जनरेट करने के लिए कहें। Flowstep स्रोत को पढ़ता है और एक स्क्रीन उत्पन्न करता है — ऐप चलाने की कोई आवश्यकता नहीं।
1. upload-attachment  { "fileData": "<UTF-8 contents of ApiKeys.tsx>",
                        "fileName": "ApiKeys.tsx",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. create-new-design  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
अपने AI असिस्टेंट के लिए प्रॉम्प्ट:
src/components/settings/ApiKeys.tsx को पढ़ें, इसे एक अटैचमेंट के रूप में अपलोड करें, और एक Flowstep स्क्रीन जनरेट करें जो कंपोनेंट लेआउट से मेल खाती है। मुझे रेंडर की गई इमेज दिखाएं।

3. MCP-जनरेट स्क्रीन पर पुनरावृत्ति करें

edit-design और regenerate-design के लिए डिज़ाइन संदर्भ की आवश्यकता है जो केवल designs एरे के साथ जनरेट की गई स्क्रीन पर मौजूद है। बिना इसके जनरेट की गई स्क्रीन के लिए, समाधान यह है कि स्क्रीन को एक अटैचमेंट के रूप में रेंडर करें और इमेज के साथ create-new-design को कॉल करें।
1. upload-attachment  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. create-new-design  { "fileId": "FILE_ID",
                        "message": "Change the color scheme to dark mode and
                                    add a 'Remember me' checkbox below the password field.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]
जिन स्क्रीन के पास डिज़ाइन संदर्भ है, उनके लिए सीधे edit-design को कॉल करें message में परिवर्तन और targets में स्क्रीन के साथ।

4. एक स्क्रीन को पूर्ण फ्लो में विस्तृत करें

एक मौजूदा डिज़ाइन में अनुवर्ती स्क्रीन जोड़ें।
1. list-screens   { "fileId": "FILE_ID" }
                  → [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }]

2. expand-design  { "fileId": "FILE_ID",
                    "message": "Add the next screen in the user flow",
                    "operationVariant": "next_screen",
                    "targets": ["BASE_SCREEN_ID"] }
                  → { "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"] }

3. get-screen-image { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                    → [inline PNG]
एज-केस स्क्रीन जोड़ने के लिए चरण 2 को operationVariant: "error_state" या "empty_state" के साथ दोहराएं।
operationVariant expand-design के लिए एक आवश्यक पैरामीटर है। आधार स्क्रीन को भी designs एरे (डिज़ाइन संदर्भ) के साथ जनरेट किया जाना चाहिए — स्क्रीन के बिना इसके, उदाहरण 3 से अटैचमेंट समाधान का उपयोग करें।

5. बैच जॉब से पहले कोटा ऑडिट करें

कई जनरेशन शुरू करने से पहले शेष क्षमता जांचें।
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
यदि daily कम है, तो बैच को 00:00 UTC के बाद शेड्यूल करें जब यह रीसेट होता है।