تجربة شخصية في استخدام GPT 5.2 Codex لتوليد موقع منظّم ومنسّق وعامل بالكامل من أمر نصي واحد في أقل من خمس دقائق. يغطي المقال الأمر النصي الدقيق الذي استُخدم، وما أجاده النموذج، وأين تعثّر، وكيف تجمع بين توليد الشيفرة بالذكاء الاصطناعي وأدوات توليد الصور بالذكاء الاصطناعي لإطلاق صفحات جاهزة للإنتاج بسرعة.
كتبت جملة واحدة. بعد عشرين ثانية ظهر أول وسم HTML. وقبل أن يبرد فنجان القهوة على الجانب الأيمن من مكتبي، كان موقع منظّم ومنسّق وعامل جزئيًا معروضًا في نافذة المتصفح. كانت تلك الجملة هي الأمر النصي، وGPT-5.2 كتب الباقي.
هذه ليست تجربة فكرية. أجريتها بعد ظهر يوم ثلاثاء دون أي تحضير، ودون قوالب جاهزة، ودون npm install. مجرد أمر نصي وملف فارغ ومؤقت. إليك ما حدث دقيقةً بدقيقة، وما أصابه النموذج تمامًا، وأين انهار، وما الذي يجب أن تفعله بشكل مختلف إن جربته بنفسك.
يخلط معظم الناس بين GPT-5.2 وروبوت المحادثة. هذا التصور يقلّل من قيمته. نعم، يمكنك التحدث معه، لكن GPT-5.2 يُوصف بشكل أدق بأنه محرك برمجة يعتمد على الاستدلال أولًا ويتواصل بلغة إنجليزية بسيطة. تدرّب على حجم هائل من الشيفرة بعشرات اللغات والأطر وأنماط البرمجة، ما يعني أنه لا يكتب الصياغة النحوية فحسب، بل يكتب النية.
كان نموذج Codex الأصلي، الذي صدر قبل GPT-5.2 بسنوات، لافتًا بالفعل. تصف ما تريد فينتج شيفرة تعمل. لكنه كان يفتقر إلى الاستدلال الأوسع، فيستطيع ملء دالة واحدة، لكنه يتعثر عند تصميم نظام كامل. أما GPT-5.2 فيعمل بطريقة مختلفة. يستطيع الاحتفاظ بتصور ذهني لمشروعك كله ضمن السياق، واتخاذ قرارات بنيوية بشكل استباقي، والإشارة إلى افتراضاته قبل أن تتحول إلى أخطاء.
حسّن الإصدار 5.2 تحديدًا أمرين يهمّان أكثر من غيرهما في تطوير الويب:
هاتان الخاصيتان هما سبب إمكانية بناء موقع في خمس دقائق. كانت النماذج السابقة تكتب الشيفرة. أما هذا فيكتب شيفرة قد يفخر بها مطوّر بشري بحق.
ضبطت المؤقت. خمس دقائق، أمر نصي واحد، وصفر تصحيحات متابعة أثناء التوليد. كان الهدف معرفة ما سينتجه GPT-5.2 دون توجيه مباشر.
إليك الأمر النصي الدقيق، دون أي تغيير:
"ابنِ لي موقعًا من صفحة واحدة لمصوّر حر. يحتاج إلى شريط تنقل، وقسم رئيسي يحوي شعارًا قصيرًا، وشبكة معرض أعمال تضم ستّ صور مؤقتة، وقسم عن المصوّر يحوي سيرة ذاتية قصيرة، ونموذج اتصال. استخدم HTML5 دلاليًا، وCSS خامًا بلوحة ألوان من الأبيض الدافئ المائل إلى الرمادي والزيتوني الداكن، وحدًّا أدنى من JavaScript للتحقق من نموذج الاتصال. دون مكتبات خارجية."
هذا كل شيء. لا إطار سلكي، ولا موقع مرجعي، ولا رموز ألوان.
خلال أول 30 ثانية، أنتج GPT-5.2 إعلان <!DOCTYPE html> مع سمة lang صحيحة، و<head> يحوي وسوم <meta> تتضمن خصائص Open Graph لم أذكرها، و<nav> دلاليًا مع تسميات aria. هذه التفصيلة الأخيرة لم تكن في أمري. أضافها النموذج من تلقاء نفسه لأنه يعامل إمكانية الوصول كمعيار من معايير الويب، لا كإضافة اختيارية.
ظهرت شبكة المعرض باستخدام CSS Grid بتخطيط متجاوب من ثلاثة أعمدة. صُمّم القسم الرئيسي بارتفاع يملأ كامل نافذة العرض، مع خلفية مهيأة لتبديل الصورة. واستخدم قسم "عني" تخطيطًا من عمودين، مع عنصر صورة دائرية مؤقتة على اليسار ونص السيرة على اليمين.
ما أدهشني لم يكن السرعة فحسب، بل القرارات. اختار النموذج انتقالات .portfolio-item:hover دون أن يُطلب منه ذلك، واستخدم clamp() للطباعة المرنة. وكتب التحقق من النموذج مع حالات خطأ فورية، لا مجرد تنبيه عند الإرسال. هذه خيارات قد يتخذها مطوّر واجهات أمامية أقدم.
برزت ثلاثة مجالات كإنجازات حقيقية، من النوع الذي قد يستغرق من مطوّر مبتدئ فترة بعد الظهر لإنتاجه.
استخدم بنية المستند <main> و<section> و<article> و<aside> و<footer> بشكل صحيح. لم تكن مجرد بدائل لعناصر div، بل كانت مع التداخل الصحيح ومع أدوار ARIA landmark. هذا مهم لمحركات البحث ولقرّاء الشاشة على حد سواء.
| العنصر | مستخدم بشكل صحيح | سمة Aria المضافة |
|---|---|---|
<nav> | نعم | aria-label="Main navigation" |
<section> | نعم | aria-labelledby في القسم الرئيسي |
<form> | نعم | role="form" مع fieldset |
<img> | نعم | تم توليد نص بديل وصفي |
استخدم ورقة الأنماط خصائص CSS المخصصة من السطر الأول:
:root {
--color-bg: #faf8f4;
--color-accent: #5a6437;
--color-text: #2c2c2c;
--space-unit: 1rem;
}
هذا تصميم له رأي واضح، وهذا أمر جيد. تحوّل الأبيض الدافئ المائل إلى الرمادي والزيتوني الداكن اللذان وصفتهما إلى نظام تصميم متماسك، لا إلى لونين ملقيين على الصفحة. استخدمت المسافات مضاعفات --space-unit. وطُبّقت متغيرات الألوان بشكل متسق دون تكرار.
تحقق التحقق من النموذج من الحقول الإلزامية، وتحقق من صيغة البريد الإلكتروني باستخدام تعبير نمطي، وعرض رسائل الخطأ المضمّنة أسفل كل حقل بدلًا من نوافذ التنبيه المنبثقة. ومنع معالج الإرسال السلوك الافتراضي، وعرض حالة النجاح دون إعادة تحميل الصفحة. كل ذلك في أقل من 60 سطرًا.
لا يخرج شيء من هذا النوع مثاليًا. احتاج مجالان إلى اهتمام قبل أن يصبح الموقع جاهزًا للإنتاج فعلًا.
تعامل شبكة المعرض مع الهواتف بشكل جيد في الغالب، لكن التخطيط النصي ذا العمودين في القسم الرئيسي لم يتكدّس بشكل صحيح عند 480 بكسل وما دونها. فاض النص خارج حاويته. هذه نقطة ضعف معروفة في CSS المولّد بالذكاء الاصطناعي: يتعامل بثقة مع نقاط الكسر الشائعة (768 بكسل و1024 بكسل)، لكنه يفوّت أحيانًا الحالات الحدّية في نطاق ما دون 500 بكسل.
💡 الإصلاح: أضف أمرًا نصيًا متابعًا يطلب تحديدًا تحسينات تبدأ بالهاتف عند عرض 375 بكسل. أمر واحد، 30 ثانية، وانتهت المشكلة.
مُثّلت الصور الستّ في المعرض بمربعات رمادية تحمل نصًا. كانت وظيفية، لكنها غير صالحة لإطلاق حقيقي. هنا يتحول سير العمل إلى شيء أكثر إثارة، لأنك تستطيع حل هذه المشكلة بتوليد الصور بالذكاء الاصطناعي بدلًا من البحث عن صور جاهزة.
الموقع في خمس دقائق نقطة بداية، لا منتج نهائي. سير العمل الحقيقي يأتي بعد ذلك.
يحتفظ GPT-5.2 بالسياق عبر المحادثة. لذلك بعد التوليد الأول، يمكنك المتابعة بتعليمات موجّهة:
يستغرق كل واحد من هذه الأوامر نحو 15 إلى 30 ثانية، وينتج شيفرة تعمل وتتكامل مع ما وُلّد سابقًا. لا يعيد النموذج كتابة كل شيء من الصفر، بل يعدّل الأقسام المعنية بدقة جراحية.
هنا ينتقل الموقع من نموذج أولي إلى شيء جذاب بصريًا. بدلًا من البحث عن الصور، يمكنك توليدها. نماذج مثل Flux 2 Pro وGPT Image 1.5 تنتج صورًا واقعية كالصور الفوتوغرافية من أوامر نصية في ثوانٍ.
بالنسبة إلى موقع معرض تصوير، ستولّد:
Flux 1.1 Pro Ultra قوي بشكل خاص في المخرجات الواقعية كالصور الفوتوغرافية مع تفاصيل بدقة 8K. وImagen 4 من Google يتعامل جيدًا مع تراكيب المشاهد المعقدة. وStable Diffusion 3.5 Large يمنحك تحكمًا دقيقًا في اتساق الأسلوب عبر صور متعددة، وهذا مهم عندما تريد أن تبدو صور المعرض وكأن المصوّر نفسه التقطها.
ليس كل مشروع يناسب النهج نفسه. يعمل الموقع في خمس دقائق بأفضل شكل لحالات استخدام معينة، ويحتاج إلى تعديل لغيرها.
هنا تتألق صفحات الهبوط فعلًا مع GPT-5.2. صفحة واحدة، وتسلسل هرمي واضح، وهدف تحويل واحد. يُدرج النموذج بشكل طبيعي أقسام الدليل الاجتماعي، وعناوين تركز على الفوائد، ودعوات واضحة للفعل، حتى عندما لا تحددها.
أما المواقع متعددة الصفحات التي تحوي بيانات ديناميكية فقضية مختلفة. بالنسبة إلى مدونة بنظام إدارة محتوى، أو متجر إلكتروني بقاعدة بيانات، أو تطبيق SaaS بمصادقة، فأنت تطلب من النموذج تصميم شيء لا يمكن أن يتسع بشكل معقول في أمر نصي واحد. قسّم هذه الأعمال إلى جلسات: البنية أولًا، ثم صفحة بصفحة، ثم المكونات الفردية.
يكتب GPT-5.2 مكونات React وVue وSvelte بشكل ممتاز. بالنسبة إلى المواقع الثابتة، يكون HTML وCSS الخامان أسرع في التوليد وأسهل في النشر. أما لأي شيء تفاعلي على نطاق واسع، فاطلب منه الكتابة بالإطار الذي تفضّله منذ البداية، لأن إعادة الهيكلة من الخام إلى React في منتصف المشروع مؤلمة حتى عندما يقوم بها إنسان.
| نوع الموقع | الحزمة الموصى بها | التقدير الزمني |
|---|---|---|
| صفحة هبوط | HTML + CSS + Vanilla JS | 5 دقائق |
| معرض أعمال | HTML + CSS + JS | 8 دقائق |
| مدونة | Astro أو Next.js | 20 دقيقة |
| نسخة أولية من SaaS | Next.js + API routes | أكثر من 45 دقيقة |
| التجارة الإلكترونية | Next.js + Stripe | أكثر من 60 دقيقة |
السؤال الصادق تحت كل هذا: هل يحل محل المطوّرين؟ لا، والأسباب محددة، وليست مجرد طمأنة.
GPT-5.2 لا يعرف منطق العمل الفعلي لعميلك. لا يعرف أن مسار الدفع لديك يتضمن تحقق من ثلاث خطوات بسبب متطلب من مزوّد الدفع. ولا يعرف أن القائمة يجب أن تنطوي عند 920 بكسل بدلًا من 768 بكسل لأن أطول عنصر في القائمة عريض بشكل غير معتاد على بعض الشاشات. ولا يعرف أن قسم التواصل يحتاج إلى التكامل مع نظام إدارة العملاء (CRM) القديم لعميلك عبر API خاص بصيغة XML.
كل تلك المعرفة السياقية والمؤسسية والعلاقاتية موجودة لديك.
ما يفعله فعلًا هو إلغاء الأعمال التأسيسية المملة. إعداد مستند HTML أساسي، وكتابة إعادة تعيين CSS، وهيكلة مكوّن، وكتابة التحقق المتكرر من النماذج، وبناء شبكة متجاوبة، تختفي كل هذه المهام. ما يبقى هو التفكير الفعلي: قرارات البنية، ومتطلبات العميل، والحالات الحدّية، والأداء، والأمان.
💡 كلام صريح: المطوّرون الذين يستخدمون توليد الشيفرة بالذكاء الاصطناعي بفعالية يميلون إلى قضاء وقتهم في أنظمة التصميم، والتواصل مع العميل، وتحسين الأداء. هذه أنشطة ذات قيمة أعلى من كتابة الحاوية المرنة الثانية عشرة في اليوم.
يتيح لك PicassoIA وصولًا مباشرًا إلى GPT-5.2 دون اشتراك منفصل في API أو إضافة IDE. تتفاعل معه عبر واجهة ويب، ويمكنك إقرانه بنماذج توليد الصور في الجلسة نفسها.
الخطوة 1: افتح GPT-5.2 على PicassoIA وابدأ جلسة جديدة.
الخطوة 2: اكتب أمرًا نصيًا يحدد:
الخطوة 3: انسخ المخرجات إلى ملف .html وافتحه في المتصفح. تحقق مما يعمل وما يحتاج إلى تعديل.
الخطوة 4: ارجع إلى GPT-5.2 وأرسل أوامر نصية متابعة موجّهة لتحسينات محددة. أشِر إلى العناصر بدقة بأسماء الفئات (class) أو المعرّفات (ID).
الخطوة 5: عندما تصبح البنية متينة، ولّد عناصرك المرئية. استخدم Flux 2 Pro للصور الواقعية كالصور الفوتوغرافية بشكل عام، وGPT Image 1.5 للمشاهد التي تحوي نصوصًا محددة أو وضع منتجات، وFlux Dev للمخرجات التجريبية عالية الدقة.
الخطوة 6: استبدل العناصر المؤقتة في HTML بعناوين URL لصورك المولّدة، وانشر الموقع على خدمة استضافة، وسيصبح موقعك متاحًا على الإنترنت.
:root يجعل تغييرات الألوان والمسافات بسيطة.
خمس دقائق ليست ادعاءً تسويقيًا. إنها وصف حرفي لما حدث بعد ظهر يوم ثلاثاء في نافذة متصفح عادية. كان الموقع غير مثالي بطرق محددة احتاجت عشر دقائق أخرى لإصلاحها، ثم أصبح جيدًا فعلًا.
التحول الحقيقي ليس في السرعة. إنه في المكان الذي يذهب إليه انتباهك. عندما تكتب الهيكلة نفسها بنفسها، تتوقف عن التفكير في بنية عناصر div، وتبدأ بالتفكير في ما إذا كان الموقع يحل فعلًا المشكلة التي يفترض أن يحلها. هذا هو التغيير الجوهري..
يضع PicassoIA GPT-5.2 إلى جانب Flux 2 Pro وGPT Image 1.5 وImagen 4 وعشرات النماذج الأخرى للصور واللغة في مكان واحد. اكتب الشيفرة بنموذج، ووَلّد العناصر المرئية بآخر، وطوّر الاثنين في الجلسة نفسها. لا تبديل بين التبويبات، ولا اشتراكات منفصلة، ولا تنقّل بين الأدوات.
افتح جلسة. اكتب أمرك النصي. اضبط مؤقتك. وانظر كم يمكنك أن تبني.
اختر لغتك
