ليه الـ UI اللي بيطلعه الذكاء الاصطناعي شكله “بلاستيك”؟ وإزاي ملف DESIGN.md بيحل الأزمة دي

# ليه الـ UI اللي بيعمله الـ AI طالع “شبه بعضه”؟ وإزاي ملف `DESIGN.md` هيحل لك المشكلة دي

أنت قضيت 20 دقيقة بتكتب “برومبت” (Prompt) للذكاء الاصطناعي عشان يعملك صفحة هبوط (Landing Page). الكود شغال، والشكل العام تمام، والمسافات مظبوطة.

بس لما تبص على النتيجة.. تحس إن التصميم ده ممكن يكون بتاع أي شركة تانية على الكوكب.

دي المشكلة اللي مفيش حد بيتكلم عنها: الـ AI مابيعملش UI وحش، هو بيعمل UI **”يتحس بكرة”** (Forgettable).

الزراير شغالة، والكروت مرصوصة صح، والأقسام فوق بعضها تمام.. بس “روح” البراند بتاعتك، الحاجة اللي بتخلي المنتج بتاعك “شبهك”، مش موجودة.

وده مش معناه إن الـ AI فاشل في التصميم، الفكرة ببساطة إنه معندوش “سياق” (Context) عن البراند بتاعتك.

الـ AI فاهم هو مطلوب منه يعمل إيه، بس مش فاهم هو بيعمله “لمين” وشكله المفروض يكون إيه بالظبط.

هنا بقى بتيجي أهمية فكرة ملف الـ `DESIGN.md`. دي مش اختراع جديد كلياً، لكنها جزء من “سيستم” بدأ يظهر في شغل المبرمجين اللي بيستخدموا الـ AI.

مثلاً، أداة زي Claude Code بتستخدم ملف `CLAUDE.md` عشان تدي للـ AI تعليمات ثابتة عن المشروع. كمان بدأ يظهر ملف `AGENTS.md` كطريقة لتوثيق التعليمات لـ “بوتات” البرمجة (AI Agents) جوه الكود.

فلو كان الكود محتاج ملفات تعليمات، يبقى التصميم أكيد محتاج ملف هو كمان.

ملف `DESIGN.md` هو الحل البسيط للمشكلة دي. هو بيدي للـ AI “كتالوج” سهل يقرأه، بيشرح له الواجهة المفروض يكون شكلها إيه، وإحساسها إيه، وتتصرف إزاي بصرياً.

—

## المشكلة الحقيقية: الـ AI مابيفهمش براندك لوحده

لما بنطلب من الـ AI يعمل واجهة، غالباً بنكتب كلام زي:

> “اعملي صفحة هبوط مودرن (Modern).”

> “صمملي داشبورد شكلها نظيف (Clean).”

> “ابني لي قسم أسعار شكله شيك.”

الكلام ده عايم جداً.

يعني إيه “مودرن”؟ يعني إيه “نظيف”؟ إيه الألوان اللي يستخدمها؟ الزراير تكون حوافها حادة ولا دائرية؟ التصميم المفروض يبان إنه “رسمي” بتاع شركات، ولا “فرفوش”، ولا “مينيمال”، ولا “فخم”؟ الضل (Shadows) يكون خفيف ولا قوي ولا مفيش خالص؟

المصمم البني آدم ممكن يسألك، يشوف شغل قديم ليك، ويفهم دماغك.

لكن الـ AI معندوش الخلفية دي إلا لو أنت اللي اديتها له.

فاللي بيحصل إن الـ AI بيملا الفراغات دي بأكتر أشكال شافها متكررة قبل كده، وعشان كده النتيجة بتطلع “آمنة” وشبه كل حاجة تانية.

—

## التحول الكبير: من “البرومبت” لملفات “السياق” (Context)

لفترة طويلة، الناس كانت فاكرة إن الشغل مع الـ AI هو مجرد “فن كتابة البرومبت”. لو النتيجة وحشة، يبقى البرومبت مش كفاية. فكنا بنكتب برومبتات أطول وأعقد وأمثلة أكتر.

بس مع دخول الـ AI في صلب عملية البرمجة الحقيقية، بدأ يظهر نمط جديد:

