يجمع تصميم مواقع الويب بين الاستراتيجية والجماليات وفهم سلوك المستخدم، وتحتاج كل مرحلة إلى طريقة تفكير مختلفة. تساعدك أوامر ChatGPT لتصميم مواقع الويب المناسبة على الانتقال بسرعة من اكتشاف المتطلبات وبنية الموقع إلى الأفكار البصرية والنصوص وعروض العملاء والتحسين بعد الإطلاق.
تجد هنا 28 أمراً موزعة على أربع مراحل: البحث والتخطيط، والتصميم البصري والتخطيط، والنصوص وSEO والتحويل، ثم العملاء والإطلاق والتحسين. صُممت لمصممي الويب والمستقلين والوكالات، ويمكن استخدامها في ChatGPT أو أي روبوت محادثة بالذكاء الاصطناعي آخر.
كيفية استخدام أوامر ChatGPT لتصميم مواقع الويب
الأوصاف العامة تنتج مواقع عامة. أضف إلى كل أمر هذا السياق:
النشاط والجمهور: ما الذي تقدمه الشركة، ومن يزور الموقع، ولماذا
هدف كل صفحة: الإجراء الأساسي الذي ينبغي أن يتخذه الزائر فيها
تموضع العلامة التجارية: شخصيتها وصوتها وما يميز النشاط
التحقق العملي: اطلب تخصيص أي إجابة تصلح لكل المواقع، وتحقق من نصائح SEO والأداء باستخدام أدوات وبيانات حقيقية
سبعة أوامر لوضع أساس صحيح قبل بدء التصميم. يمكن لـ Gemini 3 Pro معالجة موجزات العملاء الطويلة وقوائم المحتوى دفعة واحدة.
1. استبيان اكتشاف متطلبات العميل
اكتب استبياناً لاكتشاف متطلبات عميل جديد لتصميم موقع في [القطاع]. تناول أهداف النشاط والجمهور المستهدف والمنافسين وشخصية العلامة والميزات الضرورية والمحتوى المتاح والميزانية والجدول الزمني وكيفية قياس النجاح.
2. تخطيط بنية الموقع
صمّم بنية المعلومات لموقع [نوع النشاط وحجمه وأهدافه]. الجمهور: [وصف]. إجراءات الزوار الأساسية حسب الأولوية: [قائمة]. أنشئ خريطة للموقع تشمل الأقسام الرئيسية والصفحات الفرعية وبنية الروابط والدعوة الأساسية لاتخاذ إجراء (CTA) وأفضل نوع محتوى لكل صفحة مهمة. اشرح التسلسل الهرمي وحدد صفحات يضيفها المنافسون كثيراً لكن الزوار نادراً ما يستخدمونها.
3. كتابة موجز تجربة المستخدم
اكتب موجز UX لـ [الصفحة الرئيسية / صفحة المنتج / صفحة إتمام الشراء] في [الموقع والنشاط]. هدف النشاط: [وصف]. هدف المستخدم: [وصف]. المعلومات التي يحتاجها: [قائمة]. التحويل الأساسي: [وصف]. تناول رحلة الوصول إلى الصفحة والخروج منها، والمهام التي يجب أن تدعمها، وتسلسل المعلومات، ومبادئ UX، ومتطلبات إمكانية الوصول، ومقاييس النجاح. اجعله محدداً بما يكفي لمصمم لا يعرف هذا النشاط بعد.
4. تحليل مواقع المنافسين
هذه ملاحظات عن ثلاثة مواقع منافسة: [صف البنية والرسائل والعناصر البصرية وCTA]. قارن نقاط القوة والضعف، وحدد الأنماط التي يتوقعها الجمهور في هذا القطاع، واقترح فرصاً لتمييز موقع عميلنا.
5. استراتيجية إعادة التصميم
قدّم مبررات إعادة تصميم موقع [العلامة]. الوضع الحالي: [عمر الموقع والأداء والمشكلات والبيانات]. ما تغيّر: [الجمهور والمنتجات وتجديد العلامة والمنافسة]. تناول تكلفة عدم التحرك، والأهداف والمقاييس، والنطاق، والمراحل، والمخاطر الرئيسية. أضف ملخصاً تنفيذياً من فقرة واحدة لطلب الموافقة على الميزانية.
6. عرض المشروع ونطاق العمل
اكتب عرض تصميم موقع لـ [العميل والمشروع]. ضمّن الأهداف والمخرجات لكل مرحلة، وما لا يشمله النطاق، وعدد جولات التعديل، والجدول الزمني، ومسؤوليات العميل، وطريقة التعامل مع الطلبات الإضافية.
7. حصر المحتوى
هذه قائمة صفحات موقع العميل الحالي ومحتواه: [ألصق القائمة]. صنّف كل عنصر إلى إبقاء أو تحديث أو دمج أو حذف، ثم حدد المحتوى المطلوب إنشاؤه للموقع الجديد.
التمييز بين هدف النشاط وهدف المستخدم في الأمر 3 أساس مهم لتحسين تحويلات الصفحة. للتعمق في البحث ومسارات المستخدم واختبارات سهولة الاستخدام، راجع دليل أوامر ChatGPT لمصممي UI/UX.
أوامر ChatGPT لتصميم مواقع الويب: التصميم البصري والتخطيط
سبعة أوامر لتحديد مظهر الموقع وبنيته. لتحويل فكرة إلى صور مرجعية تعرضها على العميل، جرّب Nano Banana Pro.
8. تطوير المفاهيم البصرية
طوّر ثلاثة مفاهيم بصرية مختلفة بوضوح لموقع [العلامة]. الشخصية: [وصف]. الجمهور: [وصف]. القيم: [قائمة]. قدّم لكل مفهوم اسماً وفلسفة تصميم من جملة واحدة، والطابع البصري، واتجاه لوحة الألوان، ونهج الخطوط، وأسلوب الصور، وكيف يعبّر التخطيط والفراغ عن العلامة. لا تكتفِ بتغيير ألوان الفكرة نفسها.
9. تخطيط صفحة هبوط
اقترح تخطيطاً قسمًا بقسم لصفحة هبوط تبيع [العرض] إلى [الجمهور]. اشرح وظيفة كل قسم ومحتواه ومكان CTA فيه، واجعل الصفحة قصيرة قدر الإمكان مع الإجابة عن أسئلة الزوار الرئيسية.
10. تعريف مكونات نظام التصميم
حدّد مكتبة مكونات لـ [المنتج: النوع والجمهور والتقنيات] وفق هذا الاتجاه التصميمي: [وصف]. صنّف المكونات إلى التخطيط والتنقل والنماذج وعرض المحتوى والتغذية الراجعة والعناصر التفاعلية. بيّن هدف كل مكون ونسخه ومتطلبات إمكانية الوصول، ورتبها حسب معدل ظهورها في الموقع.
11. ألوان العلامة وتنسيق الخطوط
اقترح ثلاث لوحات ألوان وثلاثة أزواج خطوط لموقع في [القطاع] ذي شخصية [شخصية العلامة]. اشرح الانطباع الذي يتركه كل خيار، وكيفية استخدامه للنصوص والأزرار والخلفيات، ومشكلات التباين الواجب فحصها.
12. اتجاه التصوير والصور
اكتب موجزاً لتوجيه صور موقع [العلامة]: الموضوعات والإضاءة ومعالجة الألوان والتكوين والأشخاص والتنوع وما يجب تجنبه، وكيف تختلف الصور بين الصفحة الرئيسية وصفحات المنتجات والمدونة.
13. أمر توليد الصورة الرئيسية
اكتب أمراً لتوليد صورة رئيسية بنسبة 16:9 لموقع [النشاط] تعبّر عن [القيمة الأساسية] بأسلوب [الأسلوب]. ضع العنصر الرئيسي في أحد الجانبين، واترك في الجانب الآخر مساحة فارغة هادئة للعنوان والزر.
14. قائمة تصميم يراعي الهاتف أولاً
أنشئ قائمة تحقق لتصميم [نوع الموقع] بمنهج الهاتف أولاً. تشمل التنقل ومساحات اللمس وأحجام النص المقروءة وإدخال النماذج وتحميل الصور وأزرار CTA الثابتة وما يجب إخفاؤه أو تبسيطه على الشاشات الصغيرة.
تمنح المفاهيم الثلاثة ذات الفلسفات المختلفة العميل خياراً إبداعياً حقيقياً. استخدم الأمر 13 في مولّد الصور بالذكاء الاصطناعي، واستبدل الناتج بصور حقيقية للعلامة عندما تتاح.
أوامر ChatGPT لتصميم مواقع الويب: النصوص وSEO والتحويل
سبعة أوامر للنصوص والبنية التي تساعد على الظهور في البحث وزيادة التحويلات. يتيح Claude Haiku 4.5 إعداد مجموعات من العناوين والأوصاف التعريفية بسرعة.
15. كتابة نصوص الصفحة الرئيسية
اكتب نصوص الصفحة الرئيسية لـ [العلامة]، وهي [نشاط]. الجمهور: [وصف]. نبرة الصوت: [وصف]. ضمّن قسماً رئيسياً بثلاثة خيارات للعنوان تركز على الفائدة والطموح والمشكلة، وعنواناً فرعياً وCTA، وثلاث فوائد أساسية، وجملة تمهيدية للدليل الاجتماعي، وأوصافاً قصيرة لـ 3–4 منتجات أو خدمات، وCTA ختامياً. خاطب الزائر مباشرة بدلاً من الاكتفاء بالحديث عن الشركة، وتجنب المبني للمجهول والمصطلحات المعقدة.
16. صفحة «من نحن»
اكتب صفحة «من نحن» لـ [النشاط] اعتماداً على هذه الحقائق: [قصة التأسيس والفريق والقيم والمحطات المهمة]. ابدأ بسبب وجود النشاط لخدمة العملاء، واكتب بأسلوب إنساني ومحدد، واختم بخطوة تالية واضحة.
17. نصوص صفحة خدمة أو منتج
اكتب صفحة لـ [الخدمة أو المنتج] تستهدف [الجمهور]. تناول المشكلة التي يحلها، وكيف يعمل، والفوائد الأساسية، وما يتضمنه، والاعتراضات الشائعة مع إجاباتها، وCTA مقنعاً. استخدم مواضع مخصصة للبيانات بدلاً من اختلاق شهادات العملاء أو النتائج.
18. تخطيط بنية SEO
خطط لبنية تحسين محركات البحث داخل صفحات موقع [النشاط والقطاع]. الكلمات التجارية: [قائمة]. الكلمات المعلوماتية: [قائمة]. وزّع الكلمات على الصفحات، واقترح H1 وعنواناً لكل صفحة ذات أولوية، وخطة روابط داخلية، ونوع المحتوى المناسب لكل نية بحث، وعناصر مفيدة مثل FAQ والبيانات المنظمة ومسار التنقل. رتب حسب الفرص.
19. العناوين والأوصاف التعريفية
اكتب وسم عنوان يقل عن 60 حرفاً ووصفاً تعريفياً يقل عن 155 حرفاً لكل صفحة: [قائمة الصفحة والكلمة والهدف]. اجعلها محددة وجذابة للنقر من دون عناوين مضللة.
20. تدقيق معدل التحويل
تصرّف كمتخصص CRO ودقق هذه الصفحة: [صف الهدف والتخطيط والنصوص وCTA والبيانات]. الهدف: [وصف]. قيّم من 1 إلى 5 وضوح CTA والدليل الاجتماعي والعبء الذهني وارتباط الجزء الظاهر أولاً بمصدر الزيارة وإشارات الثقة وتجربة الهاتف. ثم حدد أكبر ثلاثة عوائق، مع حل واحد محدد وقابل للاختبار لكل منها.
21. رسم مسار المستخدم
ارسم مسار المستخدم لتنفيذ [مهمة، مثل اكتشاف منتج وشرائه] على [الموقع]. صف في كل خطوة ما يراه المستخدم وما يفعله ونقاط القرار وأسباب المغادرة المحتملة وكيف يقلل التصميم الاحتكاك. ضمّن المسار المثالي وبديلين شائعين، وحدد أكثر ثلاث لحظات صعوبة.
اكتب نصاً لعرض [مفاهيم التصميم / إعادة التصميم / نتائج البحث] على [العميل وأصحاب القرار]. ابدأ بالإطار الاستراتيجي قبل الصور، واشرح منطق كل قرار قبل رد فعل العميل، وجهّز إجابات للاعتراضات المحتملة، واختم بتوجيههم إلى ملاحظات مفيدة بدلاً من التفضيلات الشخصية.
23. التعامل مع ملاحظات العميل
هذه ملاحظات العميل على التصميم الأخير: [ألصق النص]. صنّفها إلى تعديلات واضحة، وملاحظات مبهمة تحتاج سؤال متابعة، وطلبات خارج النطاق المتفق عليه. ثم صغ رداً ودوداً يؤكد الخطوات التالية.
24. قائمة ضمان الجودة قبل الإطلاق
أنشئ قائمة تحقق قبل إطلاق [نوع الموقع] المبني على [المنصة]. تشمل الروابط والنماذج والتحويلات من الروابط القديمة والتحليلات وأساسيات SEO وأيقونة الموقع وصفحة 404 والاختبارات عبر المتصفحات والأجهزة وإشعارات الخصوصية وملفات الارتباط والنسخ الاحتياطية.
25. فحص إمكانية الوصول
راجع تصميم هذه الصفحة بحثاً عن مشكلات إمكانية الوصول الشائعة: التباين وترتيب العناوين والنص البديل وتركيز لوحة المفاتيح ونصوص الروابط وتسميات حقول النماذج: [صف أو ارفع التصميم]. اشرح كل مشكلة وحلها، وذكّرني بالاختبار باستخدام أدوات آلية وقارئ شاشة.
26. خطة تحسين سرعة الصفحة
هذه نتائج أداء صفحتنا الرئيسية: [ألصق النتائج من أداة اختبار السرعة]. اشرح أكبر المشكلات بلغة بسيطة، وقدّم قائمة إصلاحات مرتبة حسب الأولوية تشمل الصور والخطوط والسكربتات وتحركات التخطيط.
27. أفكار اختبار بعد الإطلاق
الموقع منشور منذ [المدة] وهذه النتائج: [ألصق المقاييس الرئيسية]. اقترح خمسة اختبارات A/B مرتبة حسب الأثر المتوقع والجهد، مع فرضية ومقياس للمراقبة ومدة تنفيذ لكل اختبار.
28. دليل تسليم الموقع
اكتب دليلاً مبسطاً لتسليم الموقع إلى [العميل]. اشرح تعديل الصفحات وإضافة مقالات المدونة وتحديث الصور، ومكان بيانات الدخول والنسخ الاحتياطية، وما ينبغي فعله أو بمن يتصل إذا حدث عطل.
العميل الذي يفهم أسباب القرارات يقدم ملاحظات أفضل؛ لذلك ابدأ كل عرض بالاستراتيجية. للتعمق في تحليلات ما بعد الإطلاق ونتائج الاختبارات، راجع أوامر ChatGPT لتحليل البيانات.
استخدم أوامر ChatGPT لتصميم مواقع الويب في Chat Smith
يجمع Chat Smith بين ChatGPT وClaude وGemini وGrok وDeepSeek، إضافة إلى نماذج الصور، في تطبيق واحد. جرّب موجز نصوص الصفحة الرئيسية نفسه مع عدة نماذج ذكاء اصطناعي وقارن طريقة مخاطبة الزائر. احفظ أوامر موجز UX وإطار المفهوم والعرض كقوالب لكل مشروع جديد.
يبدأ تصميم الويب الجيد بفهم واضح للزائر واحتياجاته. لتعلم تقنيات كتابة الأوامر خارج مجال التصميم، راجع دليل أوامر ChatGPT الأساسي.
أوامر ChatGPT لتصميم الويب هي تعليمات مكتوبة تطلب من النموذج اقتراح تخطيط الصفحة أو الألوان أو أجزاء من الكود لموقعك. تساعد هذه الأوامر على توفير الوقت في مرحلة التخطيط الأولي. في تشات سميث يمكنك تجربة هذه الأوامر مع ChatGPT ونماذج أخرى في مكان واحد.
يتكون فريق التحرير في Chat Smith من مجموعة من المتحمسين للذكاء الاصطناعي والباحثين وصناع المحتوى الذين يسعون إلى جعل الذكاء الاصطناعي أكثر سهولة وفائدة للجميع. من خلال مدونة Chat Smith، نشارك أحدث اتجاهات الذكاء الاصطناعي، ومراجعات الأدوات، ورؤى الصناعة، والأدلة العملية لمساعدة الأفراد والشركات على تحقيق المزيد من القيمة من تقنيات الذكاء الاصطناعي. مهمتنا بسيطة: تقديم محتوى واضح وموثوق وسهل الفهم يساعد القراء على البقاء على اطلاع، وزيادة إنتاجيتهم، والبقاء في الصدارة في عالم الذكاء الاصطناعي سريع التطور.
