Claude in Chrome: راجعوا موقعكم وطلعوا قائمة إصلاحات جاهزة
خلّوا Claude يفحص موقعكم داخل Chrome كأنه مصمم ومطوّر، ويرجعلكم قائمة إصلاحات جاهزة لـ coding agent.
هاي الحلقة الثانية من سلسلة Claude Chrome. الفكرة مو نظرية تصميم. Claude بيشوف الصفحة فعلياً، يعمل scroll، يطلع ملاحظات محددة، وبعدين يحوّلها لبرومبت تنفيذ.
متى بتحتاجوا هالطريقة؟
- •إذا عندكم موقع live وبدكم مراجعة سريعة قبل إطلاق أو تحديث
- •إذا بدكم ملاحظات actionable مش «حسّن التصميم»
- •إذا بدكم Claude يشوف الواجهة مش بس يخمّن من وصف نصي
- •إذا بدكم تسلموا قائمة إصلاحات جاهزة لـ Codex أو Claude Code
قبل ما تبدأوا
- •فعّلوا Claude in Chrome (إذا لسه ما عملتوها، شوفوا دليل الإعداد)
- •افتحوا الموقع اللي بدكم تراجعوه في تبويب Chrome
- •جهزوا رابط الموقع أو الصفحة المحددة
- •حددوا هدف المراجعة: hero، navigation، spacing، credibility
الخطوة 1: افتحوا Claude في Chrome على الموقع
افتحوا الموقع، شغّلوا إضافة Claude in Chrome، وخلوا Claude يشوف نفس التبويب.
الخطوة 2: اطلبوا مراجعة صريحة بدون مجاملة
استخدموا برومبت واضح يطلب تحليل احترافي وقائمة مرتبة بالأولوية.
Analyze this website like a senior product designer and frontend engineer. Do not flatter me. Review the hero, top navigation, spacing, typography, and anything that looks weak or unprofessional. Scroll through the page yourself, then return a ranked list of the highest-impact fixes I can ship today. For each issue include: what is wrong, why it hurts trust or clarity, and the smallest practical fix.
الخطوة 3: خلّوه يتصفح الصفحة لحاله
لا توصفوا كل شيء يدوياً. خلّوه يعمل scroll ويفحص الأقسام اللي بيشوفها.
إذا طلع سؤال مثل «ليش في كتير فيديوهات بالصفحة الرئيسية؟»، هاي إشارة إن المراجعة فعلاً شايفة layout مش بس بتكرر نصائح عامة.
الخطوة 4: رتّبوا الملاحظات حسب الأثر
اطلبوا قائمة مرتبة: أسهل إصلاح + أعلى تأثير أولاً.
Re-rank the issues by impact vs effort. Mark each item as quick-win, medium, or larger refactor. Skip generic advice like "improve the design".
الخطوة 5: حوّلوا الملاحظات لبرومبت coding agent
آخر خطوة: برومبت جاهز تعطوه لـ Codex أو Claude Code لتنفيذ الإصلاحات.
Turn the ranked QA findings into one implementation prompt for a coding agent. Include file-level guidance, acceptance checks, and what not to change. Keep scope to quick wins first.
النتيجة
صار عندكم مسار: Claude يشوف الموقع داخل Chrome، ينتقد بشكل محدد، ويعطيكم خطة إصلاح قابلة للتنفيذ. هاد أقوى من وصف المشكلة بالكلام لأن المراجعة مبنية على ما هو ظاهر على الشاشة.
شاهد الفيديو
احفظوا الدليل وارجعوا له قبل أي redesign. ابدأوا بصفحة واحدة وملاحظات سريعة، مش مراجعة ضخمة من أول مرة.