**سياق المشروع (Project Context) أهم بكتير من البرومبت الواحد.**

بدل ما تقعد تشرح القواعد كل مرة، الفرق بدأت تحط ملفات تعليمات “دايمة” جوه مشاريعها.

زي ما قلنا، `CLAUDE.md` بيخلي الـ AI يفتكر قواعد المشروع، و `AGENTS.md` بيعرف البوتات تشتغل إزاي. حتى أدوات زي Google Stitch اللي بتعمل UI من الكلام، محتاجة سياق منظم عشان تطلع شغل متناسق مع البراند.

التحول ده مهم جداً. معناه إن الـ AI هو كمان محتاج “توثيق” (Documentation). بس مش توثيق للبشر بس، توثيق مكتوب بطريقة الـ AI يقدر يقرأها، يفتكرها، وينفذها.

ولو بنعمل كده في الكود، لازم نعمله في التصميم. وده دور ملف الـ `DESIGN.md`.

—

## كُتبيات البراند (Brand Guides) التقليدية مش كفاية للـ AI

معظم البراندات عندها “Brand Guide”: اللوجو، الألوان، الخطوط، طريقة الكلام.. وده مفيد جداً للبشر (مصممين، مسوقين). هما بيفهموا “المود” والنية من ورا الكلام.

بس الـ AI محتاج كلام مباشر أكتر.

الفرق بسيط:
الـ Brand Guide بيشرح “مين إحنا”. ملف الـ `DESIGN.md` بيشرح **”إزاي تنفذ ده”** في الواجهات اللي بتعملها.

مثلاً، الـ Brand Guide ممكن يقول:
> “البراند بتاعتنا نظيفة، مودرن، وموثوق فيها.”

ده كلام جميل للمصمم البشري. بس للـ AI، الكلام ده أحسن بكتير:
> “استخدم لون الـ Primary-Action للزراير الأساسية بس. بلاش ضل تقيل. سيب مسافة (Padding) داخلية 24 بكسل جوه الكروت. ميكونش فيه أكتر من زرار أساسي واحد في القسم الواحد.”

ده الفرق بين “الإلهام” و “التعليمات”.

> 🎁 **هدية: قالب DESIGN.md جاهز**
> ملف مارك داون جاهز فيه الـ 7 أقسام بتوعك. حطه في مشروعك وعدله على مقاس براندك.
> [حمل القالب من هنا ←](/contact)

—

## يعني إيه أصلاً `DESIGN.md`؟

هو ملف Markdown بسيط بتحطه جوه مشروعك.

هوفته إنه يوصف “نظام التصميم” (Design System) بتاعك بطريقة الـ AI يقدر يفهمها ويطبقها وهو بيكتب الكود.

هو مش بديل لسيستم التصميم الكامل، ولا بديل لـ Figma، ولا بديل للمصممين.

هو مجرد “كوبري” بين هويتك البصرية وبين التنفيذ اللي الـ AI بيعمله.

> ببساطة: هو “كتالوج تعليمات التصميم” لبوتات الذكاء الاصطناعي.

الملف ده ممكن يكون فيه ألوانك، خطوطك، قواعد المسافات، أشكال العناصر، وقواعد الترتيب (Layout).

الفكرة كلها: ماتديش للـ AI طلبات كود بس.. اديله قواعد تصميم كمان.

—

## ليه Markdown أحسن من مجرد أرقام (JSON)؟

ممكن تسأل: ليه Markdown؟ ليه مش ملف JSON فيه الألوان والأرقام وخلاص؟

السبب هو “المعنى”.

الـ JSON شاطر في تخزين الأرقام والقيم، بس فاشل في شرح “ليه” و “إمتى”.

الـ JSON ممكن يقولك:
“`json
{
“primary”: “#1A237E”
}
“`
بس مابيقولكش:
– اللون ده نستخدمه إمتى؟
– إيه الإحساس اللي بيوصله؟
– ده للزراير ولا للعناوين ولا للخلفية؟
– إيه الحاجات اللي مابتمشيش معاه؟

الـ Markdown بيديك “الهيكل” و “الشرح” مع بعض. تقدر تكتب أقسام الـ AI يقرأها، بس فيها تفاصيل تفهمه دماغك.

