دليل

لا يوجد مصمم؟ استعِر نظام تصميم مُجرَّبًا لتطبيقك

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

مُجرَّب يعني أنه اختُبر مع مستخدمين حقيقيين: خطوط سهلة القراءة، ومسافات مريحة، وأزرار تبدو أزرارًا فعلًا. تحتفظ بهذا كله، وتضع هويتك أنت مكان هويته.

كُتب من أجل المؤسسين المنفردين والفرق الصغيرة. آخر تحديث .

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

  • قائمة قصيرة بما يجعل الموقع المرجعي جيدًا، لتختار موقعًا يناسب منتجك.
  • ملف DESIGN.md يمكنك وضعه في مستودعك ليكون نظام التصميم الذي تبدأ منه.
  • فصل واضح بين ما تحتفظ به (سلّم الخطوط والمسافات واستدارة الحواف وأشكال المكونات) وما تغيّره (لون العلامة التجارية والشعار والخطوط والأسلوب).
  • موجّه يُجري الاستبدال نيابةً عنك، وفحص يتأكد من أن النتيجة ما زالت سهلة القراءة.

كيف تختار موقعًا مرجعيًا

الموقع الذي تستعير منه يحدد معظم إحساس تطبيقك، لذا خصّص لهذه الخطوة عشر دقائق. الموقع المرجعي الجيد يتصف بما يلي:

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

يمكن تصفية معرض DESIGN.md حسب الفئة، ما يسهّل مقارنة بضعة مرشحين بسرعة.

الخطوات

  1. اختر موقعين أو ثلاثة في قائمة مختصرة

    استعن بالسمات أعلاه. لقطات الشاشة للشاشات التي تعجبك تساعدك على اتخاذ القرار لاحقًا.

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

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

  3. اجعله خاصًا بك

    غيّر عائلة لون العلامة التجارية، والخطوط إن كانت تجارية، والاسم والأسلوب. الموجّه أدناه يفعل ذلك دفعة واحدة.

  4. ضعه في مستودعك ووجّه وكيلك إليه

    احفظه باسم DESIGN.md في جذر المستودع. يتضمن دليل Claude Code و Cursor الإشارة التي يجب إضافتها.

  5. افحصه

    الصق الملف المعدّل في أداة DESIGN.md Validator المجانية. تفحص الأداة البنية وتنبّه إلى ألوان النصوص ضعيفة التباين.

مثال تطبيقي: ⁨Notion⁩

لنفترض أن إحساس ⁨Notion⁩ يعجبك. إليك نظام تصميمه كما يسجله ملف DESIGN.md في المعرض، وما الذي ستحتفظ به وما الذي ستغيّره.

الألوان

الخطوط والطباعة

hero-displayDesign is intelligence made visibleNotion Inter96px / 600 / 1.05
display-lgDesign is intelligence made visibleNotion Inter72px / 500 / 1.2
display-mdDesign is intelligence made visibleNotion Inter54px / 700 / 1.05
display-smDesign is intelligence made visibleNotion Inter40px / 400 / 1.5
title-lgDesign is intelligence made visibleNotion Inter24px / 500 / 0.85
title-mdDesign is intelligence made visibleNotion Inter22px / 700 / 1.25

الأشكال

xs · 4px
sm · 8px
md · 12px
full · 9999px

معروضة من ملف DESIGN.md الخاص بـ ⁨Notion⁩: أول 12 لونًا، وأول 6 أنماط خط، وأول 4 قيم استدارة. انقر على أي عيّنة لنسخ قيمة hex.

ما تحتفظ به وما تغيّره

الجزء من الملففي ملف DESIGN.md الخاص بـ ⁨Notion⁩ما يجب فعله
سلّم الخطوطمن hero-display، 96px، الوزن 600 نزولًا إلى body، 16px، الوزن 400احتفظ به
استدارة الحوافxs 4px، sm 8px، md 12px، full 9999pxاحتفظ به
الألوان المحايدةsurface #FFFFFF، ink #000000احتفظ به
أشكال المكونات14 وصفة مكوّن مع الأحجام والحشوات والحدود والحالاتاحتفظ به
لون العلامة التجاريةprimary #0075DE، primary-focus #0075DE، primary-link #097FE8، primary-pressed #005BAB، primary-tint #E6F3FEاستبدله بلونك ودرجاته
الخطوطNotion Inter، Lyon Textاحتفظ بها فقط إن كانت مجانية الاستخدام، وإلا فاستخدم بديلًا
الاسمname: Notionاستبدله باسم منتجك
الأسلوبيصف قسم Overview شخصية العلامةأعد كتابته في جملة أو جملتين تصفان شخصيتك أنت
الشعار والصورغير موجود في الملفاستخدم شعارك وأيقوناتك ورسوماتك الخاصة
لست متأكدًا من الخطوط؟ يجيب ملف DESIGN.md الخاص بـ ⁨Notion⁩ عن ذلك في قسم Typography، حرفيًا:
### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

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

اجعله خاصًا بك بموجّه واحد

يستطيع وكيل البرمجة إجراء التعديل. افتح المستودع الذي يحتوي على DESIGN.md والصق موجّهًا مثل هذا، مع وضع اسمك ولونك وجملتك مكان ما يخص Acme. كُتب هذا الموجّه لهذا الدليل بأسماء رموز ⁨Notion⁩ الحقيقية.

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

ثم اقرأ الفروقات (diff). تتغير قيم hex في موضعين: رموز colors في الأعلى، و CSS كل وصفة مكوّن في الأسفل. يجب أن يتغير الاثنان معًا، وإلا احتفظت الأزرار باللون القديم.

لماذا لا تنسخ علامة تجارية بالكامل

النظام المستعار نقطة انطلاق، لا تنكّر. إطلاق مظهر شخص آخر دون تغيير يضرّك أكثر مما ينفعك:

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

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

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

⁨استعارة نظام تصميم دون مصمم⁩: أسئلة شائعة

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

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

تستخدم علامات تجارية كثيرة خطوطًا تجارية أو مخصصة. يذكر ملف DESIGN.md كل عائلة خط في رموز الخطوط، ويقترح قسم Typography فيه عادةً بديلًا مفتوح المصدر مع ملاحظات حول تباعد الأحرف والأوزان. استخدم البديل، أو اختر خطًا مجانيًا بنسب مشابهة.

قراءة ملف من المعرض ونسخه مجانيتان. أما استخراج موقع تختاره فيستهلك رصيدًا مدفوعًا مسبقًا: تكلّف عملية استخراج Pro 10 أرصدة، وتبدأ باقات الرصيد من $5 for 50 credits. لا تنتهي صلاحية الرصيد، ولا يوجد اشتراك.

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

وجدت موقعًا يعجبك؟

الصق رابطه واحصل على نظام تصميمه في ملف DESIGN.md، جاهزًا لتجعله خاصًا بك.

احصل على ملف DESIGN.md من أي موقع ويب

أدلة ذات صلة

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