سرّع الانتقال من التصميم إلى الشيفرة مع استيراد نظام التصميم في Claude

يدعم Claude Design الآن استيراد نظام التصميم بالكامل مباشرة من GitHub. فبدلًا من أن يولّد Claude واجهة مستخدم عشوائية، يتعلّم مكتبة مكوّناتك ولوحة ألوانك وطباعتك وقواعد التباعد لديك - ثم يبني نماذج أولية تحترم معاييرك. وهذا مهم لأنه يسدّ الفجوة بين ما يريده المصممون وما ينفّذه المطورون.

لإعداد ذلك، أنشئ ملف design-system-spec.json في جذر مستودعك يربط رموز التصميم وملفات المكوّنات وأصول SVG لديك. الملف يبدو بسيطًا: وجّه Claude فقط إلى رابط مستودعك، وحدّد إطار العمل لديك (React، Vue، إلخ)، وأدرج مسارات موارد التصميم. أرسل هذا الملف مرة واحدة، وفي كل مرة تفتح فيها Claude Design يمكنك استيراد نظامك.

إليك سير عمل حقيقي: يصف مدير منتج لوحة إعدادات جديدة لمنتج SaaS خاصتهم: "أعد بناء صفحة الإعدادات لدينا بثلاث ثلاثيات: الملف الشخصي، الفوترة، الفريق. انقل مفاتيح تبديل الإشعارات إلى التفضيلات." فيولّد Claude Design نموذجًا أوليًا باستخدام المكوّنات والألوان الفعلية من نظامك. يراجعه مصمّم على مساحة العمل، ويعدّل التباعد بالمنزلقات، ويضيف ملاحظات التنفيذ مباشرة على العناصر. ثم يضغط على "إرسال إلى Claude Code" - فيستقبل Claude Code الأمر برمّته كمواصفة قابلة للقراءة آليًا، لا كلقطة شاشة، ويستطيع تنفيذه. وبالنسبة للفرق المشتركة بالفعل في Claude Pro أو Max، يلغي هذا الخطوة المؤلمة المتمثلة في لصق النماذج الأولية في الشيفرة وإعادة بنائها يدويًا.

ثمة قيد واحد: الاستيراد لقطة لحظية. إذا حدّثت مكتبة مكوّناتك بعد الاستيراد، فشغّل الأمر /design-sync في Claude Code للتحديث. تعامل معه كما لو كنت تعيد بناء اختبار بعد تحديث النظام - فالمزامنة أمر واحد، لا عملية يدوية.