/ الدليل / الملعب / Open Design
← كل الخوادم ↗ GitHub
● مجتمع nexu-io ⚡ فوري

Open Design

بواسطة nexu-io · nexu-io/open-design

نسخة مفتوحة المصدر من Claude Design — 19 مهارة + 71 نظام تصميم بجودة العلامة التجارية، معاينة في صندوق رمل، تصدير إلى HTML/PDF/PPTX/MP4.

open-design من nexu-io بديل مجتمعي لـ Claude Design من Anthropic. يحزم 19 مهارة تغطي تصميم الويب والنماذج الأولية للمحمول والشرائح والصور والفيديو وHyperFrames، بالإضافة إلى 71 نظام تصميم جاهز بجودة العلامة التجارية (Linear وStripe وVercel وNotion وأسلوب Toss...). يعمل في أي حزمة متوافقة مع Claude Code ويوفر معاينة في صندوق رمل وخطوط تصدير.

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

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

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

عرض مباشر

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

جاهز

التثبيت

اختر العميل

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

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

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

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

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

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

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

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

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

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

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

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

claude mcp add open-design-skill -- git clone https://github.com/nexu-io/open-design ~/.claude/skills/open-design

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

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

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

توليد عرض تقديمي بأسلوب علامة تجارية محددة

👤 المؤسسون ومديرو المنتج ⏱ ~30 min beginner

متى تستخدمه: تحتاج 10 شرائح ولا تريد التصارع مع Keynote.

الخطوات
  1. اختيار العلامة التجارية
    Use open-design. Pick the Stripe-style skin. List its tokens.✓ تم النسخ
    → tokens الجلد معروضة
  2. الصياغة
    Generate a 10-slide deck for our launch — title, problem, solution, traction, roadmap, ask. Use the Stripe skin.✓ تم النسخ
    → 10 شرائح بأسلوب متسق
  3. التصدير
    Export to PPTX so I can edit in Keynote.✓ تم النسخ
    → ملف PPTX مكتوب

النتيجة: عرض لا يبدو مُوَّلدًا بالذكاء الاصطناعي؛ أسلوب علامة تجارية متسق.

المزالق
  • توليد الصور يبدو عامًا — المهارة توفر مجموعات أيقونات ورسوم توضيحية؛ حدد أيها تستخدم
اجمعها مع: filesystem

نموذج أولي لصفحة هبوط بأسلوب علامة تجارية

👤 المطورون والمصممون الذين يكررون على صفحات hero ⏱ ~25 min intermediate

متى تستخدمه: تحتاج 3 اتجاهات بصرية قبل البناء الحقيقي.

الخطوات
  1. التنويعات
    Generate 3 hero variants — Linear, Notion, and Vercel skins. Same content, different style.✓ تم النسخ
    → 3 معاينات HTML
  2. الاختيار والتكرار
    Take the Linear one. Tighten typography and add a secondary CTA.✓ تم النسخ
    → HTML محسَّن

النتيجة: قرارات اتجاهية سريعة قبل البناء العميق.

المزالق
  • tokens الجلد تتعارض مع CSS الموجود لديك — صندوق رمل المعاينة يتجنب التعارضات؛ ادمج بانتقائية
اجمعها مع: ui-ux-pro-max-skill

توليد فيديو تسويقي قصير من سيناريو

👤 التسويق / DevRel ⏱ ~60 min intermediate

متى تستخدمه: لديك سيناريو 30 ثانية وتحتاج فيديو.

الخطوات
  1. اللوحة المصورة
    Turn this script into a HyperFrames storyboard — 6 shots, brand-styled.✓ تم النسخ
    → لوحة مصورة
  2. التصيير
    Render to MP4.✓ تم النسخ
    → ملف MP4 مكتوب

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

المزالق
  • وقت التصيير غير تافه — كرّر على اللوحة المصورة قبل التصيير النهائي

التركيبات

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

open-design-skill + ui-ux-pro-max-skill

جلود العلامة التجارية + أساسيات التصميم

Use UI/UX Pro Max for typography, open-design for brand skin.✓ تم النسخ
open-design-skill + filesystem

الإخراج إلى دلائل المشروع

Export deck to /presentations/launch/.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
list_skins (none) اختيار أسلوب العلامة التجارية free
design_web spec, skin صفحات ويب / نماذج أولية tokens
design_slides outline, skin عروض تقديمية للإطلاق / المحادثات tokens
export format: html|pdf|pptx|mp4 التسليم النهائي render time

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

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

حصة API
N/A
الرموز لكل استدعاء
ثقيل على المخرجات كثيفة التصيير (الفيديو)
التكلفة المالية
مجاني
نصيحة
كرّر على اللوحة المصورة لا التصيير النهائي

الأمان

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

الحد الأدنى من الصلاحيات: Local sandbox + file write
تخزين بيانات الاعتماد: لا شيء
نقل البيانات الخارجي: لا شيء — محلي

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

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

Render fails for video

تأكد من تثبيت ffmpeg؛ المهارة تُعلّم عن التبعيات المفقودة

Skin doesn't apply consistently

بعض القوالب تسبق نظام الجلد؛ استخدم القوالب الواعية بالجلد المدرجة في README

البدائل

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

البديلمتى تستخدمهاالمقايضة
Anthropic Claude Designتريد دعم الطرف الأولمغلق؛ أقل قابلية للتخصيص
Hand-coded designsلديك مصممتكرار أبطأ

المزيد

الموارد

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

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

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