Qwen Code للتصميم.

ما هو Qwen Code فعليًا

Qwen Code هو وكيل ذكاء اصطناعي مفتوح المصدر (Apache-2.0) تشحنه Alibaba للطرفية. يقرأ مستودعك، ويعدّل الملفات، وينفّذ أوامر الصدفة، ويعمل على الويب — مخطِّطًا ومتحقِّقًا من العمل انطلاقًا من مهام باللغة الطبيعية بدلًا من إكمال أسطر فحسب. وهو مقتبَس من Gemini CLI من Google، مع تكييفات على مستوى المحلِّل والمطالبات مضبوطة لإطلاق إمكانات نماذج Qwen3-Coder في المهام البرمجية العاملة.

في أعمال التصميم، تبرز خاصيتان. إنه نموذج برمجي عامل قادر، فيمكنه أخذ مرجع وموجز واضح وبناء واجهة مستخدم متجاوبة وتشغيلها وتصحيحها ذاتيًا. ونماذج Qwen3-Coder تحمل نافذة سياق كبيرة، تكفي للاحتفاظ بنظام تصميمك ومكتبة مكوّناتك ومجموعة مراجعك كاملةً دفعةً واحدة بدلًا من تلخيصها.

• ملفات السياق: يقرأ Qwen Code ملف QWEN.md للحصول على سياق مشروع دائم — وهو المكان الطبيعي لترميز اصطلاحات تصميمك وtokens وقوائم المراجعة. وتُضاف الإعدادات الشخصية وإعدادات المشروع فوقه.
• أدوات مدمجة + MCP: يأتي مزوّدًا بأدوات للملفات والصدفة والويب جاهزة، ويدعم خوادم MCP (تُهيَّأ تحت mcpServers في ‎~/.qwen/settings.json) لإضافة سياق خارجي مثل ملف Figma حيّ.
• أحضر مفتاحك الخاص للبدء: تحضر مفتاحك الخاص — مفتاح DashScope (Alibaba Cloud Model Studio) API، أو أي نقطة نهاية متوافقة مع OpenAI أو ModelScope — وتهيّئه في settings.json.

• المزوّد: Alibaba
• بيانات الاعتماد: مفتاح DashScope / Qwen API (أحضر مفتاحك الخاص)، أو نقطة نهاية متوافقة مع OpenAI / ModelScope
• الترخيص: Apache-2.0، مفتوح المصدر (مقتبَس من Gemini CLI)

لماذا يلائم نموذج برمجي قوي وسياق كبير التصميم

تأتي ميزة Qwen Code في التصميم من خاصيتين — لكن، كما في كل وكيل، يبقى الذوق أمرًا يجب توفيره.

• برمجة عاملة قوية: نماذج Qwen3-Coder مضبوطة للمهام العاملة، فيخطط الوكيل ويعدّل ويشغّل البناء ويصحّح ذاتيًا — محوّلًا مرجعًا وموجزًا واضحين إلى ترميز متجاوب بدلًا من تخمين من طلقة واحدة.
• نافذة سياق كبيرة: السياق الكبير لـ Qwen3-Coder يعني أن نظام التصميم كله وtokens والعديد من الحالات المرجعية تتسع دفعةً واحدة، فيعيد الوكيل استخدام عناصرك الأساسية الحقيقية بدلًا من اختراع أنماط لمرة واحدة.
• الاصطلاحات في QWEN.md: يوجّه ملف QWEN.md (إضافةً إلى خادم MCP الخاص بـ Figma) الوكيلَ نحو tokens ومكوّناتك ومواصفاتك الحقيقية، فيعمل وفق علامة تجارية بدلًا من مظهر افتراضي.

الدرس هو نفسه الذي يعلّمه كل وكيل: Qwen Code لا يمتلك ذوقًا افتراضيًا. إنه ينتج تصميمًا جيدًا حين تمنحه قيودًا — نظام تصميم، ومهارة جمالية، ومراجع ملموسة. يحزم Open Design هذه المدخلات بالضبط، ولهذا يتلاءم الاثنان معًا (المزيد أدناه).

