كيف أصنع تصاميم مميزة باستخدام وكلاء الذكاء الاصطناعي
خطوات عملية لإنشاء مواقع أكثر تميزًا باستخدام وكلاء البرمجة بالذكاء الاصطناعي: اجمع مراجع قوية، واستكشف أفكارًا متعددة بتكلفة منخفضة، واختر الخطوط بعناية، ثم حسّن التفاصيل المهمة.
قد يساعدك تحسين الـ prompt، لكنه لن يصنع موقعًا رائعًا بطريقة سحرية. الفرق الأكبر يأتي من طريقة العمل حول النموذج: ما الذي تعرضه عليه، ومتى تسمح له باستكشاف الأفكار، ومدى دقتك في مراجعة النتائج.
هذه هي الطريقة التي أستخدمها لإنشاء مواقع أكثر تميزًا بمساعدة وكلاء البرمجة بالذكاء الاصطناعي، من دون إضاعة الوقت أو الرموز (tokens) في تحسين فكرة غير مناسبة.
التجهيز
أبدأ كل مشروع بإنشاء مجلد جديد يحتوي على أربعة مجلدات:
my-project/
├── references/
├── concepts/
├── fonts/
└── assets/لكل مجلد وظيفة واضحة. يحتوي references على الأمثلة التي أريد الاستفادة منها، ويحتوي concepts على الأفكار الأولية التي أريد مقارنتها، أما fonts فيضم الخطوط التي اخترتها، بينما يحتوي assets على الملفات التي سيستخدمها الموقع النهائي فعلًا.
يساعد هذا الفصل على تنظيم السياق الذي يعمل فيه الوكيل، ويجعل استكشاف الأفكار أسهل من دون خلط مصادر الإلهام بالعمل النهائي.
ابدأ بالمراجع
هذه هي أهم خطوة. لا يكفي أن تقول للوكيل: «أنشئ لي موقعًا حديثًا ومبتكرًا» ثم تتوقع نتيجة أصلية و مبتكره. فهذا الوصف يترك له مساحة كبيرة للعودة إلى الأنماط المعتادة.
بدلًا من ذلك، أجمع مراجع توضّح التفاصيل التي أريد الاستفادة منها:
- لقطات الشاشة: احفظ صورًا لأقسام محددة، لا لصفحات كاملة فقط. مثل الواجهة الرئيسية (Hero)، وشريط التنقل، والتذييل، والتصاميم غير المعتادة، والخطوط، والتفاعلات التي تلفت انتباهك.
- الروابط: تفيد المواقع الحية في فهم طريقة عمل الصفحة وكيفية ترابط أقسامها.
- اجزاء من الكود: إذا كان التنفيذ متاحًا للعامة، أضف الأجزاء ذات الصلة من الكود أو رابط المستودع.
- الفيديوهات أو صور GIF المتحركة: تفيد في توضيح التفاعلات والحركة، بشرط أن يكون النموذج قادرًا على مشاهدتها فعلًا. إن لم يكن كذلك، أضف لقطات شاشة أو اشرح ما يحدث في كل مرحلة.
- لوحات الألوان: أحتفظ بملف صغير يضم مجموعة من لوحات الألوان داخل هذا المجلد. ويمكنك استكشاف المزيد عبر Color Hunt وCoolors.
هناك عادة بسيطة تجعل المراجع أكثر فائدة: اكتب ملاحظة قصيرة توضّح ما الذي يعجبك في كل مرجع. ربما يكون حجم الخط الكبير، أو طريقة كسر النمط، أو انتقالًا يجعل الصفحة تبدو حيوية. الهدف هو توصيل فكرة تصميمية، لا مطالبة الوكيل بنسخ موقع كامل كما هو.
استكشف قبل الاختيار
بعد ذلك، أطلب من الوكيل إنشاء ثلاثة إلى خمسة تصاميم أولية مختلفة داخل مجلد concepts/. أريد اتجاهات تصميم مختلفة، لا خمس نسخ من القالب نفسه بألوان مختلفة.
في هذه المرحلة، أبقي الكود بسيطًا عمدًا. يجب أن يكون كل تصميم قابلًا للتشغيل ويكفي لتقييمه في المتصفح، لكنه لا يحتاج إلى نظام جاهز للإنتاج أو خادم أو بنية تقنية معقدة. نحن نختبر الأفكار، لن نطلق الموقع النهائي.
يمكنك البدء بطلب مثل هذا:
راجع المواد الموجودة في /references وأنشئ خمسة تصاميم أولية مختلفة
داخل /concepts. اجعل لكل تصميم اتجاهًا بصريًا وتخطيطًا وخطوطًا
ولوحة ألوان وإيقاعًا بصريًا مختلفًا، وليس مجرد لون مميز جديد.
اجعل كل تصميم قابلًا للتشغيل وبسيطًا. ركّز على التجربة المرئية،
وتجنب العمل على الخادم الخلفي أو بناء بنية إنتاجية قبل أوانها.
سنختار اتجاهًا قويًا قبل تحسين التفاصيل أو دمج الأفكار.أقارن بين التصاميم، وأختار الفكرة الأقوى، ثم أجرّب نسختين أو ثلاثًا إضافية من الاتجاه الذي أعجبني. بعد ذلك فقط أبدأ بتنفيذه بصورة متكاملة.
توفر هذه المرحلة الكثير من إعادة العمل. فمن الأرخص بكثير رفض فكرة وهي مجرد نموذج أولي صغير، بدلًا من اكتشاف المشكلة بعدما يبني الوكيل موقعًا كاملًا حولها.
اختر الخطوط بعناية
الخطوط من أوضح الفروق بين تصميم مدروس وتصميم يبدو وكأنه خرج من الذكاء الاصطناعي بشكل عادي. قد يفقد التصميم الجيد شخصيته بسبب خط غير مناسب، بينما يمنح الخط الصحيح الصفحة طابعًا مميزًا.
أفضل اختيار الخطوط بنفسي ووضع ملفاتها في مجلد fonts/، بدلًا من ترك الوكيل يختار أول خط يستخدمه عادةً. انتبه إلى شخصية الخط وسهولة قراءته والأوزان المتاحة ومدى ملاءمته للأحجام الكبيرة والصغيرة. ولا تنسَ التحقق من ترخيصه قبل استخدامه في مشروع منشور.
هذه بعض المواقع التي أستخدمها:
وأتعامل مع الألوان بالطريقة نفسها: أختار لوحة الألوان عن قصد وأحفظها ضمن المراجع، حتى يكون لدى الوكيل اتجاه واضح بدلًا من ابتكار كل شيء من الصفر.
حسّن التصميم بالترتيب الصحيح
بعد اختيار الاتجاه المناسب، أنتقل من استكشاف الأفكار إلى تحسينها. لا أطلب من الوكيل أن «يجعل الموقع مثاليًا» دفعة واحدة، بل أراجع الصفحة على مراحل.
1. تأكد من أن كل شيء يعمل
ابدأ باختبار الأساسيات: التنقل، والروابط، والأزرار، والنماذج، وتخطيط الهاتف. تأكد من أن هدف الصفحة واضح وأن إنجاز المهام المعتادة سهل. فالواجهة الجميلة تظل واجهة سيئة إذا لم يستطع الناس استخدامها.
2. عالج مشكلات الاتساق
بعدها أبحث عن التفاصيل الصغيرة التي تجعل الصفحة تبدو غير مكتملة: تباعد غير متناسق، وهوامش داخلية مختلفة، وأسطر طويلة أو قصيرة بشكل مزعج، ومحاذاة غير متساوية، وأحجام خطوط لا تنسجم مع بعضها، واقتصاصات غريبة للصور، وأقسام لا تتناسب أبعادها مع بقية الصفحة.
3. تخلّص من الأنماط المستهلكة
أبحث هنا عن العلامات المألوفة لما يمكن تسميته «تصميم الذكاء الاصطناعي المكرر» (AI slop): واجهة رئيسية متوقعة، وبطاقات لكل شيء تقريبًا، وتدرجات لونية للزينة فقط، وأيقونات عامة، ومستطيلات بزوايا مستديرة تتكرر في كل مكان. ليست هذه الأنماط سيئة دائمًا، لكن لا ينبغي أن تظهر لمجرد أن النموذج اعتاد استخدامها.
أسأل نفسي عن وظيفة كل عنصر، ثم أغيّر أي شيء لا يخدم المحتوى أو الاتجاه التصميمي. ويمكن لأداة مثل Impeccable أن تساعد في نقد التصميم وتحسينه بخطوات مركزة، لكن الحكم النهائي يظل مسؤولية الإنسان.
اجعل الحركة تخدم التصميم
تلعب الحركة دورًا كبيرًا في الإحساس العام بالموقع. فقد توجه الانتباه، أو توضّح العلاقة بين العناصر، أو تجعل التفاعل ممتعًا. لكنها قد تبطئ الصفحة أيضًا أو تحوّل التجربة بأكملها إلى مصدر تشتيت.
عادةً أعمل على الحركة بعد أن يستقر الهيكل والخطوط والمسافات. أبحث عن أفكار في المواقع الحقيقية ومراجع الحركة و المكتبات مثل React Bits. أما عند التنفيذ، فكثيرًا ما أستخدم GSAP، بحسب طبيعة التفاعل المطلوب.
لا أضيف الحركة لمجرد جعل الموقع يبدو فخمًا. يجب أن يكون لكل حركة سبب، وأن تعمل جيدًا على أحجام الشاشات المختلفة، وأن تراعي إعدادات تقليل الحركة لدى المستخدم. إذا جعلت الصفحة أصعب في الاستخدام، فلا مكان لها فيها.
قبل النشر
أراجع الموقع كله مرة أخيرة بحثًا عن أشياء قد لا ألاحظها لأنني اعتدت النظر إليها: رابط معطّل، أو مشكلة عند عرض الموقع على الهاتف، أو عنصر غير محاذٍ بدقة، أو قسم يبدو فارغًا أكثر من اللازم، أو تفاعل لا يعمل كما هو متوقع.
وأطلب رأي أصدقائي أيضًا. بدلًا من الاكتفاء بسؤالهم إن كان التصميم يعجبهم، أسألهم عمّا لفت انتباههم أولًا، وما الذي أربكهم، وما إذا كان هناك شيء بدا غير مريح. غالبًا ما تلتقط النظرة الجديدة مشكلات لا أراها.
بعد ذلك أجري التعديلات الصغيرة الأخيرة وأنشر الموقع. من السهل الاستمرار في التحسين إلى ما لا نهاية، لكن في مرحلة ما يجب أن يصل الموقع إلى المستخدمين الحقيقيين.
الأدوات التي أستخدمها
أعتمد على OpenCode بوصفه وكيل البرمجة و Impeccable بوصفها مهارة لتحسين التصميم. ولجمع الإلهام، أستخدم Cosmos وPinterest وMobbin. أما في الحركة، فألجأ إلى GSAP وReact Bits عندما يناسبان المشروع.
نماذج الذكاء الاصطناعي التي استخدمتها في هذه العملية MiMo V2.6 Pro وMiMo V2.6 Flash من Xiaomi، وGLM-5.3-Flash. اخترتها لأنها منخفضة التكلفة نسبيًا ضمن الإعداد الذي أستخدمه، لكن الأسعار والتوافر قد يتغيران. لست بحاجة إلى هذه الأدوات تحديدًا. يمكن تطبيق هذه الطريقة مع أي وكيل برمجي ونموذج جيد بما يكفي؛ فالأهم هو جودة المراجع، والاستكشاف على مراحل، ودقة مراجعتك للنتائج.
الشكر ومصادر الإلهام
هناك أشخاص ساعدني عملهم على التعلم والتفكير بشكل أعمق في تصميم الويب والتفاعلات:
-
Joffrey Spitzer — خصوصًا الشرح العملي لتأثير التكبير المتدرج أثناء التمرير وشرح إعادة إنشاء شبكة منتجات قابلة للسحب.
-
Chase AI — شاهد الفيديو على YouTube.
-
مدونة عمر البيك — عمر صديقي، وعمله أحد مصادر الإلهام بالنسبة لي.
الفكرة ليست جمع المراجع إلى أن يظهر التصميم المناسب من تلقاء نفسه، بل بناء ذوق أوضح، وتزويد الوكيل بمواد أفضل، واتخاذ قرارات مدروسة في كل مرحلة.