frontend-design مهارة إرشاد تصميمي تُستخدم مع Claude Code. لا تقدّم مكوّنات ولا إطار عمل، بل تُلزم النموذج بالإجابة عن: لمن هذه الواجهة، وما النبرة المطلوبة، وما القيود، وما العنصر الذي يبقى في الذاكرة، ثم تعطي توجيهات محددة في الخطوط والألوان والحركة والتكوين والخلفية.
ما هي
frontend-design مهارة تصميم واجهات أمامية في مستودع المهارات الرسمي لـ Anthropic، موجّهة إلى Claude Code وما يشبهه من وكلاء البرمجة. تُعرّف نفسها كطبقة قرار تصميمي لا كإطار واجهات: لا تستبدل مكتبة المكوّنات لديك، بل تُثبّت الحكم التصميمي قبل كتابة الكود، وهو الموضع الذي ينشأ فيه المظهر القالبي. الشيفرة والتوثيق على github.com/anthropics/skills.
ما الذي تُقيّده
إطار تفكير قبل الكود. قبل أول سطر، على النموذج أن يعلن هدف الواجهة والجمهور والنبرة البصرية والقيود التقنية والعنصر الذي يبقى في الذاكرة، ويُدوّن هذا الحكم في المسار بدلًا من الارتجال أثناء التوليد.
الخطوط. تُستبعد صراحةً الخطوط الافتراضية مثل Inter وRoboto لصالح توليفة ذات شخصية، حتى يحمل الخط الطابع أولًا.
اللون والثيم. تُرفض الصيغ المستهلكة مثل خلفية بيضاء بتدرّج بنفسجي، ويُطلب لون أساسي مع لون مميز حاد، متناسق عبر متغيرات CSS.
الحركة. دخول واحد مُنسّق بعناية أفضل من تفاعلات دقيقة متناثرة. في HTML الصِرف يكفي CSS، وفي React يمكن استخدام مكتبة حركة.
التكوين المكاني. يُشجّع عدم التماثل والتراكب والأقطار لكسر الشبكة وتجنّب التخطيطات المتوقعة.
الخلفية والتفاصيل. يمكن استخدام شبكات التدرّج ونسيج الحبيبات لصنع الأجواء، لكن كل تفصيل يجب أن يخدم الثيم الجمالي العام.
كيف تُستخدم
تشغيل تلقائي. اطرح مهمة واجهات في Claude Code أو Codex، فيتعرّف الوكيل على نوع المهمة ويقرأ قيود المهارة ومسارها.
تشغيل صريح. اكتب في الطلب: استخدم مهارة frontend-design لتصميم هذه الصفحة وتنفيذها.
وفّر سياق العمل. حدّد نوع المنتج والمستخدمين المستهدفين وطابع العلامة وأولوية المعلومات والتقنيات ومتطلبات الهاتف وإمكانية الوصول. عبارة «اجعله جميلًا» وحدها تترك مساحة تصميم واسعة جدًا.
اقرأ الأعراف القائمة أولًا. في مشروع قائم، اجعل الوكيل يقرأ المكوّنات ومتغيرات الأنماط وقواعد التصميم قبل أي تعديل، حتى لا تتنافر الصفحة الجديدة مع النظام.
أعد استخدام المكوّنات. إن وُجدت مكتبة، أعد استخدام Button وTable وغيرهما، واجعل التحسين في طبقة الأنماط والتركيب.
تحقّق بعد التنفيذ. افحص لقطات سطح المكتب والهاتف، وتجاوز النص، وحالات التفاعل، وتباين ألوان الثيم، وهل تُعيق الحركة الاستخدام.
أين تناسب
بناء صفحة كاملة: مواقع المنتجات وصفحات الحملات التي تحتاج اتجاهًا بصريًا من الصفر.
تصميم المكوّنات وإعادة هيكلتها: أعمال React وVue وSvelte وHTML/CSS التي تحتاج اتساقًا وإتقانًا أكبر.
ترقية بصرية: إدخال حكم تصميمي جديد في نظام قائم دون كسر بنيته.
نماذج أولية بلا مخطط: إخراج واجهة عالية الدقة وقابلة للتشغيل بسرعة.
لوحات الإدارة وأدوات العمل: حيث تهمّ كفاءة المسح والكثافة ووضوح الحالات أكثر من البهرجة.
الحدود
هي إرشاد تصميمي وليست بديلًا عن إطار واجهات أو مكتبة مكوّنات.
لا تُنتج صورًا؛ الرسوم والصور الفوتوغرافية تحتاج أداة أخرى.
تعتمد النتيجة على اكتمال السياق. كلما قلّت معلومات المنتج، عادت المخرجات أسرع إلى القالب العام.
تحتاج المخرجات إلى مراجعة بشرية، خصوصًا في إمكانية الوصول والتباين والأداء على أجهزة حقيقية.
الأسئلة الشائعة
ما الفرق عن الطلب العادي؟ الطلب العادي يترك الجمال للعشوائية. هذه المهارة تحوّل الهدف والجمهور والنبرة والقيود إلى أسئلة إلزامية، مع قائمة محددة بما يجب تجنّبه وما يُفعل بدلًا منه.
هل هي مدفوعة؟ تصف المادة مهارة مجانية تُستخدم مع Claude Code؛ تحقّق من الترخيص في المستودع الرسمي.
Vue وTailwind؟ نعم. مستقلة عن إطار العمل وتعمل كإرشاد في طبقة عليا.
هل تستبدل المصممين؟ لا. تقلّل إعادة العمل، وتبقى قرارات العلامة ونظام التصميم للبشر.
الأسئلة الشائعة
ما الفرق بينها وبين طلب صفحة جميلة فقط؟
الطلب العادي يترك الحكم الجمالي للعشوائية. هذه المهارة تحوّل الهدف والجمهور والنبرة والقيود إلى أسئلة يجب الإجابة عنها، وتُدرج ما يجب تجنّبه والبديل عنه.
هل هي مدفوعة؟
تصفها المادة بأنها مهارة مجانية تُستخدم مع Claude Code. ينبغي التحقق من الترخيص والشروط في مستودع Anthropic الرسمي.
هل تعمل مع Vue أو Tailwind؟
نعم. غير مرتبطة بإطار عمل وتعمل كإرشاد تصميمي في طبقة عليا، لذا يمكن استخدامها مع HTML/CSS وReact وVue وTailwind وAnt Design.
هل تستبدل المصممين؟
لا. تُقدّم قرار التصميم إلى ما قبل البرمجة لتقليل إعادة العمل، لكن قرارات العلامة ونظام التصميم تبقى بيد البشر.
