نقطة

DESIGN.md: الملف الذي يحوّل وكلاء الذكاء الاصطناعي إلى مصممين

AI Bot
بواسطة AI Bot ·
جاري تحميل مشغل تحويل النص إلى كلام الصوتي...

تطلب من Claude Code أو Cursor بناء صفحة هبوط. النتيجة تعمل، لكنها تبدو كقالب Bootstrap عام. ألوان عشوائية، خطوط غير متناسقة، مسافات تقريبية. المشكلة ليست في النموذج — بل في غياب سياق التصميم.

DESIGN.md يحل هذه المشكلة تحديداً. أطلقته Google Stitch وانتشر عبر مشروع awesome-design-md المفتوح المصدر (أكثر من 10,000 نجمة على GitHub في أيام قليلة)، هذا الملف البسيط بصيغة Markdown يُشفّر نظام التصميم بالكامل في صيغة يفهمها الذكاء الاصطناعي بشكل طبيعي.

المشكلة: وكلاء يبرمجون جيداً لكن يصممون بشكل سيء

وكلاء البرمجة بالذكاء الاصطناعي حققوا تقدماً هائلاً. يولّدون كوداً يعمل، يديرون التبعيات، يكتبون الاختبارات. لكن بصرياً، يرتجلون.

بدون سياق تصميم صريح، الوكيل سيقوم بـ:

  • اختيار ألوان عشوائية أو الرجوع للأزرق/الرمادي افتراضياً
  • استخدام أحجام خطوط بدون تسلسل هرمي متناسق
  • تطبيق مسافات غير متسقة بين المكونات
  • إنتاج واجهات تعمل لكن لا تبدو احترافية

تصدير Figma وملفات JSON لرموز التصميم وأنظمة مثل Style Dictionary موجودة بالفعل. لكنها مبنية لخطوط أنابيب الأدوات، ليس لنماذج اللغة الكبيرة. ملف JSON من 2,000 سطر لا يعطي الوكيل السياق لاتخاذ قرارات تصميم جيدة.

DESIGN.md: ملف README لنظام التصميم

الفكرة بسيطة: ملف Markdown يوضع في جذر المشروع، يستطيع أي وكيل ذكاء اصطناعي قراءته وتفسيره. كما يحدد CLAUDE.md قواعد السلوك لـ Claude Code، يحدد DESIGN.md القواعد البصرية.

ملف DESIGN.md نموذجي يحتوي على تسعة أقسام موحدة:

  1. الثيم البصري والأجواء — التوجه الفني العام
  2. لوحة الألوان والأدوار — أساسي، ثانوي، تمييز، دلالي
  3. قواعد الخطوط — العائلات، المقياس، الأوزان، ارتفاعات الأسطر
  4. أنماط المكونات — الأزرار، البطاقات، النماذج، التنقل
  5. مبادئ التخطيط — الشبكة، الحاويات، نقاط التوقف
  6. العمق والارتفاع — الظلال، الطبقات، z-index
  7. ما يجب وما لا يجب — حواجز التصميم
  8. السلوك المتجاوب — تكيفات الهاتف والجهاز اللوحي وسطح المكتب
  9. دليل الأوامر للوكلاء — تعليمات خاصة لأدوات الذكاء الاصطناعي

مثال مبسط

هكذا يبدو ملف DESIGN.md مُبسّط:

## Colors
- Primary: #1A73E8
- Primary Dark: #1557B0
- Surface: #FFFFFF
- Text Primary: #1F2937
- Text Secondary: #6B7280
- Success: #10B981
- Error: #EF4444
 
## Typography
- Font Family: Inter, sans-serif
- H1: 32px, weight 700
- H2: 24px, weight 600
- Body: 16px, weight 400
- Caption: 14px, weight 400
 
## Spacing
- Base unit: 8px
- Values: 4, 8, 16, 24, 32, 48px
 
## Components
- Button border-radius: 8px
- Card shadow: 0 1px 3px rgba(0,0,0,0.12)
- Container padding: 24px

عندما يقرأ الوكيل هذا الملف، يتوقف عن التخمين ويطبق قيمك الدقيقة.

مشروع awesome-design-md

مستودع VoltAgent/awesome-design-md حفّز هذا الاتجاه. يقدم 55 ملف DESIGN.md مستخرجة من مواقع حقيقية، تغطي مجموعة واسعة من الأنماط:

الذكاء الاصطناعي وتعلم الآلة: Claude، Cohere، ElevenLabs، Mistral AI، Ollama، Replicate، xAI

أدوات المطورين: Cursor، Linear، Vercel، Supabase، Sentry، PostHog، Raycast

التصميم والإنتاجية: Figma، Notion، Framer، Miro، Airtable، Webflow

التكنولوجيا المالية: Stripe، Coinbase، Revolut، Wise

الشركات والمستهلكين: Apple، Airbnb، Spotify، Uber، BMW، NVIDIA، SpaceX

كل مجلد يحتوي على DESIGN.md بالإضافة إلى ملفات preview.html و preview-dark.html لعرض النتيجة.

الاستخدام العملي

# استنساخ المستودع
git clone https://github.com/VoltAgent/awesome-design-md.git
 
# نسخ نظام تصميم إلى مشروعك
cp awesome-design-md/designs/stripe/DESIGN.md ./DESIGN.md
 
# وكيل الذكاء الاصطناعي يكتشفه تلقائياً

ثم اطلب ببساطة من وكيلك:

«ابنِ صفحة أسعار باتباع DESIGN.md الموجود في المشروع.»

النتيجة ستحترم ألوان Stripe وخطوطه ومسافاته ومكوناته — بدون تصدير Figma أو إعدادات إضافية.

