إضافة Design Extractor لـ Chrome
تحوّل إضافة Design Extractor لـ Chrome الموقع المفتوح في تبويبك الحالي إلى ملف DESIGN.md: ملف نظام تصميم يضم ألوان الموقع وخطوطه ومسافاته وأشكاله وقواعد مكوناته، مكتوب لوكلاء البرمجة مثل Claude Code و Cursor و Copilot. نقرة واحدة في شريط الأدوات، دون لصق أي رابط.
التثبيت مجاني. كل عملية استخراج تستهلك رصيدًا من رصيدك المدفوع مسبقًا، بالسعر نفسه المعتمد على الموقع.
ماذا تفعل
ملف DESIGN.md من التبويب الذي تتصفحه
تستخرج الصفحة المفتوحة في تبويبك
بنقرة واحدة ترسل عنوان التبويب الذي تتصفحه إلى عملية الاستخراج نفسها التي تبدؤها من الصفحة الرئيسية. ويأخذ مستوى Pro أيضًا عيّنة من الصفحات الرئيسية في الموقع، فتعكس النتيجة الموقع كله لا شاشة واحدة.
تكتب نظام تصميم كاملًا
رموز YAML للألوان والخطوط والمسافات والأشكال، إضافة إلى الأقسام الثمانية لصيغة DESIGN.md: Overview و Colors و Typography و Layout و Elevation and Depth و Shapes و Components و Do's and Don'ts.
وصفة لكل مكوّن
المكونات التي تختارها من الصفحة، مثل الترويسة والأزرار وحقول الإدخال والبطاقات، يأتي كل منها بشيفرة HTML و CSS مختصرة، مُتحقَّق منها مقابل الموقع الحي أو مُعلَّمة مع ذكر السبب.
الحساب نفسه، والرصيد نفسه
تعيد الإضافة استخدام جلستك على design-extractor.com. لا تسجيل دخول ثانيًا، وتعرض النافذة المنبثقة رصيدك.
كيف تعمل
ثلاث خطوات من التبويب إلى DESIGN.md
أضِفها إلى Chrome وثبّتها في شريط الأدوات
أضِفها من Chrome Web Store، ثم ثبّتها في شريط الأدوات من أيقونة قطعة الأحجية. تطلب الوصول إلى design-extractor.com والتبويب النشط فقط، لا أكثر. سجّل الدخول على الموقع مرة واحدة، وستستخدم النافذة المنبثقة تلك الجلسة.
افتح صفحة عامة وانقر على Extract this page
اختر مستوى في النافذة المنبثقة وابدأ العملية. يظهر التقدّم في النافذة المنبثقة أثناء التشغيل، ويمكنك متابعة التصفح.
افتح ملف DESIGN.md
ينقلك زر Open result إلى ملف DESIGN.md على الموقع. ويُحفظ أيضًا في «عمليات الاستخراج»، حيث يمكنك نسخه أو تنزيله أو تعديله قبل وضعه في مستودعك.
تجد تفاصيل التثبيت وتسجيل الدخول والرصيد والقيود الحالية في دليل إعداد الإضافة. تفضّل لصق رابط؟ عملية الاستخراج نفسها تعمل من الصفحة الرئيسية.
مقارنة
ما الذي تضيفه مقارنةً بأداة DESIGN.md Style Extractor من TypeUI
أداة DESIGN.md Style Extractor من TypeUI إضافة مجانية ومفتوحة المصدر تملأ قالب TypeUI نفسه بأنماط الصفحة المفتوحة في تبويبك. وتضيف إضافة Design Extractor ما يلي:
ملف DESIGN.md يتبع مواصفات Google
الرموز في مقدمة YAML (front matter)، والأقسام المعيارية بترتيب المواصفات. يمكنك فحص أي ملف بأداة DESIGN.md Validator المجانية.
وصفة لكل مكوّن تختاره
شيفرة HTML و CSS مختصرة للترويسة والأزرار وحقول الإدخال والبطاقات وغيرها، كل منها مُتحقَّق منها مقابل الموقع الحي بمطابقة بنيوية ومقارنة على مستوى البكسل، أو مُعلَّمة مع ذكر السبب.
المواقع المقيّدة جغرافيًا
حين يحظر موقع الزوار من بعض الدول، يمكن أن تمر العملية عبر متصفح في دولة أخرى. تكلّف العملية من دولة أخرى سعر Pro مع رسم إضافي (رصيد 6)، أي ما مجموعه 16 رصيدًا.
الحساب نفسه والرصيد نفسه المستخدمان على الموقع
تُحفظ كل عملية في «عمليات الاستخراج»، حيث يمكنك تعديلها أو نسخها أو تنزيلها، ويستطيع وكيلك قراءتها عبر MCP.
جرى التحقق في مقابل الإصدار 0.4.0، وملف README والشيفرة المصدرية، وصفحتها في Chrome Web Store.
| الجانب | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| طريقة قراءة الموقع | تفتح خوادمنا عنوان الصفحة في متصفح وتحلل الصفحة المعروضة. ويأخذ مستوى Pro أيضًا عيّنة من الصفحات الرئيسية في الموقع. | تقرأ الأنماط المحسوبة لما يصل إلى 280 عنصرًا مرئيًا في الصفحة المفتوحة في تبويبك، داخل متصفحك. |
| ما تتبعه المخرجات | مواصفات DESIGN.md من Google: الرموز في مقدمة YAML (front matter)، والأقسام المعيارية بترتيب المواصفات. | قالب DESIGN.md الخاص بـ TypeUI (Mission و Brand و Style Foundations و Rules وغيرها)، دون مقدمة YAML، أو ملف SKILL.md. |
| المكونات | وصفة من شيفرة HTML و CSS مختصرة لكل مكوّن تختاره من الصفحة، مُتحقَّق منها مقابل الموقع الحي بمطابقة بنيوية ومقارنة على مستوى البكسل، أو مُعلَّمة مع ذكر السبب. | عدد لكل نوع من المكونات ضمن إرشادات عامة للمكونات. لا تُقارن المخرجات بالصفحة المعروضة. |
| أين تذهب النتيجة | تُحفظ في «عمليات الاستخراج» على الموقع، حيث يمكنك تعديلها أو نسخها أو تنزيلها. | تُعرض في النافذة المنبثقة، حيث يمكنك نسخها أو تنزيلها كملف. |
| الصفحات التي يمكنها قراءتها | الصفحات العامة فقط. لا تُدعم بعد الصفحات التي تتطلب تسجيل الدخول أو التي على localhost أو على شبكة خاصة. | الصفحة المفتوحة في تبويبك، بما في ذلك الصفحات التي سجّلت الدخول إليها، لأنها تقرأ تلك الصفحة مباشرة. |
| السعر | التثبيت مجاني. عمليات الاستخراج تستهلك رصيدًا مدفوعًا مسبقًا. | مجانية ومفتوحة المصدر (MIT). |
اختر إضافة Design Extractor إذا كنت تحتاج إلى ملف DESIGN.md يتبع مواصفات Google، مع وصفة لكل مكوّن مُتحقَّق منها مقابل الموقع الحي، ومحفوظ في حسابك. المقارنة الكاملة في صفحة TypeUI مقابل Design Extractor.
الأسئلة الشائعة
أسئلة عن إضافة Chrome
إجابات قصيرة عن تثبيت الإضافة، وما ترسله، وكم تكلّف.
تثبيتها مجاني. كل عملية استخراج تستهلك رصيدًا من رصيدك المدفوع مسبقًا بالسعر نفسه المعتمد على الموقع. تبدأ الباقات من 5 $ مقابل رصيد 50، ولا يوجد اشتراك، ولا تنتهي صلاحية الرصيد. وإذا فشلت عملية استخراج بسبب خلل من جهتنا، يُسترد الرصيد.
عنوان التبويب الحالي والمستوى الذي اخترته فقط، عند النقر على Extract this page. لا تقرأ محتوى الصفحة أبدًا، ولا تعمل في الخلفية على الصفحات التي تزورها، ولا تحتوي على أي أدوات تحليلات.
ليس بعد. تلتقط خوادمنا الصفحة من عنوانها، لذا يجب أن تكون الصفحة عامة. لا تُدعم الصفحات التي تتطلب تسجيل الدخول أو التي على localhost أو على شبكة خاصة. والإضافة متاحة لـ Chrome فقط.
لا. تعيد النافذة المنبثقة استخدام الجلسة التي سجّلت بها الدخول على design-extractor.com. وإذا لم تكن مسجّل الدخول، تعرض زر Sign in الذي يفتح الموقع. وتسجيل الخروج من النافذة المنبثقة يُخرجك من الموقع أيضًا.
أي وكيل يقرأ الملفات من مستودعك. احفظ ملف DESIGN.md بجوار شيفرتك، ووجّه إليه Claude Code أو Cursor أو GitHub Copilot أو Codex أو Windsurf أو Google Stitch مرجعًا للأسلوب في الواجهات الجديدة.
إضافات مثل DESIGN.md Style Extractor من TypeUI تقرأ الأنماط المحسوبة في متصفحك وتملأ قالبها الخاص بالقيم. أما Design Extractor فيكتب ملف DESIGN.md يتبع مواصفات Google، مع وصفة من HTML و CSS لكل مكوّن يختاره من الصفحة، مُتحقَّق منها مقابل الموقع الحي أو مُعلَّمة مع ذكر السبب، ويحفظه في حسابك.
احصل على ملف DESIGN.md من التبويب الذي تتصفحه
التثبيت مجاني. كل عملية استخراج تستهلك رصيدًا من رصيدك المدفوع مسبقًا، بالسعر نفسه المعتمد على الموقع.