Refero Styles مقابل Design Extractor
يُنشئ Design Extractor ملف DESIGN.md من أي رابط عام تعطيه إياه. يتبع الملف مواصفات DESIGN.md من Google، ويقدّم كل مكوّن يختاره من الصفحة على شكل وصفة HTML و CSS يستطيع وكيل البرمجة لديك إعادة بنائها. ويُتحقَّق من كل وصفة مقابل الموقع الحي، أو تُعلَّم مع ذكر السبب. ويعمل أيضًا على المواقع التي لا تستجيب إلا للزوار من دول معينة.
Refero Styles مكتبة مجانية كبيرة لأنماط المواقع، يضم كل نمط فيها ألوانه وخطوطه ومسافاته ومكوناته بعدة صيغ. هل الصيغة جديدة عليك؟ اقرأ ما هو ملف DESIGN.md.
تم التحقق في بالرجوع إلى styles.refero.design، إحدى صفحات الأنماط لديه وخريطة موقع الأنماط لديه. العروض والأسعار تتغير، لذا تحقّق من موقعهم قبل أن تقرر.
لماذا Design Extractor
يتبع مواصفات DESIGN.md من Google
لا تستخدم مقدمة YAML (front matter) إلا الخصائص التي تعرّفها المواصفات، دون أي مفاتيح مخصصة في المستوى الأعلى. وتأتي الأقسام المعيارية بترتيب المواصفات، من Overview إلى Do's and Don'ts. ولا تستخدم مدخلات المكونات في مقدمة YAML إلا الخصائص الثماني التي تحددها المواصفات، بقيم صريحة. يمكنك فحص أي ملف باستخدام DESIGN.md Validator المجاني.
وصفة لكل مكوّن يختاره من الصفحة
الترويسة والتذييل والأزرار وحقول الإدخال والبطاقات وغيرها من المكونات المختارة من الصفحة تأتي كلٌّ منها على شكل وصفة: شيفرة HTML و CSS مختزلة بقيم صريحة، داخل قسم Components في ملف DESIGN.md. تسرد كل وصفة أجزاءها وحالات التمرير (hover) والتركيز (focus) التي رُصدت على الموقع، ليتمكن وكيل البرمجة لديك من إعادة بناء المكوّن بدل تخمينه.
مُتحقَّق منه مقابل الموقع الحي
تُعرض كل وصفة وحدها ويُتحقَّق منها مقابل الموقع الحي: مطابقة بنيوية بين الأجزاء المعروضة وما قيس على الصفحة، ومقارنة على مستوى البكسل مع لقطة جديدة للعنصر الحقيقي. الوصفة التي تفشل يُعاد بناؤها ويُتحقَّق منها مرة أخرى. وإن ظلت لا تجتاز الفحص فإنها تُعلَّم مع ذكر السبب، ولا تُقدَّم أبدًا على أنها مُتحقَّق منها. تعرض صفحة النتيجة مدى تطابق المكونات وعدد ما تغطيه من ألوان الموقع وأنماط نصوصه: شاهد Stripe في المعرض.
يعمل على المواقع المقيّدة جغرافيًا
بعض المواقع لا تستجيب إلا للزوار من دول معينة. عندما تفشل عملية لهذا السبب، تعرض صفحة النتيجة أداة لاختيار الدولة، تتصدرها الدول التي تبيّن أن الصفحة تُحمَّل منها، ثم تُجري عملية الاستخراج نفسها عبر متصفح في الدولة التي تختارها. تكلّف العملية عبر دولة أخرى سعر Pro مضافًا إليه رسم إضافي من الرصيد قدره 6 (المجموع: 16 رصيدًا). وإذا فشلت عملية الاستخراج، نعيد إليك رصيدك.
جنبًا إلى جنب
| Refero Styles | Design Extractor | |
|---|---|---|
| التوافق مع المواصفات | غير متوفر | يتبع مواصفات DESIGN.md من Google: مقدمة YAML لا تحتوي إلا خصائص المواصفات دون مفاتيح مخصصة في المستوى الأعلى، والأقسام المعيارية بترتيب المواصفات، ومدخلات مكونات تقتصر على خصائص المواصفات الثماني بقيم صريحة. |
| وصفات المكونات | يوصف كل مكوّن نصيًا، مع دوره وقياساته، دون HTML. | كل مكوّن يختاره من الصفحة، مثل الترويسة والتذييل والأزرار وحقول الإدخال والبطاقات، يأتي على شكل وصفة: شيفرة HTML و CSS مختزلة في قسم Components، ليتمكن وكيل البرمجة لديك من إعادة بنائه. |
| التحقق مقابل الموقع الحي | غير متوفر | نعم. تُعرض كل وصفة وحدها ويُتحقَّق منها مقابل الموقع الحي: مطابقة بنيوية لأجزائها ومقارنة على مستوى البكسل. المكوّن الذي لا يجتاز الفحص يُعلَّم مع ذكر السبب، ولا يُقدَّم أبدًا على أنه مُتحقَّق منه. |
| المواقع المقيّدة جغرافيًا | غير متوفر | نعم. عندما يحظر موقع الزوار من بعض الدول، تعرض العملية الفاشلة أداة لاختيار الدولة، تتصدرها الدول التي تُحمَّل منها الصفحة، ثم تُجري عملية الاستخراج نفسها عبر متصفح هناك. تكلّف العملية عبر دولة أخرى سعر Pro مضافًا إليه رسم إضافي من الرصيد قدره 6 (المجموع: 16 رصيدًا). |
| ما هو | مكتبة مجانية لأنماط المواقع، في مرحلة تجريبية (beta)، من Refero، منتج المراجع المرئية للواجهات على refero.design. | أداة توليد: تعطيها رابطًا عامًا، فتُعيد ملف DESIGN.md لذلك الموقع. |
| أي موقع عند الطلب | غير متوفر | نعم. الصق أي رابط عام وتبدأ العملية فورًا. |
| التغطية | 1,342 من صفحات الأنماط، كما هو مُدرج في خريطة موقع الأنماط لديه. | أي موقع ويب عام، إضافة إلى معرض لعلامات تجارية مستخرجة مسبقًا. |
| الصيغ لكل نمط | DESIGN.md (مختصر وموسّع)، و Tailwind v4، ومتغيرات CSS، ورموز التصميم. | ملف DESIGN.md واحد، برموز التصميم في مقدمة YAML ووصفات للمكونات بـ HTML و CSS. |
| السعر | التصفح والنسخ مجانيان. | رصيد مدفوع مسبقًا، بلا اشتراك. تبدأ الباقات من 5 $ مقابل رصيد قدره 50، وتكلّف عملية استخراج Pro 10 أرصدة. |
| حداثة البيانات | لقطات ثابتة. استُخرج نمط Apple في 2026-09-20. | يُصنع من الموقع الحي لحظة تشغيلك العملية. |
| وصول الوكلاء | تحتوي كل صفحة نمط على رابط إلى MCP الخاص بـ Refero لـ Claude و ChatGPT و Cursor و Codex وغيرها. | خادم MCP بعيد تقبل أداة الاستخراج فيه أي رابط، من Claude Code و claude.ai و ChatGPT و Codex و Cursor وغيرها من العملاء. |
| إضافة المتصفح | غير متوفر | إضافة Chrome تستخرج علامة التبويب المفتوحة لديك. |
ما يقدّمه Refero Styles
- مكتبة مجانية لأنماط المواقع، يمكن تصفحها حسب الطابع، مثل SaaS بالوضع الداكن أو التخطيطات التحريرية.
- عدة صيغ لكل نمط: DESIGN.md (مختصر وموسّع)، و Tailwind v4، ومتغيرات CSS، ورموز التصميم.
- روابط إلى MCP الخاص بـ Refero لـ Claude و ChatGPT و Cursor و Codex وغيرها.
مكتبة جاهزة مقابل أي رابط عند الطلب
تغطي المكتبة المواقع التي أضافها إليها أحدهم مسبقًا. أما Design Extractor فيقرأ الموقع الحي الذي تحدده، فيغطي منتجك أنت، أو أحد عملائك، أو منافسًا، أو علامة تجارية متخصصة، كما تبدو اليوم.
الصق الرابط في الصفحة الرئيسية، أو دع وكيلك يتولى ذلك عبر خادم MCP. شاهد ملفات مكتملة، بوصفاتها ونتائج فحصها، في المعرض.
كيف تنتقل من Refero Styles
- الصق رابط الموقع في الصفحة الرئيسية لـ Design Extractor وشغّل عملية استخراج Pro.
- احفظ النتيجة باسم DESIGN.md في جذر مستودعك وأبقِ الإشارة إليه في AGENTS.md أو CLAUDE.md. وافحص التعديلات اليدوية باستخدام DESIGN.md Validator المجاني.
- أو دع وكيلك يتولى ذلك: اربط خادم MCP واطلب منه استخراج الموقع.
الخلاصة
اختر Design Extractor إذا كنت تحتاج إلى ملف DESIGN.md لأي موقع عام، لا للمواقع الموجودة في مكتبة فقط، مع وصفات للمكونات مُتحقَّق منها على الموقع الحي. فهو يقرأ الموقع كما يبدو الآن ويتبع مواصفات Google، مع وصفة لكل مكوّن يختاره من الصفحة، تُعلَّم مع ذكر السبب إذا لم تجتز الفحص. ويصل إلى المواقع المقيّدة جغرافيًا. ويستطيع وكيلك تشغيله عبر MCP.
مقارنات أخرى
getdesign.md مقابل Design Extractor
مجموعة مختارة من ملفات DESIGN.md الجاهزة مقارنةً بملف DESIGN.md متوافق مع المواصفات من أي رابط، مع وصفات للمكونات مُتحقَّق منها على الموقع الحي.
designmd.me مقابل Design Extractor
مقارنة بين أداتين تحوّلان الرابط إلى DESIGN.md من حيث التوافق مع المواصفات، ووصفات المكونات، والتحقق على الموقع الحي، والسعر.
TypeUI مقابل Design Extractor
إضافة Chrome المجانية من TypeUI، التي تملأ قالبها الخاص من أنماط الصفحة المفتوحة في علامة التبويب، مقارنةً بملف DESIGN.md متوافق مع المواصفات مع وصفات للمكونات مُتحقَّق منها على الموقع الحي.
الأسئلة الشائعة
Refero Styles مقابل Design Extractor: أسئلة
إجابات قصيرة عن Refero Styles و Design Extractor، تم التحقق منها في 2026-10-20.
نعم. في 2026-10-20 كان تصفّح الأنماط ونسخها على styles.refero.design مجانيًا. وتحتوي صفحاته على روابط إلى MCP الخاص بـ Refero على refero.design.
لا. لا يتيح Refero Styles أي طريقة لإرسال رابطك الخاص: أنت تختار من مكتبته. أما Design Extractor فيُنشئ ملف DESIGN.md من أي رابط عام عند تشغيلك العملية.
لا. يُنتج Design Extractor ملفًا واحدًا: ملف DESIGN.md يتبع مواصفات Google، برموز التصميم في مقدمة YAML وكل مكوّن يختاره من الصفحة على شكل وصفة من شيفرة HTML و CSS مختزلة. يقرؤه وكيل البرمجة لديك ويكتب الأنماط التي يستخدمها مشروعك.
تُعرض كل وصفة مكوّن وحدها وتُقارَن بالموقع الحي: مطابقة بنيوية لأجزائها مع ما قيس على الصفحة، ومقارنة على مستوى البكسل مع لقطة جديدة للعنصر الحقيقي. الوصفة التي لا تجتاز الفحص تُعلَّم مع ذكر السبب، ولا تُقدَّم أبدًا على أنها مُتحقَّق منها.
أدرجت خريطة موقع الأنماط لديه 1,342 من صفحات الأنماط في 2026-10-20.
يستطيع Design Extractor إجراء عملية الاستخراج من دولة أخرى. بعد أن تفشل عملية لهذا السبب، تعرض صفحة النتيجة أداة لاختيار الدولة، تتصدرها الدول التي تُحمَّل منها الصفحة، ثم تُجري عملية الاستخراج نفسها عبر متصفح هناك. تكلّف العملية عبر دولة أخرى سعر Pro مضافًا إليه رسم إضافي من الرصيد قدره 6 (المجموع: 16 رصيدًا). وإذا فشلت عملية الاستخراج، نعيد إليك رصيدك.
احصل على ملف DESIGN.md للموقع الذي تحتاجه
الصق أي رابط عام. يأخذ مستوى Pro عينات من الصفحات الرئيسية للموقع ويُعيد ملف DESIGN.md متوافقًا مع المواصفات، مع وصفات للمكونات مُتحقَّق منها على الموقع الحي.