تقوم DragCSS بنسخ التعديلات المرئية لـ CSS إلى مطالب جاهزة للذكاء الاصطناعي للمطورين
DragCSS - نسخ تغييرات CSS المرئية لـ AI و Copilot، من dragcss.com، هو ملحق Chrome يقوم بالتقاط التعديلات الأسلوبية داخل المتصفح ويعدها لمساعدي البرمجة بالذكاء الاصطناعي. يسجل "الفارق" في CSS الناتج عن التعديلات الحية وينتج نسخاً بنقرة واحدة مُنسقة لـ ChatGPT و GitHub Copilot و Claude ونماذج مشابهة. يحصل مطورو الواجهة الأمامية والمصممون الذين يستخدمون LLMs على تسليم أسرع من التجربة المرئية إلى تحديثات الكود المدفوعة بالذكاء الاصطناعي. إنه يناسب الفرق التي تتكرر بصرياً وتعتمد على نماذج اللغة.
DragCSS يتناول الفجوة بين التنسيق المباشر وتحريرات الكود المدعومة بالذكاء الاصطناعي
الأداة تلتقط التغييرات في الوقت الحقيقي التي تقوم بها في المتصفح وتحافظ على الخصائص الدقيقة التي تمت إضافتها أو إزالتها أو تعديلها. يتم تقديم المخرجات الملتقطة كاختلاف موجز بدلاً من تفريغ كامل لورقة الأنماط، بحيث يمكن للمطور لصق تعليمات مركزة في دردشة الذكاء الاصطناعي دون الحاجة إلى نسخ CSS يدويًا. تستهدف هذه الطريقة مرحلة سير العمل بين التجربة البصرية والتزام الكود.
تنسيق اختلافات CSS بشكل خاص لتقليل الاحتكاك في الطلبات للـ LLMs
DragCSS يحول تحريرات المتصفح إلى تنسيق مناسب للذكاء الاصطناعي ويقدم نسخًا بنقرة واحدة لتلك المخرجات. تسرد الإضافة الإعلانات التي تم تغييرها وتجمع تعديلات متعددة في طلب واحد، بحيث يرى المساعد السياق والنطاق. تشمل الأهداف المدعومة المساعدين النصيين الشائعين:
- ChatGPT
- GitHub Copilot
- Claude
التكامل مع DevTools يحافظ على سير العمل داخل المتصفح
تتصل الإضافة بـ Chrome DevTools، لذا تحدث عملية الالتقاط حيث يقوم المطورون بالفعل بفحص الأنماط بدلاً من تطبيق منفصل. تبقى الواجهة غير مزعجة حتى يتم استدعاؤها، وتجميع التعديلات يتجنب النسخ واللصق المتكرر. نظرًا لأن الإضافة تسجل فقط خصائص CSS القياسية، يجب على المطورين التحقق من مخرجات الذكاء الاصطناعي عند رسم التغييرات في أنماط أو أنظمة بناء خاصة بالمشروع.
توافق يركز على متصفحات Chromium وسير العمل القياسي لـ CSS
تستهدف DragCSS متصفح Chrome ومتصفحات أخرى قائمة على Chromium مثل Edge وBrave وVivaldi، لذا فهي تناسب الفرق التي تستخدم تلك المحرك للتطوير والاختبار. يقوم المطور بتنسيق الاختلاف للاستخدام مع أي مساعد نصي للذكاء الاصطناعي، لكن الإضافة نفسها لا تقوم بتحويل الكود؛ بل تقدم سياقًا منظمًا للـ LLM وتعتمد على المساعد والمطور لترجمة تلك التعديلات إلى كود جاهز للمستودع.
أداة عملية للمطورين الذين يفضلون الواجهة البصرية والذين يستخدمون نماذج اللغة، مع تنازل واضح
DragCSS هو خيار عملي لمطوري الواجهة الأمامية والمصممين الذين يدمجون تنسيق المتصفح مع نماذج اللغة لتحديث كود المصدر، لأنه يقصر الفجوة بين النموذج الأولي والمطالبة. توقع الاعتماد على المساعد الذكي المختار ومراجعة بشرية، وتحقق من الكود المحول قبل الالتزام. نصيحة: ألصق الفرق في محادثة الذكاء الاصطناعي الخاصة بك مع تعليمات تحويل واضحة وقم بتشغيل اختبارات وحدات أو اختبارات بصرية قبل الدمج.
