أمثلة MCP

1. توليد شاشة ومعاينتها

أكثر سير العمل شيوعًا: وَلِّد شاشة (مع إنشاء الملف في الخطوة نفسها)، ثم اعرض النتيجة.

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

2. ai-design-screens  { "message": "Mobile sign-in screen for a developer tool.
                                    Email/password fields, Google SSO button, dark theme." }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                          "designGuidelinesUpdated": null }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

إذا حذفت fileId يُنشأ ملف جديد تلقائيًا. مرّر fileId لملف موجود لإضافة الشاشات إليه بدلًا من ذلك. الموجّه إلى مساعد الذكاء الاصطناعي لديك:

أنشئ تصميمًا في Flowstep: شاشة تسجيل دخول للجوال لأداة للمطورين، تحتوي على حقلي البريد الإلكتروني وكلمة المرور وزر Google SSO، بالسمة الداكنة، ثم اعرض لي الصورة.

2. تصوير مكوّن React

ارفع ملف .jsx أو .tsx كمرفق، واطلب من Flowstep توليد تصميم يطابقه. تقرأ Flowstep المصدر وتنتج شاشة، دون الحاجة إلى تشغيل التطبيق.

1. upload-attachment  { "text": "<UTF-8 contents of ApiKeys.tsx>",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "assetUrl": "...", "type": "document",
                          "mimeType": "text/javascript" }

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

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

أما ملفات المصدر التي يتجاوز طولها 64,000 حرف، فاستخدم upload-attachment مع mimeType وfileName بدلًا من ذلك، ثم شغّل uploadCommand المُعاد. راجع upload-attachment. الموجّه إلى مساعد الذكاء الاصطناعي لديك:

اقرأ src/components/settings/ApiKeys.tsx، وارفعه كمرفق، ووَلِّد شاشة Flowstep تطابق تخطيط المكوّن. اعرض لي الصورة المُقدَّمة.

3. التكرار على شاشة

غيّر شاشة موجودة في مكانها بتعليمات حرة، وأضف في الاستدعاء نفسه شاشة جديدة تطابقها.

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
   get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]

تُعيد screenIds كل شاشة بناها الاستدعاء أو غيّرها، لذا استدعِ get-screen-image مرة لكل شاشة. احذف الجملة الأخيرة من الرسالة إذا أردت تعديل الشاشة الموجودة فقط. لتغيير جزء من شاشة فقط، استدعِ get-screen-jsx مع "includeIds": true أولًا، ثم مرّر data-id للعنصر الذي تريد تغييره في elementIds. لتطبيق إعداد جاهز بنقرة واحدة على شاشة كاملة، استدعِ ai-edit-screen-variant بدلًا من ذلك، مثل "operationVariant": "light_theme" أو "different_layout". الموجّه إلى مساعد الذكاء الاصطناعي لديك:

في ملف Flowstep باسم “Login flow”، حوّل شاشة تسجيل الدخول إلى السمة الداكنة، وأضف خانة “Remember me” أسفل حقل كلمة المرور، وأضف شاشة نسيان كلمة المرور مطابقة لها. اعرض لي النتائج.

4. توسيع شاشة إلى تدفق كامل

أضف شاشات تالية إلى تصميم موجود.

1. list-screens                { "fileId": "FILE_ID" }
                               → { "screens": [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }] }

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "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" لإضافة شاشات الحالات الاستثنائية، أو "web_version" / "tablet_version" لمنصات أخرى.

operationVariant مطلوب لـ ai-generate-screen-variant، والأداة تقبل screenId واحدًا فقط. لإضافة شاشة ليست نسخة متغيرة من شاشة موجودة، استخدم ai-design-screens مع fileId.

5. سلّم شاشة إلى قاعدة الكود، ثم أعِد كتابة التغييرات

اقرأ شاشة كـ JSX، وابنِ منها، ثم ادفع JSX المعدَّل إلى اللوحة، كل ذلك دون استخدام رسائل.

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

3. get-screen-image    { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → [inline PNG]

تحتفظ الحقول المحذوفة (name وfidelity وscreenType وcolorTheme وfragments) بقيمها الحالية. لإبقاء الأصل وإضافة نسختك بجانبه، استدعِ add-screen-jsx مع screenType وjsx بدلًا من replace-screen-jsx. لعرض صورتك الخاصة داخل الشاشة، ارفعها باستخدام upload-attachment وضع assetUrl المُعاد في img src ضمن JSX. راجع الصور في JSX.

6. التحقق من حصتك قبل مهمة دفعية

تحقّق من السعة المتبقية قبل بدء توليدات متعددة. استدعاء get-plan-details مجاني.

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

إذا كانت remaining.messages.daily منخفضة، فجدوِل الدفعة لتبدأ بعد الساعة 00:00 UTC، وهو وقت إعادة تعيين الحصة اليومية.

البدء

استخدام Flowstep

الفرق والمؤسسات

التصدير والتكاملات

خادم MCP

الفوترة والخطط

الأمان والخصوصية

1. توليد شاشة ومعاينتها

2. تصوير مكوّن React

3. التكرار على شاشة

4. توسيع شاشة إلى تدفق كامل

5. سلّم شاشة إلى قاعدة الكود، ثم أعِد كتابة التغييرات

6. التحقق من حصتك قبل مهمة دفعية

​1. توليد شاشة ومعاينتها

​2. تصوير مكوّن React

​3. التكرار على شاشة

​4. توسيع شاشة إلى تدفق كامل

​5. سلّم شاشة إلى قاعدة الكود، ثم أعِد كتابة التغييرات

​6. التحقق من حصتك قبل مهمة دفعية

1. توليد شاشة ومعاينتها

2. تصوير مكوّن React

3. التكرار على شاشة

4. توسيع شاشة إلى تدفق كامل

5. سلّم شاشة إلى قاعدة الكود، ثم أعِد كتابة التغييرات

6. التحقق من حصتك قبل مهمة دفعية