خلّ Claude Code يشوف موقعك على الجوال والآيباد واللابتوب مع ResponsivelyLet Claude Code See Your Site on Phone, Tablet and Laptop with Responsively

المصطلحات

تصميم متجاوب (responsive design)

موقع يرتب نفسه حسب حجم الشاشة. نفس الصفحة تطلع مرتبة على الجوال والآيباد واللابتوب.

Responsively App

متصفح مجاني ومفتوح المصدر يعرض موقعك على أكثر من جهاز جنب بعض. أي سكرول أو ضغطة في جهاز تتكرر في الباقي.

MCP

طريقة توصّل فيها أداة ذكاء اصطناعي بتطبيق ثاني. هنا يخلي Claude Code يفتح موقعك في Responsively ويضغط ويصوّر الشاشات.

viewport

مقاس الشاشة اللي ينعرض عليه الموقع، مثل عرض iPhone أو iPad.

الخطوات

1. 1

   الخطوة 1

   حمّل نسخة v2 التجريبية

   افتح صفحة التحميل responsively.app/download واختر Beta، بعدها حمّل نسخة جهازك: Mac أو Windows أو Linux.

   ميزة MCP موجودة في نسخة v2.0.0 beta بس. النسخة المستقرة v1.18.0 ما فيها هالميزة.

   responsively.app

   

   نصيحة: النسخة تجريبية. إذا تحتاج ثبات كامل في شغلك اليومي، خلّ النسخة المستقرة عندك بعد.

2. 2

   الخطوة 2

   افتح موقعك على كل الأجهزة

   اكتب رابط موقعك في شريط العنوان. يشتغل مع أي موقع منشور، ويشتغل بعد مع الموقع اللي تبنيه على جهازك مثل http://localhost:3000.

   اختر الأجهزة اللي تريدها من قائمة الأجهزة، مثلاً iPhone و iPad و laptop. فيه أكثر من 30 جهاز جاهز، وتقدر تضيف مقاس خاص فيك.

   جرّب سكرول أو ضغطة في جهاز واحد، راح تشوفها تتكرر في كل الأجهزة.

   

   نصيحة: خلّ جهاز جوال صغير دايماً في القائمة لأن أغلب المشاكل تطلع فيه.

3. 3

   الخطوة 3

   شغّل الـ MCP server ووصّله بـ Claude Code

   في نسخة v2 فيه لوحة MCP داخل التطبيق. تأكد إن السيرفر شغال من هذي اللوحة.

   اختر الأداة اللي تستخدمها من القائمة: Claude Code أو Claude Desktop أو Codex أو Cursor أو VS Code. التطبيق يضيف الإعداد بنفسه في ملف الأداة، مثلاً ~/.claude.json لـ Claude Code.

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

   github.com

   

4. 4

   الخطوة 4

   تأكد إن Claude Code شايف Responsively

   افتح Claude Code في مجلد مشروعك واكتب الأمر /mcp. لازم تشوف Responsively في قائمة السيرفرات وحالته متصل.

   إذا ما طلع، تأكد إن تطبيق Responsively مفتوح والسيرفر شغال، وارجع افتح Claude Code.

   

   نصيحة: الأمر /mcp يعرض كل السيرفرات المربوطة مع Claude Code وحالة كل واحد.

5. 5

   الخطوة 5

   خلّ Claude Code يفحص موقعك على كل الشاشات

   الآن Claude Code يقدر يفتح موقعك في Responsively، يقرأ الصفحة، يضغط، ويصوّر كل جهاز. اطلب منه فحص بس، بدون تعديل، حتى تشوف المشاكل أول.

   برومبتبرومبت الفحص

   نسخ

   استخدم أدوات Responsively. افتح [رابط موقعك أو http://localhost:3000] على iPhone و iPad و laptop، وخذ screenshot لكل جهاز.
   
   قل لي بالضبط وين التصميم خربان في كل جهاز: عناصر طالعة برا الشاشة، نصوص مقصوصة، أزرار صغيرة أو متلاصقة، صور ممطوطة.
   
   لا تعدّل أي كود الآن. أريد قائمة بالمشاكل مرتبة من الأخطر.

6. 6

   الخطوة 6

   خلّه يصلّح ويرجع يتأكد

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

   برومبتبرومبت التصليح

   نسخ

   صلّح المشاكل اللي لقيتها في [اسم الملف أو المجلد]. بعدها افتح الموقع مرة ثانية في Responsively على نفس الأجهزة، خذ screenshot لكل جهاز، وقارن قبل وبعد.
   
   إذا باقي أي مشكلة، كمّل التصليح حتى تخلص كلها، وبعدين اعطني ملخص بكل تغيير سويته.

   نصيحة: خلّ Claude Code يشتغل على فرع git جديد حتى ترجع بسهولة إذا ما عجبك التعديل.

برومبتات جاهزة للنسخ

استخدم أدوات Responsively. افتح [رابط صفحة الفورم] على iPhone، عبّي الفورم ببيانات تجريبية واضغط إرسال.

قل لي إذا فيه حقل مخفي تحت الكيبورد، زر ما ينضغط، أو رسالة خطأ ما تطلع. خذ screenshot قبل وبعد الإرسال.

استخدم أدوات Responsively. افتح [رابط الموقع] على أصغر جوال وأكبر لابتوب في القائمة، وتنقّل بين [الصفحات المهمة]. اعطني تقرير قصير: جاهز للإرسال أو لا، ومع كل مشكلة screenshot.