/ الدليل / الملعب / design-dna
← كل الخوادم ↗ GitHub
● مجتمع zanwei ⚡ فوري

design-dna

بواسطة zanwei · zanwei/design-dna

استخرج الحمض النووي التصميمي الكمي من أي واجهة مرجعية — رموز، أسلوب نوعي، تأثيرات بصرية — ثم ولّد مكونات تطابقها.

تأخذ design-dna الصور أو لقطات الشاشة أو الروابط الحية كمراجع وتصدر JSON لـ Design DNA منظم: رموز اللون، مقياس الخط، المسافات، واصفات الأسلوب النوعي، ومعاملات التأثيرات البصرية. أعد تغذية الحمض النووي إلى كلود عند توليد المكونات وستبقى النتائج على هوية العلامة بدلاً من أن تكون Tailwind عاماً.

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

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

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

عرض مباشر

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

جاهز

التثبيت

اختر العميل

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

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

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

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

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "design-dna-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zanwei/design-dna",
        "~/.claude/skills/design-dna"
      ],
      "_inferred": true
    }
  }
}

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

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

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

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

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

claude mcp add design-dna-skill -- git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna

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

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

استخدامات عملية: design-dna

بناء مكوّن يطابق لقطة شاشة تعجبك

👤 المطورون بدون مصمم، يبنون واجهات متقنة ⏱ ~25 min intermediate

متى تستخدمه: رأيت واجهة رائعة على Twitter وتريد التقاط نكهتها.

المتطلبات الأساسية
  • المهارة مثبّتة — git clone https://github.com/zanwei/design-dna ~/.claude/skills/design-dna
الخطوات
  1. استخراج الحمض النووي
    Use design-dna. Extract DNA from /screens/inspiration.png. Save as dna.json.✓ تم النسخ
    → JSON بالرموز + الأسلوب + التأثيرات
  2. توليد المكوّن
    Using dna.json, generate a React Card component. Match the radii, shadow, gradient parameters.✓ تم النسخ
    → TSX بالجماليات المطابقة
  3. المقارنة البصرية
    Render side-by-side; tweak any drift in shadow strength.✓ تم النسخ
    → تطابق بصري ضمن الحدود المقبولة

النتيجة: مكوّن على هوية العلامة دون نسخ الكود من الأصل.

المزالق
  • الحمض النووي يفوّت التأثيرات الدقيقة (نسيج الحبيبات) — مرّر --high-fidelity لاستخراج أبطأ لكن أغنى
اجمعها مع: filesystem

توليد مكونات جديدة تطابق تصميم منتج قائم

👤 المطورون الذين يضيفون ميزات لمنتج مصمم ⏱ ~30 min intermediate

متى تستخدمه: تضيف شاشة لتطبيق قائم وتريدها أن تبدو طبيعية.

الخطوات
  1. الحمض النووي من رابط حي
    Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ تم النسخ
    → الحمض النووي يعكس المنتج الفعلي
  2. مراجعة فروق الرموز
    Compare DNA to our existing tailwind.config — flag drift.✓ تم النسخ
    → قائمة الانجراف (مثل: shadow-md غير متسق عبر الصفحات)
  3. توليد الشاشة الجديدة
    Generate the new 'Settings' screen using our reconciled DNA.✓ تم النسخ
    → شاشة لا تمييز بينها وبين بقية التطبيق

النتيجة: منتج متجانس حتى عند إضافة شاشات بعد أشهر.

المزالق
  • الرابط الحي خلف مصادقة — الحمض النووي من الصفحة العامة يُضلّل — استخدم لقطة شاشة بعد المصادقة لا صفحة التسويق

تهيئة نظام تصميم من مراجع

👤 المؤسسون الفرديون / الفرق الصغيرة بدون مصمم ⏱ ~60 min advanced

متى تستخدمه: تبدأ تطبيقاً وتريد نظام تصميم متماسك بسرعة.

الخطوات
  1. اختيار 3 مراجع
    Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ تم النسخ
    → 3 كائنات حمض نووي منفصلة
  2. التركيب
    Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ تم النسخ
    → حمض نووي مدموج
  3. إخراج نظام البداية
    Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ تم النسخ
    → نظام تصميم ابتدائي في المستودع

النتيجة: خط أساس متجانس يمكنك التكرار منه بدلاً من البدء من Tailwind الافتراضي.

المزالق
  • تركيب جماليات متباينة كلياً ينتج فوضى — اختر مراجع تشترك في 'عائلة' — تنويعات ضمن أسلوب واحد لا أضداد
اجمعها مع: frontend-slides-skill

التركيبات

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

design-dna-skill + filesystem

حفظ الحمض النووي + المكونات المولّدة في المستودع

Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ تم النسخ
design-dna-skill + frontend-slides-skill

توليد عروض شرائح تطابق جماليات منتجك

Use design-dna to capture our brand; pass to frontend-slides-skill for matching deck templates.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
extract_dna image_path or url, fidelity? الخطوة الأولى من أي مرجع Vision LLM tokens
synthesize_dna dna[] دمج مراجع متعددة LLM tokens
generate_component dna, component_spec توليد مكوّن على هوية العلامة LLM tokens
diff_dna dna_a, dna_b مراجعة الانجراف بين المرجع والمنتج الحالي 0

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

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

حصة API
يعتمد على LLM للرؤية
الرموز لكل استدعاء
الاستخراج ~3000–8000 رمز (إدخال صورة + خرج JSON)
التكلفة المالية
مجاني؛ تدفع لمزود LLM
نصيحة
خزّن الحمض النووي لكل مشروع؛ أعد الاستخراج فقط عند تجديد العلامة التجارية الفعلي

الأمان

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

الحد الأدنى من الصلاحيات: filesystem-read (images) Outbound HTTPS (URL refs)
تخزين بيانات الاعتماد: لا يوجد (مصادقة LLM للرؤية عبر متغير البيئة)
نقل البيانات الخارجي: مزود LLM للرؤية؛ جالب URL (إن استُخدم)

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

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

الاستخراج يفوّت التدرجات

استخدم --fidelity high؛ الإعداد الافتراضي يتجاوز التدرجات الخفية لتوفير الرموز

رموز الحمض النووي تختلف من تشغيل لآخر

نماذج الرؤية عشوائية — عيّن seed إن أمكن؛ أو استخرج مرتين وخذ القيم الوسطى

الكود المولّد يستخدم أنماط مضمّنة بدلاً من رموز التصميم

مرّر --token-mode strict؛ المهارة سترفض تضمين القيم الموجودة كرموز

استخراج الرابط الحي فارغ

الموقع يتطلب JS؛ استخدم لقطة شاشة مُصيَّرة بالكامل بدلاً من جلب الرابط

البدائل

design-dna مقابل البدائل

البديلمتى تستخدمهاالمقايضة
design-extract (Manavarya09)تريد تصدير رموز تصميم كاملة بما فيها DTCG + محولات متعددة المنصاتأثقل؛ خط أنابيب نظام تصميم كامل مقابل حمض نووي خفيف الوزن
Manual style guide curationلديك مصمم ومكتبة أنماطأبطأ؛ أكثر موثوقية

المزيد

الموارد

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

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

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