الفايب كودينج للمصممين: من نظام التصميم إلى واجهة تعمل فعلاً

الفايب كودينج للمصممين (Vibe Coding for Designers)، ويكتبه البعض «فايب كودنج»، يعني أن تصف الواجهة لأداة برمجة بالذكاء الاصطناعي، وتوجّهها حتى تطابق النسخة العاملة تصميمك. الأداة تكتب الكود، وأنت تضع المستوى، وتحكم على كل شاشة، وتقرر متى ينتهي العمل.

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

أصمم الهويات والواجهات منذ 2010، واليوم أبني منتجات كاملة، و Claude Code أداة في يدي. في هذا الدليل ستتعلم:

• لماذا يملك المصمم ميزة حقيقية.
• ماذا تبني أولاً.
• كيف تحوّل نظام التصميم (Design System) إلى كود: الرموز ثم المكونات ثم الحالات.
• كيف تحافظ على المسافات والخطوط والاتجاه من اليمين إلى اليسار وسهولة الوصول.
• كيف تعمل انطلاقاً من Figma، وكيف تراجع ما كتبته الأداة.
• ومتى تحتاج مبرمجاً.

ولأساسيات الطريقة نفسها، ابدأ بمقال ما هو الفايب كودينج.

لماذا يملك المصمم ميزة؟

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

• ذوق تستطيع تسميته. «اجعلها أجمل» تعطيك تغييراً عشوائياً. أما «المسافة بين أسطر النص العربي ضيقة، والمسافة بين البطاقات يجب أن تكون 24 بكسل لا 16» فتعطيك التغيير الصحيح. المصمم يسمّي المشكلة بدقة، وهذا أغلب الأمر الجيد.
• التفكير بالأنظمة. أنت تبني أصلاً بالأنماط والمكونات والتنويعات (Variants)، وهكذا يُنظَّم كود الواجهات الجيد أيضاً.
• الخطوط والتخطيط. سلّم أحجام الخط، وطول السطر، والشبكات، ونقاط التحول بين الشاشات، كلها قرارات تصميم على الكود أن يتبعها لا أن يخترعها.
• الحالات والحالات الطرفية. الفارغ، والتحميل، والخطأ، والمعطّل، والمحتوى الطويل جداً. المصمم يرسمها، والأداة كثيراً ما تتجاهلها ما لم تُطلب منها.
• الخبرة العربية. نعرف مشكلات الخط العربي مع اللاتيني، والأرقام، والنص المختلط، والاتجاه. وهذه تفاصيل تفوت أغلب القوالب الجاهزة.

وأغلب ما تعرفه له اسم في الكود:

ماذا تبني أولاً؟

ابدأ حيث تملك المحتوى، وحيث المخاطرة قليلة.

1. موقع أعمالك. تعرف كل مشروع فيه، وأنت من يضع المستوى، والموقع نفسه عيّنة حية من ذوقك. وفي دليل بورتفوليو المصمم تجد ما يستحق أن يكون فيه.
2. صفحة هبوط لمنتج أو فعالية أو خدمة حقيقية: صفحة واحدة، وإجراء واحد، ونص حقيقي. مثل صفحة تسجيل لدورة تدريبية في الرياض، أو صفحة قائمة لمقهى في القاهرة.
3. نموذج أولي تفاعلي. النموذج المرتبط بالضغطات في أداة التصميم لا يُظهر كيف يبدو فلتر البحث مع مئتي منتج حقيقي، ولا كيف يتصرف النموذج حين يلصق أحدهم رقم جوال فيه مسافات أو أرقام هندية. أما النموذج المبني بالكود فيُظهر ذلك، وهو أصدق بكثير عند اختباره مع المستخدمين.
4. أداة داخلية صغيرة لاستوديو التصميم: نموذج لاستقبال موجزات العملاء، أو أداة لفحص تباين ألوان الهوية، أو حاسبة عروض أسعار، أو أداة لتسمية الملفات. مستخدمون قليلون ومعروفون، ولا بيانات حساسة.
5. تجارب الحركة (Motion). الانتقالات وتأثيرات التمرير والتفاعلات الصغيرة، تضبطها بإحساسك مباشرة في المتصفح، وهذا غالباً أسرع من شرحها لشخص آخر.

