من الصفر إلى الاحتراف: كيف تجعل تطبيقك مميزاً بعيداً عن قوالب تطبيقات الذكاء الاصطناعي التقليدية

أنت تعرف هذا المظهر. خلفية بيضاء. زر أزرق. خط Inter. قسم رئيسي بتدرج لوني ينتقل من الأرجواني إلى النيلي. بطاقات ذات زوايا دائرية متطابقة وظل خفيف مماثل. شريط تنقل بشعارك على اليسار وزر "ابدأ الآن" على اليمين.

لقد رأيت ذلك مائة مرة. وفي اللحظة التي قمت فيها بإنشاء تطبيقك الأول، رأيته مرة أخرى — إلا أنه هذه المرة كان تطبيقك الخاص.

هذا هو السؤال الأكثر بحثاً والأقل إجابة في مجال البرمجة بالمشاعر (vibe coding) حالياً: كيف تصنع شيئاً يشبه أنت بدلاً من أن يبدو كمتوسط لكل ما رآه الذكاء الاصطناعي على الإطلاق؟

الإجابة ليست إصلاحاً تقنياً. إنها مشكلة وصف. وهذا المقال سيقوم بحلها.

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

أهدافنا لهذا المقال بسيطة:

• لماذا يميل الذكاء الاصطناعي افتراضياً إلى المظهر العام (النمطي) — وما الذي يحدث فعلياً عندما يقوم بذلك

• المفردات التي تحتاجها لوصف التصميم دون خلفية في التصميم

• عملية خطوة بخطوة للانتقال من النمط العام إلى المظهر المتميز، مباشرة هنا على منصة Enter

لماذا يميل الذكاء الاصطناعي افتراضياً إلى نفس المظهر؟

أولاً وقبل كل شيء — دعونا نفهم ما يحدث فعلياً، لأنه بمجرد أن تراه، لن تستطيع تجاهله.

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

إنه ليس تصميماً سيئاً. إنه تصميم آمن. النوع الذي لا يزعج أحداً ولا يميز أحداً.

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

إليك القاعدة التي تغير كل شيء: وصف غامض → مخرجات عامة (نمطية). في كل مرة.

وهذا يعني أن الحل ليس في الأداة، بل في كيفية حديثك معها.

التحول الذهني: أنت مدير فني

معظم الناس يقتربون من التصميم معتقدين أنهم يحتاجون إلى معرفة تقنية — أسماء الخطوط، رموز الألوان، خصائص CSS. هذا إطار خاطئ.

التحول الذهني هو كالتالي: أنت المدير الفني، ولست المصمم. المدير الفني لا يرسم الشعار أو يبرمج التخطيط. إنه يدخل الغرفة، يشير إلى شيء ما على لوحة الإلهام (mood board)، ويقول "أريد أن أشعر بهذا — ولكن أكثر دفئاً، وبلمسة حادة أكثر". المصمم هو من يكتشف كيفية التنفيذ.

لقد كنت تطور هذه المهارة طوال حياتك. في كل مرة دخلت فيها مقهى وعرفت فوراً ما إذا كان شعوره مناسباً. في كل مرة وصلت فيها إلى موقع إلكتروني وأغلقته في ثلاث ثوانٍ لأنه بدا غير مريح. في كل مرة نظرت فيها إلى شيء وقلت "هذا يحاول جاهداً أكثر من اللازم" أو "هذا يبدو باهظ الثمن" — تلك هي ثقافة التصميم. لم يكن لها قناة للمخرجات من قبل فقط.

البرمجة بالمشاعر (vibe coding) توفر هذه القناة. ذوقك ليس هو المشكلة. وصفك لذوقك هو المشكلة. وهذه مهارة يمكن تعلمها.

من النمطي إلى المتميز: خطوة بخطوة

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

قبل أن تكتب أي شيء — ابنِ مفرداتك

التصميم لا يتطلب شهادة في التصميم. إنه يتطلب الكلمات المناسبة. إليك الفئات التي تقوم بمعظم العمل:

كلمات الحالة المزاجية (Mood words) — هذه تخبر الذكاء الاصطناعي بما يجب أن يشعر به المنتج ككل. ليس "احترافياً". بدلاً من ذلك: تحريري، خام، دافئ، سريري، مرح، هيكلي، جريء، سينمائي، غير متكلف. كل واحدة تنتج اتجاهاً بصرياً مختلفاً تماماً.

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

التباين والوزن — ما مقدار التوتر البصري الذي تريده؟ تباين عالٍ أم ناعم؟ طباعة ثقيلة أم خفيفة؟ كثيفة أم واسعة؟ هذه الاختيارات تفعل أكثر من أي لون لتحديد شعور الشيء.

اتجاه الطباعة (Typography) — لست بحاجة لتسمية خطوط محددة. تحتاج إلى معرفة: serif (بذيول) أم sans-serif (بدون ذيول)؟ خط serif — النوع ذو الشرطات الأفقية الصغيرة في نهايات الحروف، كما تراه في الصحف والكتب — يبدو راسخاً وأدبياً وجديراً بالثقة. خط sans-serif — نظيف، بدون شرطات، مثل معظم المنتجات التقنية — يبدو عصرياً ومباشراً. معرفة الاتجاه الذي تريده يغير شخصية منتجك بالكامل.

الخطوة 1 — ابدأ بما هو موجود بالفعل على Enter

قبل كتابة كلمة واحدة من طلبك، فإن أسرع طريقة للعثور على اتجاهك البصري موجودة بالفعل داخل Enter.

