البناء انطلاقًا من لقطة شاشة: أول تمرين محاكاة

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

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

حاكِ النموذج أولًا، ثم حوّله بالتدريج إلى عملك الخاص 🧱

ما الذي ستتدرب عليه؟

🎯Learning Objectives

محاكاة لقطة شاشةالبرمجة بالذكاء الاصطناعيتمرين للمبتدئين

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

نتدرب هنا على شيء واحد: العثور على لقطة تعجبك، وإعطاؤها للذكاء الاصطناعي، وشرح ما تريد بناءه بكلماتك العادية.

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

⏱️

Estimated Time

نحو ساعتين

📦

Expected Output

مشروع صغير واحد

صفحة أو لعبة صغيرة تفتح وتستجيب للتفاعل

1. اختر نوع العمل الذي تريد صنعه

قبل فتح الأداة، حدّد النتيجة الصغيرة التي تريد الوصول إليها اليوم.

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

اختر واحدًا من هذه الأنواع:

• صفحة رئيسية لمنتج: عنوان، ومقدمة، وصورة، وزر.
• لوحة SaaS: شريط جانبي، وبطاقات بيانات، ورسوم بيانية.
• لعبة بسيطة: حركة، أو نقر، أو هدف صغير.

افحص ثلاثة أمور عند اختيار المرجع:

1. هل يمكنك فهم المحتوى الأساسي من لقطة واحدة؟
2. هل يوجد في الصفحة شيء يعجبك فعلًا؟
3. هل ستستطيع بعد البناء أن تحكم بسرعة على مدى تشابه النتيجة؟

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

ما مقدار التشابه المطلوب؟

كلما اقتربت النتيجة، دلّ ذلك على أنك لاحظت التفاصيل بدقة وتعلمت وصف الفروق للذكاء الاصطناعي. ضع المرجع والنتيجة جنبًا إلى جنب: هل يبدو التشابه 50% أم 70% أم 90%؟

اصنع شاشة واحدة فقط

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

2. ابنِ صفحة مع المدرّس

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

أنشأ المدرّس مجلدًا فارغًا وفتحه في Trae. كان اسم المشروع trae-screenshot-demo، ولم يكن يحتوي في البداية على صفحة أو شيفرة.

2.1 أعطِ Trae الصورة المرجعية

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

مصدر اللقطة: Framer Website Builder

بعد سحب الصورة إلى محادثة Trae، كتب المدرّس طلبًا قصيرًا جدًا:

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

تخبر الصورة Trae بالشكل التقريبي للصفحة، وتوضح الجملة أن المطلوب تحويل الصورة إلى صفحة ويب.

بعد الإرسال، انتظر حتى ينتهي Trae من إنشاء الملفات. لا ترسل عدة طلبات جديدة قبل انتهاء الطلب الأول.

2.2 انظر إلى النسخة الأولى

أنشأ Trae ملفات index.html وstyles.css وscript.js، ثم فتح الصفحة في المتصفح. تعرض هذه الصورة المتحركة النتيجة التي ظهرت في الدرس:

لا تدرس الشيفرة الآن. انظر إلى الصفحة وقارنها بالمرجع:

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

ليست نسخة مطابقة، لكنها التقطت البنية والأجواء الأكثر وضوحًا. هذه بداية جيدة.

2.3 يكفي أن تكون النسخة الأولى مرئية

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

إذا كان العنوان صغيرًا، قل:

كبّر العنوان الموجود في المنتصف.

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

تكفي اللغة العادية

أنت تبني شيئًا مع Trae، ولست في اختبار لكتابة الأوامر. صف ما تراه بالكلمات التي تستعملها عادة.

3. جرّب باستخدام صورتك

افتح Trae، وأنشئ مجلدًا فارغًا، ثم افتحه في المحرر. يكفي اسم بسيط مثل my-first-page.

اتبع الخطوات التالية:

1. ابحث عن لقطة شاشة لموقع أو لعبة تعجبك.
2. اختر زر الصورة بجوار المحادثة وحدد اللقطة.
3. تأكد من ظهور الصورة داخل الرسالة.
4. اكتب طلبًا قصيرًا وأرسله.

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

في هذا التمرين الأول لا تحتاج إلى تحديد إطار عمل أو بنية مجلدات أو أسماء ملفات. دع Trae يختارها.

إذا أردت الأسلوب البصري فقط دون الاسم والنص الأصليين، فأضف:

استخدم أسلوب هذه الصورة، لكن استبدل الاسم والمحتوى بشيء جديد.

انتظر حتى ينتهي. وافق إذا طلب إذنًا لإنشاء الملفات أو تشغيل المشروع. وإذا لم تفتح الصفحة تلقائيًا، قل:

شغّل هذا المشروع. أريد رؤية النتيجة.

