جدول المحتويات
Claude Design هو أداة تصميم من Anthropic Labs تتيح لك إنشاء تصاميم واجهات المستخدم والنماذج الأولية والشرائح وصفحات الملخّص (one-pagers) عبر المحادثة (أُطلِقت في 17 أبريل 2026 كمعاينة بحثية). ثم في 17 يونيو 2026، أضاف تحديثٌ كبير استيراد أنظمة التصميم والمزامنة ثنائية الاتجاه مع Claude Code (/design-sync)، مما قلّص بشكل حاد رحلة الذهاب والإياب بين المصممين والمطورين.
يتناول هذا المقال ما هو Claude Design، وتحديث يونيو، والاتجاهين في /design-sync، وشروط الاستخدام، ولماذا يُعدّ مهمًّا — استنادًا إلى المعلومات الرسمية. ثلاث نقاط جوهرية في البداية. (1) Claude Design أداة تصميم قائمة على المحادثة تُحسّنها عبر الدردشة والتعليقات والتعديلات المباشرة وأشرطة التمرير (sliders). (2) أبرز ما في تحديث يونيو هو «استورِد نظام التصميم الخاص بك وابْنِ بمكوّناته الحقيقية» و«زامِن في كلا الاتجاهين مع Claude Code». (3) إنها نسخة بيتا لخطط Pro / Max / Team / Enterprise (مُعطّلة افتراضيًّا في Enterprise)؛ فالـ canvas على web/desktop، بينما يقع /design-sync داخل Claude Code (الـ CLI).
التصميم والكود، في كلا الاتجاهين
— تنقّل بين الـ canvas والـ repo
/design-sync ↔
Code→ اسحب نظام التصميم إلى الـ repo وابْنِ بمكوّنات حقيقية،
→Design ادفع الكود عائدًا إلى الـ canvas وتابِع التعديل.
1. ما هو Claude Design
Claude Design أداة «تصف فيها ما تريد عبر المحادثة، فيبني Claude التصميم، ثم تحسّنه عبر الدردشة والتعليقات السطرية والتعديلات المباشرة وأشرطة التمرير». تُنشئ تصاميم ونماذج أولية وشرائح وصفحات ملخّص (one-pagers) (كما يذكر مركز المساعدة النماذج الأولية التفاعلية والعروض التقديمية أيضًا). أُطلِقت في 17 أبريل 2026 كـمعاينة بحثية لخطط Pro / Max / Team / Enterprise، واستخدمها أكثر من مليون شخص في الأسبوع الأول.
عن النموذج: عند الإطلاق في أبريل كانت تعمل على Claude Opus 4.7 (الذي وصفته Anthropic بأنه «أقوى نماذجنا في الرؤية»). غير أن إعلان تحديث يونيو لا يُعيد ذكر النموذج، لذا لا يؤكّد هذا المقال أن «نسخة يونيو تعمل على Opus 4.7» (تحقّق من الأحدث رسميًّا). وللاطلاع على مسحٍ أوسع، راجع مقارنة أدوات تصميم الذكاء الاصطناعي.
2. التحديث الكبير في يونيو 2026
نقل تحديث 17 يونيو 2026 أداة Claude Design من «لعبة لصنع النماذج الأولية» نحو «مساحة عمل تنجز مهام يومية متوافقة مع هوية العلامة». أبرز التغييرات:
ما الذي أضافه تحديث يونيو
/design-sync يسحب نظام التصميم إلى الكود، ويدفع الكود عائدًا إلى الـ canvas (§3).باختصار، إنها تتطور نحو «ابْنِ على هوية علامتك، وتنقّل ذهابًا وإيابًا مع الكود، وتوافَق مع حوكمة المؤسسات».
3. /design-sync — الكود والتصميم في كلا الاتجاهين
/design-sync هو أمرٌ في جانب Claude Code يربط الـ repo الخاص بك بـ canvas الخاص بـ Claude Design في كلا الاتجاهين. الوصف الرسمي (@ClaudeDevs): «صار Claude Code وClaude Design يتزامنان في كلا الاتجاهين. شغّل /design-sync لسحب نظام التصميم إلى الـ repo والبناء على مكوّناتك الحقيقية، أو ادفع ما بنيته عائدًا إلى Claude Design وتابِع التعديل على الـ canvas».
| الاتجاه | ما الذي يحدث |
|---|---|
| Code → (السحب إلى الـ repo) | اسحب نظام التصميم إلى الـ repo كي يبني Claude Code على مكوّناتك الحقيقية |
| → Design (الدفع إلى الـ canvas) | ادفع ما بنيته في الكود عائدًا إلى Claude Design وتابِع التعديل على الـ canvas |
| Design → Code (التسليم) | سلّم تصميمًا مكتملًا إلى Claude Code، فيُكمل من عملك الموجود بدلًا من إعادة البناء من لقطة شاشة |
كما يمكنك إنشاء مشاريع التصميم وتعديلها ومزامنتها عبر /design دون مغادرة الطرفية (terminal). لاحظ أن التفاصيل الأدق — مثل تحوّل الألوان إلى أسماء رموز تصميم (design tokens) واتباع أحجام الخطوط للمقياس بعد الاستيراد — مصدرها جزئيًّا المستخدمون الأوائل والتغطية الصحفية لا الصياغة الدقيقة من Anthropic، لذا يتعامل معها هذا المقال على أنها «سلوك مُبلَّغ عنه» (تحقّق من الأحدث رسميًّا). وهي تنسجم جيدًا مع التطوير القائم على المواصفات؛ راجع التطوير القائم على المواصفات.
4. شروط الاستخدام
شروط الاستخدام بحسب يونيو 2026 (قد يتغير النطاق بحكم كونها بيتا):
| البند | التفاصيل |
|---|---|
| الخطط | نسخة بيتا لخطط Pro / Max / Team / Enterprise (دون رسوم إضافية). مُعطّلة افتراضيًّا في Enterprise؛ يفعّلها المسؤول |
| الوصول | claude.ai/design، أو الشريط الجانبي في تطبيق سطح المكتب (desktop) |
| بيئة التشغيل | الـ canvas على web / desktop فقط. ويقع /design-sync و/design داخل Claude Code (الـ CLI) |
| الحالة | بيتا (معاينة بحثية في 17 أبريل ← تحديث كبير في 17 يونيو) |
أكثر ما يسهل الخلط فيه: «الـ canvas (web/desktop)» و«/design-sync / /design (الـ CLI الخاص بـ Claude Code)» موجودان في أماكن مختلفة. فأنت تعمل على التصميم في claude.ai/design وتزامنه مع الكود عبر أوامر الطرفية — وهذا الفصل تحديدًا هو الجسر بين المصممين والمطورين.
5. لماذا يُعدّ هذا مهمًّا
حتى الآن، كان الانتقال من التصميم إلى الكود يعني غالبًا «إعادة البناء من لقطة شاشة». يردم Claude Design + /design-sync هذه الفجوة عبر (1) استيراد نظام التصميم للبناء بـ«مكوّنات حقيقية»، و(2) إتاحة تنقّل التصميم والكود ذهابًا وإيابًا في كلا الاتجاهين. فلا يعيد المهندسون البناء من الصفر، ويستطيع المصممون صقل ناتج الكود على الـ canvas.
بعبارة أخرى، Claude Design منتجٌ يربط سير عمل «المصمم × المطور» في خطٍّ واحد. حين تريد مشاركة بناءٍ بسرعة، حوّله إلى صفحة مشتركة عبر Claude Code Artifacts؛ وللواجهات المتوافقة مع هوية العلامة، استخدم Claude Design — والجمع بين الميزات الجديدة المجاورة لـ Claude Code يؤتي ثماره. تذكر التغطية الصحفية أن دخول الذكاء الاصطناعي مجال التصميم بلغ من التأثير حدًّا جعل أسهم أدوات التصميم القائمة تتفاعل (لا نؤكّد أرقامًا دقيقة لأنها متقلّبة).
الخلاصة
Claude Design (معاينة بحثية في أبريل 2026، وتحديث كبير في 17 يونيو) هو أداة تصميم من Anthropic Labs لإنشاء واجهات المستخدم والنماذج الأولية والشرائح وغيرها عبر المحادثة. أبرز ما في تحديث يونيو هو (1) استيراد أنظمة التصميم (البناء بمكوّنات حقيقية)، (2) المزامنة ثنائية الاتجاه مع Claude Code عبر /design-sync، (3) التعديل المباشر على الـ canvas، (4) مشاركة حدود الاستخدام (معالجة «استنزاف التوكنات»)، (5) ضوابط هوية العلامة للمؤسسات، (6) توسيع موصّلات التصدير.
/design-sync هو أمرٌ في Claude Code يربط «سحب نظام التصميم إلى الكود» و«دفع الكود عائدًا إلى الـ canvas» في كلا الاتجاهين. إنها نسخة بيتا لخطط Pro / Max / Team / Enterprise (مُعطّلة افتراضيًّا في Enterprise)؛ فالـ canvas على web/desktop بينما /design-sync داخل الـ CLI. وجوهر الأمر هو تقليص رحلة الذهاب والإياب بين المصمم والمطور. ولاحظ أنه — بحكم كونها بيتا — قد تتغير الأمور، مثلًا نموذج نسخة يونيو غير مُعاد ذكره رسميًّا — فتحقّق من الأحدث في الوثائق. ذو صلة: مقارنة أدوات تصميم الذكاء الاصطناعي، Claude Code Artifacts، التطوير القائم على المواصفات.
الأسئلة الشائعة
Q. ما هو Claude Design؟
A. أداة تصميم من Anthropic Labs لإنشاء التصاميم عبر المحادثة. صِف ما تريد بالكلمات فيُنشئ Claude واجهات المستخدم والنماذج الأولية والشرائح وصفحات الملخّص (one-pagers)، التي تحسّنها عبر الدردشة والتعليقات السطرية والتعديلات المباشرة وأشرطة التمرير. أُطلِقت في 17 أبريل 2026 كمعاينة بحثية، باستخدام أكثر من مليون مستخدم في الأسبوع الأول. تصل إليها عبر claude.ai/design أو الشريط الجانبي في تطبيق سطح المكتب.
Q. ماذا يفعل الأمر /design-sync؟
A. إنه يزامن Claude Code وتصميمك في كلا الاتجاهين. شغّله كي تسحب نظام التصميم إلى الـ repo الخاص بك وتبني بـ«مكوّنات حقيقية»، أو تدفع الكود الذي بنيته عائدًا إلى canvas الخاص بـ Claude Design لمتابعة التعديل. سلّم تصميمًا مكتملًا إلى Claude Code فيُكمل من عملك الموجود بدلًا من إعادة البناء من لقطة شاشة. ويمكنك أيضًا إنشاء التصاميم وتعديلها ومزامنتها من الطرفية عبر /design.
Q. ما الذي تغيّر في تحديث يونيو 2026؟
A. بصورة رئيسية (1) استيراد أنظمة التصميم (البناء بمكوّناتك، مع مقارنة المخرجات وتصحيحها)، (2) المزامنة ثنائية الاتجاه مع Claude Code عبر /design-sync، (3) التعديل المباشر على الـ canvas (سحب/تغيير حجم/محاذاة)، (4) معالجة «استنزاف التوكنات» عبر مشاركة حدود الاستخدام مع الدردشة/Cowork/Claude Code، (5) ضوابط هوية العلامة للمؤسسات حيث يعتمد المسؤول نظامًا قياسيًّا ويقفله، (6) توسيع موصّلات التصدير. فقد انتقلت من صنع النماذج الأولية نحو «مساحة عمل واقعية متوافقة مع هوية العلامة».
Q. أيّ خطة يمكنها استخدامها؟
A. بحسب يونيو 2026 فهي نسخة بيتا لخطط Pro / Max / Team / Enterprise دون رسوم إضافية. لكنها مُعطّلة افتراضيًّا في Enterprise، لذا يجب أن يفعّلها المسؤول. الـ canvas على web وdesktop فقط، بينما يقع /design-sync و/design داخل Claude Code (الـ CLI). وبحكم كونها بيتا قد يتغير النطاق والتفاصيل، فتحقّق من الأحدث رسميًّا.
Q. أيّ نموذج يشغّلها؟
A. عند الإطلاق في أبريل كانت تعمل على Claude Opus 4.7 (الذي وصفته Anthropic بأنه «أقوى نماذجنا في الرؤية»). غير أن إعلان تحديث يونيو لا يذكر النموذج، لذا لا يمكننا التأكيد أن «نسخة يونيو تعمل على Opus 4.7». وقد تُحدَّث النماذج والتفاصيل، فراجع الصفحة الرسمية للحصول على المعلومات الحالية.
