/ الدليل / الملعب / Claude Code Design Skills
← كل الخوادم ↗ GitHub
● مجتمع scoobynko ⚡ فوري

Claude Code Design Skills

بواسطة scoobynko · scoobynko/claude-code-design-skills

Figma-to-Next.js بالطريقة الصحيحة - إعادة استخدام المكونات أولاً، وتعيين متغيرات Figma إلى الدعائم، وTypeScript الصارم، وa11y افتراضيًا.

scoobynko/clude-code-design-skills عبارة عن حزمة مهارات Claude Code لسير العمل من التصميم إلى التعليمات البرمجية. تعمل مهارة "Figma to Code" الرئيسية على تحويل تصميمات Figma إلى رمز React/Next.js جاهز للإنتاج مع قواعد واضحة: تفضيل إعادة استخدام المكونات الموجودة، وتعيين متغيرات Figma للدعائم المكتوبة، وفرض حدود الواجهة الأمامية/الخلفية، والأسلاك a11y من البداية. أزواج مع Figma MCP؛ يركز بشكل أقل على تحسين البكسل بدلاً من التركيز على إنتاج التعليمات البرمجية التي سيقوم فريقك بدمجها فعليًا.

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

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

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

عرض مباشر

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

claude-code-design-skills.replay ▶ جاهز
0/0

التثبيت

اختر العميل

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

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

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

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

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

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-code-design-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-code-design-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/scoobynko/claude-code-design-skills",
          "~/.claude-code/skills/claude-code-design-skills"
        ]
      }
    }
  }
}

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

claude mcp add claude-code-design-skills -- git clone https://github.com/scoobynko/claude-code-design-skills ~/.claude-code/skills/claude-code-design-skills

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

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

استخدامات عملية: Claude Code Design Skills

سقالة صفحة جديدة من إطار Figma

👤 يقوم مهندسو الواجهة الأمامية بتحويل التصاميم إلى تعليمات برمجية ⏱ ~45 min intermediate

متى تستخدمه: لديك إطار Figma جاهز وتريد رمز React/Next.js الذي يناسب قاعدة التعليمات البرمجية الخاصة بك.

المتطلبات الأساسية
  • تم إعداد Figma MCP — قم بتثبيت Figma MCP وقم بتوفير PAT
  • تم تثبيت المهارة — استنساخ بوابة في ~/.claude-code/skills/
الخطوات
  1. أشر إلى الإطار
    قم بتحويل إطار Figma هذا إلى صفحة Next.js: <figma URL>. إعادة استخدام المكونات من src/components/.✓ تم النسخ
    → يقوم الوكيل بجرد المكونات الموجودة قبل كتابة مكونات جديدة
  2. متغيرات خريطة الدعامة
    قم بتعيين متغيرات Figma إلى الدعائم المكتوبة (الحجم، القصد، المعطل).✓ تم النسخ
    → تم إنشاء أنواع TS؛ لا يوجد
  3. بيانات وهمية
    استخدام بيانات وهمية؛ لا تخترع مكالمات API. أبقِ الواجهة الخلفية خارجًا.✓ تم النسخ
    → قم بتنظيف مكون الجلب الأقل باستخدام ملف محاكاة

النتيجة: تم دمج صفحة Next.js حقيقية في صفحة علاقات عامة واحدة - دون الحاجة إلى إعادة كتابة المراجع.

المزالق
  • إنشاء مكتبة مكونات متوازية بجانب المكتبة الموجودة — ابدأ بـ "سرد المكونات الموجودة" حتى يعيد الوكيل استخدام ما هو موجود
اجمعها مع: figma · magic-ui-mcp

مزامنة دعائم المكون مع متغيرات Figma

👤 فرق تحافظ على نظام التصميم ⏱ ~25 min intermediate

متى تستخدمه: أضاف المصمم متغيرًا جديدًا في Figma ويحتاج الكود إلى اللحاق به.

الخطوات
  1. فرق Figma ضد المكون
    قارن متغيرات الزر (Figma) مع الدعائم src/components/Button.tsx.✓ تم النسخ
    → مسح قائمة دلتا: متغير جديد، متغير تمت إعادة تسميته، وما إلى ذلك.
  2. تطبيق الفرق
    قم بتحديث Button.tsx ليشمل متغير "الشبح" الجديد؛ الحفاظ على API.✓ تم النسخ
    → تحديث مكتوب مع الافتراضي الذي لا يقطع المتصلين

