/ الدليل / الملعب / hue
← كل الخوادم ↗ GitHub
● مجتمع dominikmartn ⚡ فوري

hue

بواسطة dominikmartn · dominikmartn/hue

قم بتلوين العلامة التجارية (عنوان URL أو الاسم أو لقطة الشاشة) ← احصل على لغة تصميم كاملة: الرموز المميزة، والطباعة، والمسافات، والضوء/الظلام، ووصفات البطل، ومجموعة الأيقونات، ومهارة نظام التصميم المُنشأ.

إن dominikmartn/hue عبارة عن مهارة مفتوحة المصدر لكلود تعمل على تحويل أي مرجع للعلامة التجارية إلى نظام تصميم كامل. قم بتوجيهه إلى cursor.com أو Raycast، أو لصق لقطة شاشة، أو تسمية حالة مزاجية - فهو يقوم بتحليل وإخراج الألوان + الطباعة + رموز المسافات، ومكتبة مكونات صغيرة، ومتغيرات فاتحة/غامقة، ووصفات بطل، ومجموعة أيقونات مطابقة. تتضمن حزمة لغة التصميم ملفات نموذج YAML وعينات من صفحات HTML المقصودة؛ كما أنها تولد مهارة كلود لكل علامة تجارية يمكنك إعادة استخدامها عبر الجلسات حتى يظل وكيلك على العلامة التجارية تلقائيًا.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

hue-brand-skill.replay ▶ جاهز
0/0

التثبيت

مستودع المؤلف · وثائق Claude Skills الرسمية

حالات الاستخدام

استخدامات عملية: hue

اشتقاق نظام التصميم من موقع المنافس

👤 المؤسسون والمصممون يقومون بإعداد نماذج أولية سريعة للمنتج ⏱ ~20 min beginner

متى تستخدمه: أنت تحب جمالية الموقع وتريد نظامًا مبدئيًا في نفس الاتجاه.

الخطوات
  1. أشر إلى عنوان URL
    اصنع مهارة التصميم من cursor.com.✓ تم النسخ
    → يتضمن الإخراج لوحة الألوان، وزوج الطباعة، ومقياس التباعد، والمكونات، وSKILL.md الذي تم إنشاؤه
  2. معاينة
    تقديم نموذج البطل مع النظام الجديد.✓ تم النسخ
    → تعرض عينة HTML الرموز المميزة في السياق

النتيجة: صوت العلامة التجارية القابل لإعادة الاستخدام ينطبق على وكيلك في كل مهمة لاحقة لواجهة المستخدم.

المزالق
  • استخدام العلامة التجارية لشخص آخر حرفيًا — تعامل معها كنقطة بداية وقم بضبط الرموز المميزة قبل الشحن
اجمعها مع: claude-code-design-skills

إجراء هندسة عكسية للقطة الشاشة في نظام التصميم

👤 المصممين مع الصور المرجعية ولكن لا يوجد نظام حتى الآن ⏱ ~15 min beginner

متى تستخدمه: لديك لقطة Dribbble التي تحبها وتريد أن تظهر في تطبيقك.

الخطوات
  1. تغذية الصورة
    قم بإنشاء مهارة تدرج الألوان من لقطة الشاشة هذه.✓ تم النسخ
    → عينات الألوان؛ نوع العائلة المستنتجة؛ مقياس التباعد المقترح
  2. أعاد
    قم بتغميق اللون بنسبة 15%، وتضييق التباعد إلى 4/8/12/16.✓ تم النسخ
    → تم تجديد الرموز

النتيجة: نظام نظيف وقابل للتملك من مرجع واحد.

المزالق
  • استخراج لوحة من ملف JPEG بضغط قوي — تفضل مصادر PNG أو SVG لاستخراج اللوحة

توليد مهارات لكل علامة تجارية لمنتج متعدد المستأجرين

👤 تقوم الفرق بشحن واجهات المستخدم ذات العلامة البيضاء ⏱ ~60 min intermediate

متى تستخدمه: لديك 5 عملاء وتحتاج إلى 5 سمات خاصة بالعلامة التجارية دون عمل استنساخ.

الخطوات
  1. التقديم لكل مستأجر
    عند إنشاء واجهة مستخدم للمستأجر X، قم بتنشيط العلامة التجارية-X قبل كتابة التعليمات البرمجية.✓ تم النسخ
    → يقوم الوكيل بتطبيق الرموز الصحيحة تلقائيًا

النتيجة: سمات العلامة البيضاء التي يمكنك تبديلها عبر تنشيط المهارات.

اجمعها مع: claude-code-design-skills

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

hue-brand-skill + claude-code-design-skills

استخدم رموز اللون عند تحويل إطارات Figma إلى تعليمات برمجية

قم بتطبيق الرموز المميزة للعلامة التجارية عند تحويل إطار Figma هذا إلى Next.js.✓ تم النسخ
hue-brand-skill + magic-ui-mcp

اختر مكونات Magic UI، وقم بضبطها عبر رموز الصبغة

قم بتثبيت Magic UI Blur-Fade، وقم بتلوينه بلكنة العلامة التجارية.✓ تم النسخ
hue-brand-skill + claude-design-auditor-skill

التحقق من أن العلامة التجارية التي تم إنشاؤها تمر بقواعد التباين + a11y

قم بمراجعة اللوحات الفاتحة والداكنة الخاصة بالعلامة التجارية لـ WCAG AA.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
hue:generate (SKILL) URL | brand name | screenshot + optional notes بداية منتج جديد أو عند إعداد العلامة التجارية للعميل 0

التكلفة والحدود

تكلفة التشغيل

حصة API
لا أحد
الرموز لكل استدعاء
معتدل؛ التحف التي تم إنشاؤها تضيف ما يصل
التكلفة المالية
حر
نصيحة
توليد مرة واحدة؛ إعادة استخدام المهارة الناتجة لكل علامة تجارية عبر الجلسات.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا أوراق اعتماد
نقل البيانات الخارجي: إذا تم استخدام إدخال عنوان URL، فإن المهارة تجلب عنوان URL. تظل لقطات الشاشة محلية.

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

تبدو اللوحة التي تم إنشاؤها موحلة

التحيز نحو مرجع SVG/PNG؛ تفقد ملفات JPEG التشبع. أو قم بتوفير مثبتات سداسية يجب أن تحترمها المهارة.

تحقق: Inspect generated tokens.json for the flagged colors
فشل التباين في الوضع المظلم

اطلب من الصبغة أن تتجدد باستخدام الوضع المظلم a11y-first؛ تجاوز المحايدين.

تحقق: Run claude-design-auditor on the dark variants

البدائل

hue مقابل البدائل

البديلمتى تستخدمهاالمقايضة
claude-code-design-skillsلديك إطار للتحويل؛ لديك بالفعل علامة تجاريةلا يُنشئ علامة تجارية — يستهلك علامة تجارية واحدة
magic-ui-mcpأنت تريد مكونات جاهزة، وليس نظام علامة تجاريةمكتبة وليست لغة
claude-design-auditor-skillأنت تريد تقييم تصميم حالي، وليس إنتاج واحديقيم، لا يولد

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills