أمر /design في Claude Code يتيح للمطورين إنشاء نماذج واجهة المستخدم قبل كتابة الكود

مقدمة

تجلب Anthropic سير عمل أكثر وضوحًا يركّز على التصميم أولاً إلى Claude Code.

في 18 أغسطس، أعلن مصمم المنتجات في Anthropic نيت باروت عن إصدار مبكر من أمر /design في Claude Code. الفكرة بسيطة: لا يتعين على المطورين الانتقال مباشرة من متطلبات الميزة إلى مرحلة التنفيذ، بل يمكنهم أولاً السماح لـ Claude بإنشاء اتجاهات بصرية متعددة، ومقارنتها، وتحرير الخيار المفضل، ثم الانتقال إلى مرحلة البرمجة.

يتوفر سير العمل هذا عبر Claude Code Desktop أو واجهة الأوامر. يمكن أن تكون الجملة التوجيهية مباشرة بهذا الشكل:

/design صمّم عدة خيارات لـ {الميزة}

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

هذا أمر صغير في المظهر لكنه يُحدث تغييرًا مهمًا في سير العمل. لم يعد Claude Code مقتصرًا على الاستدلال حول الواجهات من خلال الملفات المصدرية فقط؛ بل يمكنه الآن المشاركة في قرارات التصميم قبل تغييرات الكود.

إنشاء اتجاهات واجهة متعددة قبل البناء

الاستخدام الأكثر مباشرة لأمر /design هو استكشاف خيارات واجهة متعددة قبل لمس كود الإنتاج.

على سبيل المثال:

/design صمّم عدة خيارات للوحة تحليلات جديدة

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

سير العمل الفعلي يتم على النحو التالي:

1. افتح المشروع في Claude Code Desktop أو شغّل Claude Code من دليل المشروع.
2. استخدم /design مع وصف الميزة أو الواجهة التي تريد استكشافها.
3. اطلب خيارات متعددة في حال لم تكن الاتجاهات التصميمية محددة بعد.
4. راجع لوحات الرسم المُنشأة.
5. اختر النسخة المفضلة وحسّنها.
6. سلّم التصميم المحدد إلى Claude لتنفيذه في قاعدة الكود الموجودة.

هذا مفيد بشكل خاص عندما يعرف الفريق ما الذي يجب أن تفعله الميزة لكنه لم يقرر بعد كيف يجب أن تبدو.

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

Claude يقرأ قاعدة الكود الحالية ونمط واجهة المستخدم

لا يعمل سير عمل /design كمولّد صور مستقل.

إن Claude Code يفهم بالفعل ملفات المشروع ويمكنه الاستدلال عبر قاعدة الكود الموجودة. في سير عمل التصميم، يساعد سياق قاعدة الكود Claude على إنشاء نماذج أكثر انسجامًا مع المنتج الذي يوسّعه.

يمكن أن يشمل ذلك معلومات موجودة مثل:

• بنية المكونات
• أنماط التخطيط
• اختيارات الخطوط
• استخدام الألوان
• مواصفات المسافات
• التنقل الحالي
• مكونات واجهة المستخدم القابلة لإعادة الاستخدام
• أنماط التفاعل الخاصة بالمنتج

تدعم وثائق Claude Design من Anthropic أيضًا استيراد أنظمة التصميم من مستودعات الكود أو ملفات التصميم أو الملفات المرفوعة أو قواعد الكود المحلية. يمكن لسير عمل /design-sync استيراد هذه المكونات والأنماط إلى Claude Design، مما يجعل الأعمال المُنشأة أقرب إلى نظام المنتج الفعلي.

هذا أمر مهم لأن لوحات التحكم المُنشأة بواسطة الذكاء الاصطناعي العام يسهل ابتكارها. أما لوحة تحكم جديدة تبدو فعلاً وكأنها جزء من المنتج الحالي، فهي أكثر فائدة بكثير.

من لوحة الرسم إلى التنفيذ

يكمن جوهر سير العمل الجديد في مرحلة التسليم.

تقليديًا، كان تطوير الواجهات الأمامية بمساعدة الذكاء الاصطناعي يتبع عادةً أحد مسارين:

1. إنشاء الكود أولاً ثم ضبطه مرارًا حتى تبدو الواجهة مناسبة.
2. إنشاء نموذج في مكان آخر ثم تحويل المرجع البصري يدويًا إلى كود.

يتم الآن ربط Claude Design وClaude Code بحيث يستطيعان مشاركة السياق بين هاتين المرحلتين.

تشير Anthropic إلى أن المستخدمين يمكنهم التبديل بين التصميم والكود مع الحفاظ على مزامنة العمل. يمكن إنشاء تصميم أو تحريره في Claude Design ثم تسليمه إلى Claude Code للتنفيذ دون الحاجة للبدء من جديد من لقطة شاشة.

