🎨 Sketch2UI - محول مخططات واجهة المستخدم

نبذة عن المشروع

تطبيق ويب ذكي يحول رسوماتك اليدوية (الرسومات والخطوط) إلى صفحات ويب احترافية وواجهات مستخدم متجاوبة بضغطة زر واحدة.

---

🎯 المشكلة التي يحلها

في عالم تطوير الويب والتصميم، هناك الكثير من أدوات الذكاء الاصطناعي المبعثرة التي تعتمد على:

• كتابة نصوص برمجية معقدة (Prompts)
• تكوينات معقدة للحصول على ميزات أساسية
• واجهات مستخدم غير بديهية

---

✨ الحل (Sketch2UI)

أنشأنا صفحة ويب سهلة الاستخدام توفر:

المميزات الأساسية

✅ رسم يدوي مباشر - ارسم مخططك على اللوحة الرقمية
✅ توليد تلقائي للكود - تحويل فوري للرسومات إلى HTML/CSS
✅ معاينة مباشرة - شاهد النتيجة فوراً
✅ تعديل الكود - عدّل الكود المُولد قبل الاستخدام
✅ نسخ سهل - انسخ الكود مباشرة إلى الحافظة
✅ تصميم متجاوب - الواجهات المُولدة تعمل على جميع الأجهزة
✅ دعم RTL - واجهات متوافقة مع النصوص العربية

---

🚀 كيفية الاستخدام

الخطوة 1: إدخال مفتاح API

1- افتح الصفحة 2- أدخل مفتاح Google AI Studio API الخاص بك 3- اضغط على "حفظ المفتاح"

الخطوة 2: الرسم

1- استخدم الماوس للرسم على اللوحة البيضاء 2- ارسم مخطط التصميم الذي تريده 3- استخدم زر "تراجع" إذا أخطأت

الخطوة 3: التوليد

1- اضغط على "توليد HTML" 2- انتظر معالجة الرسمة بواسطة AI 3- ستظهر النتيجة في الكود الناتج

الخطوة 4: المعاينة والتعديل

1- انظر إلى تبويب "معاينة مباشرة" لرؤية النتيجة 2- عدّل الكود في تبويب "الكود الناتج" حسب الحاجة 3- اضغط "نسخ الكود" لحفظ النتيجة

---

🛠️ المتطلبات

• متصفح ويب حديث (Chrome, Firefox, Safari, Edge)
• اتصال إنترنت
• مفتاح Google AI Studio API (يمكنك الحصول عليه من Google AI Studio)

---

📋 المميزات التقنية

واجهة المستخدم

• تصميم حديث وسريع الاستجابة
• دعم كامل للغة العربية
• واجهة بديهية وسهلة الاستخدام

الكود المُولد

• HTML دلالي - استخدام عناصر HTML الحديثة
• CSS متقدم - Flexbox/Grid للتخطيطات
• إمكانية الوصول - معايير WCAG مع ARIA
• التجاوب - يعمل على جميع أحجام الشاشات

التكامل مع AI

• يستخدم Google Gemini API لتحليل الصور
• معالجة ذكية للرسومات اليدوية
• توليد كود عالي الجودة

---

🔐 الأمان

⚠️ ملاحظات أمان مهمة:

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

---

🎨 مثال على الاستخدام

1- ارسم مربع بسيط -> توليد زر HTML 2- ارسم خطوط وأشكال -> توليد نموذج تسجيل 3- ارسم تخطيط شامل -> توليد صفحة كاملة

---

💡 التطوير المستقبلي

خطط التطوير المستقبلية:

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

---

📞 التواصل

الحارث ياسر مياسا alharithmayyasa@gmail.com