ماذا تستخرج بصمة التصميم
بصمة التصميم هي نظام استخراج الهوية في مايندلاب. أعطه رابطاً فيزحف إلى الصفحات العامة لذلك الموقع، ويحلّل الأنماط المحسوبة، وينتج مجموعة رموز تصميم منظّمة يستخدمها مايندلاب كلما ولّد واجهة لمشروعك.
عملية الاستخراج المكتملة تلتقط ستّ فئات من معلومات التصميم:
1
لوحة الألوان
ألوان العلامة الأساسية والثانوية، إضافة إلى ألوان السطح والحدود والنص. يحدّد مايندلاب أي الألوان يُستخدم بشكل أبرز للعناصر التفاعلية (الأزرار، والروابط، والتمييزات) مقابل الخلفيات، ويربطها بنظام رموز مبني على الأدوار: --color-primary، --color-secondary، --color-surface، --color-text، وما إلى ذلك.
2
الخطوط
عائلات الخطوط المستخدمة في الموقع (حتى ثلاثة: للعناوين، وللنص، وأحادي المسافة)، ومقياس الأحجام المعتاد، وارتفاع السطر، وتباعد الأحرف. إن كانت الخطوط مقدّمة من Google Fonts أو من شبكة CDN قياسية، يضمّن مايندلاب الاستيراد الصحيح في كل مشروع مولّد. الخطوط المستضافة ذاتياً تُعلَّم للإعداد اليدوي.
3
نصف قطر الحدود
درجة الاستدارة المطبّقة على الأزرار والبطاقات وحقول الإدخال عبر الموقع. يكتشف مايندلاب ما إذا كان الموقع يستخدم زوايا حادّة (نصف قطر ≈ ٠)، أو مستديرة قليلاً (٢–٤ بكسل)، أو مستديرة (٦–١٠ بكسل)، أو على شكل حبّة دواء (≥ 9999px)، ويطبّق الجمالية نفسها على كل المكوّنات المولّدة.
4
مقياس التباعد
الوحدة الأساسية المستخدمة للحشو والهامش (شائعاً ٤ بكسل أو ٨ بكسل)، مستنتَجة من التخطيط المحسوب لمناطق الواجهة الرئيسية. يستخدم مايندلاب هذا لضبط رموز التباعد الداخلية بحيث تبدو التخطيطات المولّدة متناسقة مع موقعك الحالي.
5
رابط الشعار
رابط صورة الشعار الموجود في ترويسة الموقع، مستخرَجاً كرابط مباشر. يستخدمه مايندلاب في ترويسات التطبيقات المولّدة، وقوالب البريد الإلكتروني، ومستندات التصدير. شعارات SVG مدعومة فقط إن كانت مقدّمة كـ src لعنصر <img> — أما SVG المضمّن فيُعلَّم كقيد (انظر أدناه).
6
متغيّر الوضع الداكن
إن كان الموقع يقدّم وضعاً داكناً، يستخرج مايندلاب لوحتي الألوان الفاتحة والداكنة معاً ويربطهما بمجموعة رموز موحّدة واحدة. ستتضمّن تطبيقاتك المولّدة دعماً عاملاً للوضع الداكن جاهزاً للاستخدام.
تشغيل عملية استخراج
تستغرق عملية استخراج بصمة التصميم نحو ٣٠ ثانية وتكلّف رصيداً واحداً. إليك كيفية تشغيلها:
1
افتح إعدادات المشروع
انتقل إلى مشروعك في شاشة البناء. اضغط أيقونة الإعدادات (الترس) في الزاوية العلوية، أو اضغط ⌘ K واكتب 'Project Settings'.
2
اذهب إلى تبويب بصمة التصميم
داخل إعدادات المشروع، اختر تبويب 'بصمة التصميم'. سترى حقل إدخال رابط وأي بصمة تصميم استُخرجت سابقاً لهذا المشروع.
3
أدخل الرابط
اكتب أو الصق رابط الموقع الذي تريد استخراج هويته. عادةً ما يكون هذا موقعك التسويقي العام، أو منتجاً موجوداً، أو موقع عميل. يجب أن يكون الرابط متاحاً للعموم — لا يستطيع مايندلاب الوصول إلى الصفحات خلف تسجيل الدخول.
4
اضغط استخراج
يزحف مايندلاب إلى الرابط، ويحلّل الأنماط المحسوبة عبر الصفحة الرئيسية وحتى ثلاث صفحات مرتبطة، ويعيد مجموعة الرموز المستخرَجة خلال نحو ٣٠ ثانية. تعرض لوحة معاينة الألوان والخطوط ونصف قطر الحدود المكتشفة إلى جانب مكوّنات نموذجية مُصيَّرة بتلك القيم.
5
راجع المعاينة
تتضمّن المعاينة زرّاً نموذجياً، وبطاقة، وحقل إدخال، ونموذجاً للخطوط مُصيَّراً برموزك المستخرَجة. إن بدا أي شيء خاطئاً، يمكنك تحرير الرموز مباشرة قبل الحفظ.
💡
نصيحة.شغّل عملية الاستخراج على صفحتك الأكثر إتقاناً واتّساقاً مع الهوية — عادةً الصفحة الرئيسية أو صفحة هبوط. تجنّب الاستخراج من الأدوات الداخلية، أو بيئات التجهيز، أو الصفحات التي تخضع لإعادة تصميم، إذ قد لا تمثّل أنماطها هويتك النهائية.
مراجعة النظام المستخرَج وتحريره
بعد الاستخراج، كل رمز قابل للتحرير. يعرض محرّر بصمة التصميم مجموعة رموزك كلوحة مرئية بنماذج ألوان، ومعاينات خطوط، ونموذج حيّ. انقر على أي قيمة لتجاوزها.
التعديلات اليدوية الشائعة بعد الاستخراج:
1
تصحيح ربط اللون الأساسي
يختار مايندلاب اللون الأكثر استخداماً وغير المحايد كلون أساسي. في المواقع ذات اللون المميّز القوي المستخدم للتنبيهات فقط، قد يختار اللون الخاطئ. اسحب النموذج اللوني الصحيح إلى خانة الأساسي.
2
استبدال الخطوط المكتشفة تلقائياً
إن كان خط عناوينك مستضافاً ذاتياً ولم يُكتشف، اكتب اسم الخط يدوياً وقدّم رابط الاستيراد أو اختره من منتقي Google Fonts المدمج في محرّر البصمة.
3
تعيين رابط شعار يدوياً
إن لم يتمكّن الزاحف من استخراج الشعار (مثلاً إن كان SVG مضمّناً أو محمّلاً عبر JavaScript)، الصق الرابط المباشر لأصل شعارك في حقل رابط الشعار.
عندما تكون راضياً، اضغط حفظ البصمة. تُخزَّن مجموعة الرموز مع مشروعك وتُطبَّق على كل بناء لاحق.
تطبيق البصمة على بناء جديد
عند حفظ بصمة التصميم في مشروع، تُطبَّق تلقائياً على كل عملية توليد كود جديدة. لست بحاجة إلى ذكر الهوية في مطالبتك — يحقن مايندلاب مجموعة الرموز في متغيّرات CSS المولّدة، وإعداد Tailwind (إن وُجد)، وإعداد مكتبة المكوّنات قبل كتابة أي كود واجهة.
يشير الكود المولّد إلى هذه المتغيّرات — لا إلى قيم ألوان مكتوبة مباشرة — بحيث يمكنك تحديث هويتك في أي وقت بتحرير البصمة وإعادة تطبيقها دون إعادة توليد كل ملف.
تطبيق البصمة على مشروع موجود
إن كنت قد بنيت ونشرت تطبيقاً بالفعل وتريد تحديث هويته، فبإمكان بصمة التصميم تطبيق مجموعة رموز جديدة على مشروع موجود دون تشغيل إعادة توليد كاملة.
1
استخرج بصمتك أو حرّرها
شغّل عملية استخراج جديدة من الرابط الجديد، أو حدّث قيم الرموز يدوياً في محرّر البصمة.
2
اضغط 'تطبيق على الملفات الموجودة'
يظهر هذا الخيار في أسفل محرّر البصمة عندما يكون للمشروع كود مولّد بالفعل. يجري مايندلاب تمريرة مستهدفة تحدّث فقط تصريحات متغيّرات CSS وإشارات رموز التصميم — ولا يعيد توليد أي منطق، أو مسارات، أو ملفات طبقة بيانات.
3
راجع الفرق
يعرض عرض الفرق كل ملف سيُغيَّر. أكّد، فيكتب مايندلاب التحديثات. يلزم دفع نشر لجعل الأنماط الجديدة مباشرة.
ℹ
ملاحظة.تطبيق البصمة على الملفات الموجودة يحدّث رموز CSS فقط. إن كان كودك المولّد الحالي يحتوي على قيم ألوان مكتوبة مباشرة (وهو ما قد يحدث إن حرّرت الملفات يدوياً بعد التوليد)، فلن تُستبدَل تلك القيم تلقائياً. سيبرز عرض الفرق أي حالات كهذه لتتمكّن من تحديثها يدوياً.
القيود
تعمل بصمة التصميم جيداً مع الغالبية العظمى من المواقع العامة، لكن بعض السيناريوهات تقع خارج قدراتها الحالية:
1
الصفحات خلف المصادقة
لا يستطيع مايندلاب تسجيل الدخول إلى موقعك. إن كانت صفحاتك الأكثر اتّساقاً مع الهوية داخل لوحة تحكّم أو خلف جدار دفع، فستجري عملية الاستخراج على الصفحات التسويقية العامة بدلاً منها. تجاوز يدوياً أي رموز لا تطابق هوية منتجك الداخلي.
2
شعارات SVG المضمّنة
الشعارات المضمّنة مباشرة كترميز SVG في HTML (بدلاً من تحميلها عبر سمة src لعنصر <img>) لا يمكن استخراجها كرابط. الصق رابط الأصل المباشر لشعارك يدوياً في حقل رابط الشعار.
3
الخطوط المخصّصة الثقيلة دون CDN
الخطوط المحمّلة من خادم خطوط خاص أو عبر @font-face في CSS يشير إلى رابط غير عام ستُكتشف بالاسم لكن لا يمكن تضمينها في عبارات الاستيراد المولّدة. سيعلّمها مايندلاب للإعداد اليدوي ويقترح أقرب تطابق من Google Fonts كبديل.
4
الأنماط المُصيَّرة بـ JavaScript
المواقع التي تطبّق الألوان والخطوط بالكامل عبر JavaScript أثناء التشغيل (بعض إعدادات نظام التصميم بـ JS) قد تنتج عمليات استخراج ناقصة لأن الزاحف يحلّل الـ HTML الأولي والأنماط المحسوبة، لا زمن تشغيل الـ JS. في هذه الحالات، شغّل تجاوز رموز يدوياً بعد الاستخراج.
⚠
انتبه.تحترم عملية استخراج بصمة التصميم ملف robots.txt. إن كان الموقع الذي تحاول استخراجه يحظر الزواحف، فستعيد عملية الاستخراج نتائج جزئية أو تفشل كلياً. في تلك الحالة، اضبط رموز التصميم يدوياً في محرّر البصمة.
الخطوات التالية