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

Design Extract

بواسطة Manavarya09 · Manavarya09/design-extract

وجّه Claude إلى أي رابط موقع واحصل على نظام تصميم قابل للاستخدام — DTCG tokens وprimitivies وsemantics وتصديرات لمنصات iOS / Android / Tailwind / Figma.

يزحف Design Extract على الموقع المستهدف باستخدام Playwright، ويفحص CSS المُصيَّر، ويُقطّره في طبقات token متوافقة مع DTCG (primitive / semantic / composite)، ويُصدر كوداً جاهزاً: SwiftUI وJetpack Compose وFlutter وTailwind v4 وWordPress theme.json ومتغيرات Figma ومطابقات shadcn/ui. مُصمَّم للمصممين والمهندسين الذين يحتاجون لاستنساخ هوية بصرية أو فحصها في دقائق لا في سبرنت.

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

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

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

عرض مباشر

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

design-extract-mcp.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

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

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "design-extract-mcp",
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

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

claude mcp add design-extract-mcp -- npx -y design-extract-mcp

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

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

استخدامات عملية: Design Extract

كيفية استنساخ النظام البصري لعلامة تجارية إلى DTCG tokens

👤 مهندسو التصميم وفرق الوكالات والفرق المنسجمة مع العلامة التجارية ⏱ ~25 min intermediate

متى تستخدمه: تُعيد بناء موقع تسويقي أو تطبيق من مرجع وتحتاج tokens الخاص به في 10 دقائق لا في جلسة نسخ من Figma.

المتطلبات الأساسية
  • URL عام للموقع المرجعي — مثل: https://stripe.com — يجب أن يكون متاحاً للعموم
الخطوات
  1. الاستخراج
    Use design-extract on https://stripe.com. Output DTCG tokens, SwiftUI, and Tailwind v4. Save to /tokens/.✓ تم النسخ
    → tokens.json + tokens.swift + tailwind.css مكتوبة؛ تقرير التغطية
  2. الفحص
    Run the CSS health pass and the WCAG remediation. Flag everything below AA.✓ تم النسخ
    → تقرير فحص يسرد الأزواج الفاشلة مع الاقتراحات
  3. التطبيق
    Now generate a starter Next.js page using these tokens — nav, hero, 3 feature cards.✓ تم النسخ
    → الصفحة تُصيَّر بالهوية البصرية للعلامة التجارية

النتيجة: مجموعة tokens وفحص وصفحة بداية، كلها مشتقة من URL واحد.

المزالق
  • الموقع محمي بشكل مكثف بـ SSR أو خلف تسجيل دخول — أضف cookie تسجيل دخول عبر الإضافة أو خطوة Playwright مخصصة مسبقاً
اجمعها مع: filesystem

فحص موقعك الخاص للكشف عن الانجراف في نظام التصميم

👤 مديرو نظام التصميم الداخلي ⏱ ~30 min intermediate

متى تستخدمه: تشك في أن 47 لوناً غير مصرحاً به قد تسللت إلى الإنتاج. تأكّد من ذلك.

الخطوات
  1. الجرد
    Run design-extract against https://yoursite.com. Don't emit code — just report unique colors, font stacks, spacing values used.✓ تم النسخ
    → عدد القيم المتميزة لكل فئة
  2. المقارنة مع المصدر
    Compare against /design/tokens.json. Flag every value used in production that's not in the source-of-truth.✓ تم النسخ
    → جدول الانجراف مع مراجع الملفات والمكونات
  3. تخطيط التنظيف
    Group drift by likely cause (legacy CSS, ad-hoc style, wrong token). Suggest a 3-PR cleanup plan.✓ تم النسخ
    → خطة PR مكتوبة

النتيجة: تقرير انجراف ملموس يمكن تسليمه للمهندسين، لا مجرد شكوى 'لدينا تناقضات'.

المزالق
  • الأداة تُفرط في التقارير بسبب CSS variables تحل وقت التشغيل — مرّر --resolve-vars لتتبع سلاسل var(--x) قبل الإحصاء
اجمعها مع: filesystem

توليد متغيرات Figma من موقع حي

👤 المصممون الذين يحتاجون لمطابقة الكود في Figma ⏱ ~15 min beginner

متى تستخدمه: الكود شُحن أولاً؛ التصميم يحتاج للّحاق بـ Figma.

الخطوات
  1. إصدار Figma JSON
    Use design-extract on https://yoursite.com with output=figma-variables. Save to /design/figma-vars.json.✓ تم النسخ
    → JSON متغيرات Figma قابل للاستيراد
  2. الاستيراد
    Walk me through importing this with the Figma Variables Import plugin.✓ تم النسخ
    → تعليمات الإضافة خطوة بخطوة

النتيجة: ملف Figma متزامن مع الكود المشحون بدون تلوين يدوي بالقطّارة.

المزالق
  • أسماء tokens تتعارض مع متغيرات Figma الموجودة — استخدم --prefix لإضافة مساحة اسم، مثل: site/color.bg.primary

التركيبات

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

design-extract-mcp + filesystem

حفظ مخرجات tokens في مستودعك حتى تتمكن التشغيلات المتتالية من المقارنة

Run extract every Friday and save under /design/snapshots/$(date +%F)/.✓ تم النسخ
design-extract-mcp + Figma-Context-MCP

مزامنة ثنائية الاتجاه — استخراج من الإنتاج، ودفع مجدداً إلى Figma

After extract, push the token file to Figma via Figma-Context-MCP.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
extract url, output_format[]: dtcg|swiftui|compose|flutter|tailwind|figma|wordpress|shadcn نقطة الدخول الرئيسية 1 Playwright crawl
audit_css_health url بعد الاستخراج أو بدلاً منه عندما يكون الهدف الصحة لا الاستنساخ 1 crawl
wcag_remediate tokens بعد الاستخراج وقبل شحن tokens free (post-process)
diff_tokens url, source_tokens_path فحص الانجراف على موقعك الخاص 1 crawl

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

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

حصة API
محلي — يعتمد على جهازك
الرموز لكل استدعاء
1500–6000 لكل ملخص استخراج
التكلفة المالية
مجاني (MIT)
نصيحة
لا تُجرِ الاستخراج لكل PR — احفظ النتيجة وشغّله عند التغييرات

الأمان

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

تخزين بيانات الاعتماد: لا شيء إلا إذا كان الهدف يتطلب مصادقة (في هذه الحالة عبر ملف cookie)
نقل البيانات الخارجي: إلى الـ URL الذي تستهدفه فقط. Playwright يعمل محلياً.

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

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

Playwright Chromium يفشل في الإطلاق

شغّل npx playwright install chromium مرة واحدة

تحقق: `npx playwright --version` يُظهر رقم إصدار
الموقع يحجب المتصفح headless

مرّر --headed أو أرفق proxy سكني / ملف cookie

tokens المخرجة تبدو غير مكتملة

الموقع يستخدم CSS-in-JS بكثافة — جرّب --wait-for-selector main للتأكد من اكتمال تصيير SPA

البدائل

Design Extract مقابل البدائل

البديلمتى تستخدمهاالمقايضة
Figma-Context-MCP (GLips)مصدر الحقيقة هو Figma لا موقع حيFigma MCP يحتاج ملف Figma؛ design-extract يعمل من أي URL
Tokens Studio pluginأنت داخل Figma بالفعل وتريد واجهة لإدارة tokensيدوي؛ design-extract يُؤتمت الاستخراج الأولي

المزيد

الموارد

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

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

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