عبدالله خطاطبة

ببني منتجات بالذكاء الاصطناعي

واتساب
انتقل للمحتوى
كل الهدايا
دليلinstagram30 سبتمبر 20265 د قراءة

دليل موقع بـ$10,000 بكلود كود — استنسخ، ادمج، وأعد التصميم

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

موقع احترافي كامل بساعة وبدون ما تكتب ولا سطر كود. Claude Code بيفتح المواقع اللي عاجباك بمتصفح حقيقي، بيدرس تصميمها، وبيبنيلك موقع جديد باسمك ومحتواك — حركة زي Apple، أسعار زي Stripe، كروت زي Airbnb، كلهم بموقع واحد.

شو رح تطلع فيه

موقع كامل بساعة، بدون كود

— شو رح تطلع فيه

  • موقع احترافي بدون ما تكتب سطر كود

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

  • مثال

    حركة وأنيميشن زي Apple، صفحة أسعار زي Stripe، وتصميم كروت زي Airbnb — كلهم بموقع واحد.

  • ملاحظة مهمة

    الهدف إنك تاخد الأسلوب — الترتيب، الحركة، المسافات، الإحساس — مش إنك تنسخ شعارات ونصوص وصور غيرك. الموقع النهائي لازم يكون بهويتك إنت.

المتطلبات

اشتراك Claude بس، والباقي مجاني

الشيليشمن وين
Claude Codeهو اللي بيبني الموقعclaude.com/claude-code (بده اشتراك Claude Pro أو Max)
Node.jsعشان الموقع يشتغل على جهازك وعشان المتصفحnodejs.org
Playwright MCPبيعطي كلود متصفح حقيقي: يفتح المواقع، ياخد صور شاشة، ويقرأ ترتيب الصفحةأمر واحد — بالخطوة 1 (المصدر)

التكلفة

اشتراك Claude بس. Playwright والنشر مجانيين.

الدليل خطوة بخطوة

من التجهيز للنشر

1

Step 1

جهّز المشروع

اعمل مجلد جديد للموقع وادخل عليه، ركّب المتصفح لـClaude (مرة وحدة بس)، وبعدين شغّل Claude Code جوّا المجلد.

mkdir my-website && cd my-website
claude mcp add playwright npx @playwright/mcp@latest
claude

تأكد إنه المتصفح شغّال

“اكتب لكلود: افتح apple.com ووصفلي الصفحة. إذا فتح الموقع ووصفه، كل شي جاهز.”

— الخطوة 2 — استنسخ الموقع اللي عاجبك

  • انسخ رابط الموقع وحطه بالبرومت

    غيّر اللي بين الأقواس المربّعة بمعلومات مشروعك، وابعت البرومت لكلود.

1

برومبت الاستنساخ

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

Open [URL] in the browser. Take full-page screenshots on desktop and mobile,
and study the layout, spacing, fonts, colors, and every animation on scroll and hover.

Then build me a new website in this folder that recreates that design and feel
(Next.js + Tailwind + Framer Motion), but with MY content:
- Business: [اسم مشروعك وشو بتعمل]
- Language: Arabic, right-to-left
- Use placeholder images, not theirs. Do not copy their logo or text.

Run it locally, open it in the browser, compare it side by side with the original,
and keep fixing until they feel the same.

السر بالسطر الأخير

كلود بيقارن شغله بالأصل بالمتصفح وبيصلّح لحاله، بدل ما تضل إنت توصفله الغلط.

— الخطوة 3 — ادمج أحسن الأجزاء من كذا موقع

  • هون بتصير القيمة الحقيقية

    كل قسم من موقع مختلف — بتقدر تغيّر المواقع والأقسام زي ما بدك، بس حدد بالضبط شو بدك تاخد من كل موقع.

2

برومبت الدمج

يدرس كل موقع لحاله قبل ما يدمج أفضل جزء فيه، وبيخلّي الموقع كله بستايل واحد متناسق.

Now improve the site by taking the best part of each of these sites:
- Animations and scroll effects like https://www.apple.com
- The pricing section like https://stripe.com/pricing
- The cards and overall visual design like https://www.airbnb.com

Open each one in the browser and study that part first.
Keep one consistent style across the whole site, so it feels like one brand.
Show me a screenshot when each section is done.

— الخطوة 4 — حسّن النصوص وزبّط التحويلات

  • التصميم الحلو لحاله ما بيبيع

    هاي البرومتات الثلاثة بتخلي الموقع يجيب عملاء فعلاً — نصوص واضحة، أقسام تبني الثقة، ومراجعة تحويل كاملة.

3

النصوص

إعادة صياغة كل نصوص الموقع بعربي واضح، بعنوان قوي وسبب واحد واضح للفعل.

Rewrite all the copy for [مشروعك] in clear Arabic: a strong headline that says what I do
and for whom, short benefit-focused sections, and one clear call to action.
4

أقسام جديدة

إضافة أقسام آراء العملاء، الأسئلة الشائعة، وقسم دعوة أخيرة، بنفس ستايل الموقع.

Add these sections in the same style: testimonials, FAQ, and a final call-to-action section.
5

التحويلات

مراجعة الموقع كامل من عين خبير تحويلات: الزر الرئيسي، السرعة عالموبايل، وقائمة بكل تعديل والسبب.

Review the whole site as a conversion expert. Make the main button visible above the fold
and repeated after key sections, remove anything distracting, make it fast on mobile,
then list every change you made and why.
2

Step 2

انشر الموقع مجاناً

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

Deploy this site to Vercel and give me the live link.

نصايح

عشان النتيجة تطلع احترافية فعلاً

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

المصادر

للاطلاع أكثر

1

Playwright MCP

المستودع الرسمي من Microsoft — المتصفح اللي كلود بيستخدمه.

github.com
2

Claude Code

الموقع الرسمي — الاشتراك والتثبيت.

anthropic.com
3

Vercel

النشر المجاني للموقع.

vercel.com

خذ الأسلوب مش المحتوى، واشتغل قسم قسم. برومت واحد لكل قسم بيطلع أدق بكثير من برومت واحد للموقع كله — وخلّي كلود يشوف شغله بسكرينشوت بعد كل تعديل.

بنيت موقعك الأول؟

تابعني عشان أكثر

كل يوم بنزّل محتوى يساعدك تبني بالذكاء الاصطناعي.

تواصل معي على إنستغرام— عبدالله AI

أبعتلك الدليل الجاي على الإيميل

إيميل واحد لكل فيديو جديد. بدون سبام، وبتقدر توقف بأي وقت.

هدايا ثانية