وما لا تبدأ به: أي شيء فيه تسجيل دخول أو مدفوعات أو بيانات شخصية لأناس آخرين. هذا يأتي لاحقاً، ومعه مساعدة.

تحويل نظام التصميم إلى كود

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

الرموز أولاً (Design Tokens)

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

وصار لهذه الرموز صيغة مشتركة. ففي أكتوبر 2025 نشرت مجموعة Design Tokens Community Group التابعة لـ W3C أول نسخة مستقرة من مواصفاتها (2025.10)، وذكر إعلانها Figma و Penpot و Sketch و Tokens Studio ضمن الأدوات التي تدعمها. وعملياً، تستطيع أداة البرمجة أن تحوّل المتغيرات التي صدّرتها إلى ملف رموز بسرعة، ثم تراجع أنت الأسماء والقيم مقابل التصميم.

وتفيدك طبقتان. الرموز الأساسية هي لوحة الألوان الخام (green-700). والرموز الدلالية تقول ما وظيفة القيمة (color-action و color-text-muted). المكونات تستخدم الرموز الدلالية فقط، فيصبح الوضع الداكن أو هوية ثانية تعديلاً في ملف واحد، لا بحثاً في خمسين ملفاً.

وضع القاعدة في ملف تعليمات المشروع حتى تراها الأداة في كل جلسة: لا قيم ألوان أو مسافات خارج ملف الرموز.

ثم المكونات

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

«ابنِ مكوّن الزر من ملف الرموز. التنويعات: أساسي، وثانوي، وشفاف. الأحجام: صغير، ومتوسط، وكبير. الحالات: المرور، والتركيز بلوحة المفاتيح، والضغط، والتعطيل، والتحميل. اعرض كل التركيبات في صفحة /styleguide بالعربية والإنجليزية. لا تستخدم أي قيمة لون مباشرة.»

ثم كل الحالات

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

الحفاظ على جودة التصميم في الكود

المسافات

سلّم واحد في كل مكان. إن صممت على 4 و 8 و 16 و 24 و 32 و 48، فلا يجب أن يحتوي الكود إلا عليها. أي 13px شاردة علامة على أن الأداة ارتجلت.

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

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

من اليمين إلى اليسار (RTL)

حدّد dir="rtl" في الصفحة نفسها لا عبر CSS، واطلب الخصائص المنطقية (margin-inline-start و padding-inline-end) حتى يخدم ملف تنسيق واحد الاتجاهين. اعكس التخطيط لا كل شيء: الأسهم وشريط التقدم تنعكس، أما الشعار والصور وأرقام الهاتف فلا. ثم اختبر النص المختلط، مثل اسم منتج إنجليزي داخل جملة عربية. وأتعمق أكثر في تصميم واجهات المستخدم العربية RTL.

سهولة الوصول (Accessibility)

تعطيك إرشادات WCAG 2.2 من W3C أهدافاً واضحة. في المستوى AA يحتاج النص العادي نسبة تباين لا تقل عن 4.5:1 مع خلفيته، ويجب ألا تقل مساحة الهدف الذي يُضغط عليه عن 24 في 24 بكسل CSS، مع استثناءات محددة. وأضف إلى ذلك إطار تركيز ظاهراً، وعنواناً لكل حقل في النماذج، وموقعاً يُستخدم بلوحة المفاتيح وحدها، واحترام إعداد النظام الذي يقلل الحركة. واطلب من الأداة أن تتحقق من كل نقطة وتريك كيف.

المحتوى الحقيقي

