Pencil.dev و Claude Code: سير عمل بالذكاء الاصطناعي يدمج التصميم والكود في الوقت الفعلي

لقد ولى زمن مجرد النظر إلى التصميم ثم كتابة الكود. في مجال تطوير الواجهات الأمامية (Frontend)، كانت أكبر عقبة دائمًا هي الفجوة بين التصميم والكود، أو ما يعرف بـ “التسليم” (Handoff). فكلما قام المصمم بتحريك بكسل واحد في Figma، يضطر المطور لإعادة تنفيذ ذلك برمجياً، وهو عدم كفاءة يستنزف حيوية المشروع.

وفقاً لبيانات دراسة أجرتها شركة McKinsey عام 2024، فإن إعادة العمل والاحتكاك في التواصل الناتج عن تعديلات التصميم يستهلك ما بين 15% إلى 20% من إجمالي جدول المشروع للفرق متوسطة الحجم. وبينما كانت الأدوات التقليدية تقتصر على ربط أحادي الاتجاه للقراءة فقط، يمكننا الآن من خلال الجمع بين Pencil.dev و Claude Code بناء بيئة مزامنة ثنائية الاتجاه حيث يصبح التصميم هو الكود ذاته.

ملف .pen: كيف تعامل التصميم كبيانات

جوهر Pencil.dev هو تنسيق الملفات المفتوح المسمى .pen. هذا الملف ليس مجرد بيانات رسومية، بل هو نص مهيكل يعتمد على JSON يمكن لوكلاء الذاء الاصطناعي (AI Agents) تفسيره فوراً.

لماذا يجب أن يكون ملف .pen في مستودع Git

كانت ملفات التصميم التقليدية بتنسيق ثنائي (Binary)، مما يجعل إدارة الإصدارات مستحيلة. ولكن بما أن ملف .pen يعتمد على النص، فإنه يُحفظ في Git جنباً إلى جنب مع سورس كود المشروع. وهذا يؤدي إلى تغييرات جذرية:

• المصدر الوحيد للحقيقة (Single Source of Truth): عند التبديل بين الفروع (Branches) أو العودة لإصدارات سابقة، يتحرك التصميم والكود دائماً كزوج متلازم.
• نقل معلومات عالي الكثافة: تدرك نماذج LLM عالية الأداء مثل Claude 3.5 Sonnet نية التصميم من هيكل JSON بدقة أكبر بكثير مما تفعله من صور لقطات الشاشة (Screenshots).
• أتمتة رموز التصميم (Design Tokens): يسهل بناء أنظمة الثيمات بفضل تحديد خصائص variables للألوان والخطوط والمسافات.

تصنيف الخاصية	هيكل البيانات	الدور
المعرف	id, type	تعريف هوية الكائن ونوع الرندرة
التخطيط (Layout)	x, y, layout	توفير منطق التمركز النسبي بناءً على Flexbox
رموز الستايل	variables	الربط المباشر بين نظام التصميم ومتغيرات الكود

الربط في الوقت الفعلي باستخدام Claude Code و MCP

Claude Code هي أداة CLI وكيلية من شركة Anthropic. عند ربطها بـ Pencil.dev عبر بروتوكول سياق النموذج (MCP)، يصبح الذكاء الاصطناعي زميلاً مطوراً ينظر إلى لوحة المصمم في الوقت الفعلي.

الإعداد واضح ومباشر. بعد تثبيت Claude CLI، قم بتفعيل Pencil MCP وتسجيل الخادم. يكفي أمر واحد: claude mcp add pencil -- pencil mcp-server لتصبح جاهزاً. الآن، يمكن لـ Claude استدعاء أداة get_canvas_context للاطلاع فوراً على خصائص الإطار الذي يعمل عليه المصمم حالياً وكتابة الكود بناءً عليه.

استراتيجية أتمتة من 8 خطوات للمزامنة الذاتية

بدلاً من مجرد إدخال الأوامر يدوياً، يجب إنشاء بيئة يتم فيها تحديث الكود فور حفظ التصميم. الحل هو نص برميجي (Script) للمراقبة باستخدام Node.js ومكتبة chokidar.

1. إعداد المراقبة: تحديد ملفات .pen في جذر المشروع كهدف.
2. الاشتراك في الأحداث: استقبال تنبيه كلما تغير الملف.
3. تطبيق الـ Debounce: ترك مهلة انتظار حوالي 3 ثوانٍ لمراعاة عمليات الحفظ المتكررة أثناء التصميم.
4. التحقق من الحالة: التأكد مما إذا كان الوكيل يقوم بمهمة أخرى حالياً.
5. إنشاء البرومبت ديناميكياً: صياغة تعليمات مثل “قم بتحديث المكون بناءً على التغييرات في هذا الملف”.
6. استدعاء الوكيل: تشغيل Claude Code باستخدام child_process.spawn.
7. بث السجلات (Streaming Logs): عرض عملية التنفيذ في تيرمينال المطور في الوقت الفعلي.
8. توجيه المراجعة: بعد اكتمال العمل، يتم إرسال إشعار للنظام لمراجعة الـ Diff الناتج.

لتجنب هدر تكاليف الـ API في هذه العملية، قارن قيمة الـ Hash للملف. المفتاح هو إيقاظ الوكيل فقط عندما يكون هناك تغيير جوهري في بنية بيانات JSON.

التفاعل المتقدم وضمان الجودة

يبرز الذكاء الاصطناعي أيضاً عند تطبيق مكتبات الرسوم المتحركة مثل GSAP لتجارب الويب الحديثة. فمن خلال تزويد الوكيل بتعليمات تتضمن منطقاً رياضياً، سيقوم بكتابة كود محسّن يستخدم تسريع الـ GPU بدلاً من الخصائص التي تسبب بطء الأداء.

Phase = waveNumber imes index - waveSpeed imes globalProgress imes 2pi - rac{pi}{2}

أيضاً، اطلب من وكيل الذكاء الاصطناعي فور إنشاء الكود إجراء تدقيق (Audit) بناءً على معايير WCAG 2.2 (معايير إمكانية الوصول للويب). اجعله يتحقق ذاتياً مما إذا كانت نسبة تباين النص أعلى من 4.5:1، أو إذا كانت خاصية alt مفقودة في الصور، أو إذا كان الـ Focus Trap في الـ Modals يعمل بشكل صحيح. سيقوم الوكيل بإنشاء إصلاحات فورية لأي بنود غير مستوفاة.

التحول إلى مهندس أنظمة (System Architect)

بينما كان “التسليم” في الماضي عبارة عن تسليم وثائق ثابتة، فقد تحول الآن إلى عملية مزامنة للحالات. تطور دور المطور الآن من مجرد “منفذ” يكتب الكود حرفاً بحرف إلى مهندس أنظمة يقود جيشاً من وكلاء الذكاء الاصطناعي ويصمم البيئة المثالية.

قم بتحويل التصميم إلى بيانات باستخدام Pencil.dev، وحوّل تلك البيانات إلى كود حي باستخدام Claude Code. الهروب من مستنقع الترميز اليدوي هو أقوى ميزة تنافسية لمطور الواجهات الأمامية من الجيل القادم.