إعداد Qwen Code لأعمال التصميم، من الصفر

إليك المسار الكامل من جهاز نظيف إلى Qwen Code قادر على بناء واجهة المستخدم والتحقق منها.

# 1. Install Qwen Code (Node 22+)
npm install -g @qwen-code/qwen-code@latest
# or: brew install qwen-code

# 2. Start it in your project and authenticate on first run
cd your-project
qwen              # run /auth, or set a key in ~/.qwen/settings.json

# 3. Configure a DashScope (OpenAI-compatible) key in settings.json
#    baseUrl: https://dashscope.aliyuncs.com/compatible-mode/v1
#    model:   qwen3-coder-plus   (set DASHSCOPE_API_KEY)

# 4. Add a QWEN.md and wire the Figma MCP server (optional)
#    add MCP under "mcpServers" in ~/.qwen/settings.json

• رمّز قواعد تصميمك: ضع tokens والعناصر الأساسية والاصطلاحات في QWEN.md ووجّه Qwen Code إليها، لتطابق المخرجات علامة تجارية بدلًا من الرجوع إلى مظهر عام.
• أضف التحقق في المتصفح: اربط Playwright أو خادم MCP للمتصفح حتى يعرض Qwen Code في متصفح حقيقي ويفحص مخرجاته عبر نقاط التوقف بدلًا من مجرد تأكيد نجاح البناء.

سير العمل من المرجع إلى واجهة المستخدم

أعلى حلقات التصميم رافعةً مع Qwen Code هي تحويل مرجع إلى واجهة مستخدم عاملة ومتجاوبة والتكرار حتى تتطابق — بالاعتماد على الوكيل في البناء والعرض ومقارنة مخرجاته بالمرجع.

1. ابدأ من أوضح المراجع البصرية المتاحة لديك — وصِف حالات متعددة (سطح المكتب والجوال، والتمرير فوق العنصر، والحالة الفارغة، وحالة التحميل)، لا لقطة بطولية واحدة فحسب.
2. كن محددًا في المطالبة؛ المطالبات الغامضة تنتج واجهة مستخدم عامة حتى مع نموذج قوي.
3. احتفظ بنظام تصميمك واصطلاحاتك في QWEN.md، وأخبر Qwen Code بمكان tokens والعناصر الأساسية المعتمدة.
4. شغّل خادم تطوير واجعل Qwen Code يعرض في متصفح حقيقي، مع تغيير الحجم إلى نقاط التوقف لفحص النتيجة.
5. كرّر العمل بجعل Qwen Code يقارن تنفيذه بالمراجع — لا مجرد تأكيد أنه يُبنى.

أشِر إلى ملف بـ @ لإرفاقه بالمطالبة، ثم امنح قيودًا ملموسة:

qwen
# in the prompt:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from QWEN.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

أبقِ المطالبات صغيرة ومركّزة، وثبّت التكرارات الجيدة وارجع عن السيئة (مخبرًا Qwen Code عند الرجوع)، حتى يبني كل مرور على أساس نظيف.

QWEN.md وMCP والامتدادات

ثلاث نقاط امتداد تجعل Qwen Code عمليًا لأعمال التصميم المستمرة، وكلها تنطبق بسلاسة على سير عمل تصميمي مفتوح.

• سياق QWEN.md: تعيش قواعد المشروع في ملف QWEN.md في جذر المستودع (مع طبقات عامة وعلى مستوى المشروع). وهو الموطن الدائم لاصطلاحات تصميمك، يُقرأ في كل تشغيلة.
• خوادم MCP: هيّئ خوادم MCP تحت mcpServers في ‎~/.qwen/settings.json — وهي الطريقة المحمولة لجلب سياق التصميم والأدوات الخارجية، وأبرزها خادم MCP الخاص بـ Figma، التي تعمل عبر الوكلاء، لا مع Qwen Code فقط.
• المهارات والأدوات المدمجة: تتيح مهارات Qwen Code وأدواته المدمجة للملفات والصدفة والويب جمعَ المراجع وتشغيل حلقة التحقق دون مغادرة الطرفية.

هذه قدرات محمولة ومتعددة الوكلاء — تمامًا من النوع الذي بُني Open Design لتنسيقه، بدلًا من إعادة إنشائه في كل مشروع.

Qwen Code مقابل Codex وClaude Code وCursor وGemini CLI للتصميم

لا يوجد فائز وحيد في أعمال التصميم — لكل وكيل قوة مختلفة، والفِرق المتمرّسة تجمع بينها. وإليك خلاصة منصفة:

الحكم المتكرر للمجتمع هو أن الذوق يأتي من البشر: جميعها يرجع إلى جمالية عامة بلا مهارات ومراجع وقيود. تلك هي المشكلة الحقيقية التي يجب حلّها — وهي على هيئة أداة تصميم، لا على هيئة نموذج.

المزالق، وكيف تتجنب مظهر «رداءة الذكاء الاصطناعي»

الشكوى الأكثر شيوعًا حول التصميم المُولَّد بالذكاء الاصطناعي أنه يبدو عامًا — تدرّجات لونية ناعمة، ولوحات عائمة، وزوايا مدوّرة مفرطة الحجم، وظلال درامية، ونزعة Inter والبنفسجي التي «تصرخ بأن الذكاء الاصطناعي صنع هذا». ومن المشكلات الأخرى المُبلَّغ عنها تخطيطات الجوال المعطوبة وتسرّب التعليمات إلى نصوص الواجهة. ولا شيء من هذا حصري لـ Qwen Code؛ بل هو ما يحدث حين يعمل أي وكيل دون سياق تصميم منسّق.

• أضف مهارة جمالية: مهارة تصميم منسّقة تُلزم الوكيل بالالتزام باتجاه حقيقي بدلًا من المظهر الافتراضي.
• تحقّق في متصفح حقيقي: اجعل الوكيل يعرض ويفحص ذاتيًا عبر نقاط التوقف حتى لا تنكسر التخطيطات بصمت على الجوال.
• وفّر tokens والمراجع: tokens التصميم الحقيقية ولقطات الشاشة المرجعية هما أكبر رافعة منفردة لجودة المخرجات.
• رمّز القواعد في QWEN.md: ضع قواعد بأسلوب «لا بطاقات بطولية، حدّ أقصى خطّان، تسلسل هرمي يقدّم العلامة التجارية» حيث يقرأها الوكيل في كل تشغيلة.

لاحظ أن كل إجراء تخفيفي يدور حول منح الوكيل سياق تصميم منسّقًا. والحفاظ على ذلك السياق يدويًا، لكل مشروع، هو العناء الذي يزيله Open Design.

التصميم باستخدام Qwen Code داخل Open Design

Open Design هو طبقة التصميم مفتوحة المصدر التي يطلبها سير العمل أعلاه باستمرار. يعامل Qwen Code بوصفه محوّلًا أصيلًا ويغلّفه بمكتبة منسّقة من المهارات وأنظمة التصميم، وخط عرض منظَّم، وواجهة سطح مكتب محلية — فيكون سياق التصميم الذي يجعل Qwen Code جيدًا حاضرًا من التشغيلة الأولى، لا مجمَّعًا يدويًا في كل مرة. وكلاهما مفتوح المصدر ومحلي أولاً، وهو ما يجعل الاقتران تلاؤمًا طبيعيًا.