مثال:
“`md
## الألوان

### Primary-Action (اللون الأساسي للأكشن)
Hex: #1A237E

استخدم اللون ده للزرار الأساسي بس في الصفحة.

قواعد:
– للزراير الأساسية (Primary Buttons).
– ممنوع للزراير الثانوية.
– زرار واحد بس باللون ده في كل قسم.
– بلاش تحط معاه ضل تقيل.
“`
ده أفيد مليون مرة للـ AI من مجرد كود لون.

—

## المفروض تحط إيه جوه ملف الـ `DESIGN.md`؟

عشان الملف يكون مفيد بجد، لازم يكون عملي. الـ AI لازم يقدر يستخدمه وهو بيكتب الكود.

ده هيكل مقترح:

### 1. نظرة عامة على البراند (Brand Overview)
ابدأ بوصف قصير للبراند.
“`md
# هوية التصميم

المنتج ده لازم يكون بسيط، موثوق، مودرن، وعملي.
ابعد عن الزينة اللي ملهاش لزمة.
لغة التصميم لازم تدعم الوضوح، السرعة، والثقة.
“`

### 2. سيستم الألوان (Color System)
ماتكتبش لستة ألوان وخلاص، اشرح غرض كل لون.
“`md
## الألوان

### Primary-Action
Hex: #1A237E
الغرض: الأكشن الأساسي للمستخدم.

يستخدم في:
– الزراير الأساسية.
– حالة القوائم النشطة (Active navigation).

ممنوع يستخدم في:
– خلفيات الأقسام.
– الأيقونات التجميلية.
“`

### 3. قواعد الخطوط (Typography)
حدد نوع الخط، مقاسات العناوين، ومقاس الكلام العادي.
“`md
## الخطوط

الخط: Inter, sans-serif

### العناوين
– H1: 48px, Bold
– H2: 36px, Bold

قواعد:
– ماتستخدمش أكتر من 3 مقاسات خط في العنصر الواحد.
– بلاش العناوين تكون كلها حروف كبيرة (All-caps).
“`

### 4. سيستم المسافات (Spacing System)
دي أكتر حاجة بتبوظ في شغل الـ AI. حدد المسافات بوضوح.
“`md
## المسافات

بنستخدم نظام الـ 8px.
الأرقام المسموحة: 4, 8, 16, 24, 32, 48, 64 بكسل.

قواعد:
– أقل مسافة جوه الكروت 24 بكسل.
– بلاش تستخدم أرقام عشوائية زي 13 أو 27 بكسل.
“`

### 5. قواعد العناصر (Component Rules)
قول للـ AI العناصر يكون شكلها إيه.
“`md
## الزراير

### الزرار الأساسي
الستايل:
– الخلفية: Primary-Action
– الكلام: أبيض
– الحواف (Border radius): 12px

قواعد:
– زرار واحد بس أساسي في كل قسم.
– مفيش ضل تقيل ولا تدرج ألوان (Gradients).
“`

### 6. مبادئ الترتيب (Layout Principles)
الـ AI ساعات بيعمل ترتيب كود صح بس شكله “ملعبك”.
“`md
## مبادئ الترتيب

– سيب مساحات فاضية (Whitespace) كتير.
– استخدم نظام الـ Grid.
– ابعد عن الزحمة.
– رتب الكلام بشكل متناسق.
“`

### 7. الممنوعات (Constraints): أهم جزء
معظم الناس بتقول للـ AI “اعمل كذا”. بس التصميم الشاطر هو إنك تقوله **”ماتعملش كذا”**.

بدل ما تقوله: “استخدم زراير زرقا”.
قوله: “اللون الأزرق ده للأكشن الأساسي بس. ماتستخدمش أكتر من زرار واحد في الصفحة. ماتحطش ضل تقيل.”

الفرق هنا إنك بتديله “قاعدة” يمشي عليها، مش مجرد معلومة.

—

## إزاي تبدأ تعمل أول `DESIGN.md` ليك؟

مش لازم يكون مثالي من أول يوم. ابدأ ببساطة.

