جدول المحتويات
تحديث 12 أكتوبر 2026: مع الإعلان الرسمي في 8 أكتوبر 2026 خرج Claude Design من المرحلة التجريبية وأصبح متاحًا على كل الخطط، بما فيها الخطة المجانية. وستُغلق الشاشة المستقلة claude.ai/design في 14 ديسمبر 2026. وقد حدّثنا شروط الاستخدام في القسم 4 والأسئلة الشائعة وفقًا لذلك.
تحديث 26 سبتمبر 2026: أعدنا كتابة القسم 3 وفق الوثائق الرسمية لـ Claude Code والمساعدة الرسمية. فـ/design-sync هو الأمر الذي ينقل نظام التصميم من الـ repo إلى Claude Design، أما الانتقال من التصميم إلى الكود فيتولاه التسليم إلى Claude Code و/design. كما صحّحنا قائمة وجهات التصدير التي أُضيفت في يونيو وفق الإعلان الرسمي، وأضفنا ما تفعله مهارة /design المدمجة في Claude Code منذ أغسطس.
Claude Design هو أداة تصميم من Anthropic Labs تتيح لك إنشاء تصاميم واجهات المستخدم والنماذج الأولية وصفحات الملخّص (one-pagers) وغيرها من الأعمال المرئية عبر المحادثة (أُطلِقت في 17 أبريل 2026 كمعاينة بحثية). ثم في 17 يونيو 2026، أضاف تحديثٌ كبير استيراد أنظمة التصميم والمزامنة ثنائية الاتجاه مع Claude Code (/design-sync، /design)، مما قلّص بشكل حاد رحلة الذهاب والإياب بين المصممين والمطورين. ثم في 16 سبتمبر 2026، ومع دمج Claude Cowork والدردشة، صار Claude Design يعمل داخل أي محادثة (وستُغلق الشاشة المستقلة claude.ai/design في 14 ديسمبر 2026).
يتناول هذا المقال ما هو Claude Design، وتحديث يونيو، وتوزيع الأدوار بين /design-sync و/design، وشروط الاستخدام، ولماذا يُعدّ مهمًّا — استنادًا إلى المعلومات الرسمية. ثلاث نقاط جوهرية في البداية. (1) Claude Design أداة تصميم قائمة على المحادثة تُحسّنها عبر الدردشة والتعليقات والتعديلات المباشرة وأشرطة التمرير (sliders). (2) أبرز ما في تحديث يونيو هو «استورِد نظام التصميم الخاص بك وابْنِ بمكوّناته الحقيقية» و«زامِن في كلا الاتجاهين مع Claude Code». (3) خرجت من مرحلة بيتا في 8 أكتوبر 2026 وأصبحت متاحة على كل الخطط، بما فيها المجانية (مُفعّلة افتراضيًّا في Enterprise منذ 15 أكتوبر). ومنذ 16 سبتمبر يكفي أن تطلب تصميمًا في محادثة عادية، بينما يقع /design-sync داخل Claude Code.
التصميم والكود، في كلا الاتجاهين
— تنقّل بين الـ canvas والـ repo
/design-sync · /design ↔
Code→Design استورِد نظام التصميم من الـ repo عبر /design-sync وابْنِ بمكوّنات حقيقية،
Design→Code سلّم التصاميم المكتملة إلى Claude Code ليُكمل التنفيذ، وحوّل الكود إلى نموذج أولي حيّ على الـ canvas (/design).
1. ما هو Claude Design
Claude Design أداة «تصف فيها ما تريد عبر المحادثة، فيبني Claude التصميم، ثم تحسّنه عبر الدردشة والتعليقات السطرية والتعديلات المباشرة وأشرطة التمرير». تُنشئ أعمالًا مرئية مثل التصاميم والنماذج الأولية التفاعلية وصفحات الملخّص (one-pagers) (المساعدة الرسمية «Get started with Claude Design»). وقد ذكر إعلان الإطلاق الشرائحَ أيضًا، لكن منذ 16 سبتمبر 2026 صارت للعروض التقديمية أداة مستقلة هي Claude Slides. أُطلِقت في 17 أبريل 2026 كـمعاينة بحثية لخطط Pro / Max / Team / Enterprise، واستخدمها أكثر من مليون شخص في الأسبوع الأول.
عن النموذج: عند الإطلاق في أبريل كانت تعمل على Claude Opus 4.7 (الذي وصفته Anthropic بأنه «أقوى نماذجنا في الرؤية»). غير أن إعلان تحديث يونيو لا يُعيد ذكر النموذج، لذا لا يؤكّد هذا المقال أن «نسخة يونيو تعمل على Opus 4.7» (تحقّق من الأحدث رسميًّا). وللاطلاع على مسحٍ أوسع، راجع مقارنة أدوات تصميم الذكاء الاصطناعي.
2. التحديث الكبير في يونيو 2026
نقل تحديث 17 يونيو 2026 أداة Claude Design من «لعبة لصنع النماذج الأولية» نحو «مساحة عمل تنجز مهام يومية متوافقة مع هوية العلامة». أبرز التغييرات:
ما الذي أضافه تحديث يونيو
/design-sync يستورد نظام التصميم الخاص بك، وتُسلَّم التصاميم المكتملة إلى Claude Code لتنفيذها. ويحوّل /design الكود أيضًا إلى نموذج أولي حيّ (§3).باختصار، إنها تتطور نحو «ابْنِ على هوية علامتك، وتنقّل ذهابًا وإيابًا مع الكود، وتوافَق مع حوكمة المؤسسات».
3. /design-sync و/design — التنقّل بين التصميم والكود
في Claude Code أمران يرتبطان بـ Claude Design. وبحسب مرجع الأوامر الرسمي لـ Claude Code، فإن /design-sync مهارة «تحوّل نظام التصميم المبني بـ React في الـ repo وترفعه إلى Claude Design، كي تستخدم التصاميم التي يُنتجها مكوّناتك الحقيقية» (ويمكن تسميته أيضًا، مثل /design-sync Acme DS). تتحقق المزامنة الأولى من كل مكوّن، وقد تستغرق بضع ساعات في repo كبير. ويتم التفويض بحساب claude.ai عبر /design-login.
| الاتجاه | الأداة | ما الذي يحدث |
|---|---|---|
| الكود ← التصميم (نظام التصميم) | /design-sync | يقرأ الرموز (tokens) والمكوّنات من الـ repo وينقلها إلى Claude Design، فتبدأ التصاميم اللاحقة من مكوّناتك الحقيقية |
| التصميم ← الكود (التسليم) | التسليم إلى Claude Code / /design | سلّم تصميمًا مكتملًا إلى Claude Code فـيُكمل من عملك الموجود بدلًا من إعادة البناء من لقطة شاشة. استخدم «Handoff to Claude Code» في قائمة التصدير (وكيل برمجة محلي أو Claude Code on the web)، أو استورِد تصميمًا إلى قاعدة الكود عبر /design من Claude Code |
| الكود ← الـ canvas (نموذج أولي) | /design | حوّل الكود الذي بنيته إلى نموذج أولي حيّ وحسّنه على الـ canvas |
هذا التقسيم مأخوذ من الإعلان الرسمي في يونيو ومن المساعدة الرسمية. ويناسب /design-sync الحالة التي يكون فيها نظام التصميم موجودًا أصلًا في الكود على هيئة مكوّنات React؛ أما نظام تصميم العلامة القائم على الخطوط والألوان والإرشادات فالأنسب إنشاؤه في الدردشة من الملفات وملفات Figma والعروض التقديمية والشعارات (المساعدة الرسمية «Set up your design system in Claude Design»).
/design ورد ذكره في إعلان يونيو، ومنذ أغسطس 2026 صار مهارة مدمجة في Claude Code: أعطها موجزًا فترسم نماذج واجهات وتسلسلات شاشات وصفحات هبوط أو ملصقات على هيئة عدة لوحات رسم (artboards) على canvas واحد، وتنشرها كـ artifact من نوع Design (الوثائق الرسمية «Artifacts»). وتُعدَّل لوحات الرسم باختيار العناصر في متصفح على الحاسوب، ويمكن تصدير كل لوحة بصيغة PNG أو PDF. يعمل الأمران عبر Anthropic API، لكن لا يعملان عبر سحابات مثل Amazon Bedrock وGoogle Cloud وMicrosoft Foundry (لأنهما يعتمدان على ميزات claude.ai). وهي تنسجم جيدًا مع التطوير القائم على المواصفات؛ راجع التطوير القائم على المواصفات.
4. شروط الاستخدام
هذه شروط الاستخدام بحسب 12 أكتوبر 2026، بعد التحقق منها في المساعدة الرسمية والإعلان الرسمي في 8 أكتوبر. وقد تغيّر أمران منذ يونيو: دمج 16 سبتمبر وسّع المدخل من شاشة مخصّصة إلى محادثاتك العادية، وفي 8 أكتوبر خرجت الأداة من مرحلة بيتا ووصلت إلى الخطة المجانية.
| البند | التفاصيل |
|---|---|
| الخطط | كل الخطط: Free / Pro / Max / Team / Enterprise، ومُفعّلة افتراضيًّا. وفي Enterprise تُفعَّل افتراضيًّا في 15 أكتوبر 2026، ويمكن للمالك تفعيلها قبل ذلك من Organization settings > Artifacts |
| الوصول | اطلبه في أي محادثة (أو اختر Output > Design في مربع الرسالة) / قالب Design في تبويب Artifacts / Claude Code (/design) / تطبيقا iOS وAndroid / الشاشة المستقلة claude.ai/design (تُغلق في 14 ديسمبر 2026؛ ويمكن نقل أنظمة التصميم من صفحة Artifacts في Claude) |
| بيئة التشغيل | التعديل على الـ canvas على web / desktop. وفي تطبيقات الجوّال يمكنك أيضًا طلب التصميم وعرضه وتعديله (أما تغيير إعدادات المشاركة فيحتاج إلى web / desktop). ويقع /design-sync و/design داخل Claude Code (سطح المكتب أو الطرفية) |
| الاستهلاك | يُخصم من حدود الاستخدام نفسها التي تستهلكها الدردشة وClaude Code (لا حصة منفصلة لـ Claude Design) |
| الحالة | خارج مرحلة بيتا (معاينة بحثية في 17 أبريل ← تحديث كبير في 17 يونيو ← منذ 16 سبتمبر داخل المحادثات ← في 8 أكتوبر نهاية بيتا والوصول إلى الخطة المجانية) |
أكثر ما يسهل الخلط فيه: «الـ canvas (web/desktop)» و«/design-sync / /design (Claude Code)» موجودان في أماكن مختلفة. فأنت تعمل على التصميم في الـ canvas الذي يُفتح بجانب المحادثة (أو في claude.ai/design حتى 14 ديسمبر 2026) وتزامنه مع الكود عبر أوامر Claude Code — وهذا الفصل تحديدًا هو الجسر بين المصممين والمطورين.
5. لماذا يُعدّ هذا مهمًّا
حتى الآن، كان الانتقال من التصميم إلى الكود يعني غالبًا «إعادة البناء من لقطة شاشة». يردم Claude Design + /design-sync هذه الفجوة عبر (1) استيراد نظام التصميم للبناء بـ«مكوّنات حقيقية»، و(2) إتاحة تنقّل التصميم والكود ذهابًا وإيابًا في كلا الاتجاهين. فلا يعيد المهندسون البناء من الصفر، ويستطيع المصممون صقل ناتج الكود على الـ canvas.
بعبارة أخرى، Claude Design منتجٌ يربط سير عمل «المصمم × المطور» في خطٍّ واحد. حين تريد مشاركة بناءٍ بسرعة، حوّله إلى صفحة مشتركة عبر Claude Code Artifacts؛ وللواجهات المتوافقة مع هوية العلامة، استخدم Claude Design — والجمع بين الميزات الجديدة المجاورة لـ Claude Code يؤتي ثماره. تذكر التغطية الصحفية أن دخول الذكاء الاصطناعي مجال التصميم بلغ من التأثير حدًّا جعل أسهم أدوات التصميم القائمة تتفاعل (لا نؤكّد أرقامًا دقيقة لأنها متقلّبة).
وانضمّ إلى Claude Design، بوصفهما من أدوات الإنشاء نفسها، كلٌّ من Claude Dashboards الذي يُنشئ لوحات بيانات، وClaude Motion الذي يُنشئ رسومًا متحركة توضيحية، وقد أُضيفا إلى المنظومة في المرحلة التجريبية (بيتا). ويشرح الفرق بينهما ومتى تستخدم كلًّا منهما مقال Claude Dashboards وMotion: ما هما.
الخلاصة
Claude Design (معاينة بحثية في أبريل 2026، وتحديث كبير في 17 يونيو) هو أداة تصميم من Anthropic Labs لإنشاء واجهات المستخدم والنماذج الأولية وصفحات الملخّص وغيرها عبر المحادثة، ومنذ 16 سبتمبر 2026 تعمل داخل أي محادثة. أبرز ما في تحديث يونيو هو (1) استيراد أنظمة التصميم (البناء بمكوّنات حقيقية)، (2) التنقّل مع Claude Code (/design-sync والتسليم و/design)، (3) التعديل المباشر على الـ canvas، (4) مشاركة حدود الاستخدام (معالجة «استنزاف التوكنات»)، (5) ضوابط هوية العلامة للمؤسسات، (6) توسيع موصّلات التصدير.
/design-sync هو أمرٌ في Claude Code ينقل نظام التصميم المبني بـ React من الـ repo إلى Claude Design. أما التصاميم المكتملة فتنتقل إلى التنفيذ عبر تسليمها إلى Claude Code أو عبر /design، ويستطيع /design أيضًا تحويل الكود إلى نموذج أولي حيّ على الـ canvas. وهي متاحة على كل الخطط، بما فيها المجانية (خرجت من مرحلة بيتا في 8 أكتوبر 2026)، وستُغلق الشاشة المستقلة claude.ai/design في 14 ديسمبر 2026، ويقع /design-sync داخل Claude Code. وجوهر الأمر هو تقليص رحلة الذهاب والإياب بين المصمم والمطور. ولاحظ أن الأمور قد تتغير، مثلًا نموذج نسخة يونيو غير مُعاد ذكره رسميًّا — فتحقّق من الأحدث في الوثائق. ذو صلة: مقارنة أدوات تصميم الذكاء الاصطناعي، Claude Code Artifacts، التطوير القائم على المواصفات.
الأسئلة الشائعة
Q. ما هو Claude Design؟
A. أداة تصميم من Anthropic Labs لإنشاء التصاميم عبر المحادثة. صِف ما تريد بالكلمات فيُنشئ Claude واجهات المستخدم والنماذج الأولية وصفحات الملخّص (one-pagers)، التي تحسّنها عبر الدردشة والتعليقات السطرية والتعديلات المباشرة وأشرطة التمرير. أُطلِقت في 17 أبريل 2026 كمعاينة بحثية، باستخدام أكثر من مليون مستخدم في الأسبوع الأول. ومنذ 16 سبتمبر 2026 يكفي أن تطلب تصميمًا في محادثة عادية (ويمكن أيضًا عبر قالب Design في تبويب Artifacts، أو Claude Code، أو الشاشة المستقلة claude.ai/design حتى 14 ديسمبر 2026).
Q. ماذا يفعل الأمر /design-sync؟
A. إنه ينقل نظام التصميم من الـ repo الخاص بك إلى Claude Design. إذا كان نظام التصميم موجودًا أصلًا في الكود على هيئة مكوّنات React، فإنه يقرأ الرموز (tokens) والمكوّنات ويرفعها، فتستخدم التصاميم التي يُنشئها Claude Design مكوّناتك الحقيقية. وتتحقق المزامنة الأولى من كل مكوّن، لذا قد تستغرق بضع ساعات في repo كبير. أما الاتجاه الآخر (من التصميم إلى الكود، ومن الكود إلى الـ canvas) فيتولاه التسليم إلى Claude Code و/design: سلّم تصميمًا مكتملًا إلى Claude Code فيُكمل من عملك الموجود بدلًا من إعادة البناء من لقطة شاشة.
Q. ما الذي تغيّر في تحديث يونيو 2026؟
A. بصورة رئيسية (1) استيراد أنظمة التصميم (البناء بمكوّناتك، مع مقارنة المخرجات وتصحيحها)، (2) التنقّل مع Claude Code (/design-sync والتسليم و/design)، (3) التعديل المباشر على الـ canvas (سحب/تغيير حجم/محاذاة)، (4) معالجة «استنزاف التوكنات» عبر مشاركة حدود الاستخدام مع الدردشة/Cowork/Claude Code، (5) ضوابط هوية العلامة للمؤسسات حيث يعتمد المسؤول نظامًا قياسيًّا ويقفله، (6) توسيع موصّلات التصدير. فقد انتقلت من صنع النماذج الأولية نحو «مساحة عمل واقعية متوافقة مع هوية العلامة».
Q. أيّ خطة يمكنها استخدامها؟
A. خرجت من مرحلة بيتا في 8 أكتوبر 2026 وأصبحت متاحة على كل الخطط، بما فيها المجانية (Free / Pro / Max / Team / Enterprise)، بحسب المساعدة الرسمية في 12 أكتوبر 2026. ويُخصم استهلاكها من حدود الاستخدام نفسها التي تستهلكها الدردشة وClaude Code. وهي مُفعّلة افتراضيًّا، وفي Enterprise تُفعَّل افتراضيًّا في 15 أكتوبر 2026 (ويمكن للمالك تفعيلها قبل ذلك). وفي تطبيقات الجوّال يمكن الطلب والعرض والتعديل، بينما يقع /design-sync و/design داخل Claude Code. وستُغلق الشاشة المستقلة claude.ai/design في 14 ديسمبر 2026، فانقل أنظمة التصميم الموجودة هناك مبكرًا.
Q. أيّ نموذج يشغّلها؟
A. عند الإطلاق في أبريل كانت تعمل على Claude Opus 4.7 (الذي وصفته Anthropic بأنه «أقوى نماذجنا في الرؤية»). غير أن إعلان تحديث يونيو لا يذكر النموذج، لذا لا يمكننا التأكيد أن «نسخة يونيو تعمل على Opus 4.7». وقد تُحدَّث النماذج والتفاصيل، فراجع الصفحة الرسمية للحصول على المعلومات الحالية.
