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

hue

بواسطة dominikmartn · dominikmartn/hue

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

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

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

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

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

عرض مباشر

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

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

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "hue-brand-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ],
      "_inferred": false
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "hue-brand-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/hue",
        "~/.claude/skills/hue"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "hue-brand-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/hue",
          "~/.claude/skills/hue"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add hue-brand-skill -- git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

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

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

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

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

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

المتطلبات الأساسية
  • تم تثبيت المهارة — استنساخ بوابة https://github.com/dominikmartn/hue ~/.claude/skills/hue
الخطوات
  1. أشر إلى عنوان URL
    اصنع مهارة التصميم من cursor.com.✓ تم النسخ
    → يتضمن الإخراج لوحة الألوان، وزوج الطباعة، ومقياس التباعد، والمكونات، وSKILL.md الذي تم إنشاؤه
  2. معاينة
    تقديم نموذج البطل مع النظام الجديد.✓ تم النسخ
    → تعرض عينة HTML الرموز المميزة في السياق
  3. التثبيت كمهارة
    احفظ مهارة العلامة التجارية التي تم إنشاؤها في ~/.claude/skills/brand-<name>/.✓ تم النسخ
    → تم تسجيل SKILL.md؛ يطالب المستقبل التقاط العلامة التجارية

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

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

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

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

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

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

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

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

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

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

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

الخطوات
  1. توليد دفعة
    لكل عنوان URL للعلامة التجارية للعميل، أنشئ مهارة تدرج الألوان ضمن ~/.claude/skills/brand-<slug>/.✓ تم النسخ
    → تم إنشاء مهارات N ببنية متسقة
  2. التقديم لكل مستأجر
    عند إنشاء واجهة مستخدم للمستأجر 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
لا يتم تنشيط المهارة لكل علامة تجارية

يجب أن يصف وصف SKILL.md وقت التشغيل؛ تأكد من أن وصف المادة الأمامية يتضمن اسم العلامة التجارية.

تحقق: head ~/.claude/skills/brand-<name>/SKILL.md
فشل التباين في الوضع المظلم

اطلب من الصبغة أن تتجدد باستخدام الوضع المظلم 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