كيف تنسخ شكل موقع باستخدام تطبيق Claude Code خطوة بخطوة
في هذا الدليل سأشرح لك الطريقة البسيطة لاستخدام تطبيق Claude Code عشان تبني موقع شبيه بموقع موجود قدامك في Chrome.
الفكرة ليست انك تسرق موقع شخص آخر. الفكرة انك تستخدم موقع كمرجع للتصميم, وتخلي Claude يساعدك يبني نسخة قابلة للتعديل, وبعدها تغير النصوص والصور والهوية لتصير خاصة فيك.
مهم قبل ما تبدأ
هذا الشرح عن تطبيق Claude Code على الكمبيوتر, وليس عن Terminal.
يعني لا تحتاج تكتب أوامر, ولا تحتاج تفهم برمجة عشان تطبق الفكرة الأساسية. كل الشغل يكون من التطبيق نفسه, ومعه Chrome.
هل Claude Code مجاني؟
لا. تطبيق Claude Code يحتاج اشتراك مدفوع من Anthropic.
إذا ما عندك التطبيق, افتح هذا الرابط واتبع خطوات التحميل:
https://code.claude.com/docs/en/desktop-quickstart
بعد التثبيت, افتح التطبيق وسجل دخولك بنفس حساب Claude.
تفعيل Claude in Chrome
عشان Claude يقدر يشوف الموقع المفتوح عندك, تحتاج تفعل Chrome extension أو خيار Claude in Chrome.
الخطوات ببساطة:
- 1.افتح تطبيق Claude Code وسجل دخولك.
- 2.افتح Settings أو Preferences داخل التطبيق.
- 3.دور على خيار اسمه Claude in Chrome أو Browser Connector.
- 4.فعله إذا كان غير مفعل.
- 5.ثبت Chrome extension إذا التطبيق طلب منك ذلك.
- 6.افتح Chrome وتأكد انك مسجل دخولك.
- 7.افتح الموقع الذي تريد استخدامه كمرجع.
- 8.إذا Claude لا يرى Chrome, اقفل وافتح التطبيق وChrome مرة ثانية.
ممكن أسماء الأزرار تختلف شوي حسب نسخة التطبيق, لكن الفكرة نفسها: فعل الربط بين Claude Code وChrome.
تنبيه مهم عن النسخ
استخدم هذه الطريقة للتعلم, أو لعمل prototype, أو لإعادة بناء موقعك الشخصي.
لا تنشر موقع فيه نفس شعار, صور, نصوص, أو هوية شخص آخر.
المسموح:
- •تتعلم من layout موقع معين
- •تبني نسخة أولية بسرعة
- •تعيد بناء موقعك أنت
- •تستوحي الستايل وتغير المحتوى بالكامل
غير المسموح:
- •نسخ النصوص كما هي
- •استخدام صور أو شعارات ليست لك
- •نشر نسخة كأنها شغلك الأصلي
الخطوات
1. افتح تطبيق Claude Code
افتح التطبيق وتأكد انك logged in.
2. افتح الموقع في Chrome
افتح الموقع الذي تريد تقليد شكله في Chrome. خليه ظاهر قدامك.
لا تحتاج source code للموقع. Claude يعتمد على ما يراه في Browser.
3. تأكد ان Claude in Chrome شغال
إذا الربط شغال, Claude سيقدر يفهم شكل الصفحة, الأقسام, الألوان, ترتيب العناصر, والمسافات.
إذا ما كان شغال, ارجع إلى Settings في تطبيق Claude Code وفعل Chrome integration.
4. استخدم Plan Mode
قبل ما تطلب من Claude يبني أي شيء, فعل Plan Mode.
Plan Mode مهم لأنه يمنع Claude من القفز مباشرة للتنفيذ. بدل ذلك, سيعمل التالي:
- 1.يسألك أسئلة بسيطة.
- 2.يقترح خطة واضحة.
- 3.ينتظر موافقتك قبل ما يبدأ.
هذا يوفر عليك وقت كثير, لأنك تكتشف سوء الفهم قبل ما يبدأ الشغل.
5. اكتب الطلب الأول
اكتب طلب بسيط وواضح. مثال:
Website URL: [paste the website link here] Use the website above as a visual reference. Build a similar website with the same general layout, sections, colors, and visual style. Make it responsive and make sure it works well on mobile and desktop. Before you start building, create a clear plan and ask me any questions you need.
لا تحتاج تشرح كل تفصيلة. إذا Chrome connector شغال, Claude سيشوف الموقع بنفسه.
6. جاوب على أسئلة Claude
ممكن يسألك:
- •هل تريد صفحة واحدة أو أكثر؟
- •هل تريد نفس الألوان بالضبط أو فقط نفس الستايل؟
- •هل تريد animation؟
- •هل تريد form أو buttons أو menu؟
- •هل تريد النسخة تكون بسيطة أو قريبة جدا من الأصل؟
جاوب بشكل مباشر. لا تقل فقط "خليه حلو". قل له ماذا تريد بالضبط.
7. راجع الخطة قبل الموافقة
Claude سيعطيك plan. اقرأه قبل ما توافق.
تأكد من هذه الأشياء:
- •الأقسام المهمة موجودة.
- •التصميم قريب من الموقع المرجعي.
- •النسخة ستكون responsive.
- •لا يوجد شيء غريب أو زائد.
إذا الخطة فيها مشكلة, قل له يعدلها قبل البدء.
8. خليه يبني النسخة الأولى
بعد الموافقة, خليه يشتغل.
أول نسخة لن تكون perfect, وهذا طبيعي. غالبا ستكون قريبة بنسبة جيدة, وبعدها تبدأ مرحلة التحسين.
9. قارن النتيجة بالموقع الأصلي
افتح preview وقارن:
- •هل الألوان قريبة؟
- •هل المسافات صحيحة؟
- •هل الخطوط مناسبة؟
- •هل الأقسام بنفس الترتيب؟
- •هل الشكل جيد على mobile؟
لا تطلب منه "صلح كل شيء" مرة واحدة. هذا غالبا يعطي نتيجة messy.
10. عدل قسم واحد في كل مرة
الأفضل تعطيه ملاحظة محددة على قسم واحد.
مثال:
The FAQ section does not look close enough to the original website. Make it wider, add more spacing, and make the background closer to the reference. Do not change the rest of the page.
ثم انتقل للقسم التالي.
11. غير المحتوى والهوية
قبل النشر, غير كل شيء يخص الموقع الأصلي:
- •logo
- •النصوص
- •الصور
- •الألوان إذا تحتاج
- •links
- •footer
- •معلومات التواصل
لا تنشر الموقع قبل هذه الخطوة.
12. اختبر على mobile وdesktop
افتح الموقع على أحجام مختلفة:
- •mobile
- •tablet
- •laptop
- •desktop
إذا في مشكلة, أعط Claude ملاحظة واضحة.
مثال:
Review the website on mobile. The hero text is too large. Make the cards stack vertically instead of staying side by side. Fix any overflow or alignment issues.
Prompt جاهز للنسخ
أول طلب
Website URL: [paste the website link here] Use this website as a visual reference. Recreate a similar layout, colors, sections, and overall style. Make it responsive for mobile and desktop. Use Plan Mode first. Ask me any questions you need before building.
تعديل قسم معين
Focus only on the [section name] section. This section does not match the reference closely enough. The problem is: [describe the issue]. Adjust it to be closer to the reference. Do not change the rest of the page.
فحص mobile
Review the website on mobile and desktop. Fix any overflow, weird spacing, text that is too large, or elements that are not aligned properly. After the changes, tell me exactly what you fixed.
فحص نهائي قبل النشر
Review the website before publishing. Check the images, links, text, mobile layout, and basic SEO. Give me a short checklist of what you fixed and anything that still needs work.
أخطاء شائعة
- •تبدأ بدون Plan Mode. لا تعمل هذا. الخطة توفر عليك وقت.
- •تقول "انسخ الموقع" فقط. أعطه تفاصيل أكثر عن المطلوب.
- •توافق على الخطة بدون قراءتها.
- •تطلب تعديل الصفحة كلها مرة واحدة. عدل قسم واحد كل مرة.
- •تنسى تغيير النصوص والصور والـ logo.
- •تختبر على desktop فقط وتنسى mobile.
Checklist قبل النشر
- •غيرت كل النصوص.
- •غيرت الصور والـ logo.
- •الموقع شغال على mobile.
- •الموقع شغال على desktop.
- •الروابط تعمل.
- •معلومات التواصل صحيحة.
- •لا يوجد محتوى من الموقع الأصلي.
- •الشكل النهائي مناسب لبراندك.
الفيديو
إذا طبقت الطريقة, اكتب لي النتيجة في التعليقات.