زوّد Qwen 3.7 Plus بلقطة شاشة لواجهة مستخدم، ويمكنه كتابة كود الواجهة الأمامية لإعادة بنائها. يقرأ النموذج الصور والأكواد في نفس الوقت، لذلك يصبح نموذج تصميم، أو صفحة منافس، أو تصدير Figma مكون React أو HTML مبدئيًا في استدعاء واحد. يوضح هذا الدليل سير العمل وكيفية الحصول على مخرجات يمكنك نشرها بالفعل.
سنغطي الاستدعاء الأساسي، وتفاصيل الأوامر المهمة، وحلقة التغذية الراجعة المرئية التي تسد الفجوة للوصول إلى دقة البكسل، وكيفية تحويل واجهة المستخدم التي تم إنشاؤها إلى تطبيق عملي. للاطلاع على خلفية النموذج، راجع نظرة عامة على Qwen 3.7 Plus، ولشكل الطلب، راجع دليل API الخاص بـ Qwen 3.7 Plus. ستقوم باختبار واجهة برمجة التطبيقات (API) ونقاط النهاية التي تستدعيها واجهة المستخدم الخاصة بك في Apidog على طول الطريق.
ملخص
أرسل لقطة شاشة بالإضافة إلى أمر دقيق إلى Qwen 3.7 Plus واطلب الكود في الإطار الذي تستهدفه. المرور الأول يوصلك قريبًا؛ يمكنك التحسين عن طريق عرض النتيجة، وأخذ لقطة شاشة لها، وطلب من النموذج إصلاح الاختلافات مقارنة بالأصل. يتناسب Plus مع هذا لأنه يجمع بين الرؤية القوية والترميز المتين، ويحتفظ بسياق 1M توكن للتصاميم الكبيرة، وتكلفته قليلة لكل استدعاء. العمل يكمن في الأمر والتكرار، وليس في واجهة برمجة التطبيقات (API).
لماذا Qwen 3.7 Plus لهذه المهمة
يتطلب التحويل من لقطة شاشة إلى كود شيئين في آن واحد: قراءة الصورة بدقة، ثم كتابة الكود الصحيح. يحقق Plus حوالي 60% في SWE-Bench Pro و 70.3 في Terminal-Bench، لذا فإن جودة الكود قوية، وتتعامل رؤيته مع تخطيطات واجهة المستخدم الكثيفة. يسمح سياق 1M توكن بإرسال تصميم طويل وعالي الدقة دون اقتصاص، وبتكلفة 0.40 دولار لكل مليون توكن إدخال يمكنك التكرار بتكلفة زهيدة. للاطلاع على المهمة الشقيقة لهذه، وهي تشغيل واجهة المستخدم بدلاً من إعادة بنائها، راجع دليل عامل استخدام الكمبيوتر الخاص بنا.
الاستدعاء الأساسي
أرسل الصورة كجزء image_url جنبًا إلى جنب مع تعليمات نصية. إليك مولد بسيط:
import os, base64
from openai import OpenAI
client = OpenAI(
api_key=os.environ["DASHSCOPE_API_KEY"],
base_url="https://dashscope-intl.aliyuncs.com/compatible-mode/v1",
)
def screenshot_to_code(png_path, prompt):
b64 = base64.b64encode(open(png_path, "rb").read()).decode()
resp = client.chat.completions.create(
model="qwen3.7-plus",
messages=[{
"role": "user",
"content": [
{"type": "text", "text": prompt},
{"type": "image_url",
"image_url": {"url": f"data:image/png;base64,{b64}"}},
],
}],
)
return resp.choices[0].message.content
print(screenshot_to_code("mockup.png", "Rebuild this UI as a React component."))
تأكد من معرف النموذج الحالي في وثائق Model Studio قبل النشر. هذا يعمل، لكن أمرًا من سطر واحد يمنحك نتيجة بجودة سطر واحد. الأمر هو حيث تكمن الجودة.
كتابة أمر يحصل على كود قابل للنشر
الأوامر الغامضة تنتج ترميزًا عامًا. كن محددًا بشأن المكدس والقيود:
حوّل لقطة شاشة واجهة المستخدم هذه إلى مكون React واحد باستخدام Tailwind CSS.
المتطلبات:
- طابق التخطيط، المسافات، ولوحة الألوان بأقرب شكل ممكن.
- اجعله متجاوبًا حتى عرض 375 بكسل للجوال.
- استخدم HTML دلاليًا وتسميات (labels) يمكن الوصول إليها للمدخلات والأزرار.
- استخدم بيانات بديلة (placeholder data) حيث تظهر لقطة الشاشة محتوى ديناميكيًا.
- أعد كود المكون فقط، بدون نص إضافي.
اذكر الإطار، نظام التنسيق، نقاط التوقف (breakpoints)، وشريط إمكانية الوصول. أخبره كيف يتعامل مع المحتوى الديناميكي حتى لا يخترع خلفية. تعد وثائق Tailwind CSS مرجعًا جيدًا لفئات الأدوات المساعدة التي سيصدرها. إذا زودت النموذج بمواصفات المكون أو موجز تصميم قصير، تقترب النتيجة أكثر؛ تشرح مقالتنا حول ما يفعله ملف design.md لوكلاء البرمجة سبب اختلاف النتائج عند وجود مواصفات مكتوبة.
سد الفجوة باستخدام حلقة تغذية راجعة مرئية
نادرًا ما يضبط المرور الأول المسافات والألوان بدقة. هنا تؤتي رؤية Plus ثمارها مرة ثانية. اعرض المكون الذي تم إنشاؤه، التقط له لقطة شاشة، ثم أرسل الصورتين مرة أخرى واطلب من النموذج التوفيق بينهما:
إليك التصميم المستهدف (الصورة 1) والعرض الحالي الخاص بي (الصورة 2).
اذكر الاختلافات المرئية، ثم أعد كود المكون المصحح
الذي يطابق الصورة 1 بشكل أوثق.
عادة ما تؤدي جولتان أو ثلاث من هذه الجولات إلى نتيجة يصعب تمييزها عن الأصل. إنها نفس فكرة الإدراك والتصحيح الكامنة وراء عامل استخدام الكمبيوتر، مطبقة على الكود بدلاً من النقرات.
التعامل مع التصاميم الحقيقية
نماذج الإنتاج تكون كبيرة ومفصلة، وهذا له نتيجتان:
- تكلفة التوكن. تصل تكلفة الصورة كاملة الصفحة وعالية الدقة إلى آلاف التوكنات. قلّل حجم الصورة إلى أصغر حجم يمكن قراءة النص فيه بوضوح، واقتصّ الجزء الذي تقوم ببنائه.
- النطاق. لا تطلب لوحة تحكم كاملة في استدعاء واحد. قسّم الصفحة إلى أقسام، رأس، شريط جانبي، جدول، واولد كل منها على حدة، ثم اجمعها. يساعد سياق 1M توكن، لكن الطلبات الأصغر تنتج كودًا أنظف.
الحصول على مخرجات أفضل
بعض التعديلات على الأوامر تصلح معظم المشاكل الشائعة:
- ألوان خاطئة. النموذج يقدر الدرجات اللونية. الصق قيم الـ hex الدقيقة من تصميمك واطلب منه استخدامها.
- أيقونات مختلقة. يخمّن أشكال الأيقونات. اذكر مجموعة أيقونات مثل Lucide أو Heroicons واطلب منه استخدام تلك المكونات.
- نص مكتوب ذاتيًا. إذا ملأ بنص يبدو حقيقيًا، اطلب منه استخدام محتوى بديل (placeholder) معلم بوضوح بدلاً من ذلك.
- كثرة عناصر Div. اطلب صراحةً عناصر دلالية وهيكلًا مسطحًا، وإلا فإنه يميل إلى الإفراط في تعشيش عناصر div الملتفة.
كل منها إضافة من سطر واحد إلى الأمر، ومعًا تقلل بشكل ملحوظ من جولات التحسين.
من واجهة المستخدم إلى تطبيق عملي
الكود الأمامي المُنشأ هو نصف ميزة فقط. سيقوم المكون بجلب البيانات، إرسال النماذج، واستدعاء نقاط النهاية التي يجب أن تكون موجودة وتعمل. هذا هو المكان الذي يلتقي فيه اختصار التحويل من لقطة شاشة إلى كود بالهندسة الحقيقية.
صمم نقاط النهاية هذه أولاً وستحصل واجهة المستخدم التي تم إنشاؤها على شيء متين للتواصل معه. يتيح لك Apidog تحديد عقد API، ومحاكاته بحيث يتم عرض المكون الجديد ببيانات واقعية فورًا، واختبار الاستجابات قبل بناء الواجهة الخلفية. يشرح دليل وضع المواصفات أولاً الخاص بنا هذا التدفق، ويتوافق هذا النهج جيدًا مع الواجهات الأمامية التي تم إنشاؤها بواسطة الذكاء الاصطناعي بنفس الطريقة التي يتوافق بها مع واجهات برمجة التطبيقات المبنية في Cursor.
حمّل Apidog لمحاكاة واختبار واجهات برمجة التطبيقات (APIs) التي تقف وراء واجهة المستخدم التي ينشئها Qwen 3.7 Plus.
الأسئلة الشائعة
ما هي الأطر التي يمكن أن يستهدفها Qwen 3.7 Plus؟ أيًا كان ما تسميه في الأمر: React، Vue، Svelte، HTML و CSS عادي، Tailwind، أو مكتبة مكونات. كن واضحًا، حيث أن الافتراضي هو ترميز عام.
ما مدى دقة المرور الأول؟ قريب في الهيكل، خشن في المسافات والألوان الدقيقة. حلقة التغذية الراجعة المرئية، العرض وإعادة الإرسال، هي ما يوصله إلى دقة شبه بكسل.
هل يمكنه العمل من تصميم Figma؟ نعم، إذا قمت بتصدير الإطار كصورة. يقرأ النموذج التصميم المعروض، وليس ملف Figma نفسه.
كيف أحافظ على انخفاض تكلفة التوكن؟ قلّل حجم الصورة إلى أصغر حجم يمكن قراءته، اقتصّ الجزء الذي تقوم ببنائه، واولد الصفحة في أجزاء بدلاً من كلها دفعة واحدة.
هل يبني الواجهة الخلفية أيضًا؟ لا. إنه ينتج كود واجهة أمامية يتوقع واجهات برمجة التطبيقات (APIs). صمم ومحاكِ تلك بشكل منفصل، وهو الجزء الذي يتعامل معه Apidog.
الخلاصة
التحويل من لقطة شاشة إلى كود باستخدام Qwen 3.7 Plus هو أمر دقيق، واستدعاء متعدد الوسائط بتكلفة منخفضة، وحلقة تغذية راجعة مرئية قصيرة. يمنحك مكونًا عاملاً بسرعة، لكن واجهة المستخدم لا تزال بحاجة إلى واجهات برمجة تطبيقات (APIs) حقيقية تحتها. أنشئ الواجهة الأمامية باستخدام Plus، ثم صمم، حاكِ، واختبر نقاط النهاية في Apidog لكي تتماسك الميزة المكتملة.