تحويل تصاميم Canva إلى HTML/CSS باستخدام الذكاء الاصطناعي

وصف العمل

طوّرت تطبيقًا يعتمد على الذكاء الاصطناعي لتحويل تصاميم Canva (صور قوالب) إلى كود HTML/CSS نظيف واستجابِي (responsive). الهدف تسريع تحويل التصاميم إلى صفحات ويب قابلة للاستخدام دون الحاجة لكتابة الواجهة يدويًا.

المشكلة

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

ما الذي قمت به؟

بناء واجهة رفع تصميمات (PNG/JPG) عبر تطبيق Streamlit.

استخدام نموذج بصري متقدم (Google Gemini 2.5 Flash) لتحليل مكوّنات التصميم (التخطيط، الألوان، الخطوط، المسافات، الأزرار، الصور).

تحويل مخرجات التحليل إلى قالب HTML/CSS منظم وقابل للتعديل والاستجابة على شاشات الهواتف والحواسيب.

إضافة خيارات تخصيص (ألوان، تباعد، خطوط) قبل توليد الكود.

تمكين تنزيل الملف الناتج كحزمة HTML/CSS جاهزة للنشر أو التطوير الإضافي.

تأمين التعامل مع مفاتيح API: المستخدمون يدخلون مفتاح Google Gemini الخاص بهم داخل الواجهة دون تخزينه في المستودع.

التقنيات المستخدمة

Streamlit – Python 3.11+ – Google Gemini (Vision & Layout) – HTML5 – CSS3 – Responsive Design

النتيجة والفائدة للعميل

تحويل سريع وموثوق من تصميم إلى صفحة ويب قابلة للنشر.

توفير ساعات من العمل اليدوي للمطورين والمصممين.

إمكانية التعديل السريع على الألوان والخطوط والمسافات قبل التصدير.

مناسب لإنشاء صفحات هبوط (landing pages)، عروض تسويقية، ومعاينات سريعة للتصاميم على الويب.