/ الدليل / الملعب / smart-illustrator
← كل الخوادم ↗ GitHub
● مجتمع axtonliu ⚡ فوري

smart-illustrator

بواسطة axtonliu · axtonliu/smart-illustrator

مهارة Claude Code التي تدرج الرسوم التوضيحية ذات الصلة بالسياق تلقائياً في المقالات والأغلفة — دمج Gemini و Excalidraw و Mermaid.

يقوم Smart Illustrator بتحليل مقالة markdown الخاصة بك، واكتشاف نقاط الرسوم التوضيحية المثلى، واختيار المحرك الصحيح لكل منها — Gemini للعناصر البصرية الإبداعية، Excalidraw للرسوم البيانية المرسومة باليد، Mermaid لتدفقات العمل المنظمة. يدعم أوضاع مقالة وشرائح وأغلفة محسّنة حسب المنصة (YouTube و WeChat و Twitter). آمن للاستئناف بحيث يمكنك إعادة التشغيل دون إعادة توليد الصور الموجودة.

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

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

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

عرض مباشر

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

smart-illustrator-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

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

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

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

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

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

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

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

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

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

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

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

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

claude mcp add smart-illustrator-skill -- git clone https://github.com/axtonliu/smart-illustrator ~/.claude/skills/smart-illustrator

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

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

استخدامات عملية: smart-illustrator

كيفية توضيح مشاركة مدونة طويلة الشكل تلقائياً

👤 الكتاب التقنيون وصانعو المحتوى الذين ينشرون مقالات markdown ⏱ ~20 min beginner

متى تستخدمه: لديك مقالة markdown منتهية تحتاج إلى 4-8 رسوم توضيحية قبل النشر، ولا تريد كتابة أوامر يدوية لكل واحدة.

المتطلبات الأساسية
  • تثبيت المهارة تحت ~/.claude/skills/smart-illustrator — استنسخ https://github.com/axtonliu/smart-illustrator في هذا المسار
  • مفتاح Gemini API (للعناصر البصرية الإبداعية) — صدّر GEMINI_API_KEY؛ تقرأ المهارة من البيئة
  • Mermaid CLI إذا أردت عرض الرسوم البيانية — npm i -g @mermaid-js/mermaid-cli
الخطوات
  1. وجّه المهارة نحو مقالتك
    شغّل smart-illustrator على posts/2026-04-launch.md في وضع المقالة. اختر 5 نقاط رسوم توضيحية.✓ تم النسخ
    → تعكس المهارة المواضع المختارة مع سبب واحد لكل منها
  2. راجع اختيارات المحرك
    أخبرني بأي محرك اخترت لكل رسم توضيحي ولماذا. دعني أتجاوز أي منها.✓ تم النسخ
    → جدول لكل موضع: موضع → محرك → السبب
  3. الإنشاء والتضمين
    أنشئ جميع الصور واكتب markdown المحدّث مرة أخرى في نفس الملف.✓ تم النسخ
    → تحديث المقالة مع مراجع الصور المضمنة؛ حفظ ملفات PNG تحت assets/

النتيجة: ملف markdown قابل للنشر يحتوي على 5 رسوم توضيحية مناسبة للسياق وصورة غلاف.

المزالق
  • يعيد Gemini صورة ذات مظهر عام لمفهوم مجرد — أعد تشغيل هذا الموضع الواحد باستخدام --engine excalidraw للحصول على استعارة رسومية بدلاً من ذلك
  • فشل بناء جملة Mermaid في العرض لأن LLM لم يهرب من الاقتباسات بشكل صحيح — استخدم --prompt-only للرسوم البيانية، والصق في mermaid.live للتصحيح، ثم أعد الحقن
اجمعها مع: banana-claude-skill

إنشاء أغلفة محسّنة حسب المنصة لمشاركة

👤 منشئو المحتوى الذين يعيدون استخدام مقالة واحدة عبر YouTube و WeChat و Twitter ⏱ ~10 min beginner

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

المتطلبات الأساسية
  • عنوان المقالة المنتهية + سطر واحد hook — حضّر أمراً قصيراً؛ تستخدم المهارة كموجز
الخطوات
  1. شغّل وضع الغلاف لكل منصة
    استخدم smart-illustrator في وضع الغلاف للعنوان 'The 2AM Bug That Cost Us $40k' — أنشئ لـ youtube و wechat و twitter.✓ تم النسخ
    → 3 ملفات PNG بدقة صحيحة، تكوين مناسب للمنصة
  2. متغيرات A/B
    أعد توليد غلاف YouTube بزاويتين بديلتين حتى أتمكن من اختبار A/B.✓ تم النسخ
    → 3 صور مصغرة، مختلفة بوضوح

النتيجة: حزمة أغلفة جاهزة للتحميل عبر القنوات دون فتح أداة تصميم.

المزالق
  • يبدو النص على الغلاف مشوهاً — عرض نص Gemini غير موثوق به — اطلب من المهارة إضافة العنوان كطبقة معالجة لاحقة بدلاً من ذلك