كما أن العملية العكسية مدعومة: المطورون الذين يفضلون البدء من Claude Code يمكنهم استخدام /design لإنشاء مشاريع التصميم وتحريرها ومزامنتها دون مغادرة سير العمل المرتكز على الطرفية.

من الناحية المفاهيمية، تصبح الحلقة على النحو التالي:

فكرة الميزة
    ↓
/design
    ↓
لوحات واجهات متعددة
    ↓
اختيار وتنقيح اتجاه واحد
    ↓
التنفيذ باستخدام Claude Code
    ↓
مراجعة الواجهة القابلة للاستخدام
    ↓
الاستمرار في التحسين عند الحاجة

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

Claude Design أصبح الآن أكثر تكاملًا مع Claude Code

يشير التقرير الأصلي إلى أن وظائف تحرير التصميم والتلميحات التي كانت تعمل سابقًا بشكل منفصل نسبيًا داخل Claude Design، أصبحت الآن مدمجة بشكل أوثق مع Claude Code.

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

بالنسبة للفرق التي لديها أنظمة تصميم قائمة، يمكن لـ Claude Design أيضًا العمل بناءً على مكونات حقيقية بدلاً من إعادة اختراع لغة بصرية جديدة لكل نموذج أولي.

توثّق Anthropic عملية الاتصال التالية للفرق التي تستخدم خادم MCP الخاص بـ Claude Design:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

ثم تسجيل الدخول من Claude Code:

/design-login

بالنسبة لمزامنة نظام التصميم، توثّق Anthropic:

/design-sync

تكمل هذه الأوامر سير عمل /design من خلال ربط Claude Code بمشاريع التصميم وسياقات أنظمة التصميم القابلة لإعادة الاستخدام.

حدّث Claude Code قبل اختبار أحدث إصدار تجريبي

نظرًا لأن /design قيد التطوير النشط، فمن الحكمة التأكد من أن Claude Code محدّث إلى أحدث إصدار قبل اختبار الميزات الجديدة.

توفر وثائق الإعداد الرسمية من Anthropic أمر التحديث التالي:

claude update

يمكنك التحقق من الإصدار المثبّت عبر الأمر التالي:

claude --version

عادةً ما تقوم تثبيتات Claude Code الأصلية بالتحديث تلقائيًا في الخلفية، بينما قد يكون لإصدارات الحزم المُدارة عبر مديري الحزم عمليات تحديث خاصة بها.

بعد التحديث، ابدأ تشغيل Claude Code من دليل المشروع ذي الصلة:

cd your-project
claude

ثم جرّب طلب تصميم مثل:

/design صمّم عدة خيارات بديلة لصفحة إعدادات الحساب

قد يستمر تغيّر سلوك الإصدار التجريبي أثناء مواصلة Anthropic تطوير هذه الميزة.

أفضل السيناريوهات لاستخدام /design

يكون هذا الأمر الأكثر فائدة عندما لا يكون التنفيذ هو المشكلة الأساسية المطلوب حلها.

على سبيل المثال، قد يعرف المطور بالفعل أن المنتج يحتاج إلى لوحة إعدادات جديدة أو دفق تأهيل أو عرض تحليلات أو صفحة تسعير أو شريط جانبي للمحرر. الجزء غير المؤكد هو التصميم التخطيطي والتفاعلي.

في هذه الحالة، قد يؤدي إنشاء الكود فورًا إلى إعادة عمل غير ضرورية.

يتيح استخدام /design أولاً للفريق مقارنة عدة بدائل قبل تثبيت بنية المكونات واتجاه الأنماط.

سير العمل هذا مفيد بشكل خاص في السيناريوهات التالية:

• استكشاف ميزات جديدة
• إعادة تصميم الواجهات الأمامية
• تخطيطات لوحات التحكم
• دفقات التأهيل
• صفحات الإعدادات
• الصفحات المقصودة
• الأدوات الداخلية
• نماذج أولية مبنية على نظام التصميم
• تجارب منتجات سريعة

كما أنه يساعد المطورين المهرة في تنفيذ الواجهات، لكنهم لا يريدون رسم عدة اتجاهات بصرية يدويًا قبل اختيار الاتجاه.

قيود مهمة

لا يزال Claude Design في مرحلة تجريبية، وقد وثّقت Anthropic عدة قيود.

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

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

لذلك، فإن الاستخدام الأقوى لـ /design ليس "أن يقرر الذكاء الاصطناعي الواجهة"، بل "أن يجعل الذكاء الاصطناعي multiple اتجاهات واجهة معقولة رخيصة التكلفة بما يكفي، بحيث يمكن المقارنة بينها قبل أن يحدد فريق الهندسة الحل النهائي".

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

ما هو أمر /design في Claude Code؟

/design هو سير عمل في Claude Code يُستخدم لإنشاء وتعديل الاتجاهات التصميمية البصرية قبل التنفيذ. تصفه وثائق Anthropic الحالية بأنه وسيلة لبدء العمل التصميمي مباشرة من Claude Code، والتنقل بين التصميمات ورمز الإنتاج في سياق مشترك.