عندما تظهر الصفحة، خصص عشر ثوانٍ للتأكد من أنها تفتح، وأن المحتوى الرئيسي موجود، وأن الزر الأساسي يستجيب. لا تبدأ بتغيير خمسة أشياء معًا.

4. تصلح الطريقة نفسها لمنتجات أخرى

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

المثال الأول: لوحة SaaS

تعرض منتجات SaaS عادة تقدم المشاريع أو المبيعات أو بيانات المستخدمين في لوحات. في لقطة Linear هذه، يوجد التنقل يسارًا والمحتوى يمينًا.

مرجع الدرس: Linear Dashboards

وضع المدرّس الصورة في Trae وقال:

أنشئ لوحة بيانات تشبه هذه.
استخدم بيانات تجريبية في الوقت الحالي.

أنشأ Trae شريطًا جانبيًا وبطاقات بيانات ورسومًا. وهذه هي الصفحة وهي تعمل في المتصفح:

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

المثال الثاني: لعبة مكعبات

إذا لم تجذبك صفحات الويب المعتادة، فاستخدم لقطة من لعبة. اختار المدرّس صورة لعالم Minecraft المبني من المكعبات.

مرجع الدرس: مثال Minecraft في Microsoft Learn

ظل الطلب قصيرًا:

أنشئ لعبة مكعبات تشبه هذه.
يجب أن تتحرك الشخصية وأن تضع المكعبات.

أنشأ Trae لعبة تعمل في المتصفح، ويمكن للشخصية فيها التحرك ووضع المكعبات أو إزالتها:

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

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

أنشئ نسخة أخرى ثلاثية الأبعاد

إذا أردت منظورًا من عين اللاعب أقرب إلى Minecraft، فاكتب «3D» بوضوح. فتح المدرّس مشروعًا فارغًا جديدًا، وأضاف الصورة نفسها، وقال:

أنشئ لعبة مكعبات ثلاثية الأبعاد تشبه هذه.
أريد أن يمشي اللاعب ويدير الكاميرا ويضع المكعبات.

أنشأ Trae هذه المرة عالم مكعبات ثلاثي الأبعاد فعلًا:

بعد اختيار “Start Game”، استخدم WASD للمشي والفأرة للدوران. الزر الأيسر يزيل مكعبًا، والأيمن يضع مكعبًا، ومفاتيح الأرقام تغير نوعه.

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

اجعلها مختلفة

المرجع نقطة بداية فقط. غيّر اللون أو الموضوع أو النص أو الصور أو التفاعل، حتى تتحول النتيجة تدريجيًا إلى عملك الخاص.

5. ماذا لو لم تكن النسخة الأولى جيدة؟

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

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

اتبع قاعدة بسيطة: اختر المشكلة الأوضح في كل جولة.

الصفحة لا تبدو صحيحة

إذا كانت البطاقة العليا طويلة جدًا:

البطاقة في الأعلى طويلة جدًا. اجعلها أقصر.

إذا كانت الصورة الرئيسية صغيرة:

الصورة في المنتصف صغيرة جدًا. كبّرها.

إذا كانت الخلفية داكنة:

الخلفية داكنة جدًا. استخدم لونًا أفتح.

الصفحة لا تتصرف كما ينبغي

إذا لم يفعل الزر شيئًا:

هذا الزر لا يستجيب عند النقر. أصلحه من فضلك.

إذا لم تتحرك شخصية اللعبة:

مفاتيح الأسهم لا تفعل شيئًا. أصلح الحركة من فضلك.

لا تعرف كيف تصف المشكلة

التقط صورة للنتيجة الحالية وقل:

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

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

6. فحص الصف

لا تكتفِ بصورة ثابتة. افتح النتيجة وانقر أو العب بنفسك.

افحص أربعة أمور:

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

إذا فشل بند، فأخبر Trae بما رأيته بدقة واطلب إصلاح هذه المشكلة وحدها. عندما تنجح البنود الأربعة، يكون التمرين قد اكتمل.

أكمل عملًا صغيرًا

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

📚 الواجب

🎯

动手练习

ابنِ صفحتك من لقطة شاشة واحدة

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

1. احتفظ بلقطة الشاشة المرجعية.
2. أنشئ الصفحة وحسّن جزءًا لا يعجبك.
3. احفظ لقطة للنتيجة بعد التعديل.

عند العرض، ضع المرجع وعملك جنبًا إلى جنب واشرح التغيير الذي طلبته.

ما ينبغي تذكره

لم نبدأ بالشيفرة، بل بلقطة شاشة. يتكون التمرين كله من أربع خطوات:

1. التقط لقطة شاشة أو احفظها.
2. أعطها للذكاء الاصطناعي.
3. صف العمل في جملة واحدة.
4. أصلح فرقًا مرئيًا واحدًا في كل مرة.

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

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