TypeUI مقابل Design Extractor
DESIGN.md Style Extractor من TypeUI إضافة Chrome مجانية تقرأ أنماط الصفحة المفتوحة في علامة التبويب وتملأ قالب DESIGN.md الخاص بـ TypeUI. أما ملف Design Extractor فيتبع مواصفات DESIGN.md من Google، ويقدّم كل مكوّن يختاره من الصفحة على شكل وصفة HTML و CSS يستطيع وكيل البرمجة لديك إعادة بنائها. ويُتحقَّق من كل وصفة مقابل الموقع الحي، أو تُعلَّم مع ذكر السبب. ويعمل أيضًا على المواقع التي لا تستجيب إلا للزوار من دول معينة.
هل الصيغة جديدة عليك؟ اقرأ أولًا ما هو ملف DESIGN.md.
تم التحقق في بالرجوع إلى ملف README للإضافة وشيفرتها المصدرية، صفحتها في Chrome Web Store وملف README الخاص بـ TypeUI. العروض والأسعار تتغير، لذا تحقّق من موقعهم قبل أن تقرر.
لماذا 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 رصيدًا). وإذا فشلت عملية الاستخراج، نعيد إليك رصيدك.
جنبًا إلى جنب
| TypeUI | Design Extractor | |
|---|---|---|
| التوافق مع المواصفات | غير متوفر | يتبع مواصفات DESIGN.md من Google: مقدمة YAML لا تحتوي إلا خصائص المواصفات دون مفاتيح مخصصة في المستوى الأعلى، والأقسام المعيارية بترتيب المواصفات، ومدخلات مكونات تقتصر على خصائص المواصفات الثماني بقيم صريحة. |
| وصفات المكونات | تظهر المكونات كعدد لكل نوع (الأزرار، والروابط، وحقول الإدخال، والبطاقات، والتنقل، والقوائم، والجداول) تحت إرشادات عامة للمكونات. | كل مكوّن يختاره من الصفحة، مثل الترويسة والتذييل والأزرار وحقول الإدخال والبطاقات، يأتي على شكل وصفة: شيفرة HTML و CSS مختزلة في قسم Components، ليتمكن وكيل البرمجة لديك من إعادة بنائه. |
| التحقق مقابل الموقع الحي | غير متوفر | نعم. تُعرض كل وصفة وحدها ويُتحقَّق منها مقابل الموقع الحي: مطابقة بنيوية لأجزائها ومقارنة على مستوى البكسل. المكوّن الذي لا يجتاز الفحص يُعلَّم مع ذكر السبب، ولا يُقدَّم أبدًا على أنه مُتحقَّق منه. |
| المواقع المقيّدة جغرافيًا | غير متوفر | نعم. عندما يحظر موقع الزوار من بعض الدول، تعرض العملية الفاشلة أداة لاختيار الدولة، تتصدرها الدول التي تُحمَّل منها الصفحة، ثم تُجري عملية الاستخراج نفسها عبر متصفح هناك. تكلّف العملية عبر دولة أخرى سعر Pro مضافًا إليه رسم إضافي من الرصيد قدره 6 (المجموع: 16 رصيدًا). |
| ما هو | DESIGN.md Style Extractor، إضافة Chrome مجانية من Bergside SRL، صانعة TypeUI. الإصدار 0.4.0، ونحو 40,000 من المستخدمين على Chrome Web Store، مفتوحة المصدر بموجب ترخيص MIT. | أداة توليد: أعطها رابطًا عامًا على الموقع، أو عبر MCP، أو من إضافة Chrome، واحصل على ملف DESIGN.md لذلك الموقع. |
| ما تتبعه المخرجات | قالب DESIGN.md الخاص بـ TypeUI: Mission و Brand و Style Foundations و Accessibility و Writing Tone و Rules وغيرها، دون مقدمة YAML. ويمكنه أيضًا كتابة ملف SKILL.md. | مواصفات DESIGN.md من Google: رموز التصميم في مقدمة YAML والأقسام المعيارية بترتيب المواصفات. |
| كيف يقرأ الموقع | يقرأ الأنماط المحسوبة لما يصل إلى 280 من العناصر المرئية في الصفحة المفتوحة في علامة التبويب، داخل متصفحك، دون أي طلبات شبكة. | تفتح خوادمنا الرابط في متصفح وتحلّل الصفحة المعروضة. ويأخذ مستوى Pro أيضًا عينات من الصفحات الرئيسية للموقع. |
| الصفحات التي يمكنه قراءتها | الصفحة المفتوحة في علامة التبويب، بما في ذلك الصفحات التي سجّلت الدخول إليها. | الصفحات العامة فقط. الصفحات التي تتطلب تسجيل الدخول، أو على localhost، أو على شبكة خاصة غير مدعومة بعد. |
| أين تذهب النتيجة | تُعرض في النافذة المنبثقة، حيث تنسخها أو تنزّلها. ويكتب زر Quick install ملف SKILL.md في مجلد المهارات الخاص بـ Claude Code أو Codex أو Cursor في مشروع تختاره. | تُحفظ في «عمليات الاستخراج» في حسابك، حيث تعدّلها أو تنسخها أو تنزّلها. ويستطيع وكيلك قراءتها عبر MCP. |
| السعر | مجانية. بلا حساب ولا دفع. | رصيد مدفوع مسبقًا، بلا اشتراك. تبدأ الباقات من 5 $ مقابل رصيد قدره 50، وتكلّف عملية استخراج Pro 10 أرصدة. المعرض والأدوات المجانية لا تكلّف شيئًا. |
| وصول الوكلاء | تعمل الإضافة من نافذتها المنبثقة. وتقدّم أداة CLI المنفصلة وخادم MCP المستضاف من TypeUI مهارات التصميم المختارة وموجّهات الواجهات (UI prompts) الخاصة بها. | خادم MCP بعيد تقبل أداة الاستخراج فيه أي رابط، من Claude Code و claude.ai و ChatGPT و Codex و Cursor وغيرها من العملاء. |
ما يقدّمه TypeUI
- إضافة Chrome مجانية ومفتوحة المصدر (MIT) لديها نحو 40,000 من المستخدمين على Chrome Web Store، بلا حساب ولا دفع.
- تعمل بالكامل داخل متصفحك على الصفحة المفتوحة في علامة التبويب، بما في ذلك الصفحات التي سجّلت الدخول إليها.
- قيم الخطوط والألوان والمسافات واستدارة الحواف والظلال والحركة في ملف DESIGN.md بصيغة TypeUI الخاصة، أو في ملف SKILL.md.
- انسخ الملف أو نزّله من النافذة المنبثقة، أو ثبّت ملف SKILL.md عبر Quick install في مشروع Claude Code أو Codex أو Cursor.
- إلى جانب الإضافة، تقدّم TypeUI مهارات تصميم مختارة، وموجّهات للواجهات، وأداة CLI مفتوحة المصدر، وخادم MCP مستضافًا، إضافة إلى إصدار Pro بملفات مهارات تصميم محسّنة، وموجّهات واجهات للتخطيطات، ومجتمع خاص على Discord.
أين يختلفان
تلخّص إضافة TypeUI قيم الأنماط التي تجدها في صفحة واحدة وتضيف إرشادات عامة من قالبها. أما Design Extractor فيعرض الموقع، ويختار مكوناته ويكتب وصفة لكلٍّ منها، ثم يتحقق من كل وصفة مقابل الموقع الحي، فيعرف وكيلك أي المكونات يمكنه إعادة بنائها كما هي مكتوبة وأيها عُلِّم، مع السبب. شاهد ذلك على Stripe في المعرض.
تفضّل البدء من علامة التبويب المفتوحة لديك؟ إضافة Chrome من Design Extractor ترسلها عبر عملية الاستخراج نفسها، بالحساب والرصيد نفسيهما. ويستطيع وكيلك أيضًا بدء عملية وقراءة النتيجة عبر خادم MCP. شاهد مزيدًا من الملفات المكتملة في المعرض.
كيف تنتقل من TypeUI
- الصق رابط الموقع في الصفحة الرئيسية لـ Design Extractor، أو انقر Extract this page في إضافة Chrome، وشغّل عملية استخراج Pro.
- احفظ النتيجة باسم DESIGN.md في جذر مستودعك بدلًا من الملف القديم. وتظل الإشارة إليه في AGENTS.md أو CLAUDE.md تعمل.
- إذا استخدمت Quick install، فاحذف مجلد مهارة design-system الذي كتبته TypeUI وأبقِ الإشارة إلى ملف DESIGN.md.
- لكي يُجري وكيلك عمليات الاستخراج بنفسه، اربط خادم MCP.
الخلاصة
اختر Design Extractor إذا كنت تحتاج إلى ملف DESIGN.md يتبع مواصفات Google، مع وصفة لكل مكوّن يختاره من الصفحة، يُتحقَّق من كلٍّ منها مقابل الموقع الحي أو تُعلَّم مع ذكر السبب، ويُحفظ في حسابك. ويصل إلى المواقع المقيّدة جغرافيًا. ويستطيع وكيلك تشغيله عبر MCP. أما إضافة TypeUI فمجانية وتقرأ الصفحات التي سجّلت الدخول إليها، كما يوضح الجدول.
مقارنات أخرى
getdesign.md مقابل Design Extractor
مجموعة مختارة من ملفات DESIGN.md الجاهزة مقارنةً بملف DESIGN.md متوافق مع المواصفات من أي رابط، مع وصفات للمكونات مُتحقَّق منها على الموقع الحي.
designmd.me مقابل Design Extractor
مقارنة بين أداتين تحوّلان الرابط إلى DESIGN.md من حيث التوافق مع المواصفات، ووصفات المكونات، والتحقق على الموقع الحي، والسعر.
Refero Styles مقابل Design Extractor
مكتبة مجانية كبيرة لأنماط المواقع مقارنةً بملف DESIGN.md متوافق مع المواصفات من أي رابط، مع وصفات للمكونات مُتحقَّق منها على الموقع الحي.
الأسئلة الشائعة
TypeUI مقابل Design Extractor: أسئلة
إجابات قصيرة عن TypeUI و Design Extractor، تم التحقق منها في 2026-10-20.
نعم. في 2026-10-20 كانت الإضافة مجانية ومفتوحة المصدر بموجب ترخيص MIT، بلا حساب ولا دفع. أما Design Extractor فليس مجانيًا: تستهلك عمليات الاستخراج رصيدًا مدفوعًا مسبقًا، بباقات تبدأ من 5 $ مقابل رصيد قدره 50، و 10 أرصدة لعملية استخراج Pro. المعرض والأدوات المجانية لا تكلّف شيئًا.
لا. يتبع الملف صيغة TypeUI DESIGN.md مفتوحة المصدر، بأقسام مثل Mission و Brand و Style Foundations و Rules، ولا يكتب الإصدار 0.4.0 أي مقدمة YAML، لذا فهو لا يتبع مواصفات DESIGN.md من Google. أما Design Extractor فيتبع مواصفات Google، وتفحص أداة DESIGN.md Validator المجانية أي ملف مقابلها.
ملف DESIGN.md يتبع مواصفات Google، مع رموز التصميم في مقدمة YAML، وكل مكوّن يختاره من الصفحة، مثل الترويسة والتذييل والأزرار وحقول الإدخال والبطاقات، على شكل وصفة من شيفرة HTML و CSS مختزلة. يُتحقَّق من كل وصفة مقابل الموقع الحي بمطابقة بنيوية ومقارنة على مستوى البكسل، والوصفة التي لا تجتاز الفحص تُعلَّم مع ذكر السبب.
نعم. فهي تقرأ الصفحة المفتوحة في علامة التبويب داخل متصفحك، لذا تعمل على الصفحات التي سجّلت الدخول إليها. أما Design Extractor فيقرأ الصفحات العامة فقط: الصفحات التي تتطلب تسجيل الدخول، أو على localhost، أو على شبكة خاصة غير مدعومة بعد.
يستطيع Design Extractor إجراء عملية الاستخراج من دولة أخرى. بعد أن تفشل عملية لهذا السبب، تعرض صفحة النتيجة أداة لاختيار الدولة، تتصدرها الدول التي تُحمَّل منها الصفحة، ثم تُجري عملية الاستخراج نفسها عبر متصفح هناك. تكلّف العملية عبر دولة أخرى سعر Pro مضافًا إليه رسم إضافي من الرصيد قدره 6 (المجموع: 16 رصيدًا). وإذا فشلت عملية الاستخراج، نعيد إليك رصيدك.
نعم. كلاهما يُنتج ملف DESIGN.md يوضع في مستودعك، فيبقى إعداد وكيلك كما هو. شغّل الموقع عبر Design Extractor، على الموقع أو من خلال إضافة Chrome الخاصة به، واستبدل الملف. وإذا استخدمت Quick install، فاحذف مجلد مهارة design-system الذي كتبته TypeUI وأبقِ الإشارة إلى ملف DESIGN.md.
احصل على ملف DESIGN.md للموقع الذي تحتاجه
الصق أي رابط عام. يأخذ مستوى Pro عينات من الصفحات الرئيسية للموقع ويُعيد ملف DESIGN.md متوافقًا مع المواصفات، مع وصفات للمكونات مُتحقَّق منها على الموقع الحي.