Essies Blog

زيارة المتجر
مصادر استلهام

ترجمة : كيف تصمّم فعليًا باستخدام الذكاء الاصطناعي

٢٠٢٦/٠٧/١٨

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

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

دور الذكاء الاصطناعي هو مساعدتك على التنفيذ. وبعبارات بسيطة، تتمثل العملية في الآتي:

  • أنت تطوّر الفكرة.
  • تجمع مصادر الإلهام.
  • تحوّل أفكارك إلى تعليمات نصية، ثم تستخدم الذكاء الاصطناعي لبنائها.

يمكنك استخدام أدوات مثل Cursor أو Codex أو Claude، أو أي بيئة تشغيل مشابهة. في جوهر الأمر، أنت تحوّل أفكارك إلى تعليمات.

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

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

لا يمكنك منح الذكاء الاصطناعي ذائقة حقيقية حتى الآن، لكن يمكنك التعامل مع هذا القيد بطرق أخرى.

الطريقة الأولى: استخدام مهارة تصميم جاهزة

هذه أسرع طريقة. إذا كان وقتك محدودًا أو كنت تعمل على مشروع صغير، فيمكنك الاعتماد على مهارات تصميم مُعدّة مسبقًا.

من أمثلتها:

وسيصدر قريبًا الإصدار الثاني من TasteSkill، مع نسخة مخصّصة لـ GPT‑5.6 أولًا.

العملية بسيطة:

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

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

الطريقة الثانية: أن تصمّمه بنفسك بمساعدة الذكاء الاصطناعي

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

قد تكون بصدد إنشاء:

  • تطبيق للهواتف
  • تطبيق لسطح المكتب
  • موقع إلكتروني
  • صفحة هبوط
  • لوحة معلومات
  • ملصق

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

ابدأ بالمعنى

قبل أي شيء آخر، حدّد الأساس. اسأل نفسك:

  • لمن صُمّم هذا المنتج؟
  • ما المشكلة التي يحلها؟
  • ما الإحساس الذي ينبغي أن يمنحه؟
  • ماذا ينبغي أن يمثّل؟

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

على سبيل المثال:

  • ما موضوع المنتج؟
  • من جمهوره؟
  • ما الشعور الذي ينبغي أن ينقله؟
  • ما الطابع الذي ينبغي أن تتمتع به هويته؟
  • ما الألوان والخطوط المناسبة؟
  • هل ينبغي أن يبدو بسيطًا، أو مرحًا، أو فاخرًا، أو تقنيًا، أو تجريبيًا؟

اجمع مصادر الإلهام

بعد تحديد التوجّه، ابدأ بجمع المراجع. ومن المصادر القوية موقع Mobbin، الذي يضم شاشات حقيقية لمنتجات من فئات عديدة.

لا تكتفِ بالنظر إلى تصميم ما والقول: «هذا يبدو جميلًا». اسأل نفسك: لماذا؟

  • هل السبب هو التخطيط؟
  • أم المسافات؟
  • أم الخطوط؟
  • أم البنية؟
  • أم أسلوب التفاعل؟

احفظ كل ما تراه مفيدًا، ونظّمه في مجلدات مثل:

  • التنقّل
  • الأقسام الافتتاحية
  • التسعير
  • البطاقات
  • شاشات الهواتف
  • لوحات المعلومات
  • الحركات
  • الطباعة والخطوط

أنشئ مكتبتك الخاصة من المراجع ووسّعها بمرور الوقت. فهذه أيضًا إحدى الطرق التي تطوّر بها «ذائقتك».

ومن المصادر المفيدة الأخرى:

ولا تنسَ: لا تنسخ تصميمًا كاملًا. ادمج أفكارًا متعددة في شيء يناسب منتجك.

ارسم هيكل المشروع

حدّد الآن ما تحتاج إلى بنائه فعلًا. بالنسبة إلى موقع إلكتروني، قد يشمل ذلك:

  • شريط التنقّل
  • القسم الافتتاحي
  • المزايا
  • التسعير
  • آراء العملاء
  • الدعوة إلى اتخاذ إجراء
  • تذييل الصفحة