1. ثبّت Open Design واختر Qwen Code وكيلًا لك.
2. صادِق بمفتاح DashScope أو Qwen API الخاص بك («أحضر مفتاحك الخاص») — تبقى بيانات الاعتماد على جهازك ولا تُمرَّر عبرنا أبدًا.
3. اختر نظام تصميم ومهارة، ثم ولّد العروض التقديمية والنماذج الأولية وصفحات الهبوط بذوق متّسق.
4. كل مخرج وملف DESIGN.md يعيش في مستودعك الخاص، لا في سحابة مستضافة.

نفس وكيل Qwen Code، ونفس المفتاح — إضافةً إلى سير عمل تصميمي حقيقي ومحمول ومفتوح المصدر حوله. إنه محلي أولاً وApache-2.0، فلا شيء يخص عملك أو بيانات اعتمادك يغادر جهازك.

الأسئلة الشائعة

1. 01 هل يستطيع Qwen Code أن يؤدي أعمال التصميم فعلًا؟ +

   نعم — مع مهارة جمالية، ونظام تصميم، وصور مرجعية حقيقية في السياق، ينتج Qwen Code واجهة مستخدم بجودة الإنتاج ومتجاوبة، وتبني حلقته العاملة المخرجات وتعرضها وتتحقق منها مقابل المراجع. ودون ذلك السياق يميل إلى الرجوع إلى مظهر عام، وهي الفجوة التي يملؤها Open Design.

2. 02 هل أحتاج إلى الدفع للتصميم باستخدام Qwen Code؟ +

   Qwen Code مجاني ومفتوح المصدر، لكنه بنظام «أحضر مفتاحك الخاص» — تحضر مفتاح DashScope (Alibaba Cloud Model Studio) API، أو نقطة نهاية متوافقة مع OpenAI، أو ModelScope. وتقدّم Alibaba أيضًا خطة برمجة برسوم ثابتة. وOpen Design لا يمرّر بيانات اعتمادك على أي حال.

3. 03 ما الذي يجعل Qwen Code جيدًا للتصميم تحديدًا؟ +

   أمران: نماذج Qwen3-Coder مضبوطة للبرمجة العاملة، فيبني الوكيل ويصحّح ذاتيًا واجهة مستخدم متجاوبة، وسياقها الكبير يتسع لنظام تصميم ومجموعة مراجع كاملين دفعةً واحدة. كلاهما يساعد — لكن الذوق يأتي مع ذلك من نظام التصميم والمهارة والمراجع التي توفّرها.

4. 04 هل Qwen Code هو نفسه Gemini CLI؟ +

   لا. Qwen Code مقتبَس من Gemini CLI من Google — نفس النسب مفتوح المصدر — مع تكييفات على مستوى المحلِّل والمطالبات تضبطه لنماذج Qwen3-Coder. ويدعم Open Design كليهما، فيمكنك تبديل الوكلاء دون تغيير سير عمل تصميمك.

5. 05 كيف أربط Qwen Code بـ Figma؟ +

   أضف خادم MCP الخاص بـ Figma تحت mcpServers في ‎~/.qwen/settings.json. عندها يستطيع Qwen Code سحب سياق تصميم حقيقي — مكوّنات ومتغيّرات وبيانات تخطيط — فتطابق الشيفرة المُولَّدة المصدرَ بدلًا من تقريبه.

6. 06 هل Open Design تابع لـ Alibaba أو Qwen؟ +

   لا. Qwen Code منتج من Alibaba؛ وOpen Design مشروع مستقل مفتوح المصدر يدعمه بوصفه محوّلًا أصيلًا. Qwen علامة تجارية لـ Alibaba.

7. 07 هل ملفاتي وبيانات اعتمادي آمنة؟ +

   نعم — Open Design محلي أولاً وApache-2.0. تبقى ملفاتك ومخرجاتك وDESIGN.md في مستودعك الخاص، وتُستخدم بيانات اعتماد DashScope أو Qwen الخاصة بك مباشرةً من قِبل وكيلك، ولا تُوجَّه عبر خوادم Open Design أبدًا.