النتيجة: تم إغلاق انجراف نظام التصميم دون كسر المستهلكين.

تحويل تدفق Figma مع الدلالات الصحيحة وإدارة التركيز

👤 مهندسو الواجهة الأمامية المهتمين بإمكانية الوصول ⏱ ~45 min intermediate

متى تستخدمه: أنت بحاجة إلى مربع حوار/قائمة/نموذج يجتاز مراجعة قارئ الشاشة.

الخطوات
  1. اطلب التدفق في الكود
    أنشئ مربع حوار الخروج من Figma - احترم مصيدة التركيز، والهروب، والحركة المنخفضة.✓ تم النسخ
    → الأدوار المناسبة، ووضع العلامات، وإدارة التركيز، والخروج للإغلاق
  2. تشغيل المدقق
    قم بتشغيل مهارة claude-design-auditor على النتيجة.✓ تم النسخ
    → درجة A11y ≥ 85

النتيجة: تنفيذ يمكن الوصول إليه دون الإمساك بكل مكون.

اجمعها مع: claude-design-auditor-skill

التركيبات

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

claude-code-design-skills + figma

سحب إطارات Figma عبر MCP؛ تحويل عبر هذه المهارة

إحضار إطار Figma X؛ استخدم مهارة التحويل باستخدام إعادة استخدام المكونات الموجودة.✓ تم النسخ
claude-code-design-skills + magic-ui-mcp

قم بتعيين أنماط Figma على مكونات Magic UI حيثما وجدت

حيث يستخدم Figma بطلًا تمويهيًا، استخدم تقنية التمويه في Magic UI بدلاً من كتابة بطل.✓ تم النسخ
claude-code-design-skills + claude-design-auditor-skill

تحقق من أن الكود الذي تم إنشاؤه يجتاز التدقيق المكون من 18 قاعدة

بعد التحويل، قم بتشغيل مدقق التصميم وإصلاح أي نتائج عالية.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
figma-to-code (SKILL) Figma frame URL + repo conventions تحويل التصميم إلى كود يناسب قاعدة التعليمات البرمجية الخاصة بك 0

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

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

حصة API
لا شيء للمهارة. لدى Figma MCP حصتها الخاصة
الرموز لكل استدعاء
يمكن أن يكون إطار Figma + الكود الموجود + المخرجات كبيرًا؛ نطاق الإطار بدقة
التكلفة المالية
حر
نصيحة
تحويل إطار واحد في كل مرة؛ التحديدات العملاقة تهدر كلاً من السياق وطاقة المراجعة.

الأمان

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

تخزين بيانات الاعتماد: ينتمي Figma PAT إلى Figma MCP، وليس إلى هذه المهارة
نقل البيانات الخارجي: لا شيء من المهارة؛ تحدث مكالمات الشبكة في Figma MCP

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

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

يكتب الوكيل زرًا جديدًا بدلاً من إعادة استخدام الزر الموجود

قم بإدراج دليل مكونات الريبو بشكل واضح في الموجه.

تحقق: Include 'check src/components/ first' in the request
الدعائم المفقودة لمتغير Figma الأحدث

اسأل عن الفرق المتغير قبل التحويل؛ قم بتحديث المكون بدلاً من التفرع.

تحقق: Agent output includes a 'variants' section
أنواع فضفاضة جدًا (أي في كل مكان)

تتطلب "لا أي؛" تفشل بصوت عالٍ إذا تعذر كتابة متغير".

تحقق: Search the diff for ': any'

البدائل

Claude Code Design Skills مقابل البدائل

البديلمتى تستخدمهاالمقايضة
magic-ui-mcpأنت تريد مكونات متحركة مبنية مسبقًا، وليس محول Figmaالمكتبة أولاً، وليس التصميم أولاً
claude-design-auditor-skillأنت تريد تقييم جودة التصميم، وليس إنشاء التعليمات البرمجيةالتدقيق وليس الإنتاج
hue-brand-skillأنت بحاجة إلى لغة تصميم، وليس تحويل الإطارالنظام أولاً، وليس الإطار أولاً

المزيد

الموارد

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

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

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