عشر مهارات تعلّم الـ agent الذوق في التصميم: ثبّتها واستخدمها خطوة بخطوةTen Skills That Teach Your Agent Design Taste: Install and Use Them, Step by Step

المصطلحات

المهارة (skill)

مجلد فيه ملف SKILL.md وتعليمات وملفات مساعدة. الـ agent يقراه لما تحتاجه المهمة.

الـ agent (أيجنت)

أداة برمجة بالذكاء الاصطناعي مثل Claude Code أو Cursor أو Codex، تقرا مشروعك وتكتب الكود.

DESIGN.md

ملف نصي يوصف نظام التصميم: الألوان والخطوط والمسافات والمكوّنات، حتى الـ agent يمشي عليه.

الخطوات

1. 1

   الخطوة 1

   اعرف طريقتين للتثبيت قبل ما تبدأ

   أغلب المهارات العشر تنزل بطريقة من اثنتين.

   الأولى من التيرمنال بأمر npx skills add، وهي تحط المهارة في المكان الصح للـ agent عندك.

   الثانية من داخل Claude Code بأمر /plugin marketplace add ثم /plugin install.

   بعد التثبيت سكّر Claude Code وافتحه من جديد حتى يشوف المهارة.

   skills.sh

   

   نصيحة: ثبّت مهارتين أو ثلاث بس في البداية، مش العشر كلها مرة وحدة.

2. 2

   الخطوة 2

   ثبّت Frontend Design من Anthropic

   هذي مهارة Anthropic الرسمية. تخلي Claude يختار اتجاه واضح للألوان والخط والتخطيط حسب موضوعك قبل أي كود، بدل الشكل الجاهز اللي يتكرر.

   داخل Claude Code اكتب الأمرين تحت. المهارة موجودة في حزمة example-skills.

   code.claude.com

   

   برومبتأوامر التثبيت داخل Claude Code

   نسخ

   /plugin marketplace add anthropics/skills
   /plugin install example-skills@anthropic-agent-skills

3. 3

   الخطوة 3

   جرّب Taste Skill و Hallmark للاتجاه والفحص

   Taste Skill يختار لك اتجاه من 20 اتجاه مدروس، يبني بصور حقيقية مفتوحة الرخصة، ويفحص الصفحة في متصفح حقيقي على ثلاث عروض. يحتاج Node 22 وكروم أو Edge.

   Hallmark من Together AI فيه 50 ثيم، ويفحص الصفحة في المتصفح ضد العلامات اللي تفضح إن الصفحة مسوية بالـ AI.

   اختار وحدة منهم في المشروع الواحد، مش الثنتين مع بعض.

   skills.sh

   

   برومبتأوامر التثبيت من التيرمنال

   نسخ

   npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
   npx skills add nutlope/hallmark -g

   نصيحة: Taste Skill يقول إن البناء الواحد ياخذ 30 إلى 45 دقيقة وكمية كبيرة من التوكنز، فجرّبه على صفحة وحدة أول.

4. 4

   الخطوة 4

   خلّ Impeccable يراجع صفحة جاهزة

   Impeccable أقوى شي على واجهة موجودة. ثبّته في مجلد المشروع، وبعدين شغّل /impeccable init مرة وحدة حتى يكتب ملف PRODUCT.md عن مشروعك.

   بعدها اختار أمر وهدف: critique يقيّم التصميم ويرتّب اللي يتصلّح أول، audit يفحص الوصول والأداء، polish و bolder للتعديل.

   عنده كمان 62 قاعدة تكشف علامات الـ AI بدون أي مفتاح API.

   برومبتالتثبيت وأول أمر

   نسخ

   npx impeccable install
   /impeccable init
   /impeccable critique [اسم الصفحة أو الجزء]

5. 5

   الخطوة 5

   استخدم UI UX Pro Max كمكتبة

   هذي مهارة فيها 192 لوحة ألوان و74 تركيبة خطوط و119 قاعدة UX، وتبحث فيها حسب نوع منتجك.

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

   برومبتالتثبيت داخل Claude Code

   نسخ

   /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
   /plugin install ui-ux-pro-max@ui-ux-pro-max-skill

6. 6

   الخطوة 6

   حوّل براندك لمهارة مع hue

   hue يتعلّم أي براند من رابط أو اسم أو صورة، ويطلع لك مهارة تصميم كاملة: الألوان والخطوط والمسافات والمكوّنات والوضع الفاتح والداكن.

   بعدها أي واجهة يبنيها الـ agent تطلع بنفس الهوية.

   برومبتالتثبيت ثم الطلب

   نسخ

   git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue
   
   سوّ مهارة تصميم من [رابط موقعك أو اسم البراند]

7. 7

   الخطوة 7

   استخرج DESIGN.md من كودك

   مهارة Extract DESIGN.md من مجموعة Google Stitch. تقرا ملفات الستايل والمكوّنات في مشروعك وتطلع ملف DESIGN.md فيه ألوانك وخطوطك ومسافاتك.

   تنبيه: مهارات Stitch تحتاج خادم Stitch MCP شغّال عندك. اتبع خطوات الإعداد في stitch.withgoogle.com/docs/mcp/setup قبل ما تستخدمها.

   برومبتالتثبيت ثم الطلب

   نسخ

   npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
   
   افحص مجلد [src] وطلّع نظام التصميم في .stitch/DESIGN.md

8. 8

   الخطوة 8

   ثبّت shadcn/ui و Interface Design للتطبيقات

   مهارة shadcn/ui الرسمية تقرا ملف components.json في مشروعك، وتعرف إطارك ومكتبة الأيقونات والمكوّنات اللي عندك، وتضيف المكوّنات بالطريقة الصح.

   Interface Design مخصصة للداشبورد ولوحات الإدارة، مش لصفحات التسويق. تحفظ قراراتك (المسافات، أحجام الأزرار، العمق) في ملف .interface-design/system.md وترجع لها كل مرة.

   skills.sh

   

   برومبتأوامر التثبيت من التيرمنال

   نسخ

   npx skills add shadcn/ui
   npx skills add https://github.com/dammyjay93/interface-design --skill interface-design

9. 9

   الخطوة 9

   اضبط الخط مع Better Typography

   Better Typography من حزمة Jakub Krehel. تضبط حجم الخط والتباعد وتحميل الخطوط وطول السطر، وتكتب الإصلاح في كودك.

   قواعدها الثابتة: line height بدون وحدة، طول سطر من 60 إلى 75 حرف، وزن 400 أو أثقل للخط الأصغر من 18px، و tabular-nums للأرقام اللي تتغيّر.

   الأمر تحت يثبّت الحزمة كاملة، ومنها better-typography.

   skills.sh

   

   برومبتالتثبيت ثم الطلب

   نسخ

   npx skills add jakubkrehel/skills
   
   راجع الخطوط في [الصفحة أو المكوّن] بمهارة better-typography وصلّح اللي يطلع.

برومبتات جاهزة للنسخ

ابنِ [الصفحة] لـ [المنتج]. قبل أي كود اختار اتجاه تصميم واضح يناسب الموضوع واشرحه في سطرين، وبعد ما تخلص راجع الخطوط والمسافات وصلّح أول ثلاث مشاكل.