دليل

زوّد وكيل البرمجة بمواصفات التصميم عند الطلب عبر MCP

يستطيع وكيلك جلب مواصفات التصميم كما يجلب التوثيق. اربط خادم MCP الخاص بـ Design Extractor، وسيتمكن الوكيل من استخراج ملف DESIGN.md لأي موقع عام، وانتظار اكتمال العملية، وقراءة الملف والبناء منه، كل ذلك ضمن مهمة واحدة.

لا نسخ للملفات هنا وهناك ولا تبويب متصفح: تذكر الموقع في الموجّه، فتصل المواصفات إلى سياق الوكيل.

كُتب من أجل المطورين الذين يبنون وكلاء ومسارات عمل للوكلاء. آخر تحديث .

ما الذي ستحصل عليه

  • خادم MCP متصل بـ Claude Code أو Codex أو Cursor أو claude.ai، مع تسجيل الدخول بحسابك أو بمفتاح API.
  • تسلسل الأدوات الذي يتبعه الوكيل: التحقق، ثم الاستخراج، ثم الانتظار، ثم القراءة.
  • موجّهات تجعل الوكيل ينفذ الدورة كاملة، من الاستخراج إلى الواجهة.
  • التكلفة والحدود التي يجب أن تخطط حولها.

ما الذي يحصل عليه الوكيل

يعمل الخادم على https://www.design-extractor.com/api/mcp ويستخدم streamable HTTP. من خلاله يستطيع الوكيل بدء استخراج موقع عام، وانتظار اكتماله، وقراءة ملف DESIGN.md النهائي، والتحقق من السعر ومن رصيدك، وعرض ما استخرجته سابقًا. وتظهر كل عملية أيضًا في «عمليات الاستخراج» على الموقع، مثل أي عملية أخرى.

الملف هو نفسه الذي يُنتجه الموقع: رموز الألوان والخطوط والمسافات واستدارة الحواف والمكونات في الأعلى، وقواعد استخدامها في الأسفل. ويتبع مواصفات DESIGN.md من Google، لذا يستطيع الوكيل قراءته مثل أي مواصفات أخرى.

اربط الخادم

اختر العميل الذي تستخدمه. يسجّل Claude Code و Codex و claude.ai و Claude Desktop و ChatGPT الدخول بحسابك؛ أما Cursor والسكربتات فتستخدم مفتاح API.

  1. أضف الخادم مرة واحدة. لا حاجة إلى مفتاح.

    claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

  2. شغّل /mcp، واختر design-extractor ثم Authenticate. سجّل الدخول ووافق في الصفحة التي تُفتح.

  3. اطلب موقعًا: «استخرج تصميم stripe.com».

يسجّل Claude Code و Codex و claude.ai و Claude Desktop و ChatGPT الدخول بحسابك. أما Cursor و n8n والسكربتات فتستخدم مفتاح API شخصيًا من صفحة الحساب.

لـ Claude Code و Codex توجد أيضًا إضافة برمجية (plugin). تجمع الخادم مع مهارة apply-designmd ترشد الوكيل خلال استخراج موقع مرجعي وتطبيق ملف DESIGN.md الخاص به على شيفرتك. بعد التثبيت، شغّل /mcp في Claude Code وصادِق على خادم الإضافة البرمجية.

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor
codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

كل العملاء، ومقتطف Agent SDK، وإعدادات المفاتيح موجودة في صفحة توثيق خادم MCP.

الأدوات وترتيب استدعائها

الأداةما تفعله
list_my_extractionsعمليات الاستخراج الخاصة بك، الأحدث أولًا. استدعِها أولًا حتى لا تدفع مرتين مقابل موقع لديك بالفعل.
get_pricingتكلفة عملية الاستخراج الحالية بالرصيد.
get_creditsرصيدك المتبقي.
extract_designتبدأ استخراج رابط عام وتخصم الرصيد. مرّر المستوى PRO لأخذ عيّنة من الصفحات الرئيسية للموقع. تعود فور إدراج العملية في قائمة الانتظار.
get_extractionتأخذ اسم الموقع أو رابطه. تُعيد الحالة أثناء عمل العملية، ثم نص ملف DESIGN.md كاملًا. والعملية الفاشلة تذكر السبب.

تستغرق العملية دقيقة على الأقل، لذا يكون التسلسل: البدء، ثم الاستعلام الدوري. يخبر الخادم الوكيل بذلك بنفسه؛ عليك فقط تسمية الموقع.

1. list_my_extractions    is the site already there?
2. extract_design         url and tier PRO
3. wait about 60 seconds
4. get_extraction         site name, every 25 seconds until COMPLETED
5. save the DESIGN.md text and build from it

مثال تطبيقي: ⁨Supabase⁩

لنفترض أن الوكيل طُلب منه البناء على طراز ⁨supabase.com⁩. حين تُبلغ get_extraction باكتمال العملية، تُعيد ملف DESIGN.md كاملًا نصًا. ملف DESIGN.md الخاص بـ ⁨Supabase⁩ في المعرض ناتج عن النوع نفسه من عمليات استخراج Pro، لذا يوضح ما يصل إلى سياق الوكيل. ويبدأ هكذا:

أعلى ملف DESIGN.md الخاص بـ ⁨Supabase⁩ من المعرض، مختصرًا إلى بضعة رموز لكل مجموعة.
---
name: Supabase
colors:
  primary: "#0E7E4E"
  primary-fill: "#007243"
  primary-deep: "#15593B"
  focus-ring: "#30BA79"
  brand: "#3FCF8E"
  brand-tint: "#A9F1CA"
typography:
  hero-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: normal
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 2.66667px
  sm: 4px
  md: 5.33333px
---

مستخرج من موقع ⁨Supabase⁩ العام، وليس إرشادات رسمية للعلامة التجارية. قراءة ملف DESIGN.md الكامل الخاص بـ ⁨Supabase⁩

تحت الرموز تأتي الأقسام التي يقرأها الوكيل للقواعد والوصفات: ⁨Overview، Colors، Typography، Layout، Elevation & Depth، Shapes، Components، Do's and Don'ts، Responsive Behavior، Iteration Guide، Known Gaps⁩. يحتوي قسم Components وحده على 49 وصفة بـ HTML و CSS، فيعيد الوكيل بناء زر أو بطاقة من قيم مَقيسة بدلًا من تخمينها.

الموجّهات

سمِّ الأدوات والموقع وما سيحدث للملف. كُتبت هذه الموجّهات لهذا الدليل؛ غيّر الموقع والمهمة.

الاستخراج والبناء في مهمة واحدة

Use the design-extractor tools to get a Pro DESIGN.md of supabase.com.
Check list_my_extractions first, so we don't pay twice for a recent run.
When it is complete, save it as DESIGN.md in the repo root.
Then restyle src/app/settings with its color, typography and rounded tokens
and its component recipes. Keep the layout and logic as they are.

قارن قبل أن تختار

Get Pro DESIGN.md files for supabase.com and linear.app with the design-extractor tools.
Compare their primary colors, fonts and radii in a short table,
and tell me which one fits a dense admin dashboard better and why.

تبني وكيلك الخاص؟ مرّر الخادم في خيار mcpServers في Agent SDK مع مفتاح API، واسمح بـ mcp__design-extractor__*؛ ستجد المقتطف كاملًا في توثيق MCP.

الرصيد والحدود

  • الرصيد نفسه المستخدم على الموقع. تكلّف عملية استخراج Pro 10 أرصدة، سواء بدأتها على الموقع أو بدأها وكيلك. اشحن الرصيد من صفحة الأسعار.
  • لا خصم مزدوج لعملياتك الحديثة. طلب موقع استخرجته مؤخرًا يعيد استخدام عملية الاستخراج تلك.
  • الصفحات العامة فقط. لا تُدعم الصفحات التي تتطلب تسجيل الدخول أو الموجودة على localhost أو على شبكة خاصة.
  • المفاتيح. حتى خمسة مفاتيح API نشطة، كل منها صالح لمدة سنة ويمكن إبطاله من صفحة حسابك. العميل الذي يسجّل الدخول يجدد رمز الوصول الخاص به بنفسه؛ ويمكنك فك ربطه من الصفحة نفسها.

الأسئلة الشائعة

⁨مواصفات التصميم لوكلاء البرمجة عبر MCP⁩: أسئلة شائعة

إجابات قصيرة عمّا يسأل عنه الناس قبل تجربة ذلك.

نعم. تستخدم الحساب نفسه والرصيد المدفوع مسبقًا نفسه: تكلّف عملية استخراج Pro 10 أرصدة. يستطيع الوكيل استدعاء ⁨get_pricing⁩ لمعرفة التكلفة الحالية و ⁨get_credits⁩ لمعرفة رصيدك؛ وحين لا يكفي الرصيد، ترفض ⁨extract_design⁩ الطلب وتذكر السبب.

ليس مع العملاء الذين يسجّلون الدخول: يفتح claude.ai و Claude Desktop و ChatGPT و Claude Code و Codex صفحة موافقة مرة واحدة، ويحتفظون برمز وصول (token) يتجدد تلقائيًا. أما Cursor و n8n والسكربتات و Agent SDK فتستخدم مفتاح API شخصيًا من صفحة حسابك.

دقيقة على الأقل. تعود ⁨extract_design⁩ فورًا؛ ينتظر الوكيل نحو دقيقة، ثم يستدعي ⁨get_extraction⁩ باسم الموقع كل 25 ثانية حتى يصبح ملف DESIGN.md جاهزًا.

ليس مقابل موقع استخرجته مؤخرًا: طلبه مجددًا يعيد استخدام عملية الاستخراج الخاصة بك، ويذكر الرد أنه لم يُخصم أي رصيد. أما الموقع الذي استخرجه أشخاص آخرون فقط فيكلّف السعر المعتاد. تعرض ⁨list_my_extractions⁩ ما لديك بالفعل.

لا. يلتقط الخادم الصفحة من رابطها، لذا لا تُدعم الصفحات التي تتطلب تسجيل الدخول أو الموجودة على localhost أو على شبكة خاصة. انشر معاينة عامة، أو استخرج الموقع المنشور.

تريد أن ترى ملف DESIGN.md قبل الربط؟

شغّل عملية استخراج واحدة على الموقع. يحصل وكيلك على الملف نفسه عبر الخادم.

احصل على ملف DESIGN.md من أي موقع ويب

أدلة ذات صلة

عرض كل أدلة DESIGN.md