ما هو ملف DESIGN.md؟ ملف التصميم الذي يقرؤه وكلاء البرمجة بالذكاء الاصطناعي (مع أمثلة مجانية لتطبيقات الهواتف)

يُعدّ DESIGN.md ملف Markdown يصف الهوية البصرية للمنتج لوكلاء البرمجة بالذكاء الاصطناعي. تجمع صيغة Google Labs بين رموز التصميم (design tokens) الاختيارية بصيغة YAML وإرشادات مكتوبة توضح كيفية استخدامها. وهي تمنح الوكيل قواعد محددة للألوان والخطوط والمسافات والمكونات ليقرأها قبل إنشاء الواجهة.

بالنسبة لمطوري تطبيقات الهواتف، تكمن الفائدة الحقيقية في القدرة على نقل هذه الخيارات إلى الشاشة التالية. ابدؤوا بملف من مكتبة DESIGN.md المجانية لتطبيقات الهواتف، وعاينوا الشاشات المرافقة له، ثم طَبِّقوا القواعد بما يناسب تطبيقكم.

من أنشأ DESIGN.md؟

تنشر Google Labs صيغة DESIGN.md التي يستخدمها Stitch. قدمت Google إمكانية استيراد وتصدير DESIGN.md في إعلان Stitch في مارس 2026، ثم أتاحت مسودة المواصفة بصفتها مواصفة مفتوحة المصدر في أبريل. لا يزال المستودع الرسمي يصنف الصيغة على أنها في المرحلة الأولية (alpha)، لذا تحققوا من مواصفتها الحالية عند بناء أي تكامل.

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

ما الذي يتضمنه ملف DESIGN.md؟

تصف مواصفة Google Labs متناً بصيغة Markdown مع ترويسة YAML اختيارية. وتغطي مجموعات الرموز الألوان والخطوط والحواف الدائرية والمسافات والمكونات. بينما يشرح المتن القرارات مثل مكان استخدام اللون البارز أو وجه الاختلاف بين الأزرار والبطاقات. فالقيم الدقيقة والإرشادات المكتوبة تؤدي مهام مختلفة.

تقبل المواصفة سلاسل ألوان CSS، بما في ذلك القيم الست عشرية (hex). ضعوا ألوان hex بين تنصيص في YAML: لأن علامة الشباك (#) غير المحاطة بعلامات تنصيص تبدأ تعليقاً. يشير المرجع مثل {colors.primary} إلى رمز آخر في الملف. تعرض مكتبة Sleek عينات ألوان hex إلى جانب النص الأصلي حتى تتمكنوا من معاينة لوحة الألوان قبل تحميلها.

كيف يبدو مثال مختصر لملف DESIGN.md؟

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

---
version: alpha
name: Quiet Blue Mobile
colors:
  primary: "#2459C4"
  on-primary: "#FFFFFF"
  surface: "#FAF8F3"
  on-surface: "#20242B"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  md: 12px
spacing:
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
---
## Overview
A quiet mobile interface with cream surfaces and blue actions.

## Colors
Use primary for actions. Keep reading surfaces cream.

## Typography
Use body-md for reading text. Keep labels short.

## Layout
Use spacing.md for screen gutters and related content groups.

## Shapes
Use rounded.md on cards and buttons.

## Components
Primary buttons use button-primary. Keep one main action per view.

## Do's and Don'ts
Keep text readable at larger system font sizes.
Do not use color as the only signal for an error.

تحققوا من الإضافات الخاصة بكم باستخدام أمر التدقيق (lint) في المستودع. يمكن للنتائج التي يقدمها مساعدتكم في اكتشاف المراجع المكسورة ومشكلات التباين بين أزواج الألوان. ومع ذلك، عاينوا الشاشة المعروضة بأنفسكم: فالملف النصي لا يمكنه إظهار تسمية مقطوعة، أو عنصر تحكم مربك، أو لوحة مفاتيح تغطي نموذجًا.

npx @google/design.md lint DESIGN.md

كيف تستخدمون DESIGN.md مع Claude Code؟

احتفظوا بملف DESIGN.md في المشروع واطلبوا من Claude Code قراءته عند العمل على الواجهة. توضح وثائق الذاكرة من Anthropic أن استيرادات CLAUDE.md تُحمّل عند بدء الجلسة. استخدموا مرجعًا عاديًا لمسار الملف لقراءته عند الحاجة، أو قاعدة في .claude/rules/ تحتوي على أنماط paths تطابق ملفات الواجهة.

يمكنكم مثلًا إضافة هذا التوجيه إلى CLAUDE.md دون استيراد باستخدام @:

For UI tasks, read DESIGN.md before creating or changing app screens.

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

كيف تستخدمون DESIGN.md مع Cursor أو Stitch؟

في Cursor، أرفقوا DESIGN.md صراحة بالمهمة أو أشيروا إليه من قاعدة مشروع. أما في Stitch، فاستخدموا سير عمل استيراد وتصدير DESIGN.md لنقل قواعد التصميم بين المشاريع. هذا التمييز مهم: فوكيل البرمجة يحتاج الملف داخل سياقه، بينما يقدم Stitch سير عمل مبنياً حول هذه الصيغة.

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

بالنسبة لـ Stitch، يؤكد إعلان DESIGN.md من Google أنه يمكنكم استيراد وتصدير قواعد التصميم بين المشاريع. وبعد الاستيراد، قارنوا الشاشة المنشأة بالمصدر وعدّلوا القواعد عند الحاجة.

كيف يستخدم Sleek ملف DESIGN.md لأنماط تطبيقات الهواتف؟

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

يستخدم معرض المراجع ومكتبة DESIGN.md نفس المشاريع المميزة. يستخدم Sleek بنية Google Labs ويضيف خصائص للمكونات مثل الحدود والظلال، التي يبلغ عنها المدقق على هيئة تحذيرات. كما يضيف إرشادات للأيقونات والرسوم التوضيحية والتدرج الهرمي والتفاصيل البصرية المميزة. يسجل ملف النمط الخيارات البصرية لإنشاء تطبيق جديد.

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

الأسئلة الشائعة حول DESIGN.md