أعطِ الأداة نصوصك الحقيقية باللغتين، وصورك الحقيقية، وبيانات واقعية: أسماء طويلة، وحقول فارغة، ومنتجاً بلا صورة. النص المؤقت يخفي المشكلات، والأداة التي تجد مساحة فارغة ستملؤها بادعاءات لم تقلها. ولا تقبل نصاً عربياً مترجماً آلياً دون أن تقرأه، فالقارئ العربي يكتشفه من أول سطر.

العمل انطلاقاً من Figma

يصف مركز مساعدة Figma خادم MCP يتيح لأدوات البرمجة سحب المتغيرات والمكونات وبيانات التخطيط من ملفاتك، ويذكر Claude Code و Cursor و VS Code و Codex ضمن المحررات المدعومة. ونسخته البعيدة (Remote) تتصل بخادم تستضيفه Figma، ويقول الدليل وقت كتابة هذا المقال في أكتوبر 2026 إنها متاحة لكل المقاعد والخطط. والحدود والأسعار قد تتغير، فراجع مركز المساعدة قبل أن تعتمد عليها.

وأياً كانت طريقة الربط، فالملف هو ما يحدد النتيجة:

• استخدم المكونات والمتغيرات، لا نسخاً منفصلة وألواناً مكتوبة يدوياً. الأداة لا تعيد استخدام إلا ما يقول الملف إنه قابل لإعادة الاستخدام.
• استخدم Auto Layout، حتى يتحول الهيكل إلى Flexbox و Grid لا إلى مواضع ثابتة.
• سمِّ طبقاتك. «Frame 427» لا تقول للأداة شيئاً، أما «بطاقة السعر / مميزة» فتقول الكثير. والأسماء الإنجليزية القصيرة أسهل في الكود.
• صمّم الحالات، لا الشاشة الافتراضية وحدها. وإن كان المنتج بلغتين، فصمّم الشاشات المهمة بالعربية فعلاً، لا بالإنجليزية فقط.

وحتى دون ربط مباشر، تنفع لقطات الشاشة. يقبل Claude Code الصور الملصقة، وتقترح صفحة أفضل الممارسات لدى Anthropic حلقة بسيطة: الصق التصميم، واطلب التنفيذ، ثم اطلب من الأداة أن تلتقط صورة للنتيجة وتقارنها بالأصل وتذكر الفروق وتصلحها. وإن كنت جديداً على الأداة نفسها، فدليل شرح فيجما بالعربي يشرح المكونات و Auto Layout.

مراجعة ما كتبته الأداة

لست مضطراً لقراءة كل سطر، لكن مراجعة المصمم تلتقط ما تفوته الاختبارات.

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

ولقراءة الفروق و Git والأذونات في Claude Code، اقرأ شرح Claude Code بالعربي لغير المبرمجين.

من عملي: موقع بلغتين

موقع SkillUp MENA موقع بالعربية والإنجليزية. في هذا المشروع أدير العمل، وأصمم الواجهة، وأبنيها، فالشخص الذي يضع مستوى التصميم هو نفسه من يراجع الكود مقابله.

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

الحدود: متى تستعين بمبرمج؟

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

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

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

الخلاصة

المصمم في موقع جيد للفايب كودينج، لأن الجزء الصعب هو الحكم، والحكم هو عملنا. ابدأ بعمل تملكه، وابنِ الرموز قبل المكونات والمكونات قبل الصفحات، واطلب كل حالة، واحمِ المسافات والخطوط والاتجاه وسهولة الوصول، وجهّز ملف Figma حتى تقرأه الأداة، وراجع النتيجة كما تراجع عمل مصمم مبتدئ في فريقك. واستعن بمبرمج حين يدخل المال أو البيانات أو الحجم الكبير.

إن أردت منتجاً أو موقعاً مصمماً بهذه العناية ومبنياً كما يجب، ابدأ مشروعك معي.