صمم واجهاتك بالكود الحقيقي مباشرة
وتخلص من فجوة فيجما وإعادة كتابة الـ CSS.
محرك شامل لدورة حياة تصميم الواجهات (UI Design Lifecycle) يوجّه مساعدي الذكاء الاصطناعي عبر 7 مراحل و24 أمراً برمجياً لبناء أنظمة تصميم حية، نماذج أولية تفاعلية، ولوحات تحكم قابلة للنشر الفوري بدون أدوات بناء.
Tokens: [Colors, Typography, Spacing, Elevation, Motion]
Foundations: Native CSS / Tailwind / daisyUI
7 / 7
المراحل
24
الأوامر
0s
خطوة بناء
تصميم بالكود الفعلي (بديل فيجما)
صمم واجهات تفاعلية حية تستجيب للنقرات وأحجام الشاشات وتدفق النصوص العربية دون إضاعة الوقت في رسم مستطيلات صامتة.
مصدر حقيقة موحد عبر brand.json v2
حوكمة شاملة لكل الألوان والخطوط والظلال ومسافات التصميم في ملف سكيما مركزي متزامن عبر كامل فرق التطوير.
7 مراحل و 24 أمراً لدورة الحياة
من الاستكشاف واستخلاص الهوية، وحتى بناء الأسس والمكونات والحركة وضبط الجودة والتسليم البرمجي المكتمل.
لماذا تضيع تفاصيل الواجهات في رحلة التحويل من فيجما إلى الكود البرمجي؟
رسم الواجهات في برامج التصميم الصامتة يخلق فجوة هائلة؛ فالرسومات لا تراعي تباين الشاشات، ولا تفاعل الحالات، وتفشل في معالجة تدفق النصوص العربية. التصميم المباشر بالكود ينهي هذه الفجوة تماماً.
فجوة فيجما وإعادة بناء الكود
- ✕ إعادة كتابة كل عنصر في CSS/JS بعد الانتهاء من رسمه في فيجما.
- ✕ رسومات ثابتة تفشل في تجربة تفاعلات المستخدم الحقيقية والحالات.
- ✕ انكسار التخطيط العربي عند تبديل اللغة بسبب عدم مراعاة الـ RTL.
- ✕ تشتت قيم الألوان والخطوط بين ملفات التصميم وكود المشروع.
معيار TidyFactor Design البرمجي
- ✓ التصميم بالكود الحقيقي مباشرة؛ النموذج الأولي هو كود الإنتاج النهائي.
- ✓ تفاعل حي ونماذج حقيقية تستجيب للنقرات وأحجام الشاشات فوراً.
- ✓ هندسة عربية أصيلة عبر خصائص Logical CSS لتبديل لغات فوري.
- ✓ حوكمة تامة للتوكنز عبر brand.json v2 تضمن وحدة الهوية.
7 مراحل متكاملة تقود تصميم الواجهات من الفكرة وحتى الإطلاق
منظومة أوامر هندسية تغطي كل مرحلة لضمان الجمالية والسرعة والأداء.
1. الاستكشاف واستخلاص الهوية (Discovery)
استخلاص الهوية البصرية من مراجع الويب وصياغة موجز سياق التصميم من 3 أسئلة حاسمة.
2. الأسس ونظام التوكنز (Foundations)
توليد لوحات الألوان المتناسقة ومصفوفة الخطوط العربية والإنجليزية ونظام التباعد القياسي.
3. الهيكلة وتخطيط الصفحات (Architecture)
هندسة هياكل الصفحات وأنماط الهيدر والفوتر ولوحات التحكم متعددة الشاشات.
4. تشريح المكونات (Components)
بناء مكتبة أزرار وبطاقات ونماذج وحقول إدخال متكاملة بجميع الحالات (Hover, Active, Disabled).
5. الحركة والتفاعل الحي (Motion)
منحنيات انتقالية مريحة للعين وتفاعلات مايكرو تعزز حيوية الواجهة دون تشتيت المستخدم.
6. شريط الجودة والـ RTL (Quality Bar)
تدقيق شامل لتباين الألوان WCAG وتوافق التخطيط مع اتجاه اليمين لليسار (RTL) دون أخطاء اتجاهية.
أربعة أسس معمارية لبناء واجهات برمجية فاخرة ودائمة
معايير تضمن التناسق المطلق وتوافق الـ RTL وسرعة التنفيذ.
تصميم بالكود بدون خطوات تجميع (Zero Build)
01يعمل فورياً داخل المتصفح بمجرد فتح الملف، دون الحاجة لأدوات Webpack أو Vite أو أدوات بناء معقدة.
مرونة قواعد الـ CSS (Pluggable Foundations)
02يدعم العمل بسلاسة مع Native CSS الصرف، Tailwind Utility، daisyUI، shadcn، أو الأنظمة الهجينة.
حوكمة التوكنز المركزية (brand.json v2)
03ملف سكيما موحد يربط فريق التصميم بالمطورين ويمنع تشتت الألوان وتضارب مقاسات العناصر.
هندسة عربية أصيلة وخصائص Logical CSS
04اعتماد كامل لخصائص الـ CSS المنطقية (`margin-inline-start`, `inset-inline-end`) لتصميم يدعم اللغتين تلقائياً.
Design تؤسس نظام التصميم، و Styler تطبقه داخل الأكواد الحية
تكامل متناغم: ابنِ نظام التصميم والنموذج الأولي بـ TidyFactor Design مع سكيما brand.json v2، واستخدم TidyFactor Styler لتطبيق وتعديل المكونات داخل كود مشروعك القائم دون كسر، واعتمد على مسارات Next و PHP لتشغيل المنطق.
terminal
خيارات التثبيت وأوامر Slash Commands لمساعدي الذكاء الاصطناعي
expand_more
أمر التثبيت لمحرك دورة حياة تصميم الواجهات بالكود الحقيقي وبديل فيجما. يتم تفعيل المهارة تلقائياً داخل وكلاء ومساعدي البرمجة (Antigravity, Claude Code, Cursor, Codex, Windsurf).
أوامر Slash Commands المتاحة داخل بيئة العمل:
حوكمة سكيما brand.json.
تشريح وبناء المكونات.
منحنيات وتأثيرات الحركة.
تصدير الكود والتسليم البرمجي.