المهارات colorize
🎨

colorize

آمن

أضف ألواناً استراتيجية إلى تصميماتك

حوّل الواجهات الرمادية الباهتة إلى تجارب دافئة وجذابة. تطبق هذه المهارة نظرية الألوان المقصودة لتحسين التسلسل الهرمي البصري وإبهار المستخدم.

يدعم: Claude Codex Code(CC)
📊 71 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "colorize". لوحة تحكم إدارة المهام بتدرج رمادي بدون ألوان beyond الأسود والأبيض والرمادي.

النتيجة المتوقعة:

  • إضافة مؤشرات نجاح خضراء زمرّدية للمهام المكتملة
  • تطبيق شارات تحذير كهرمانية للمواعيد النهائية القريبة
  • إدخال تلوين خلفية دافئ خفيف (oklch(97% 0.01 60)) لاستبدال الرمادي النقي
  • تلوين أزرار الدعوة لاتخاذ إجراء الرئيسية بالأزرق التجاري للتسلسل الهرمي البصري

استخدام "colorize". صفحة إعدادات SaaS بحدود رمادية نقية ونصوص محايدة.

النتيجة المتوقعة:

  • استبدال المقسّمات الرمادية بحدود ملونة خفية تطابق لوحة العلامة التجارية
  • إضافة حدود جانبية يسرى ملونة لأقسام الإعدادات النشطة
  • تطبيق لون العلامة التجارية على حلقات التركيز لتحسين إمكانية الوصول
  • استخدام أيقونات ملونة لتحسين التعرف على الأقسام

التدقيق الأمني

آمن
v1 • 3/16/2026

All static analysis findings are false positives. The detected patterns (external_commands, blocker, env_access) appear in documentation text, not executable code. This skill contains only instructional content for UI color design - no code execution, network requests, or filesystem operations. Safe for publication.

1
الملفات التي تم فحصها
146
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
34
المجتمع
100
الأمان
83
الامتثال للمواصفات

ماذا يمكنك بناءه

تعزيز الجاذبية البصرية للوحة التحكم

إضافة ألوان استراتيجية إلى لوحة تحكم إدارية أحادية اللون، وتحسين تصور البيانات ومؤشرات الحالة مع الحفاظ على المظهر المهني.

تكامل العلامة التجارية للحد الأدنى للمنتج (MVP) للشركات الناشئة

تطبيق ألوان العلامة التجارية للشركة الناشئة بشكل متسق على نموذج تدرج رمادي، وإنشاء تسلسل هرمي بصري وربط عاطفي مع المستخدمين الأوائل.

تحسين مكتبة مكونات SaaS

إدخال نظام ألوان دلالي إلى نظام التصميم، وضمان مؤشرات حالة متسقة وعناصر تفاعلية متاحة.

جرّب هذه الموجهات

تدقيق أساسي للألوان 
حلّل التصميم الحالي لـ [المكون/الصفحة]. حدد المناطق التي يمكن فيها للألوان تحسين التسلسل الهرمي البصري أو نقل المعنى أو إضافة الإبهار. قائمة بالفرص المحددة واشرح الغرض من كل إضافة لون.
تطبيق ألوان العلامة التجارية 
ألوان علامتنا التجارية هي [سرد الألوان]. طبّق هذه بشكل متسق عبر [الميزة]، واتبع قاعدة 60-30-10. تأكد من الامتثال لتباين WCAG واشرح استراتيجية التطبيق الخاصة بك.
نظام الألوان الدلالية 
إنشاء نظام ألوان دلالي لـ [نوع التطبيق]. حدد ألوان النجاح والخطأ والتحذير والمعلومات. أظهر كيف يتم تطبيق كل منها على مكونات مثل الشارات والتنبيهات ومؤشرات الحالة.
التحول اللوني الكامل 
حوّل هذه [الواجهة] الأحادية اللون إلى تجربة دافئة وجذابة. استخدم OKLCH لتعريفات الألوان. طبّق الألوان عبر الخلفيات والطباعة والحدود والحالات التفاعلية. برر كل اختيار وتحقق من إمكانية الوصول.

أفضل الممارسات

  • حدد دائمًا غرض اللون قبل التطبيق - المعنى الدلالي أفضل من الزخرفة
  • استخدم فضاء اللون OKLCH للحصول على مقاييس ألوان موحدة إدراكيًا وتناغم أفضل
  • اختبر جميع مجموعات الألوان للامتثال لتباين WCAG وإمكانية الوصول لعمى الألوان

تجنب

  • استخدام تدرجات أرجوانية-زرقاء افتراضيًا - هذه جماليات AI عامة، وليست تصميمًا مقصودًا
  • تطبيق الألوان عشوائيًا بدون معنى دلالي أو نظام متسق
  • الاعتماد على اللون وحده لنقل المعلومات - أضف دائمًا أيقونات أو تسميات

الأسئلة المتكررة

كم عدد الألوان التي يجب أن أستخدمها في تصميمي؟
اتبع قاعدة 60-30-10: لون واحد مسيطر (60%)، ولون ثانوي واحد (30%)، ولون تمييز واحد (10%). Beyond الألوان المحايدة، قدم نفسك بـ 2-4 ألوان كحد أقصى للتماسك.
ما هو OKLCH ولماذا يجب أن أستخدمه؟
OKLCH هو فضاء لون موحد إدراكيًا حيث تظهر الخطوات الرقمية المتساوية متساوية للعين البشرية. هذا يجعل إنشاء مقاييس ألوان متناغمة بديهيًا ومتاحًا.
كيف أضمن إمكانية الوصول للألوان؟
حافظ على نسبة تباين 4.5:1 للنص و3:1 لمكونات واجهة المستخدم. لا تستخدم اللون أبدًا كمؤشر وحيد. اختبر مع محاكيات عمى الألوان لمجموعات الأحمر-الأخضر.
هل يجب أن أستخدم الأسود النقي (#000) للنص؟
لا. الأسود النقي على الأبيض يخلق تباينًا قاسيًا. استخدم الرمادي الداكن مع تلوين خفيف خفيف (مثل oklch(20% 0.01 250)) للحصول على تجربة قراءة أكثر تطورًا وراحة.
كيف أتعامل مع الألوان المحايدة بدون أن أبدو رماديًا وباهتًا؟
استبدل الرمادي النقي بالألوان المحايدة الملوّنة. أضف نغمات خفية دافئة (أصفر/برتقالي) أو باردة (أزرق) لخلق الدفء مع الحفاظ على المظهر المحايد.
ماذا لو أراد عميلي أن يكون كل قسم ملونًا؟
اشرح أن الضبط الاستراتيجي يخلق تأثيرًا. الألوان في كل مكان تعني أنه لا شيء يبرز. أرهم قاعدة 60-30-10 وكيف يوجه التسلسل الهرمي انتباه المستخدم بشكل فعال.

تفاصيل المطور

المؤلف

pbakaus

الترخيص

MIT

المستودع

https://github.com/pbakaus/impeccable/tree/main/source/skills/colorize/

مرجع

main

بنية الملفات

📄 SKILL.md