1. **طلع قيم التصميم بتاعتك:** هات الألوان والخطوط والمسافات اللي بتستخدمها حالياً.
2. **ضيف المعنى:** اشرح كل حاجة بتستخدمها ليه (مثلاً اللون الأخضر ده للنجاح، مش مجرد لون).
3. **حط القيود:** اكتب الحاجات اللي مابتحبهاش في التصميم عشان الـ AI يتجنبها.
4. **حطه في المشروع:** سيف الملف باسم `DESIGN.md` وحطه في الـ Root بتاع مشروعك.
5. **حدثه باستمرار:** كل ما تغير حاجة في التصميم، حدث الملف عشان الـ AI مايشتغلش بقواعد قديمة.

—

## نصايح عشان تطلع أحسن نتيجة

– **استخدم أسماء واضحة (Semantic):** بدل ما تسمي اللون “أزرق”، سميه “لون الأكشن الأساسي”. ده بيفهم الـ AI هو هيعمل بيه إيه.
– **اكتب كأنك بتعلم مصمم جونيور:** اشرح بوضوح وتفصيل، وابعد عن الكلام العايم زي “خليه شكله حلو”.
– **حط أمثلة للـ “صح” والـ “غلط”:** الـ AI بيفهم جداً من المقارنات.

—

## أنا بستخدم ده إزاي في شغلي؟

لما ببني منصات ووردبريس (WordPress) لعملاء في السعودية ومصر والإمارات، وبستخدم الـ AI يساعدني في الكود, ملف الـ `DESIGN.md` بيكون هو “الدليل” بتاعي.

في مشروع WooCommerce قريب، الـ AI طلع لي صفحة الدفع (Checkout) مظبوطة على براند العميل من أول مرة، مش من خامس مرة. الزراير، المسافات، الألوان.. كله كان طالع احترافي كأن مصمم هو اللي عامله مش بوت.

من غير الملف ده، الـ AI كان هيطلع صفحة “ستوك” (Stock) شكلها زي أي قالب رخيص على النت. بالملف ده، النتيجة كانت براند، متناسقة، وجاهزة للشغل.

وده نفس المبدأ اللي بكلمكم عنه دايماً: [الموقع البطئ بيخسرك فلوس حقيقية](/why-your-woocommerce-site-is-slow-and-what-it-actually-costs-you/). أي غلطة في الشكل أو الأداء بتهز ثقة العميل. لما الـ UI بتاعك يكون طالع “شبه الناس”، العميل بيحس. ولما يكون طالع “مخصوص” عشانك، الثقة بتزيد.

—

## الخلاصة

الذكاء الاصطناعي بيغير إزاي بنعمل المواقع. بس لو استخدمناه عشان نطلع كود وبس، هنغرق في واجهات شكلها مكرر وممل.

الفرصة الحقيقية هي: **استخدام الـ AI عشان نطلع كود، مع الحفاظ على الهوية البصرية.**

وده محتاج إننا ندي للـ AI “السياق” اللي المصمم البشري محتاجه. ملف الـ `DESIGN.md` هو البداية. هو اللي بيحول الـ AI من مجرد “مولد كود” لـ “شريك تصميم” فاهم براندك.

—

## إزاي أقدر أساعدك؟

أنا أحمد شعبان، **مهندس نمو ووردبريس (WordPress Growth Engineer)**. ببني منصات قوية لأصحاب المتاجر وصناع المحتوى في الوطن العربي. أنا مش بس بكتب كود، أنا ببني أنظمة بتحافظ على هويتك وتزود أرباحك.

لو حاسس إن موقعك شكله “قالب جاهز” أو لو الـ AI بتاعك بيطلع نتائج مكررة، أنا أقدر أساعدك تبني “البنية التحتية” للتصميم اللي تحل المشكلتين دول.

**شغلي بيشمل:**
– ملفات `DESIGN.md` متفصلة على براندك.
– منصات ووردبريس، WooCommerce، و LearnDash سريعة جداً.
– أنظمة تصميم بتشتغل للبشر وللذكاء الاصطناعي مع بعض.
– شراكة تقنية مستمرة – مش مجرد تسليم مشروع وخلاص.

**عايز موقعك يكون شبهك بجد مش مجرد قالب؟**

[احجز استشارة مجانية ←](/contact) أو [كلمني على واتساب](https://wa.me/201095781208)