التوثيق

كيف يعمل Design Extractor

الصق رابطًا واحصل على مواصفات تصميم منظّمة: الألوان والخطوط والمسافات والمكونات في ملف DESIGN.md يمكنك وضعه في أي مستودع.

ما هو ملف DESIGN.md؟

ملف DESIGN.md هو مستند نصي بسيط يصف نظام التصميم، ويمكن للبشر ولوكلاء الذكاء الاصطناعي قراءته. اعتبره النظير التصميمي لملف AGENTS.md: فبينما يخبر AGENTS.md الوكلاء كيف يبنون المشروع، يخبرهم DESIGN.md كيف يجب أن يبدو ويُشعِر.

من الداخل، يتكون كل ملف DESIGN.md من طبقتين: مقدمة YAML (front matter) تحتوي على رموز التصميم (design tokens) بصيغة تقرؤها الآلة، ومتن Markdown يشرح منطق التصميم. تمنح الرموز الوكلاءَ قيمًا دقيقة، ويشرح النص سبب وجود هذه القيم.

اقرأ مواصفات DESIGN.md كاملة ←

الأقسام المعيارية

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts

كيف يعمل

  1. المُدخل

    الصق رابط صفحة عامة (مثل design-extractor.com).

  2. الاستخراج

    يزور النظام الصفحة ويحلل خصائصها المرئية: الألوان والخطوط والمسافات وأنماط المكونات ولغة التصميم العامة.

  3. المُخرج

    ملف DESIGN.md واحد يحتوي على:

    • نظرة عامة وإرشادات لأسلوب العلامة التجارية
    • لوحات ألوان برموز مسمّاة
    • مستويات الخطوط وخصائصها
    • رموز التخطيط والمسافات والأشكال
    • إرشادات المكونات ومراجع الرموز
    • ما يجب فعله وما يجب تجنبه، كضوابط للتصميم

المُخرج

تنتج كل عملية استخراج ملف DESIGN.md واحدًا.

Markdown

  • DESIGN.md. قدّمت Google Stitch صيغة DESIGN.md المعيارية. ضع الملف في أي مستودع ليستخدمه وكلاء الذكاء الاصطناعي.

إضافة Chrome

استخرج الصفحة المفتوحة في علامة التبويب الحالية دون العودة إلى هنا. تستخدم الإضافة جلستك على الموقع وتستهلك الرصيد نفسه. اقرأ كيف تعمل الإضافة ←

الفكرة الأساسية

يقدّم وكلاء الذكاء الاصطناعي تصميمًا أفضل عندما يحصلون على رموز دقيقة وعلى شرح يقرؤه البشر معًا. تعطي مقدمة YAML القيم الدقيقة، ويشرح متن Markdown كيف تُستخدم هذه القيم عمليًا.

مستعد للتجربة؟

احصل على ملف DESIGN.md من أي رابط عام. تستغرق عملية الاستخراج دقيقة على الأقل.

استخرج تصميم موقع