دليل

كيف تجعل Claude Code و Cursor يبنيان واجهة تطابق تصميم موقع ويب

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

يعرض هذا الدليل الدورة كاملة في Claude Code و Cursor، باستخدام ملف ⁨Linear⁩ من المعرض مثالًا.

كُتب من أجل المطورين الذين يبنون باستخدام وكيل برمجة بالذكاء الاصطناعي. آخر تحديث .

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

  • ملف DESIGN.md لموقع يعجبك، محفوظ في مستودعك حيث يستطيع الوكيل قراءته.
  • إشارة قصيرة في CLAUDE.md لـ Claude Code وقاعدة مشروع لـ Cursor، لتبدأ كل مهمة واجهة من هذا الملف.
  • موجّهات تسمّي الرموز بأسمائها، ليستخدم الوكيل القيم الدقيقة بدلًا من تخمينات قريبة.
  • روتين مراجعة سريع لاكتشاف المواضع التي حاد فيها الوكيل عن الملف.

لماذا يتفوق ملف DESIGN.md على لقطة الشاشة

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

أما ملف DESIGN.md فيعطيه القيم الدقيقة. يتبع الملف مواصفات DESIGN.md من Google: في أعلاه مقدمة YAML (front matter) تحمل الرموز (ألوان hex وعائلات الخطوط وأحجامها واستدارة الحواف والمكونات)، وتحتها نص Markdown يشرح موضع كل منها. جديد على هذا التنسيق؟ اقرأ ما هو ملف DESIGN.md.

الخطوات

  1. اختر موقعًا تشبه واجهته ما تبنيه

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

  2. احصل على ملف DESIGN.md الخاص به

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

  3. احفظه باسم DESIGN.md في جذر مستودعك

    ضعه بجانب README.md و AGENTS.md وأضِفه إلى المستودع (commit)، ليقرأ كل فرع ووكيل كل زميل في الفريق الملف نفسه.

  4. وجّه وكيلك إليه

    أضِف إشارة قصيرة داخل CLAUDE.md في Claude Code، أو قاعدة مشروع في Cursor. تجد المقاطع أدناه.

  5. اطلب الواجهة بمصطلحات الملف

    سمِّ الرموز والمكونات في موجّهك (primary و body-md ووصفة زر)، واطلب من الوكيل أن يذكر أي قيمة لم يجدها بدلًا من اختراع واحدة.

  6. راجع النتيجة مقارنةً بالملف

    تحقّق من الألوان والخطوط واستدارة الحواف والحالات مقارنةً بملف DESIGN.md قبل قبول التغيير.

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

استُخرج ملف DESIGN.md الخاص بـ ⁨Linear⁩ في المعرض من ⁨linear.app⁩ بعملية استخراج Pro التقطت 5 صفحات. يحتوي على 17 رمز لون، و 16 نمط خط، و 12 قيمة استدارة. هذا ما يعمل وكيلك انطلاقًا منه.

الألوان

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

hero-displayDesign is intelligence made visibleInter Variable72px / 510 / 1
display-lgDesign is intelligence made visibleInter Variable64px / 510 / 1
display-mdDesign is intelligence made visibleInter Variable48px / 510 / 1
heading-lgDesign is intelligence made visibleInter Variable32px / 590 / 1.15
title-mdDesign is intelligence made visibleInter Variable20px / 590 / 1.35
body-lgDesign is intelligence made visibleInter Variable17px / 400 / 1.6

الأشكال

xs · 2px
sm · 4px
sm-2 · 4.4625px
md · 5px
md-2 · 6px
lg · 8px
lg-2 · 9px
xl · 12px

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

أعلى الملف مختصرًا: 8 من أصل 17 لونًا، و 2 من أصل 16 نمط خط، و 4 من أصل 12 قيمة استدارة. هذه هي القيم الدقيقة التي ينسخها الوكيل.
---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

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

كيف يصف الملف المظهر

النص الموجود تحت الرموز يخبر الوكيل بموضع كل قيمة. ويبدأ هكذا:

Linear's marketing surface reads like the product itself: a near-black Void canvas (canvas, #08090A) with charcoal panels stacked a half-step lighter, fenced by 1px hairlines rather than shadows. The mood is engineering-grade and restrained. Realistic product UI mockups, a customer logo strip and Berkeley Mono micro-labels ("FIG 0.1") stand in for illustration. Nothing shouts; the page earns attention through precision.

القواعد التي يعطيها الملف لوكيلك

يحوّل قسم Do's and Don'ts المظهر إلى قواعد. أولها:

افعل

  • Reserve Linear Indigo (primary, #5E6AD2) for focus and interactive accents. Every measured focus state is a 1px solid #5E69D1 outline with a 2px offset.
  • Shape every button as a pill with rounded.full. button-ghost, button-ghost-2 and button-ghost-3 all measure 9999px.
  • Keep control heights on the observed ladder: button-ghost and button-ghost-2 at 32px, button-ghost-4 at 29px, button-ghost-3 at 24px, and sidebar-nav-item and the icon buttons at 28px.

تجنّب

  • Don't use weights other than 400, 510 and 590, and never substitute a static 600 or 700 for heading-lg or title-md.
  • Don't add a third typeface. Inter Variable carries everything, and Berkeley Mono is limited to micro figure labels.
  • Don't use accent-blue, danger or success for marketing chrome; they belong inside product mockups.

المكونات

يحتوي الملف على 30 وصفة مكوّن بـ HTML و CSS. اجتاز 13 منها الفحص مقارنةً بالصفحة الحية؛ أما البقية فيذكر الملف سبب عدم اجتيازها أو تعذّر فحصها. يبلغ عدد أحرف الملف كله نحو 276,000، ومعظمه وصفات. لهذا توجّه وكيلك إليه بدل لصقه في الموجّهات.

وجّه وكيلك إلى الملف

معظم الوكلاء لا يفتحون DESIGN.md من تلقاء أنفسهم. بضعة أسطر في التعليمات التي يحمّلونها أصلًا تحل ذلك. في Claude Code، أضِف هذا إلى CLAUDE.md في جذر مستودعك:

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

في Cursor، أضِف قاعدة مشروع. احفظ هذا في .cursor/rules/design.mdc؛ يجعل alwaysApply القاعدة تُحمَّل مع كل طلب في المشروع:

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

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

موجّهات تستخدم الرموز

سمِّ الملف ورموزه، وأعطِ الوكيل مخرجًا بدلًا من سبب للتخمين. كُتبت هذه الموجّهات لهذا الدليل بأسماء رموز ⁨Linear⁩ الحقيقية؛ ضع مهمتك مكان المهمة فيها.

Claude Code

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

Cursor

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

في Cursor، يرفق @DESIGN.md الملف بالمحادثة، وهذا يفيد إلى جانب القاعدة حين تتعلق المهمة بالمظهر في الغالب.

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

خطّط للإصدار القادم

كل مهمة وموعد وقرار في مكان واحد، ليُطلق الفريق في الموعد المحدد.

ابدأ البناءتحدّث مع المبيعات
رسم توضيحي أنشأته هذه الصفحة من رموز ⁨Linear⁩: canvas ⁨#08090A⁩، و ink ⁨#F7F8F8⁩، و primary ⁨#5E6AD2⁩، و button-ghost.rounded ⁨9999px⁩. وهو ليس ناتجًا من وكيل برمجة، ولا يظهر الخط إلا إذا كان متوفرًا على جهازك.

راجع ما بناه الوكيل

  • الألوان. ابحث في الفروقات (diff) عن قيم hex. يجب أن تكون كل قيمة منها في DESIGN.md. والقيمة الجديدة تعني عادةً أن الوكيل خمّن.
  • الخطوط. تستخدم علامات تجارية كثيرة خطوطًا تجارية لا يمكنك نشرها. يذكر قسم Typography في الملف عادةً بديلًا مفتوح المصدر؛ تأكد من أن الوكيل حمّل هذا البديل لا خطًا احتياطيًا عشوائيًا.
  • استدارة الحواف والمسافات. يجب أن تستخدم الأزرار والبطاقات رموز الاستدارة (rounded) من الملف، لا قيمة افتراضية مثل 8px في كل مكان.
  • الحالات. أنماط hover و focus جزء من وصفة كل مكوّن. تنقّل في الصفحة بمفتاح Tab وتحقّق من حلقة التركيز.
  • الوصفات المُعلَّمة. إذا علّم الملف وصفة على أنها flagged، فأبعادها تقريبية. قارن ذلك المكوّن بالموقع الحقيقي.

إذا عدّلت DESIGN.md يدويًا، فافحصه بأداة DESIGN.md Validator المجانية قبل أن يقرأه وكيلك مجددًا.

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

⁨مطابقة موقع ويب في Claude Code و Cursor⁩: أسئلة شائعة

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

لا. احفظه مرة واحدة باسم DESIGN.md في جذر مستودعك، وأشِر إليه من CLAUDE.md في Claude Code أو من قاعدة مشروع في Cursor. يقرأه الوكيل حين تتعلق المهمة بالواجهة. ملف DESIGN.md بمستوى Pro يتضمن وصفات المكونات طويل، لذا تبقى موجّهاتك قصيرة حين تشير إليه بدل لصقه.

لا، وليس هذا هو الهدف. يحصل الوكيل على رموز الموقع (الألوان والخطوط واستدارة الحواف) ووصفات مكوناته وقواعده. أما التخطيط والمحتوى والميزات فتبقى خاصة بك. الوصفات التي لم تجتز الفحص مقارنةً بالموقع الحي مُعلَّمة في الملف على أنها flagged، لذا تعامل معها على أنها تقديرات قريبة.

نعم. أي وكيل يستطيع قراءة الملفات في مستودعك يمكنه استخدام ملف DESIGN.md. أشِر إليه من التعليمات التي يقرأها ذلك الوكيل أصلًا، مثل AGENTS.md أو ⁦.github/copilot-instructions.md⁩، أو اذكر اسم الملف في موجّهك.

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

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

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

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

أدلة ذات صلة

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