ملفات SVG مصدرية قابلة للتعديل
غيّر النصوص والأشكال وترتيب العناصر وفق منتجك. احتفظ بالحزمة الأصلية مرجعًا، وأجرِ التعديلات على نسخة عمل.
تصميم خدمات توليد الصور · حزمة ملفات SVG
حزمة واجهات المستخدم لخدمة الصور: خطط للشاشات قبل البرمجة
حزمة واجهات المستخدم هذه للمطورين المستقلين وفرق المنتجات التي تبني خدمة لتوليد الصور بالذكاء الاصطناعي. راجع الانتقال من كتابة الوصف إلى النتائج والسجل واختيار الخطة. ثم عدّل النصوص والتخطيط وألوان SVG باستخدام مهارة AI UI Designer المجانية في Codex أو Claude Code.
مشمولة في اشتراك مدفوع سارٍ، دون خصم أرصدة.
تصاميم SVG ثابتة · نصوص أمثلة بالصينية · لا تتضمن شيفرة التطبيق
- صفحات سطح المكتب
- 6
- سمات الألوان
- 2
- مراجع للجوال
- 2
- ملفات مصدر قابلة للتعديل
- SVG
ماذا يرى المستخدم بعد توليد الصورة الأولى؟
راجع الدخول إلى الخدمة وإنشاء الصور والبحث في الأعمال واختيار الخطة قبل تنزيل الحزمة. لكل صفحة على الحاسوب مخطط هيكلي رمادي وتصميم فاتح وآخر داكن، لتقييم ترتيب المعلومات والمظهر.
الصفحة الرئيسية
رتّب تعريف الخدمة ونماذج الصور ونقطة بدء التوليد.
الدخول والتسجيل
راجع حقول الدخول، واستعن بلوحة الحالات لفحص التسجيل ورسائل الخطأ.
مساحة توليد الصور
نظّم الوصف والنموذج ونسبة الأبعاد والعدد وتكلفة الرصيد والنتائج.
سجل الصور
راجع البحث والتفاصيل وإعادة استخدام الإعدادات وتأكيد الحذف.
الخطط والأرصدة
قارن عرض الرصيد والخطط النموذجية وتصاميم نتيجة الشراء.
إعدادات الحساب
حدد مواضع حقول الملف الشخصي وتأكيد الحفظ وتسجيل الخروج.
تعرض المعاينات نصوص الأمثلة الصينية وبيانات منتج خيالية. الأزرار والنماذج وشاشات الشراء تصاميم ثابتة لا تنفذ عمليات فعلية.
صمم أيضًا حالات الانتظار والأخطاء والسجل الفارغ
يجمع ملف ZIP الصفحات والمكونات وملاحظات السيناريو، لتتمكن من مقارنة التعديلات مع بقية شاشات الخدمة.
راجع البنية قبل اختيار الألوان
ترافق التصاميم ملفات JSON لسمات الألوان بعدد 2. افحص تسلسل المعلومات في المخططات الرمادية، ثم اختر المظهر الفاتح أو الداكن.
مكونات وحالات للواجهة
راجع الأزرار والحقول والقوائم والبطاقات ومربعات الحوار، مع حالات التوليد الجاري والسجل الفارغ ونقص الرصيد وخطأ تسجيل الدخول وفشل الدفع.
نطاق واضح لتصاميم الجوال
رُسمت مساحة التوليد وسجل الصور بعرض 390px. أما الصفحات الأخرى فيصف السيناريو سلوكها على الجوال، ولا تتضمن رسومات جوال منفصلة.
استورد ZIP ثم حدد تغييرات منتجك
استخدم المهارة المجانية لاستيراد الحزمة. تحتاج السكربتات المساعدة إلى Python 3.9 أو أحدث.
- 1
نزّل الملفات بحساب مشترك
سجّل الدخول باشتراك AI UI Designer مدفوع وسارٍ. تنزيل الحزمة لا يستهلك أرصدة توليد الصور.
- 2
مرّر مسار ZIP المحلي إلى المهارة
ثبّت مهارة AI UI Designer في Codex أو Claude Code، وأعطِ المساعد مسار ملف ZIP على جهازك واطلب استيراده.
- 3
عدّل النص والتخطيط وراجع SVG
اختر المظهر وحدد الحقول والتعديلات المطلوبة. راجع النتيجة وتابع العمل على نسخة منفصلة مع الحفاظ على الملفات الأصلية.
مثال طلب: مساحة عمل لصور متجر إلكتروني
استخدم المظهر الفاتح لحزمة توليد الصور لتصميم مساحة عمل لصور المنتجات في متجر إلكتروني. أضف اسم المنتج وأبرز مزاياه واختيار نسبة أبعاد الصورة. احتفظ بتوضيح تكلفة الرصيد وبطاقات النتائج. أخرج التصميم بصيغة SVG قابلة للتعديل، وعدّل النصوص إلى العربية مع ترتيب مناسب للقراءة من اليمين إلى اليسار.
ابدأ بمتطلباتك أو بتصاميم شاشات موجودة
تتيح المهارة المجانية التصميم من المتطلبات واستيراد الحزم وتطبيق السمات. يلزم اشتراك مدفوع سارٍ لتنزيل مجموعة الصفحات هذه من الموقع.
- التصميم من متطلباتك
- المهارة المجانية · مجانًا
- استيراد الحزم وتطبيق السمات
- المهارة المجانية · مجانًا
- تنزيل مجموعة الصفحات هذه
- حزمة الواجهات · اشتراك مدفوع سارٍ
- استخدام الملفات المنزلة محليًا
- حزمة الواجهات · حتى بعد انتهاء الاشتراك
FAQ
الملفات واللغة وشروط التنزيل
تعرّف على حدود موارد التصميم وما يحتاج إلى تطوير مستقل قبل تشغيل الخدمة.
راجع الشاشات ثم خصصها لخدمة الصور الخاصة بك
استعرض التوليد والسجل والخطط في حزمة واجهات المستخدم. إذا ناسبت مشروعك، نزّل SVG باشتراك مدفوع سارٍ وعدّل النصوص والتخطيط باستخدام المهارة المجانية.
تنزيل تصاميم SVGمشمولة في اشتراك مدفوع سارٍ، دون خصم أرصدة.