بنيت 9 مواقع ويب في أقل من ساعة باستخدام Claude
لقد جربت بنفسي “كتابة الأكواد بالإيحاء”، واكتشفت مؤخرًا أنه يمكنك إنشاء ما يصل إلى خمسة مواقع ويب في جلسة واحدة باستخدام اشتراك Claude المجاني. بعد ذلك، ستحتاج إلى الانتظار خمس ساعات لإعادة استخدام الخدمة أو الترقية إلى Claude Pro.
قمت باختبار Claude وقمت ببناء تسعة مواقع ويب فريدة في أقل من ساعة. إليكم النتائج.
1. صفحة هبوط لألعاب الأركيد القديمة
المُطالبة:“تصميم موقع ألعاب أركيد قديم الطراز، بنمط نيون، وخط بكسل، وخلفية متحركة نابضة، وثلاثة أزرار كبيرة مضيئة توصل إلى ‘ألعاب كلاسيكية’ وهمية. إضافة مؤثرات صوتية عند تمرير الماوس فوق الأزرار.”
هذا الموقع المستوحى من ألعاب الأركيد القديمة بنمط النيون يعطي إحساسًا حقيقيًا بصالة ألعاب من الثمانينات. خط البكسل ممتع حقًا، وكل زر له مؤثر صوتي تفاعلي خاص به. مع لمسات زوايا متوهجة، وتأثيرات خلل خفيفة، التصميم هو بالضبط ما كنت أتمناه؛ متجاوب، يدعم التنقل باستخدام لوحة المفاتيح، وجاهز للربط بألعاب حقيقية. بشكل عام، هذا الموقع يعطيك شعورًا بأنك دخلت مباشرة إلى صالة ألعاب كلاسيكية.
2. مدونة وصفات بسيطة
المُطالبة:“تصميم صفحة رئيسية بسيطة لمدونة وصفات، بخلفية بيضاء نقية، وخطوط serif أنيقة، وشبكة من ثلاث بطاقات وصفات. يجب أن تتضمن كل بطاقة صورة، وعنوان الوصفة، وتأثير تمرير يكشف عن المكونات. اجعلها متوافقة مع الجوال.”
هذه الصفحة الرئيسية البسيطة لمدونة وصفات أنيقة ونظيفة. التصميم المتوافق مع الجوال يوفر تفاعلات سهلة باللمس مع ميزة النقر للكشف عن المكونات، وهو مثالي للاستخدام على الجوال. تعمل الطباعة والتباعد بشكل جيد على جميع أحجام الشاشات.
يحقق التصميم توازنًا مثاليًا بين الوظيفة البسيطة والطباعة المتطورة. التفاصيل الفريدة مثل الرسوم المتحركة المتداخلة للمكونات تجمع الصفحة بأكملها، مما يمنحها جاذبية ممتازة وترحيبية.
3. صفحة شركة ناشئة مستوحاة من الخيال العلمي
المُطالبة: “صمم موقعًا مستقبليًا من صفحة واحدة لشركة تعدين فضائي خيالية. قم بتضمين خلفية متحركة لنجوم تملأ الشاشة، وبيان مهمة بنص معدني جريء، وسفينة فضاء متحركة تطير ببطء عبر الشاشة. أضف زر دعوة إلى العمل: “انضم إلى الأسطول”.”
من ألعاب الأركيد في الثمانينيات إلى أفلام الخيال العلمي، يتميز هذا الموقع بخلفية نجوم تملأ الشاشة مع نجوم متلألئة ومذنبات متطايرة وجزيئات فضائية تنجرف، بينما تطير سفينة فضاء لطيفة عبر الشاشة. تضفي الطباعة المعدنية الجريئة والنسخة اللامعة والزر النابض إحساسًا بالاستكشاف.
العناصر التفاعلية مثل آثار الماوس والتنقل عبر لوحة المفاتيح والتمرير المنظر تجعل تجربة المستخدم تنبض بالحياة حقًا. لقد قام Claude بعمل ممتاز بالتفاصيل.
4. موقع قصة للأطفال
المُطالبة: “تصميم موقع ويب مرح وملون لكتاب قصص للأطفال. استخدم خطوطًا كبيرة وغريبة، ورسومًا توضيحية للحيوانات، وزرًا يقلب بين ثلاث ‘صفحات’ قصص قصيرة مع رسوم متحركة بسيطة. قم بتضمين خلفية تغير لونها مع كل صفحة.”
ابتكر Claude موقعًا إلكترونيًا رائعًا ينضح بالسحر الغريب. تتبع القصة ثلاثة حيوانات: ثعلب اسمه فيليكس، ودب اسمه بيني، وفراشة اسمها بيلا في مغامرة ملونة عبر ثلاث صفحات تفاعلية.
تقدم كل صفحة من صفحات الموقع تدرجات ألوان خلفية مرحة، ورموز تعبيرية للحيوانات نابضة بالحياة ورسوم متحركة سلسة للتقليب، وكل ذلك يجعله يبدو وكأنه كتاب حقيقي وتفاعلي. الخطوط واضحة ومبهجة، والتفاصيل المتحركة المضافة جذابة، وبشكل عام، هذا الموقع جذاب للقراء الصغار، وخاصة أولئك الذين اعتادوا على قضاء الوقت أمام الشاشات.
5. لوحة معلومات بيانات تفاعلية
المُطالبة:“أنشئ لوحة معلومات بيانات حديثة ذات طابع داكن مع مخططات تفاعلية باستخدام بيانات وهمية. قم بتضمين قائمة جانبية، وساعة حية في الأعلى، وثلاثة مخططات: مخطط شريطي، ومخطط خطي، ومخطط دائري. أضف تأثيرات تحوم وانتقالات سلسة بين الأقسام.”
قررت إنشاء هذا الموقع كمثال لحالة عمل. تتضمن لوحة المعلومات ذات الطابع الداكن جميع الميزات التي طلبتها في المُطالبة، بما في ذلك قائمة جانبية أنيقة مع رسوم متحركة سلسة. يعمل التصميم سريع الاستجابة لسطح المكتب والجوال ويتضمن أربعة أقسام رئيسية مع انتقالات سلسة.
أعجبتني الساعة التي تعمل في الوقت الفعلي في الرأسية والمخططات التفاعلية هي إضافة رائعة. أقدر كيف أضاف Claude بيانات وهمية حتى أتمكن بالفعل من تصور العرض.
6. موقع حديقة زن للتأمل
المُطالبة: “أنشئ موقعًا إلكترونيًا بسيطًا للتأمل بصفحة واحدة، بخلفية متدرجة ناعمة، ومياه متدفقة متحركة في الأسفل، وشجرة أزهار الكرز تتساقط بتلاتها ببطء عبر الشاشة. قم بتضمين زر كبير “ابدأ التأمل” يقوم بتشغيل موسيقى محيطة مريحة ويتلاشى مع اقتباس ملهم.”
لقد كنت سعيدًا جدًا بنتيجة هذا الموقع. الخلفية المتدرجة الناعمة بألوان مثل الخوخ والوردي والمرجاني والأرجواني تبرز للمساعدة في تعزيز الهدوء واليقظة الذهنية. يخلق الموقع جوًا هادئًا حقًا مثاليًا للتأمل.
7. سوق سايبربانك
المُطالبة: “أنشئ موقعًا إلكترونيًا مستوحى من عالم cyberpunk النيون، يعرض سوقًا مستقبليًا في الشارع. استخدم تأثيرات خلل عند تمرير الماوس، ولافتات نيون وامضة، وقوائم متحركة بأسلوب الهولوغرام. يجب أن تضيء كل بطاقة منتج عند تمرير الماوس عليها وأن تتضمن مؤثرًا صوتيًا قصيرًا من نوع synthwave. أضف رسمًا متحركًا للمطر المتكرر لإضفاء جو من الإثارة.”
السمة البارزة في هذا الموقع هي التأثير الجوي. من الرسوم المتحركة للمطر المتكررة ولافتات النيون الوامضة إلى خلفية الشبكة المتحركة، هذا الموقع جذاب بصريًا.
الأصوات الثلاثة المختلفة لـ synth والأزرار التفاعلية تجعل هذا الموقع سهل الاستخدام وجذابًا. لم يكن بإمكاني برمجة هذه الميزات بمفردي دون أن يقوم Claude بكل العمل. يلتقط الموقع تمامًا ذلك الجو القاسي لسوق الشارع cyberpunk المضاء بالنيون مع الرسوم المتحركة السلسة وأصوات synthwave الأصلية والمؤثرات البصرية الغامرة.
8. دفتر يوميات مهمة خيالية
المُطالبة:“صمم موقعًا إلكترونيًا لمغامرات خيالية مستوحى من مخطوطة قديمة. اجعل مؤشر القلم الريشي متوهجًا ويترك وراءه بريقًا عند تحريكه، وشريط التنقل الجانبي على شكل كتاب تعاويذ من القرون الوسطى، وصفحة حيث يمكن للمستخدمين ‘جمع’ ثلاثة عناصر سحرية بالنقر على أيقونات تتحرك عند العثور عليها.”
يثبت هذا المثال أن Claude يمكنه بسهولة التعامل مع تصميم خيالي ساحر. يترك مؤشر القلم الريشي المتوهج آثارًا متلألئة أثناء استكشاف الموقع، بينما تتكشف قائمة التنقل ككتاب تعاويذ من القرون الوسطى بجلد مجلد مع تأثيرات تحوم متحركة.
يستقر المحتوى الرئيسي على لفائف من ورق البردي المصممة بنقوش قديمة وطباعة مزخرفة من العصور الوسطى، مما يمنح الموقع سحرًا أصيلًا من العالم القديم. مع التصميم المتجاوب والتوهجات التفاعلية والإنجازات التفاعلية، كل نقرة مليئة بالتفاعل السحري القديم.
9. تبني حيوان أليف كرتوني
المُطالبة: “أنشئ موقع ويب تفاعليًا مرحًا حيث يمكن للزوار “تبني” حيوان أليف كرتوني (قطة أو كلب أو تنين). يجب أن يكون لكل حيوان أليف رسوم متحركة في وضع الخمول، وأن يتفاعل عند النقر عليه (خرخرة، هز الذيل، نفث النار)، ويمكن “إطعامه” عن طريق سحب أيقونات الطعام إليه. أضف موسيقى خلفية مبهجة مع خيار كتم الصوت.”
لقد أنشأت موقعًا إلكترونيًا تفاعليًا لتبني الحيوانات الأليفة، وهو مبهج بقدر ما هو جذاب. يتمتع كل حيوان أليف بكرتونه الخاص برسوم متحركة وشخصية مرحة. يسهل Claude سحب الطعام وإفلاته لإطعامهم، ومشاهدة عدادات سعادتهم ترتفع وفتح ردود فعل مبهجة من الخرخرة إلى الزئير النفث للنار.
هناك أيضًا لحن متكرر ومبهج للمساعدة في تهيئة الحالة المزاجية. الموقع متجاوب تمامًا، وسهل الاستخدام باللمس، ومصمم بوضوح لتجربة ممتعة وعاطفية وتفاعلية.
