+
✦
●
✕
ALWKALA logo
ابدأ بقوة .. تعلم بسرعة .. توسع بحكمة
🚀
0%
arrow_back العودة لكتالوج المنتجات
محرك التصميم البرمجي ودعم RTL متاح · حزمة NPM
TidyFactor Styler Engine

واجهات برمجية فاخرة
تعيش داخل كودك القائم.

محرك تصميم هندسي يوجّه مساعدي الذكاء الاصطناعي لتصميم وإعادة هيكلة الواجهات والمكونات الحقيقية، مع دعم أصيل للغة العربية والـ RTL بدون كسر بنية مشروعك.

check_circle توافق RTL أصيل 100% check_circle بدون كسر الكود القائم check_circle 12 مدرسة تصميمية
palette styler:rtl-engine.css
معاينة المكون الذكي dir="rtl"
عنوان عربي بنمط Alexandria

هوامش منطقية تبدأ من اليمين تلقائياً دون الحاجة لتكرار ملفات CSS.

Logical

خواص CSS

Alexandria

خطوط عربية

Anti-Slop

حظر التكرار

code_blocks

احترام كامل للكود القائم

لا يفرض أطر عمل غريبة ولا يعيد كتابة مشروعك. يفحص كودك ويولد مكونات متطابقة مع أسلوبك البرمجي.

format_textdirection_r_to_l

دعم أصيل للغة العربية والـ RTL

استخدام حصري للخواص المنطقية (Logical Properties) ومصفوفة خطوط عربية مدروسة بدقة بدون أخطاء الانعكاس الشائعة.

auto_awesome

12 مدرسة تصميمية مانعة للتكرار

توجيه هندسي يحظر الأنماط المبتذلة للذكاء الاصطناعي (AI Slop) ويمنحك تصاميم ذات هوية بصرية حصرية واستثنائية.

المشكلة والحل

لماذا تنتج أدوات الذكاء الاصطناعي واجهات رديئة ومكسورة؟

عندما تطلب من مساعد الذكاء الاصطناعي تصميم واجهة، فإنه غالباً ما يخترع أطراً جديدة، يكسر معمارية الكود القائم، ويفشل تماماً في فهم قواعد الخطوط والـ RTL العربية. Styler يضع قواعد هندسية صارمة تمنع ذلك.

cancel

تصميم الذكاء الاصطناعي العشوائي

  • ✕ فرض أطر عمل غريبة تكسر هيكل وبناء المشروع القائم.
  • ✕ هوامش ثابتة `margin-left` تفسد التخطيط عند التبديل للغة العربية.
  • ✕ تكرار نفس التدرجات اللونية والكروت المكررة (AI Slop).
  • ✕ إنتاج نماذج مبدئية غير صالحة للإنتاج الفعلي.
check_circle

معمارية TidyFactor Styler

  • ✓ التكيف التام مع اصطلاحات مشروعك ورموز التصميم القائمة.
  • ✓ خواص منطقية ومصفوفة خطوط تدعم العربية والإنجليزية تلقائياً.
  • ✓ 12 مدرسة تصميمية تمنح منتجك شخصية بصرية حصرية.
  • ✓ مكونات إنتاجية حقيقية جاهزة للنشر الفوري دون إعادة كتابة.
القدرات ومجالات التطبيق

ماذا يمكنك أن تصمم وتطور بواسطة Styler؟

حلول تصميمية شاملة من المكون الواحد وحتى المنصات الرقمية الكاملة.

widgets

بناء وتحديث مكونات الواجهة

تصميم أزرار، بطاقات، نماذج، وقوائم تنقل متوافقة مع الحالات التفاعلية الثمانية ومطابقة لمنظومة مشروعك.

translate

تعريب وتكييف واجهات RTL

تحويل واجهات LTR إلى RTL بالكامل وإصلاح تداخل الهوامش والخطوط والأيقونات بالخواص المنطقية.

dashboard

لوحات التحكم وتطبيقات SaaS

هندسة شاشات إدارة البيانات المعقدة والجداول والرسوم البيانية بوضوح بصري وأداء عالي.

rocket_launch

صفحات الهبوط والحملات التسويقية

صفحات هبوط غنية بالحركة الجذابة والتسلسل البصري المقنع لرفع معدلات التحويل وبناء الثقة.

الركائز الهندسية

أربعة أسس هندسية لجودة الواجهات البرمجية

معايير صارمة تضمن أصالة الكود والراحة البصرية للمستخدم.

الخواص المنطقية (Logical Properties CSS)

01

وداعاً لـ `margin-left` و `right: 0`. نعتمد بالكامل على `margin-inline-start` و `inset-inline-start` لضمان عمل الواجهة تلقائياً في كلا الاتجاهين.

مصفوفة الخطوط العربية الطباعية

02

تزاوج طباعي مدروس بين خطوط العناوين المميزة (Alexandria, El Messiri) وخطوط القراءة السلسة (Tajawal, Cairo) بمقاييس خطية مريحة للعين.

قواعد الجودة المانعة للتكرار (Anti-Slop)

03

حظر صارم للخلفيات البنفسجية المبتذلة، والتكرار العشوائي للكروت، والخطوط العامة غير المتناسقة لصالح هوية بصرية فريدة.

التوافق مع كافة بيئات العمل (Multi-Stack)

04

يعمل بسلاسة داخل مشاريع React 19 / Next.js 16، وقوالب PHP الحديثة، ومواقع WordPress، وحتى مشاريع HTML/CSS الصرفة.

التكامل مع منظومة TidyFactor

Styler يمنح كافة مشاريعك ومواقعك لغة بصرية متناسقة

سواء كنت تطور تطبيق SaaS على TidyFactor Next، أو تدير موقع محتوى على TidyFactor Go، أو تبني صفحات هبوط على Cinematic Kit، يوفر Styler القواعد المشتركة لضبط الألوان، الخطوط، والـ RTL.

terminal خيارات التثبيت وأوامر Slash Commands لمساعدي الذكاء الاصطناعي
expand_more

اختر أمر التثبيت المناسب لبيئة عملك. يتم تفعيل مهارة Styler تلقائياً داخل وكلاء ومساعدي البرمجة (Antigravity, Claude Code, Cursor, Codex, Windsurf) لتوجيه التصميم وضبط الـ RTL مباشرة.

$ npx skills add @alwkala/tidyfactor-styler

أوامر Slash Commands المتاحة داخل بيئة العمل:

/rtl

فحص وتعديل الخواص المنطقية والـ RTL.

/component

إنشاء مكون مطابق لمنظومة مشروعك.

/typography

ضبط مصفوفة الخطوط العربية واللاتينية.

/redesign

إعادة تصميم صفحة أو قسم قائم بدون كسر.