AI UI Designer Logo
AI UI Designer

حدّد شكل الصفحة قبل كتابة الكود

مهارة تصميم UI مجانية لـ Codex وClaude Code

تعرف الوظائف المطلوبة لكن ترتيب الشاشة لم يتضح بعد؟ ابدأ بمخطط SVG ثابت، وراجع الحقول والإجراء الرئيسي، ثم حسّن المظهر مع مساعد البرمجة. لا تحتاج إلى شراء حزمة مشاهد للبدء.

التنزيل دون تسجيل دخول. الناتج SVG ثابت؛ الوصول إلى المساعد واستخدام النماذج لهما تكاليف منفصلة.

من المتطلبات إلى تخطيط يمكن مراجعته

رتّب المحتوى والإجراءات أولًا، ثم اضبط الخطوط والمسافات والألوان.

مخطط SVG يضم حقول المنتج والمقاسات وزر الإنشاء وأربع بطاقات للنتائج
02 راجع المخطط الأولي
تصميم SVG ملوّن للأداة نفسها بعناصر تحكم بنفسجية وملصقات لمنتجات معبأة في زجاجات
03 حسّن تصميم الواجهة

نفس البنية من المخطط إلى التصميم

يوضح مثال أداة ملصقات المنتجات سير العمل المجاني دون حزمة مدفوعة. يحتفظ ملفا SVG بالحقول واختيار المقاس والنتائج، ويمكن فتحهما للمقارنة.

01 صف مهمة الصفحة

استخدم مهارة ai-ui-designer.
صمّم أداة لملصقات المنتجات تضم اسم المنتج ونقاط البيع واختيار المقاس وزر إنشاء وشبكة للنتائج.

وضّح ما يحتاج المستخدم إلى إنجازه والعناصر الضرورية.

02 راجع المخطط الأولي

مخطط SVG يضم حقول المنتج والمقاسات وزر الإنشاء وأربع بطاقات للنتائج
تحقق من الحقول ووضوح الإجراء الرئيسي ومساحة النتائج.
فتح SVG

03 حسّن تصميم الواجهة

تصميم SVG ملوّن للأداة نفسها بعناصر تحكم بنفسجية وملصقات لمنتجات معبأة في زجاجات
احتفظ بالبنية المعتمدة واضبط الخطوط والمسافات والألوان والصور التوضيحية.
فتح SVG

ثبّت المهارة وأنشئ المخطط الأول

نزّل ملف ZIP وفك ضغطه، ثم ضع مجلد ai-ui-designer في دليل المهارات الخاص ببيئة Codex أو Claude Code التي تستخدمها.

  1. 1.ضع الملفات في الدليل المناسب

    يجب أن يكون SKILL.md مباشرة داخل ai-ui-designer. يتضمن التنزيل تعليمات التصميم والمراجع والسكربتات المساعدة.

    Codex
    ~/.agents/skills/ai-ui-designer/
    Claude Code
    ~/.claude/skills/ai-ui-designer/

    تأكد من أن فك الضغط لم يضف مجلدًا متداخلًا إضافيًا.

  2. 2.حدّد الجمهور والإجراء الرئيسي

    استدعِ المهارة في المساعد واشرح هدف الصفحة ومحتواها المطلوب.

    Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

صمّم مخطط SVG للصفحة الرئيسية لمنتجي يتضمن عرض القيمة والمزايا وإجراء التسجيل.

  3. 3.افتح SVG واطلب تعديلًا محددًا

    راجع الملف في المتصفح أو عارض SVG. اطلب مثلًا إبراز العناوين أو زيادة المسافة حول الزر الرئيسي.

    إذا لم تظهر المهارة، تحقق من المسار وSKILL.md. يكتشف Codex التغييرات تلقائيًا؛ أعد تشغيله عند الحاجة. وفي Claude Code راجع قائمة /.

تحتاج إلى مساعدك الخاص وإمكانية الوصول إلى النماذج. تتطلب سكربتات الحزم المحلية Python 3.9 أو أحدث. ويتطلب تنزيل الحزم الاختيارية من الموقع اشتراكًا مدفوعًا ساريًا.

اتخذ قرارات التصميم على مراحل

نظّم المعلومات أولًا

وزّع كتل المحتوى وحقول النماذج والإجراءات في مخطط بدرجات الرمادي.

ثم طوّر المظهر البصري

اضبط الخطوط والمسافات والألوان والصور فوق التخطيط المعتمد.

تابع العمل على التصميم نفسه

احتفظ بملفات SVG داخل مشروعك واطلب تعديلات محددة كلما اتضحت المتطلبات.

ماذا يتضمن التنزيل المجاني؟

ابدأ من متطلباتك

تشمل المهارة المخططات الأولية وتصميم UI الملوّن وتطبيق السمات وإدارة الحزم محليًا.

حزم المشاهد مراجع تصميم اختيارية؛ يمكنك استخدام سير العمل المجاني دون تنزيلها.

تصاميم ثابتة للمراجعة

الناتج ملفات SVG وإرشادات تصميم. الأزرار المرسومة لا تنفذ تسجيل الدخول أو الدفع أو إنشاء الصور.

بناء التطبيق مهمة تطوير منفصلة. يخضع توفر المساعد واستخدام النماذج لشروط الأداة المعنية.

أسئلة قبل البدء

هل أحتاج إلى اشتراك أو حزمة مشاهد؟
المهارة مجانية للتنزيل ويمكنها التصميم من متطلباتك. يلزم اشتراك مدفوع سارٍ فقط لتنزيل حزم المشاهد الاختيارية من هذا الموقع.
كيف أستخدمها في المساعدين؟
بعد التثبيت في الدليل المناسب، استخدم $ai-ui-designer في Codex أو /ai-ui-designer في Claude Code، ثم صف مهمة التصميم.
هل تنتج تطبيقًا يعمل؟
ينتج هذا المسار مخططات أولية وتصاميم UI بصيغة SVG ثابتة. تحتاج برمجة التطبيق والخدمات الخلفية والتفاعلات الحقيقية إلى تنفيذ منفصل.
لماذا لا يجد المساعد المهارة؟
تحقق من المسار ومن وجود SKILL.md مباشرة داخل ai-ui-designer. أعد تشغيل Codex عند الحاجة، وابحث عن /ai-ui-designer في Claude Code.

ابدأ صفحتك التالية بتخطيط واضح

ثبّت مهارة تصميم UI المجانية في مساعد البرمجة وحوّل المتطلبات إلى تخطيط SVG يمكنك مراجعته وتحسينه قبل التطوير.

تنزيل المهارة مجانًاالعودة إلى التثبيت