pen.dev خدام

pen.dev هي لوحة تصميم كتخدم فبيئة الكود، كيقدرو المطورين ينشئو فيها واجهات المنتجات، ويستكشفو مسارات الصفحات، ويخليو التصميم مرتبط بالكود. ملفات التصميم كتتخزن بصيغة .pen داخل مستودع الكود، ويمكن استعمال Git لتدبير الإصدارات والفروع والدمج، وكذلك تحويل التصميم لـ HTML أو CSS أو React. وكتدعم حتى القراية والكتابة فلوحة التصميم عبر MCP.

مطورو الواجهة الأمامية

صمّم الصفحات والمكوّنات مباشرةً فـ IDE، وحوّل نتائج التصميم لـ HTML أو CSS أو React، باش تنقص من التنقل بين أدوات التصميم وبيئة الكود.

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

استعمل Cursor أو VSCode أو Claude Code أو OpenAI Codex لاستدعاء قدرات اللوحة، وإنشاء الواجهات أو استكشاف عدة توجهات للصفحات بشكل متوازٍ.

فرق التطوير اللي عندها نظام تصميم

ربط نظام التصميم الموجود فمكتبة الكود باللوحة، وبناء الواجهات باستعمال حزمة تصميم قائمة على المكوّنات مع الحفاظ على الانسجام بين التصميم والتنفيذ.

لوحة تصميم بلا حدود

أنشئ وعدّل واجهات المنتجات داخل IDE، مع دعم التحديد بالبكسل، باش يبقاو التصميم والكود فبيئة عمل متجاورة ديماً.

إنشاء الصفحات والمسارات بالذكاء الاصطناعي

أنشئ صفحات كاملة أو مسارات واجهات متكاملة باستعمال التعليمات، وخلي عدة مساعدين بالذكاء الاصطناعي يستكشفو توجهات تصميم مختلفة بشكل متوازٍ.

عمليات تصميم مرتبطة بالسياق

دخل المتطلبات على شاشة كاملة أو منطقة محددة، واستعمل العمليات الجاهزة للتعديل بسرعة، أو كتب عمليات مخصصة من البداية.

تحويل التصميم لكود الواجهة الأمامية

حوّل التصميم الموجود فاللوحة لـ HTML أو CSS أو React، باش تعاون المطورين يدفعو الحل البصري نحو تنفيذ تطبيقي قابل للاستعمال.

تدبير إصدارات ملفات التصميم

حفظ محتوى التصميم فملفات .pen ووضعها فمستودع الكود، واستعمال Git للإصدارات والفروع والدمج بنفس طريقة تدبير كود التطوير.

استيراد تصاميم Figma

نسخ ولصق تصميم Figma مباشرةً، وجلب المتجهات والنصوص والأنماط ديالو لـ pen.dev باش يكمل التعديل عليها.

عمليات ثنائية الاتجاه على اللوحة عبر MCP

قرا وكتب فلوحة التصميم عبر MCP، وربطها بقواعد البيانات وواجهات API وبيانات الرسوم البيانية أو بمصادر خارجية بحال Playwright وPuppeteer.

ملفات التصميم موجودة فمستودع الكود

التصميم ماكيبقاش معزول فشي أداة مستقلة، بل كيتخزن على شكل ملفات داخل مستودع المشروع، ويمكن تدبيرو مع الكود بنفس نظام الإصدارات.

صيغة ملفات مفتوحة

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

قدرات MCP ثنائية الاتجاه

بالإضافة لقراية معلومات اللوحة، كيوفر صلاحيات كتابة كاملة، وكيخلي MCP الخارجي ومصادر البيانات والوكلاء الآخرين يشاركو فعمليات اللوحة.

التصميم والكود فالشاشة نفسها

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

• الصفحة الرسمية: pen.dev – Design on canvas. Land in code.
• صفحة الأثمنة الرسمية: pen.dev – Design on canvas. Land in code.