لماذا Markdown وليس JSON أو YAML

اختيار Markdown مقصود. نماذج اللغة الكبيرة تتعامل مع Markdown كصيغة أصلية — تولّده باستمرار وتفهمه بشكل بديهي. ملف JSON للرموز دقيق تقنياً لكنه يفتقر للسياق الدلالي.

قارن:

JSON (تقني، بدون سياق):

"button.borderRadius": "8px",
"button.primary.bg": "#1A73E8"

Markdown (دلالي، سياقي):

## الأزرار
- Border-radius: 8px لمظهر عصري لكن سهل الوصول
- خلفية أساسية: #1A73E8 — تُستخدم للإجراءات الرئيسية
- لا تستخدم أبداً زوايا مربعة (radius 0)

Markdown يسمح بمزج القيم مع النوايا والقيود. قسم "ما يجب وما لا يجب" قوي بشكل خاص: يعمل كحواجز يحترمها وكلاء الذكاء الاصطناعي.

التوافق مع الأدوات

DESIGN.md يعمل مع أي وكيل يقرأ ملفات المشروع:

  • Claude Code — يقرأ ملفات Markdown في جذر المشروع تلقائياً
  • Cursor — يدمج سياق ملفات المشروع في الأوامر
  • GitHub Copilot Workspace — يستخدم سياق المستودع
  • Google Stitch — مبني أصلاً لـ DESIGN.md
  • Gemini CLI — يقرأ ملفات دليل العمل
  • الوكلاء المخصصون (LangChain، CrewAI) — أضف الملف كسياق

إنشاء DESIGN.md الخاص بك

يمكنك البدء من الصفر أو تعديل ملف موجود. إليك الخطوات الموصى بها:

1. استخراج الرموز الموجودة

إذا كان لديك نظام تصميم في Figma أو Tailwind أو أداة أخرى، وثّق القيم الأساسية: الألوان، الخطوط، المسافات، أنصاف أقطار الحدود، الظلال.

2. إضافة السياق الدلالي

لا تكتفِ بسرد قيم الألوان. اشرح الأدوار:

## الألوان
- أساسي (#2563EB): الإجراءات الرئيسية، الروابط، حالات التركيز
- تدميري (#DC2626): الحذف، الأخطاء الحرجة
- سطح (#F9FAFB): خلفيات البطاقات والنوافذ المنبثقة

3. تضمين القيود

القسم الأكثر استهانة. وكلاء الذكاء الاصطناعي يحترمون المحظورات الصريحة:

## قواعد صارمة
- لا تستخدم أكثر من 3 ألوان في شاشة واحدة
- حافظ دائماً على نسبة تباين WCAG AA كحد أدنى
- الأزرار الأساسية لها دائماً padding أفقي 24px كحد أدنى
- لا تقم أبداً بتوسيط فقرات نصية طويلة

4. إدارة الإصدارات مع الكود

ضع DESIGN.md في جذر المشروع، في نفس المستودع مع الكود. تغييرات التصميم تمر عبر طلبات السحب، مع مراجعة وسجل تاريخي.

نمط يتقارب

DESIGN.md جزء من اتجاه "ملفات المعرفة للوكلاء". المكدس الناشئ يبدو هكذا:

  • CLAUDE.md / .cursorrules — قواعد السلوك واتفاقيات الكود
  • DESIGN.md — نظام التصميم والقواعد البصرية
  • SPEC.md — مواصفات المنتج والمتطلبات الوظيفية
  • AGENTS.md — تكوين سير عمل الوكلاء المتعددين

كل ملف يُشفّر معرفة مؤسسية في صيغة يمكن لوكلاء الذكاء الاصطناعي التنقل فيها. تطوير البرمجيات يعيد هيكلته حول وثائق Markdown منظمة تعمل كعقود بين البشر والوكلاء.

القيود الحالية

DESIGN.md قوي لكنه ليس مثالياً:

  • لا إدارة للحالات المعقدة — المتغيرات والرسوم المتحركة والتفاعلات الدقيقة تظل صعبة التشفير في Markdown
  • خطر الانحراف — إذا انحرف الملف عن نظام التصميم الفعلي في Figma، سينتج الوكلاء نتائج غير صحيحة
  • لا تحقق تلقائي — لا شيء يتحقق من أن الكود المولّد يتبع فعلاً DESIGN.md
  • قيود الحجم — نظام تصميم مؤسسي كامل قد يتجاوز نافذة السياق المفيدة

للأنظمة المعقدة بمئات المكونات، DESIGN.md يكمّل Figma بدلاً من استبداله. يتفوق في إعطاء الوكلاء توجيهاً متسقاً، ليس في تشفير كل بكسل.

ابدأ الآن

حاجز الدخول شبه معدوم:

  1. انسخ DESIGN.md من awesome-design-md يقترب من هويتك البصرية
  2. عدّل القيم لتتوافق مع هويتك البصرية (ألوان، خطوط، مسافات)
  3. اختبر بأمر: اطلب من وكيلك بناء مكون وقارن النتيجة
  4. كرّر: أضف قيوداً عندما تلاحظ تناقضات

في خمس دقائق، وكلاء الذكاء الاصطناعي يتحولون من "مطور واجهات مبتدئ يرتجل" إلى "مطور يتبع مخططاً دقيقاً". كل ذلك بملف نصي بسيط.

هل تريد قراءة المزيد من المقالات؟ تحقق من أحدث مقال لدينا على البرمجيات الخبيثة المولّدة بالذكاء الاصطناعي: السلاح الجديد في الهجمات السيبرانية 2026.
العودة إلى المدونة

ناقش مشروعك معنا

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

احجز مكالمة

دعنا نجد أفضل الحلول لاحتياجاتك.