تحويل مخطط محادثة إلى رسوم بيانية للشرائح

👤 المتحدثون الذين يحضرون محادثات تقنية من مخطط markdown ⏱ ~25 min intermediate

متى تستخدمه: لديك مخطط محادثة وتريد رسماً واحداً لكل قسم رئيسي قبل تصميم العرض.

الخطوات
  1. شغّل وضع الشرائح
    خذ talk-outline.md، وضع الشرائح، رسم بياني واحد مستقل لكل قسم H2.✓ تم النسخ
    → ملف PNG واحد لكل قسم، كل منها مستقل بذاته
  2. تحسين الضعيفة منها
    الرسم البياني للقسم 3 مجرد جداً. أعده باستخدام محرك Excalidraw، ركز على حلقة الخطوات الثلاث.✓ تم النسخ
    → بديل مرسوم باليد يطابق المخطط

النتيجة: مجلد من الرسوم البيانية جاهزة للشرائح المقابلة لمخططك.

المزالق
  • لا تطابق الرسوم البيانية النمط البصري لعرضك — مرر --style='flat pastel' أو صورة مرجع نمط بحيث تبقى المخرجات متسقة

التركيبات

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

smart-illustrator-skill + banana-claude-skill

استخدم Smart Illustrator للرسوم البيانية و Banana Claude للصور الواقعية البطلة في نفس المشاركة

لـ posts/launch.md، استخدم smart-illustrator لرسم معماري في القسم 2، ثم banana-claude للصورة البطلة الواقعية في الأعلى.✓ تم النسخ
smart-illustrator-skill + notebooklm-skill

يقوم NotebookLM بالبحث عن الموضوع، و Claude بصياغة المقالة، و Smart Illustrator بتزيينها

ابحث عن 'حل تضارب CRDT' باستخدام notebooklm، وصغ مقالة بـ 2000 كلمة، ثم وضّحها باستخدام smart-illustrator.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
detect_illustration_points markdown_path: str, count?: int التمرير الأول في أي مقالة لتحديد أماكن الصور التي تساعد حوالي 2000 رمز Claude
generate_illustration position: str, engine: 'gemini'|'excalidraw'|'mermaid', prompt: str لكل موضع مختار بعد المراجعة 1 استدعاء Gemini أو 0 (لـ Mermaid/Excalidraw)
generate_cover title: str, platform: 'youtube'|'wechat'|'twitter', style?: str وضع الغلاف؛ اتصل مرة واحدة لكل منصة هدف 1 استدعاء Gemini
embed_into_markdown markdown_path: str, illustrations: list الخطوة الأخيرة بعد إنشاء جميع الصور 0

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

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

حصة API
المستوى المجاني من Gemini: 15 طلب/دقيقة، 1500/يوم. محركات Mermaid/Excalidraw مجانية (عرض محلي).
الرموز لكل استدعاء
2000-5000 رمز Claude لكشف الموضع؛ توليد الصور هو حصة Gemini منفصلة
التكلفة المالية
مجاني مع المستوى المجاني من Gemini. Gemini المدفوع حوالي 0.04$ لكل صورة بأسعار الحالية.
نصيحة
استخدم --prompt-only لصياغة جميع الأوامر، ثم أنشئ على دفعات طوال الليل للبقاء في المستوى المجاني.

الأمان

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

تخزين بيانات الاعتماد: GEMINI_API_KEY في بيئة الـ shell. بدون OAuth، بدون PATs.
نقل البيانات الخارجي: يتم إرسال محتوى المقالة إلى Google Gemini لأوامر الرسوم التوضيحية. لا تشغّل على المسودات السرية.

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

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

تم تجاوز حصة Gemini 429

انتظر إعادة التعيين اليومية أو الترقية إلى المستوى المدفوع. استخدم --engine mermaid|excalidraw للمواضع المتبقية.

تحقق: curl -s https://generativelanguage.googleapis.com/v1beta/models?key=$GEMINI_API_KEY
فشل عرض Mermaid برسالة 'خطأ في التحليل'

أنتج LLM Mermaid غير صالح. استخدم --prompt-only، والصق في mermaid.live، ثم أصلح بناء الجملة، وأعد الإنشاء.

تحقق: mmdc -i test.mmd -o test.png
لم تعثر مهارة Claude Code

تأكد من أن مسار الاستنساخ هو ~/.claude/skills/smart-illustrator وأن SKILL.md موجود في الجذر.

تحقق: ls ~/.claude/skills/smart-illustrator/SKILL.md

البدائل

smart-illustrator مقابل البدائل

البديلمتى تستخدمهاالمقايضة
banana-claude-skillتحتاج فقط إلى صور بطلة واقعية، وليس رسوم بيانيةلا كشف للموضع، لا محركات رسوم بيانية
Manual Midjourney/DALL-E workflowمنشورك يحتوي على دليل نمط علامة تجارية صارم لن تحترمه توجيه LLMتحكم أكثر، أبطأ بكثير

المزيد

الموارد

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

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

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