Anthropic تضيف أمر /design إلى Claude Code لإنشاء نماذج واجهة مستخدم (UI Mockups) عبر الـ Terminal

قامت Anthropic بتوسيع قدرات Claude Code عبر إضافة أمر /design جديد يتيح للمطورين إنشاء نماذج واجهة المستخدم (UI mockups) وتطويرها وعرضها دون مغادرة واجهة السطر البرمجي (terminal).

إنشاء النماذج الأولية لواجهة المستخدم مباشرة في الـ Terminal

بدلاً من التنقل بين Figma وواجهة الأوامر (shell)، يمكنك الآن كتابة شيء مثل /design a few options for a login screen. سيرد Claude بعدة "لوحات تصميم" (artboards) تفاعلية تعرض نماذج عالية الدقة. يمكنك مقارنة التخطيطات، واختيار الأفضل منها، وتحسين المظهر عبر طرح أسئلة متابعة—كل ذلك قبل كتابة سطر واحد من الكود الفعلي.

نماذج واجهة مستخدم مدركة للسياق من قاعدة الكود الخاصة بك

يشير المطور Nate Parrott إلى أن Claude يقرأ المستودع (repository) الحالي بالفعل؛ حيث يستخرج لوحات الألوان، ومكتبات المكونات، واتفاقيات التخطيط، ثم يصمم كل نموذج ليتناسب مع النمط الحالي للمشروع. تظهر النتائج في شكل "Artifacts"، وهي عرض مخصص داخل Claude يعرض الصور دون الحاجة لفتح محرر رسومات منفصل. في هذه المرحلة، توجد النماذج فقط في مساحة عمل Claude؛ ويجب عليك حفظها صراحةً في نظام الملفات قبل تحويلها إلى كود.

لماذا يهم هذا الأمر في التطوير المدعوم بالذكاء الاصطناعي

يدمج هذا الأمر مرحلتين من دورة حياة تطوير البرمجيات—التصميم والبرمجة—في مرحلة واحدة. يمكن للفرق التي تهتم بالسرعة إنشاء خيارات تخطيط متعددة بأمر واحد، مما يسرع عملية الاستكشاف في المراحل المبكرة. وبما أن Claude يستخدم قاعدة الكود الحية، تظل النماذج متوافقة مع العلامة التجارية ونظام المكونات، مما يقلل من عمليات التنظيف اليدوي التي تتبع عادةً توليد الصور العامة.

تصف Anthropic هذه الخطوة بأنها توجه نحو "مهندس برمجيات يعمل بالذكاء الاصطناعي" يتعامل مع المنطق والجماليات معاً. إذا أصبحت واجهة السطر البرمجي (terminal) بمثابة مساحة عمل متعددة الوسائط، فإن الخط الفاصل بين كتابة الكود وتشكيل تجربة المستخدم سيتقلص بشكل كبير.

القيود الحالية

لا تزال هذه الميزة في مرحلة المعاينة (preview). النماذج التي يتم إنشاؤها لا تتحول تلقائياً إلى ملفات مصدرية؛ بل يجب عليك تصديرها ودمجها بنفسك. هذه الخطوة الإضافية قد تستهلك جزءاً من الوقت الموفر، خاصة في المشاريع الكبيرة التي تحتوي على عشرات المكونات.

كيف تجربها

قم بتشغيل claude update لجلب أحدث إصدار للمعاينة وتفعيل أمر /design.

النقاط الرئيسية

  • النماذج الأولية المتكاملة: يقوم أمر /design بإنشاء لوحات تصميم متعددة لواجهة المستخدم مباشرة من أوامر الـ terminal.
  • الاتساق السياقي: يقوم Claude بفحص قاعدة الكود الحالية للحفاظ على توافق النماذج مع نظام التصميم الحالي.
  • سير عمل انسيابي: من خلال دمج قوة الأوامر في Claude Design مع قدرات التنفيذ في Claude Code، ينتقل المطورون من المفهوم إلى النموذج المرئي دون الحاجة للتبديل بين الأدوات.

يتيح أمر /design الجديد من Anthropic للمطورين إنشاء وتطوير نماذج واجهة المستخدم مباشرة من الـ terminal، مما يقلل من عملية التنقل المستمرة بين أدوات التصميم ومحررات الكود—وهي عقبة لا تزال تواجهها العديد من الفرق سريعة الحركة.

إنشاء مسودات مرئية من أمر CLI

تكتب أمراً مثل /design a few options for a login screen ليعيد Claude مجموعة من لوحات التصميم التفاعلية. تعرض كل لوحة نموذجاً عالي الدقة يمكنك فحصه ومقارنته وتحسينه عبر طرح أسئلة متابعة.

يقرأ Claude الملفات في المشروع الحالي، ويستخرج لوحات الألوان، ومكتبات المكونات، واتفاقيات التخطيط، ثم يصمم النماذج لتتطابق معها. تظهر المخرجات في شكل "Artifacts"، وهو عرض يعرض الصور دون فتح محرر رسومات منفصل. في هذه المرحلة، تعيش النماذج فقط في مساحة عمل Claude؛ ويجب عليك حفظها صراحةً في نظام الملفات قبل تحويلها إلى كود.

لماذا يهتم المطورون بأداة "التصميم داخل الـ Terminal"

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

بالنسبة للفرق التي تركز على السرعة، يمكن لتوليد عدة خيارات للتخطيط بأمر واحد أن يسرع مرحلة الاستكشاف الأولية. كما أن قراءة Claude لقاعدة الكود الحالية تحافظ على توافق النماذج مع العلامة التجارية ونظام المكونات الخاص بالمشروع، مما يقلل من عمليات التنظيف اليدوي التي تتبع عادةً خطوة توليد الصور العامة.

تصف Anthropic هذه الإضافة بأنها خطوة نحو "مهندس برمجيات يعمل بالذكاء الاصطناعي" يمكنه التعامل مع المنطق والجماليات معاً. وإذا أصبحت واجهة السطر البرمجي بمثابة مساحة عمل متعددة الوسائط، فإن الخط الفاصل بين كتابة الكود وتشكيل تجربة المستخدم سيصبح أكثر دقة.

Limitations and the Case for Traditional Design Tools

The feature is still in preview, and several practical constraints remain. First, the generated mockups do not automatically become source files; developers must export and integrate them manually. That extra step can erode the time savings for larger projects where dozens of components need to be synced.

What to Watch as the Feature Matures

Anthropic’s update notes that the command can be enabled with a simple claude update.

Takeaway: Embedding a design prompt inside Claude Code’s terminal gives developers a shortcut from concept to visual prototype, but the workflow still depends on manual hand-off and lacks the depth of dedicated UI tools. Its evolution will decide whether the command remains a niche convenience or becomes a core part of an AI-driven development stack.