Using the **mabuzant-resource** skill to write this bilingual guide.
---
كلود يحدّث صور موقعك تلقائياً
صور المنتج القديمة تكذب على زوارك، وهذا الورك فلو يحل المشكلة بدون ما تلمس الموقع.
كل مؤسس سولو عاش هذا: تطلق تحديثاً جديداً، تتغير واجهة المنتج، وتبقى صور الموقع تعرض النسخة القديمة لأشهر. مو لأنك ما تهتم، بس لأن "أحدّث السكرين شوتس" دايماً آخر شي في قائمة المهام. كلود يأخذ هذه المهمة عنك كاملة.
🧩 إيش يصير بالضبط
الفكرة بسيطة: كلود يفتح المنتج الحي في متصفح حقيقي، يلتقط صور محدّثة للشاشات اللي تحتاجها، يستبدل الصور القديمة في ملفات الموقع، ثم يعمل كوميت بالتغييرات. كل هذا بأمر واحد منك. يعني بدل ما تفتح المنتج، تلتقط يدوياً، تسمّي الملف بنفس الاسم القديم، تحمّله، وتتذكر كل مسار. كلود يأخذ هذا الروتين كاملاً ويشغّله بدونك.
⚙️ كيف يشتغل
الخطوات متسلسلة وواضحة:
1️⃣ تعطي كلود رابط المنتج الحي مع قائمة الشاشات اللي تبغى تصوّرها، مثلاً: الصفحة الرئيسية، لوحة التحكم، صفحة التسعير
2️⃣ كلود يفتح المتصفح، يتنقل بين الصفحات، ويلتقط السكرين شوت بالأبعاد اللي تحددها أنت، سواء ديسكتوب أو موبايل
3️⃣ يقرأ ملفات الموقع ويحدد وين تجلس الصور الحالية، سواء في مجلد `/public` أو `/assets` أو أي مكان ثاني
4️⃣ يستبدل الصور القديمة بالجديدة بنفس أسماء الملفات، عشان ما ينكسر أي لينك
5️⃣ يعمل كوميت بتغيير واضح يشرح إيش اتحدّث، ويرفعه للريبو
الشي المهم هنا: كلود ما يخمّن. إذا لقي اسم ملف مختلف أو مسار غير واضح، يسألك قبل ما يكمل.
🌍 وين تحتاج هذا
هذا الورك فلو مفيد تحديداً في هالمواقف:
🚀 بعد كل إطلاق ميزة جديدة، الصور تتحدث تلقائياً مع الكود
📸 صفحات اللاندينج اللي تعتمد على صور واجهة المنتج كدليل مباشر للزوار
🔄 المواقع التوثيقية (Docs) اللي فيها صور خطوة بخطوة تتقادم بسرعة
🛍️ أي SaaS سولو أو أداة صغيرة، ما عندها فريق تصميم يتابع هذا
وش تسوي بعد ذا
✅ جرّب تعطي كلود رابط موقعك الحالي وقول له "التقط سكرين شوت للصفحة الرئيسية ديسكتوب وموبايل"
✅ حدد مسبقاً مجلد الصور في ريبوك، يختصر عليك خطوة توضيح
✅ فكّر في أي صفحات ثانية عندك تعتمد على صور واجهة المنتج، قائمتك جاهزة للأمر الأول
الصور القديمة تكلّفك ثقة الزائر قبل ما تكلّفك وقت. الحين عندك طريقة ما تتركها تتراكم.
———— English ————
Claude updates your site screenshots automatically
Stale product images lie to your visitors, and this workflow fixes the problem without you touching the site.
Every solo founder knows the feeling: you ship a product update, the UI changes, and your website keeps showing the old version for months. Not because you don't care, but because "update the screenshots" always lands at the bottom of the list. Claude takes that task off your plate entirely.
**What actually happens**
The idea is straightforward: Claude opens your live product in a real browser, captures fresh screenshots of the screens you need, replaces the old images in your site files, and commits the changes. All from a single instruction. Instead of you opening the product, capturing manually, naming the file to match the old one, uploading it, and remembering every path, Claude runs the whole routine without you.
**How it works — the interesting part**
The steps are sequential and clear:
1️⃣ You give Claude your live product URL and a list of screens to capture, for example: homepage, dashboard, pricing page
2️⃣ Claude opens the browser, navigates between pages, and captures screenshots at the dimensions you specify, desktop or mobile
3️⃣ It reads your site files and locates where the current images live, whether that is `/public`, `/assets`, or anywhere else
4️⃣ It replaces the old images with the new ones using the same filenames, so no links break
5️⃣ It commits with a clear message describing what changed, and pushes to your repo
The important detail: Claude does not guess. If it finds an ambiguous filename or an unclear path, it asks you before moving forward.
**Where this matters**
🚀 After every feature launch, your screenshots stay current with the code automatically
📸 Landing pages that rely on product UI images as direct proof for visitors
🔄 Documentation sites where step-by-step screenshots go stale fast
🛍️ Any solo SaaS or small tool without a design team monitoring this
**What to do next**
✅ Try giving Claude your site URL and say "capture a desktop and mobile screenshot of the homepage"
✅ Know your image folder path in your repo before you start, it saves one clarification step
✅ Think through which other pages on your site rely on product UI images, that list becomes your first prompt
Stale images cost you visitor trust before they cost you time. Now you have a way to stop letting them pile up.