هل يمكن لأمر /design توليد نماذج واجهات متعددة؟

نعم. العرض التجريبي لـ Nate Parrott طلب تحديدًا من Claude توفير خيارات متعددة لميزة معينة، ثم اختيار اللوحة المفضلة وتعديلها وتنفيذها.

هل يستخدم Claude Code قاعدة الأكواد الموجودة عند التصميم؟

هذا جزء من سير العمل المتوقع. يمكن لـ Claude Code قراءة مستودع المشروع، ويمكن لـ Claude Design أيضًا استيراد أنظمة التصميم وسياق قاعدة الأكواد، مما يجعل النماذج الأولية أكثر توافقًا مع المكونات والأنماط البصرية الحالية.

هل يمكنني استخدام /design في الطرفية (Terminal)؟

نعم. تصف Anthropic طريقة دمج Claude Design مع Claude Code، وقد ذكر الإعلان التشويقي تحديدًا إصدار سطح المكتب وأداة سطر الأوامر (CLI) من Claude Code.

ما فائدة /design-sync؟

يُستخدم /design-sync لمزامنة سياق نظام التصميم بين Claude Design وClaude Code. يساعد Claude على البناء باستخدام المكونات والأنماط والخطوط والأنماط الحقيقية من النظام الموجود.

هل أحتاج إلى خادم Claude Design MCP؟

تقدم وثائق مساعدة Anthropic إجراءات إعداد MCP لإنشاء وتعديل مشاريع Claude Design من Claude Code. قد يعتمد التوفر والإعداد على بيئة Claude Design وClaude Code الحالية لديك، لذا يُنصح بالرجوع إلى الوثائق الرسمية قبل النشر في الفريق.

كيف يمكنني تحديث Claude Code؟

بالنسبة للتثبيت الأصلي، توثق Anthropic أمر claude update كأمر تحديث يدوي. أما الإصدارات المثبتة عبر مديري الحزم مثل Homebrew أو WinGet فقد تتطلب الترقية عبر مدير الحزم المعني.

هل Claude Design جاهز للإنتاج؟

يُوثَّق Claude Design حاليًا كمنتج تجريبي (Beta). إنه مناسب لعمليات النمذجة الأولية والتحويل من التصميم إلى الكود، ولكن التصميمات المُولَّدة يجب أن تخضع للمراجعة من حيث إمكانية الوصول والسلوك الاستجابي ومتطلبات المنتج وجودة التنفيذ.

الأدوات ذات الصلة

• Claude Code: بيئة البرمجة الوكيلة من Anthropic، والتي تتعامل مع قواعد الأكواد من الطرفية وسطح المكتب والبيئة التطويرية المتكاملة والويب.
• Claude Design: بيئة التصميم الحوارية من Anthropic، مخصصة للنماذج الأولية والتخطيطات والعروض التقديمية والأعمال البصرية المدركة لأنظمة التصميم.
• Claude Artifacts: مخرجات قابلة للمشاركة والتعديل ينشئها Claude، مناسبة للتطبيقات والمرئيات والأدوات والمحتوى المستقل الآخر.
• Model Context Protocol: طبقة التكامل التي يستخدمها Claude Code للاتصال بالأدوات والخدمات الخارجية، بما في ذلك سير عمل Claude Design.
• Claude Code Skills: تعليمات وسير عمل قابلة لإعادة الاستخدام، يمكن استدعاؤها في Claude Code على شكل أوامر بشرطة مائلة.

الروابط ذات الصلة

• المعاينة التشويقية لـ Nate Parrott لأمر /design: إعلان مبكر من مصمم منتجات في Anthropic حول معاينة /design في Claude Code.
• تكامل Claude Design وClaude Code: نظرة عامة رسمية من Anthropic حول التنقل بين التصميم والكود عبر /design و/design-sync.
• البدء مع Claude Design: دليل رسمي حول مشاريع التصميم وأنظمة التصميم وتكامل Claude Code وخادم Claude Design MCP.
• نظرة عامة على Claude Code: الوثائق الرسمية للتثبيت وسير العمل في Claude Code.
• إعداد وتحديث Claude Code: إرشادات رسمية حول قنوات الإصدار والتحديثات والتثبيت وإدارة الإصدارات.
• أوامر Claude Code: مرجع رسمي للأوامر المتاحة في جلسات Claude Code.

الخلاصة

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

وتكمن القيمة الأعمق في العلاقة بين Claude Design وClaude Code. يمكن لقاعدة الأكواد الحالية وأنظمة التصميم توفير السياق، بينما تعمل أوامر /design و/design-sync وتكامل Claude Design على تقليص الفجوة التقليدية بين النموذج الأولي والتنفيذ.

التغيير العملي بسيط: قبل أن تطلب من Claude Code بناء واجهة، يمكنك الآن أن تطلب منه أن يُريك كيف ينبغي أن تبدو الواجهة أولًا.