يعني Claude Design MCP ثلاثة أشياء مختلفة: خادم مدمج أعاد HTTP 404 في Claude Code 2.1.181، وأمر /design-sync، وخادم من المجتمع. اطّلع على خطوات الإعداد الدقيقة في Claude Code و Codex، مع حل لكل خطأ مُبلَّغ عنه.
ابحث عن Claude Design MCP وستجد نفسك أمام ثلاثة أشياء مختلفة في وقت واحد. الأول خادم مدمج يحقنه Claude Code تلقائيًا، وأعاد خطأ 404 لكثيرين في يونيو 2026. والثاني أمر /design-sync الذي يرسل مكتبة مكوّناتك إلى Claude Design. والثالث خادم من المجتمع يتحكم في موقع Claude Design من الطرفية، وهو الوحيد من الثلاثة الذي يعمل أيضًا مع Codex.
الخلط بينها هو سبب معظم تقارير "لا يعمل" التي لا تؤدي إلى شيء، إذ إن الإصلاح لأحدها لا يفيد الباقي. يفصل هذا المقال بينها، ويعرض أوامر إعداد الخادم الدقيقة في Claude Code وفي Codex، ويستعرض كل رسالة خطأ أبلغ عنها الناس فعليًا، مع السبب وأقصر طريقة للخروج منها.
💡 الخلاصة السريعة: الخطأ 404 المدمج مشكلة من جهة الخادم لا يمكنك إصلاحها محليًا، أما
/design-syncفيفشل بسبب متطلبات تسجيل الدخول والمشروع، والخادم المجتمعي يفشل بسبب جلسات Chrome والمهلات الزمنية. انتقل إلى القسم الذي يطابق خطأك.
Claude Design أداة من Anthropic لبناء النماذج الأولية والشرائح والمواد التسويقية عبر الدردشة مع Claude. أُطلقت في 17 أبريل 2026 ضمن Anthropic Labs، وتعمل بنموذج Claude Opus 4.7، وهي متاحة في خطط Pro و Max و Team و Enterprise. تكون الأداة معطّلة افتراضيًا في مؤسسات Enterprise، لذا يجب على المسؤول تفعيلها. عندما يصبح التصميم جاهزًا، يمكنك تصديره كمجلد أو ملف PDF أو PPTX أو ملف HTML مستقل أو ملف Canva أو رابط مؤسسة، أو تسليمه إلى Claude Code.
يظهر "MCP" في هذا المنتج بثلاث طرق منفصلة، ولكل منها نمط فشل خاص.
بدأ Claude Code 2.1.181 بحقن خادم اسمه claude_design في كل جلسة. يشير هذا الخادم إلى https://api.anthropic.com/v1/design/mcp، وبالنسبة لكثيرين أعاد هذا العنوان الخطأ 404. أبلغ أمر /doctor عنه، وطبع /mcp الرسالة "Failed to reconnect to claude_design: HTTP 404 at https://api.anthropic.com/v1/design/mcp".
الخادم يُحقن ديناميكيًا، لذا لا يوجد في أي ملف إعدادات، ومحاولة إزالته تنتهي برسالة "Cannot remove MCP server from scope: dynamic". التقرير في المشكلة #69323 فُتح في 18 يونيو 2026 وأُغلق كنسخة مكررة في 22 يونيو 2026، إلى جانب عدة تقارير متطابقة تقريبًا مثل #69325.
أُعلن عنها في 17 يونيو 2026، وتعمل /design-sync داخل طرفية Claude Code. تسحب نظام التصميم الفعلي لديك (مكونات React، ورموز CSS، والخطوط) إلى Claude Design، حتى تبدأ النماذج الأولية من مكوناتك، وتعيد دفع الكود حتى تواصل التعديل على اللوحة. تصرّح /design-login بالوصول باستخدام حسابك على claude.ai. يمكنك أنت وحدك تشغيلها، فالمهارة مُعلَّمة بأنها غير قابلة للاستدعاء من النموذج، لذا لا يستطيع Claude بدء تشغيلها بنفسه.
claude-design-mcp خادم غير رسمي مرخّص بموجب MIT، يتحكم في Claude Design من واجهات CLI الوكيلة. يعرض نحو 30 أداة، منها create_design_system وgenerate وiterate وlist_files وread_file وexport وpublish. من الناحية الداخلية يؤتمت Chrome على claude.ai، أي أنه يعتمد على نقاط نهاية داخلية غير موثقة وقد يتوقف عن العمل كلما تغير الموقع. ويذكر README بوضوح أنه غير تابع لشركة Anthropic ولا معتمد منها.
| المكوّن | مكان التشغيل | يعمل في Codex | الفشل المعتاد |
|---|---|---|---|
claude_design المدمج | يحقنه Claude Code | لا | HTTP 404 |
/design-sync | أمر شرطة مائلة في Claude Code | لا | التفويض، 403 |
claude-design-mcp | خادم stdio محلي مع Chrome | نعم | انتهاء الجلسة، مهلات زمنية |
عشر دقائق من التحقق توفّر ظهيرة كاملة من تصحيح الأخطاء. معظم حالات "MCP لا يعمل" تتبيّن أنها متطلب مفقود، لا خادم معطل.
/design-sync يحتاج إلى حساب claude.ai من الطرف الأول. إعداد API أو Bedrock أو Vertex لن يكفي./design-sync يحذّر من عمليات استيراد تستغرق ساعات، ومن تكاليف التوكنات في المستودعات الكبيرة./design-sync. شغّل claude --version للتحقق.dist/ منشور، أو React مع Storybook. Vue و Angular و Svelte غير مدعومة. ابدأ الأمر من مستودع نظام التصميم، لا من التطبيق الذي يستهلكه.💡 إذا قال
/design-loginUnknown command، فتحقق من الإصدار قبل أي شيء آخر. الإصدارات الأقدم من v2.1.234 هي المشتبه الأول.
الخادم الوحيد الذي تثبّته بنفسك هو الخادم المجتمعي، لذا يتركز هذا الإعداد عليه. الخادم المدمج و/design-sync لا يحتاجان إلى شيء يتجاوز المتطلبات أعلاه.
git clone https://github.com/e-brokenc0de/claude-design-mcp.git
cd claude-design-mcp
pnpm install
pnpm exec playwright install chromium
pnpm run chrome:cdp
pnpm run build
يشغّل البرنامج النصي chrome:cdp متصفح Chrome بملف تعريف دائم مخزَّن في .auth/cdp-chrome. سجّل الدخول إلى claude.ai في تلك النافذة مرة واحدة، وستستمر الجلسة عبر استدعاءات الأدوات.
claude mcp add --transport stdio --scope user claude-design -- node /absolute/path/to/claude-design-mcp/dist/server.js
يفصل -- بين خيارات Claude الخاصة بالأمر وبين الأمر الذي يشغّل الخادم. هل تفضّل ملفًا مشتركًا مع الفريق؟ ضع المدخل نفسه في .mcp.json في جذر المشروع:
{
"mcpServers": {
"claude-design": {
"command": "node",
"args": ["/absolute/path/to/claude-design-mcp/dist/server.js"]
}
}
}
| النطاق | من يراه | مكان التخزين |
|---|---|---|
local (الافتراضي) | أنت، في هذا المشروع | ~/.claude.json |
project | الجميع عبر التحكم بالإصدارات | .mcp.json |
user | أنت، في كل المشاريع | ~/.claude.json |
claude mcp list
claude mcp get claude-design
ثم افتح /mcp داخل الجلسة. يظهر الخادم السليم كمتصل، وإذا طلبت من Claude اعرض مشاريع Claude Design الخاصة بي يجب أن يعيد نتائج حقيقية. تطلب الخوادم المحددة بنطاق المشروع موافقتك في المرة الأولى؛ وإذا رفضتها بالخطأ، فإن claude mcp reset-project-choices يعيد الطلب.
يقرأ Codex خوادم MCP من ~/.codex/config.toml، أو من ملف .codex/config.toml الخاص بالمشروع، باستخدام جدول [mcp_servers.<name>] واحد لكل خادم. توثّق وثائق MCP الخاصة بـ Codex كل الخيارات.
codex mcp add claude-design -- node /absolute/path/to/claude-design-mcp/dist/server.js
codex mcp list
أو اكتب الجدول بنفسك:
[mcp_servers.claude-design]
command = "node"
args = ["/absolute/path/to/claude-design-mcp/dist/server.js"]
startup_timeout_sec = 30
tool_timeout_sec = 300
يستخدم Codex افتراضيًا 10 ثوانٍ للبدء و60 ثانية لكل استدعاء أداة. الأداة التي تشغّل موقعًا إلكترونيًا قد تتجاوز المدتين بسهولة، لذا رفعهما هو أول تعديل يستحق التجربة. داخل واجهة الطرفية في Codex، يعرض /mcp الخوادم النشطة.
💡 مسارات Windows: في TOML تبدأ الشرطة المائلة العكسية تسلسل هروب داخل علامات الاقتباس العادية. اكتب
C:/Users/you/claude-design-mcp/dist/server.jsبالشرطات المائلة الأمامية، أو ضع المسار بين علامات اقتباس مفردة.
قيد يجب ذكره بصراحة: يعرض README الخاص بالمجتمع إعداد Claude Code و Cursor فقط. مدخل Codex أعلاه يطبّق تنسيق Codex الموثّق على أمر التشغيل نفسه، لذا تحقق منه باستخدام codex mcp list قبل الاعتماد عليه.
يُحقن خادم claude_design المدمج بواسطة Claude Code، و/design-sync و/design-login أوامر في Claude Code، وزر التسليم يرسل الحزم إلى Claude Code. لا يحصل Codex على أي من ذلك. ما يستطيعه هو استدعاء أدوات الخادم المجتمعي مثل read_file وexport، أو العمل مباشرة من مجلد مُصدَّر أو ملف HTML مستقل، وهي ملفات عادية على القرص.
| المهمة | Claude Code | Codex |
|---|---|---|
| إضافة خادم stdio | claude mcp add name -- cmd | codex mcp add name -- cmd |
| ملف الإعدادات | ~/.claude.json، .mcp.json | ~/.codex/config.toml، .codex/config.toml |
| عرض الخوادم | claude mcp list | codex mcp list |
| اللوحة داخل الجلسة | /mcp | /mcp |
| مهلة البدء | MCP_TIMEOUT (ms) | startup_timeout_sec (الافتراضي 10) |
| مهلة الأداة | MCP_TOOL_TIMEOUT (ms) | tool_timeout_sec (الافتراضي 60) |
طابق رسالتك في الجدول، ثم اقرأ القسم المقابل.
| ما تراه | السبب الأرجح | أول خطوة |
|---|---|---|
HTTP 404 at .../v1/design/mcp | نقطة النهاية المدمجة تُرجع 404 | حدّث، ثم تجاهلها |
/design-login requires an interactive terminal | جلسة بلا واجهة، أو جلسة ويب، أو جلسة غير تفاعلية | شغّل في طرفية عادية |
status code 403 أثناء تسجيل الوصول | تم رفض التفويض | أعد التحقق من الحساب وسياسة المؤسسة |
| الخادم يفشل أو الأدوات تنتهي مهلتها | مهلة البدء أو الأداة منخفضة | ارفع قيم المهلة |
| الأدوات تعيد أخطاء تسجيل الدخول | انتهت جلسة Chrome | أعد تشغيل pnpm run chrome:cdp |
هذا الخطأ ليس من صنعك. أرجعت نقطة النهاية الخطأ 404، والخادم يُحقن ولا يُهيَّأ، وذكر التقرير أن المصادقة لم تكن السبب. لا يوجد مدخل تحذفه ولا توكن تحتاج إلى تحديثه.
/doctor مرة أخرى./mcp وانظر إلى خوادمك الخاصة. إذا كان claude_design وحده باللون الأحمر، فاعتبره ضجيجًا.claude mcp get <name> وقارنه بالعنوان في وثائق الخادم.
تظهر رسالتان أكثر من غيرهما: "DesignSync needs design-system authorization, but /design-login requires an interactive terminal and is not available in this environment" ورسالة بسيطة Unknown command. الأولى تعني أنك في جلسة لا تستطيع عرض تدفق تسجيل دخول، مثل نسخة الويب أو التشغيل بلا واجهة. ويذكر تقرير مرتبط (#91063) أنه لا يوجد مسار غير تفاعلي حتى الآن، وهذا يمنع مهام CI.
/design-login في طرفية Claude Code عادية وتفاعلية، ثم /design-sync.
تظهر رسالة 403 بنص "Couldn't record Design agent access ... Request failed with status code 403". يصادفها الناس على تطبيق macOS، وعلى Claude Code Web، وعلى CLI في Windows، وكانوا قد تأكدوا أن وصولهم عبر المتصفح يعمل، لذا لم تكن المشكلة في الخطة. عندما تحققت، كانت المشكلة #75024 ما زالت مفتوحة دون رد من المشرفين. وفي الأثناء، تأكد أن مؤسستك تسمح باستخدام Claude Design، وسجّل الدخول بحساب من الطرف الأول، ثم أعد المحاولة.
المهلات الزمنية تخص الخادم المجتمعي. في Claude Code ارفع الحدّين قبل التشغيل:
MCP_TIMEOUT=30000 MCP_TOOL_TIMEOUT=600000 claude
لا تقبل PowerShell صيغة البادئة تلك، لذا عيّن المتغيرات أولًا:
$env:MCP_TIMEOUT = 30000; $env:MCP_TOOL_TIMEOUT = 600000; claude
في Codex، ارفع startup_timeout_sec وtool_timeout_sec داخل جدول TOML بدلًا من ذلك.
يستخدم الخادم المجتمعي ملف تعريف Chrome الموجود في .auth/cdp-chrome. إذا بدأت الأدوات تعيد أخطاء تسجيل الدخول أو قوائم مشاريع فارغة، فمن المحتمل أن جلسة claude.ai انتهت.
pnpm run chrome:cdp وسجّل الدخول إلى claude.ai مجددًا.git pull وpnpm install وpnpm run build. يعتمد الخادم على نقاط نهاية داخلية، لذا تصل الإصلاحات إلى المستودع عندما يتغير الموقع.يعمل Claude Design بنموذج Claude Opus 4.7، والنموذج نفسه متاح كنموذج نصي على PicassoIA. يصلح كزوج ثانٍ من العيون لخطأ MCP لا تستطيع قراءته بنظرة سريعة. هذا هو الإجراء:
/mcp في حقل Image. إذا كان النص الصغير غير مقروء، فارفع Max Image Resolution (الافتراضي 0.5 ميغابكسل).تريد إجابات أسرع للأخطاء البسيطة؟ يعمل Claude Sonnet 5 بالطريقة نفسها.
💡 لا تلصق أبدًا توكنات حية أو كوكيز أو كلمات مرور في أي صندوق دردشة. استبدلها بعناصر نائبة أولًا.
نماذج Claude Design الأولية المليئة بمربعات رمادية بديلة تبدو غير مكتملة، والصور الجاهزة نادرًا ما تتوافق مع العلامة التجارية. توليد الصور من الطرفية نفسها التي تشغّل فيها Claude Code أو Codex يسد هذه الفجوة.
يقدّم PicassoIA واجهة API للمطورين على https://api.picassoia.com/v1 وموصّل MCP، فيمكن لوكيل الذكاء الاصطناعي أن يطلب الوسائط كأي استدعاء أداة آخر. المهام غير متزامنة: أنشئ طلب تنبؤ، ثم استعلم عن حالته بشكل متكرر حتى يكتمل، ثم اجلب النتيجة. يمكن لكل حساب تشغيل ما يصل إلى 5 تنبؤات في الوقت نفسه، مشتركة بين التوكنات واتصالات MCP، وتُدار الاتصالات من picassoia.com/en/mcp/accounts بعد تسجيل الدخول. تحقّق من صفحة الأسعار لمعرفة ما تتضمنه خطتك قبل أن تبني عليها.
ثلاثة نماذج مهمة لأعمال التصميم:
على الموقع، Seedream 5 Pro خيار آخر لتحويل النص إلى صورة، لمشاهد واقعية كالصور الفوتوغرافية.
كل حل أعلاه ينتهي عند النقطة نفسها: خط التصميم الذي يعمل ما زال يحتاج إلى صور. افتح Picasso IA Image، واكتب مشهدًا كما تشرح لمصوّر محترف، وشاهده يُصيَّر. غيّر العدسة والإضاءة والموقع حتى يبدو الإطار صحيحًا، ثم أرسل أفضل صورة عبر Image Editor Pro للمسات الأخيرة، أو حرّكها باستخدام Picasso IA Video. جرّب ثلاثة أوامر نصية اليوم: واحدًا لبانر البطل، وواحدًا للقطة منتج، وواحدًا لصورة شخصية، وانظر كم سيكون نموذجك الأولي التالي أسرع في الاكتمال.
اختر لغتك
