دليل

ستعيد بناء موقعك؟ استخرج نظام تصميمه أولًا

إعادة البناء أو تغيير الهوية أو الانتقال إلى إطار عمل جديد هي اللحظة التي يضيع فيها نظام التصميم بصمت. الألوان موجودة في CSS قديم، وسلّم الخطوط في ذهن أحدهم، وحالات الأزرار في مكوّن لا يريد أحد فتحه.

استخرج موقعك الحالي في ملف DESIGN.md قبل أن تغيّر أي شيء. ستحصل على مرجع مكتوب للبناء الجديد، يستطيع فريقك ووكيل البرمجة قراءته معًا.

كُتب من أجل الفرق التي تخطط لإعادة بناء أو تغيير هوية أو ترحيل. آخر تحديث .

ما الذي ستحصل عليه

  • ملف DESIGN.md لموقعك الحالي، مضاف إلى المستودع قبل أول سطر من إعادة البناء.
  • صورة واضحة لما التقطه الملف وما لم يلتقطه.
  • قائمة تحقق بما يجب فحصه يدويًا: الأصول والحالات والحركة ونقاط التوقف والصفحات التي تتطلب تسجيل الدخول.
  • طريقة لمقارنة الموقع الجديد بالقديم حين تنتهي.

متى تفعل ذلك

  • الانتقال إلى إطار عمل جديد. المظهر نفسه بتقنيات جديدة. يتيح ملف DESIGN.md لوكيل البرمجة إعادة بناء المكونات بالقيم الدقيقة بدل قراءة أوراق الأنماط القديمة.
  • تغيير الهوية. التقط النظام القديم أولًا، لتعرف بدقة أي الألوان والخطوط وقيم الاستدارة ستتغير وأيها سيبقى.
  • التسليم. تحصل الوكالة الجديدة أو الفريق الجديد على ملف واحد يصف شكل الموقع اليوم، بدل جولة في الشيفرة.

الخطوات

  1. استخرج الموقع المنشور قبل أن تغيّر أي شيء

    الصق رابط موقعك المنشور في الصفحة الرئيسية لـ Design Extractor وشغّل عملية استخراج Pro. يجب أن تكون الصفحة عامة: تحمّلها عملية الاستخراج كما يفعل الزائر، لذا لا تعمل localhost ولا الصفحات التي تتطلب تسجيل الدخول.

  2. أضِفه إلى المستودع مرجعًا أساسيًا

    احفظه باسم DESIGN.md في المستودع الجديد وأضِفه إلى المستودع (commit) قبل بدء إعادة البناء. أصبح الآن يسجّل كيف بدا الموقع في ذلك اليوم.

  3. اقرأ قسم Known Gaps

    تسرد نهاية الملف ما لم تتمكن عملية الاستخراج من التقاطه. كل بند هناك شيء يجب فحصه يدويًا.

  4. افحص ما لا يستطيع ملف DESIGN.md احتواءه

    الأصول والشاشات بعد تسجيل الدخول والحركة وسائر البنود أدناه. أضِف ملاحظات إلى الملف أثناء العمل.

  5. ابنِ استنادًا إليه

    وجّه وكيل البرمجة إلى الملف كما يشرح دليل Claude Code و Cursor، وراجع كل شاشة جديدة مقارنةً به.

ما التقطه الملف من ⁨Stripe⁩

لترى ما ستحصل عليه، اطّلع على ملف DESIGN.md الخاص بـ ⁨Stripe⁩ في المعرض. التقطت عملية استخراج Pro الخاصة به 5 صفحات من ⁨stripe.com⁩: /nl، /nl/pricing، /nl/products، /nl/newsroom/news/stripe-openai-instant-checkout، /nl/contact/sales. عملية الاستخراج على موقعك تُنتج البنية نفسها.

الألوان21 رمزًا، لكل منها دوره
الخطوط17 نمطًا بخطوط Sohne
استدارة الحواف10 رموز
المسافات62 رمزًا
المكونات71 وصفة بـ HTML و CSS: اجتاز 44 منها الفحص مقارنةً بالصفحة الحية، و 27 مُعلَّمة أو غير قابلة للفحص، مع ذكر السبب لكل منها
الأقسامOverview، Colors، Typography، Layout، Elevation & Depth، Shapes، Components، Do's and Don'ts، Responsive Behavior، Iteration Guide، Known Gaps

ما يقول الملف إنه فاته

الملف صريح بشأن حدوده. هذه أول 5 من أصل 11 بندًا في قسم Known Gaps:

من نهاية ملف DESIGN.md الخاص بـ ⁨Stripe⁩، كما ورد فيه.
## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

مستخرج من موقع ⁨Stripe⁩ العام، وليس إرشادات رسمية للعلامة التجارية. قراءة ملف DESIGN.md الكامل الخاص بـ ⁨Stripe⁩

سيكون لملفك قائمته الخاصة. اعتبرها قائمة مهامك للفحوص أدناه.

ما يجب فحصه يدويًا

البندلماذا قد يغفله الملفما يجب فعله
الشعار والأيقونات والصورملف DESIGN.md يصف الأنماط، لا الملفات.صدّرها من الشيفرة الحالية واحفظها مع الشيفرة الجديدة.
الشاشات بعد تسجيل الدخوللا ترى عملية الاستخراج إلا الصفحات العامة.دوّن كيف يختلف التطبيق عن موقع التسويق، مثل الجداول الأكثر كثافة أو الشريط الجانبي.
الحالاتتُسجَّل حالتا hover و focus حيث رأتهما عملية الاستخراج؛ أما حالات الضغط والتعطيل والخطأ فكثيرًا ما لا تُسجَّل.تنقّل بين النماذج والأزرار ودوّن الحالات الناقصة.
الحركةتوصف الانتقالات والرسوم المتحركة بالكلمات في أحسن الأحوال.دوّن المُدد ومنحنيات التسارع (easing) من CSS الحالي.
نقاط التوقفتلتقط عملية الاستخراج عرضًا لسطح المكتب وعرضًا للهاتف.افحص التخطيط على الأجهزة اللوحية ودوّن أين تتغير الأعمدة.
قوالب خارج العيّنةيأخذ مستوى Pro عيّنة من نحو خمس صفحات رئيسية.استخرج على حدة أي صفحة تبدو مختلفة، مثل التوثيق أو صفحة الدفع.

بعد إعادة البناء

حين يصبح الموقع الجديد منشورًا، استخرجه مجددًا وقارن الملفين. الرموز التي لم تتغير تعني أن المظهر صمد؛ والرموز التي تغيرت إما أنها تغيير الهوية الذي خططت له، أو انحراف يجب إصلاحه.

أي أداة لمقارنة النصوص تُظهر قيم hex والأحجام التي تغيّرت. وتضيف حزمة @google/design.md من Google أمر diff يقارن نسختين رمزًا برمز؛ ويغطي شرح DESIGN.md التنسيق وأدواته. إذا عدّلت الملف يدويًا خلال العمل، فافحصه بأداة DESIGN.md Validator.

الأسئلة الشائعة

⁨استخراج نظام التصميم قبل إعادة البناء⁩: أسئلة شائعة

إجابات قصيرة عمّا يسأل عنه الناس قبل تجربة ذلك.

لا. ملف DESIGN.md ملف نصي يصف الأنماط: الألوان والخطوط والمسافات واستدارة الحواف ووصفات المكونات بـ HTML و CSS. صدّر الشعار والأيقونات والرسومات والصور من الشيفرة الحالية أو ملفات التصميم، واحفظها بجانبه.

لا. تحمّل عملية الاستخراج الصفحة من رابطها كما يفعل أي زائر، لذا لا تُدعم الصفحات التي تتطلب تسجيل الدخول أو الموجودة على localhost أو على شبكة خاصة. استخرج الموقع العام، ودوّن كيف تختلف الشاشات بعد تسجيل الدخول.

يأخذ مستوى Pro عيّنة من الصفحات الرئيسية للموقع، نحو خمس صفحات، ويدمج ما يجده في ملف DESIGN.md واحد. إذا لم يكن قالب مهم ضمنها، مثل صفحة توثيق أو صفحة دفع، فاستخرج رابط تلك الصفحة أيضًا وقارن الملفين.

استخرج الموقع الجديد بعد نشره وقارن الملفين. تتضمن حزمة @google/design.md من Google أمر diff يقارن نسختين من ملف DESIGN.md رمزًا برمز، وأي أداة لمقارنة النصوص تُظهر قيم hex والأحجام التي تغيّرت.

التقط موقعك قبل أن تغيّره

الصق رابط موقعك المنشور. تأخذ عملية استخراج Pro عيّنة من صفحاته الرئيسية وتُعيد ملف DESIGN.md واحدًا.

احصل على ملف DESIGN.md لموقعك الحالي

أدلة ذات صلة

عرض كل أدلة DESIGN.md