في الصفحة الرئيسية، مرر بعد مدخل الدردشة. سترى علامتي تبويب: القوالب (Templates) والمكونات (Components).

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

ذلك التفاعل هو معلومة. عندما ترى القالب الأسود والأخضر الجريء وتفكر "عدواني جداً لكني أحب الثقة فيه" — فأنت الآن تعرف شيئاً محدداً عما تريده. عندما ترى تطبيق الموسيقى وتفكر "أحب المسافات لكنه يحتاج أن يبدو أكثر جدية" — هذا هو طلبك (brief) الذي يبدأ في التكون.

المكونات تذهب لمستوى أعمق. هذه هي لبنات البناء الفردية — بطاقات، أشرطة تنقل، أقسام رئيسية، جداول أسعار — كل منها مصمم بالفعل. إذا أعجبك كيف يتعامل مكون معين مع الطباعة أو المسافات، يمكنك استخدامه كنقطة ارتكاز لكل شيء آخر.

التحرك هنا هو: تصفح، تفاعل، واكتب ما تلاحظه. لا تقل "أعجبني هذا" — هذا غامض جداً. بدلاً من ذلك قل تحديداً:

"يعجبني أن العناوين كبيرة ونص الجسم صغير. يعجبني أنه لا يتم استخدام سوى لون واحد للتمييز وكل شيء آخر أبيض وأسود. يعجبني مقدار المساحة بين العناصر — لا شيء يبدو مزدحماً."

تلك الملاحظات هي طلبك (brief). إذا كنت تريد الذهاب أبعد من ذلك، ابحث عن مرجع أو اثنين خارجيين — موقع، تطبيق، مجلة — ينتجون شعوراً تريده لمنتجك. أضف تلك التفاعلات إلى ملاحظاتك. الآن لديك شيء حقيقي للعمل من خلاله.

الخطوة 2 — اكتب طلباً محدداً

افتح الدردشة واكتب طلباً يتضمن كل ما جمعته. إليك كيف يبدو الطلب العام مقابل طلب محدد:

عام: "ابنِ موقعاً شخصياً للمحفظة بتصميم عصري واحترافي."

محدد: "ابنِ موقعاً شخصياً للمحفظة. أريده أن يبدو مثل موقع استوديو هندسة معمارية مستقل — بسيط، واسع، وواثق. خلفية سوداء، نص بلون كريمي دافئ، لون تمييز واحد بلون طيني هادئ. استخدم خط serif طويل للعنوان الرئيسي وخط sans-serif نظيف لكل شيء آخر. يجب أن يكون التخطيط غير متماثل — لا تقم بتوسيط كل شيء. ابدأ بسطر واحد قوي من النص، وليس صورة رئيسية. يجب أن يكون التنقل بسيطاً، شبه غير مرئي."

نفس الفكرة. نتائج مختلفة تماماً. الطلب الثاني ينتج شيئاً له وجهة نظر — لأنك أنت من أحضر وجهة النظر. كل شيء لاحظته في الخطوة 1 يغذي هذا مباشرة. --> شاهد المزيد في مقالنا الأول على المدونة: دليل البرمجة بالمشاعر للمؤسسين غير التقنيين | من الصفر إلى الاحتراف | Enter

الخطوة 3 — اتخذ القرارات الثلاثة التي تحمل 80% من الوزن

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

لوحة الألوان. لون خلفية واحد. لون نص واحد. لون تمييز واحد. سمِّها تحديداً — أبيض مائل للصفرة، أسود تقريباً، أخضر غابة عميق — وسيبدأ المنتج فوراً في الحصول على هوية. الخطأ الذي ترتكبه معظم التصاميم المولدة بالذكاء الاصطناعي هو استخدام خمسة ألوان، لا شيء منها صحيح تماماً.

الطباعة (Typography). اتجاه خط واحد للعناوين. وواحد لنص الجسم. إذا استطعت، اختر خط serif واحداً وخط sans-serif واحداً. لا يحتاجون إلى أن يكونوا مشهورين — يحتاجون إلى أن يشعروا بالتماسك معاً. اطلب من الذكاء الاصطناعي شيئاً تحريرياً، أو تقنياً، أو دافئاً، وسيختار وفقاً لذلك.

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

الخطوة 4 — استخدم المحرر البصري للـ 20% الأخيرة

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

هنا يغير المحرر البصري لـ Enter الديناميكية. انقر على العنصر. شاهد الخيارات. اضبط مباشرة — حجم الخط، اللون، المسافات، التخطيط — دون كتابة طلب آخر، دون انتظار جيل آخر، ودون كسر شيء آخر عن طريق الخطأ بينما تقوم بإصلاح شيء واحد.

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

الخطوة 5 — انشر وانظر إليه بنظرة جديدة

عندما يبدو الأمر قريباً، اضغط على نشر.

يقوم Enter بنشره فوراً على رابط مباشر. ثم افتح ذلك الرابط على هاتفك، ابتعد عن مكتبك، وانظر إليه كما سينظر إليه غريب. ليس كشخص قام ببنائه.

اطرح سؤالاً واحداً: هل يبدو هذا وكأنه مصنوع بواسطة شخص لديه وجهة نظر؟ إذا نعم — فقد انتهيت. إذا لا، فأنت الآن تعرف ما المفقود. عد للخلف، صف الفجوة، ثم صقل.

هذه هي الحلقة. إنها تصبح أسرع في كل جولة.

ما القادم في السلسلة

أنت الآن تعرف لماذا يحدث المظهر العام (النمطي) وكيفية تجنبه بالضبط. بناءك القادم يجب أن يبدو كبنائك أنت.

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

نراك قريباً.