وبالنسبة إلى التطبيقات:

  • الإعداد الأولي
  • الشاشة الرئيسية
  • البحث
  • الملف الشخصي
  • الإعدادات
  • المسارات الأساسية
  • حالات عدم وجود محتوى

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

ابنِ التصميم مكوّنًا بعد آخر

ابدأ الآن بالبناء. خذ أفكارًا منفردة من مراجعك، ثم عدّلها لتناسب مشروعك.

بدلًا من أن تقول: «أنشئ لي موقعًا كاملًا»، قل:

«أنشئ قسمًا افتتاحيًا مستندًا إلى هذا الأسلوب، وعدّله ليتناسب مع هويتي».

اعمل خطوةً بخطوة:

  • شريط التنقّل
  • القسم الافتتاحي
  • البطاقات
  • الأزرار
  • الخطوط
  • التفاصيل

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

أنشئ أصولًا بصرية مخصّصة

استخدم توليد الصور عند الحاجة. أصبحت أدوات مثل GPT Images 2.0 وSeedream 5.0 قوية بما يكفي الآن.

زوّدها بسياق واضح يتضمن:

  • الألوان
  • الأسلوب
  • التكوين
  • حالة الاستخدام

تجنّب صور المخزون العامة. فالمرئيات المخصّصة تجعل التصميم بأكمله أكثر ترابطًا وانسجامًا.

سير العمل الكامل

  1. حدّد الفكرة.
  2. وضّح الغرض والجمهور.
  3. حدّد توجّه الهوية.
  4. اجمع المراجع.
  5. نظّمها.
  6. ارسم الهيكل.
  7. ابنِ المكوّنات.
  8. أنشئ الأصول البصرية.
  9. أضف التفاعلات.
  10. حسّن كل شيء.

تنتج هذه العملية نتائج أفضل بكثير من محاولة إنجاز كل شيء بتوجيه نصي واحد.

الطريقة الثالثة: استخدام لوحة إلهام

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

اجمع لقطات شاشة من:

ثم قل للذكاء الاصطناعي:

«ادمج أسلوب هذه المراجع وتوجّهها في تصميم يناسب منتجي، من دون نسخها مباشرةً».

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

الأساليب الثلاثة

  1. مهارات التصميم: سريعة وتنتج نتائج مقبولة.
  2. البناء مكوّنًا بعد آخر: بطيء، لكنه يحقق أعلى جودة.
  3. لوحة الإلهام: أسلوب متوازن.

أدوات إضافية

إنشاء ملفات SVG

استخدم Quiver لإنشاء رسومات SVG. تسمح هذه الصيغة بحركات أفضل، لأن عناصر الرسم تكون منفصلة.

الفيديو

استخدم أدوات مثل Google Flow. ويمكن للفيديو تحسين الأقسام الافتتاحية والخلفيات والعروض التوضيحية للمنتجات.

مكتبات الصور

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

الطبقات

استخدم إزالة الخلفية وترتيب العناصر في طبقات لإضافة العمق والحركة والتفاعل. فالتفاصيل الصغيرة تُحدث فرقًا كبيرًا بالفعل.

أفكار ختامية

لا ينبغي للذكاء الاصطناعي أن يحل محل تفكيرك.

فأنت ما زلت من يقرّر:

  • ما الذي ستبنيه
  • لماذا هو مهم
  • لمن صُمّم
  • ما الإحساس الذي ينبغي أن يمنحه

لا يفعل الذكاء الاصطناعي سوى مساعدتك على التنفيذ بصورة أسرع. أفضل النتائج لن تأتي من تعليمات نصية أفضل، بل من ذائقة أفضل.

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

إذا كانت لديك أسئلة، فاترك ردًا. آمل أن يكون هذا المقال مفيدًا.

ترجمة عربية للمقال الأصلي «How To Actually Design With AI» للكاتب Leon Lin.