Written with AI assistance from the source video. The video is the authority.
Log in to leave a comment
No posts yet
يعلم كل مطور واجهات أمامية قام بإنشاء تعليمات برمجية باستخدام الذكاء الاصطناعي هذا الأمر جيداً. فجميع الشاشات التي تنتجها الوكلاء تبدو متشابهة إلى حد ما: خط Inter، وتدرجات لونية تمزج بين الأرجواني والأزرق، وتصميم بطاقة مألوف في كل مكان. لا يمكنك استخدام هذا مباشرة في مشاريع الوكلاء أو العملاء. وفي النهاية، يتعين عليك هدم الكود بالكامل وإعادة إنشائه من الصفر. وبدلاً من زيادة الإنتاجية، فإنك في الواقع تخلق المزيد من العمل.
السبب وراء إنتاج الذكاء الاصطناعي لهذه الأكواد بسيط للغاية؛ فهو يقوم بالتدريب مباشرة على بيانات قوالب Tailwind أو صفحات هبوط SaaS المنتشرة عبر الإنترنت. وإذا لم تقم بتعيين القيود الأساسية، فسيفترض الذكاء الاصطناعي أن الأنماط الأكثر شيوعاً هي الإجابة الصحيحة. يحل Impeccable 4.0 هذه المشكلة عن طريق إدخال قواعد تصميم فريدة بين المطور والذكاء الاصطناعي. وحتى إذا قمت بحقن طبقة مفردات التصميم وحدها دون تغيير نموذج الذكاء الاصطناعي، ترتفع نقاط جودة واجهة المستخدم بمقدار 1.59 مرة مقارنة بالسابق.
لمنع الذكاء الاصطناعي من جلب أنماط عشوائية وفقاً لهواه، يجب عليك أولاً التحكم في بيئة المشروع.
PRODUCT.md و DESIGN.md في الدليل الجذر للمشروع.## Anti-references إلى ملف PRODUCT.md. ضع هنا قواعد تمنع استخدام خط Inter، وتمنع استخدام الأسود الخالص (#000000) والرمادي بدون تلوين، وتمنع استخدام تدرجات النصوص.DESIGN.md.node skill/scripts/context.mjs --target <target_path> لربط مواصفات الرموز بذاكرة وكيل الذكاء الاصطناعي.بمجرد الانتهاء من هذه الإعدادات، سيتوقف الذكاء الاصطناعي عن توليد خطوط أو هوامش غريبة من تلقاء نفسه. ومن خلال تقليل الوقت المستغرق في إعادة كتابة المكونات من الصفر بسبب الأنماط الخاطئة، يمكنك توفير أكثر من 5 ساعات أسبوعياً بسهولة.
إذا قمت بتطبيق الأدوات على مشروع موجود بشكل عشوائي، فسوف تتقاطع مع قواعد Tailwind CSS أو Styled-Components الحالية وتتعطل. كما ستتلوث مستودعات Git بالملفات المؤقتة. فيما يلي التسلسل الآمن لاستخراج الأصول القديمة وعزلها:
npx impeccable install في الطرفية (Terminal) لتثبيت الحواجز الثابتة وثنائيات المهارات داخل المشروع./impeccable document لفحص ملف tailwind.config.js الحالي ومتغيرات CSS، ولإنشاء مستند DESIGN.md الخاص بالمشروع تلقائياً./impeccable extract لاستخراج القيم المكتوبة مباشرة (hardcoded) وأنماط التصميم المتكررة 3 مرات أو أكثر داخل المشروع كرموز تصميم مشتركة./impeccable init بعد تثبيت الهدف، ثم أضف .impeccable/live/*, .impeccable/hook.cache.json, .impeccable/config.local.json إلى ملف .gitignore./impeccable doctor.من خلال هذه العملية، ستعمل مكتبات واجهة المستخدم الحالية ومحرك Impeccable معاً دون أي صراع.
توجد أوقات تحتاج فيها إلى تغيير الشاشة مباشرة أثناء اجتماع العميل. عند تشغيل الوضع المباشر باستخدام الأمر /impeccable live، يمكنك إنشاء تعديلات التصميم مباشرة من خلال محدد العناصر في شاشة المتصفح.
/impeccable live في الطرفية وحدد عناصر واجهة المستخدم المراد تعديلها من محدد المتصفح تطبيق التعديلات./impeccable normalize في الطرفية. سيتم استبدال الأنماط المضمنة (inline styles) التي تم إدخالها أثناء العمل على المتصفح برموز تتوافق مع قواعد DESIGN.md./impeccable polish، ثم قم بتشغيل /impeccable distill لتنظيف عناصر div الملتفة غير الضرورية والتنسيق المكرر./impeccable audit ثم قم بعمل commit لفرع العمل.بهذه الطريقة، يمكنك منع الأكواد المعدلة بسرعة على المتصفح من دخول الفرع الرئيسي (main branch) وهي في حالة ممزقة أو غير مرتبة.
يتضمن Impeccable 4.0 ما يصل إلى 59 قاعدة للكشف عن العيوب المرئية التي ينتجها الذكاء الاصطناعي. يقوم الخطاف الذي يعمل فور تحرير الملف (Per-edit Hook) باكتشاف نسبة التباين غير الكافية أو تجاوز عناصر الشاشة، بينما يقوم خطاف التوقف (Stop Hook) الذي يعمل عند انتهاء الجلسة بتشخيص إيقاع التخطيط وتناسق الألوان.
إليك كيفية توسيع نظام الفحص هذا ليناسب أسلوب التصميم الخاص بشركتك:
node skill/scripts/hook-admin.mjs ignore-value "Inter" --rule overused-font.node skill/scripts/hook-admin.mjs ignore-file "src/legacy/Card.tsx".// impeccable-disable-next-line: intentional-brand-exception مباشرة أعلى سطر الكود الذي يتطلب استثناءً./impeccable audit للتحقق من التقرير الكمي للعناصر الخمسة (سهولة الوصول، الأداء، المظهر، الاستجابة للغلاف، الأنماط العكسية) وإصلاح العيوب.من خلال إعداد عملية الفحص هذه، يمكنك تقليل الوقت المستغرق يدويًا في البحث عن أعطال التخطيط أو عدم تطابق التصميم أثناء مراجعة الكود إلى النصف.