AIDesigner MCP Server

نظرة عامة

خادم AIDesigner MCP هو خادم نموذج بروتوكول السياق (MCP) خفيف الوزن يعمل كجسر بين مساعدي الذكاء الاصطناعي القويين للبرمجة والتصميم الاحترافي لواجهة المستخدم والتجربة. يتعامل مع واحدة من أكبر نقاط الضعف في أدوات مثل Claude Code – قدرات التصميم الأصلي الضعيفة لواجهة المستخدم – من خلال منحها إمكانية الوصول إلى أدوات التصميم الذكية مباشرة داخل المحرر.

يقرأ الخادم إطار العمل الخاص بمشروعك، ومكتبة المكونات، ورموز CSS/Tailwind، ونظام التصميم، ثم يُنشئ كود UI جاهز للإنتاج يتناسب بسلاسة مع نظامك الحالي. لم يعد هناك حاجة للتبديل بين Figma ومحرر الكود الخاص بك أو إصلاح تصاميم الذكاء الاصطناعي المُنشأة يدويًا.

الميزات الرئيسية

• إنشاء تصميمات واعٍ لقاعدة الكود: يحلل مشروعك لفهم أطر العمل والمكونات والرموز قبل إنشاء UI.
• أداة generate_design: تحويل أوامر اللغة الطبيعية إلى مكونات وصفحات UI جاهزة للإنتاج.
• أداة refine_design: تحسين التخطيطات والألوان والتباعد والأنماط بشكل تكراري باستخدام تعليمات محادثة.
• تكامل الكود المباشر: يُخرج كودًا يمكن إدراجه مباشرة في قاعدة الكود الخاصة بك دون تكييف يدوي.
• مصادقة OAuth: عملية تسجيل دخول آمنة مع تجديد الرمز المميز تتم إدارتها تلقائيًا من قبل مضيف MCP.
• توافق واسع: يعمل مع Claude Code، وCodex، وCursor، وVS Code (وضع وكيل Copilot)، وWindsurf.
• إعداد خالٍ من الاحتكاك: التثبيت والتكوين عبر أمر npx واحد.

أدوات البرمجة بالذكاء الاصطناعي المدعومة

• Claude Code: سير عمل إرشادي كامل مع أمر /mcp ووكلاء مخصصين.
• Cursor: تكامل سلس للتحرير المدعوم بالذكاء الاصطناعي.
• Codex: دعم التكوين على مستوى المشروع.
• VS Code / GitHub Copilot: توافق مع وضع الوكيل.
• Windsurf: تكوين على مستوى المستخدم.

التثبيت والإعداد

1. قم بتشغيل أمر التهيئة في مشروعك:

   npx -y @aidesigner/agent-skills init <host> --trust-project
   

   (استبدل <host> بـ codex، cursor، إلخ.)

2. يقوم واجهة سطر الأوامر (CLI) بتسجيل خادم MCP ويفتح نافذة متصفح لتسجيل الدخول عبر OAuth.

3. اتصل عبر لوحة MCP لمساعد الذكاء الاصطناعي الخاص بك (على سبيل المثال، قم بتشغيل /mcp في Claude Code واختر "aidesigner").

4. ابدأ في إدخال الأوامر: "إنشاء صفحة تسعير حديثة مع دعم الوضع الداكن" أو "حسن لوحة التحكم هذه لاستخدام ألوان علامتنا التجارية."

تتوفر أدلة الإعداد التفصيلية، ومراجع الأدوات، واستكشاف الأخطاء وإصلاحها في التوثيق الرسمي.

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

• النمذجة السريعة لواجهة الواجهة الأمامية: الانتقال من الفكرة إلى UI مصقول في دقائق دون مغادرة المحرر.

• الامتثال لنظام التصميم: تأكد من احترام جميع المكونات المُنشأة للرموز والمكونات الموجودة لديك.

• تحسين UI التكراري: استخدام اللغة الطبيعية لضبط التخطيطات أو إمكانية الوصول أو الاستجابة. .

• تطوير كامل المكدس (Full-Stack): الجمع مع وكلاء البرمجة لبناء ميزات كاملة بما في ذلك الواجهات الجميلة.

• التعاون الجماعي: الحفاظ على جودة تصميم متسقة عبر التطوير المدعوم بالذكاء الاصطناعي واليدوي.

التفاصيل التقنية

• البروتوكول: بروتوكول سياق النموذج (MCP) — معيار مكشوف للأدوات والسياق.
• التوزيع: متاح عبر npm (@aidesigner/agent-skills والحزم المتعلقة).
• المصادقة: تعتمد على OAuth مع إدارة تلقائية للرموز.
• الحالة: قيد التطوير النشط؛ تم إصدار الإصدار v0.1.0 مع اعتماد مبكر قوي على Product Hunt.

يحوّل AIDesigner MCP مساعدات البرمجة الذكية من مُولِدات للكود إلى شركاء كاملين في التصميم والبرمجة، مما يجعل واجهات المستخدم الجميلة والجاهزة للإنتاج متاحة لكل مطوّر.

قم بزيارة aidesigner.ai للمزيد من المعلومات، والعروض الحية، وآخر التحديثات.