التكلفة
اشتراك Claude بس. Playwright والنشر مجانيين.
بمتصفح حقيقي جوّا Claude Code، تاخد الأسلوب من أي موقع عاجبك وتبنيلك موقع جديد بهويتك انت.
موقع احترافي كامل بساعة وبدون ما تكتب ولا سطر كود. Claude Code بيفتح المواقع اللي عاجباك بمتصفح حقيقي، بيدرس تصميمها، وبيبنيلك موقع جديد باسمك ومحتواك — حركة زي Apple، أسعار زي Stripe، كروت زي Airbnb، كلهم بموقع واحد.
شو رح تطلع فيه
موقع احترافي بدون ما تكتب سطر كود
الفكرة بسيطة: بتختار موقع أو أكثر عاجبك، وكلود كود بيفتحهم بمتصفح حقيقي، بيدرس تصميمهم، وبيبنيلك موقع جديد باسمك ومحتواك.
مثال
حركة وأنيميشن زي Apple، صفحة أسعار زي Stripe، وتصميم كروت زي Airbnb — كلهم بموقع واحد.
ملاحظة مهمة
الهدف إنك تاخد الأسلوب — الترتيب، الحركة، المسافات، الإحساس — مش إنك تنسخ شعارات ونصوص وصور غيرك. الموقع النهائي لازم يكون بهويتك إنت.
المتطلبات
| الشي | ليش | من وين |
|---|---|---|
| Claude Code | هو اللي بيبني الموقع | claude.com/claude-code (بده اشتراك Claude Pro أو Max) |
| Node.js | عشان الموقع يشتغل على جهازك وعشان المتصفح | nodejs.org |
| Playwright MCP | بيعطي كلود متصفح حقيقي: يفتح المواقع، ياخد صور شاشة، ويقرأ ترتيب الصفحة | أمر واحد — بالخطوة 1 (المصدر) |
اشتراك Claude بس. Playwright والنشر مجانيين.
الدليل خطوة بخطوة
Step 1
اعمل مجلد جديد للموقع وادخل عليه، ركّب المتصفح لـClaude (مرة وحدة بس)، وبعدين شغّل Claude Code جوّا المجلد.
mkdir my-website && cd my-website claude mcp add playwright npx @playwright/mcp@latest claude
تأكد إنه المتصفح شغّال
“اكتب لكلود: افتح apple.com ووصفلي الصفحة. إذا فتح الموقع ووصفه، كل شي جاهز.”
انسخ رابط الموقع وحطه بالبرومت
غيّر اللي بين الأقواس المربّعة بمعلومات مشروعك، وابعت البرومت لكلود.
يفتح الموقع، يدرس تصميمه بالتفصيل، وبيبنيلك موقع جديد بنفس الإحساس لكن بمحتواك انت.
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.
كلود بيقارن شغله بالأصل بالمتصفح وبيصلّح لحاله، بدل ما تضل إنت توصفله الغلط.
هون بتصير القيمة الحقيقية
كل قسم من موقع مختلف — بتقدر تغيّر المواقع والأقسام زي ما بدك، بس حدد بالضبط شو بدك تاخد من كل موقع.
يدرس كل موقع لحاله قبل ما يدمج أفضل جزء فيه، وبيخلّي الموقع كله بستايل واحد متناسق.
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.
التصميم الحلو لحاله ما بيبيع
هاي البرومتات الثلاثة بتخلي الموقع يجيب عملاء فعلاً — نصوص واضحة، أقسام تبني الثقة، ومراجعة تحويل كاملة.
إعادة صياغة كل نصوص الموقع بعربي واضح، بعنوان قوي وسبب واحد واضح للفعل.
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.
إضافة أقسام آراء العملاء، الأسئلة الشائعة، وقسم دعوة أخيرة، بنفس ستايل الموقع.
Add these sections in the same style: testimonials, FAQ, and a final call-to-action section.
مراجعة الموقع كامل من عين خبير تحويلات: الزر الرئيسي، السرعة عالموبايل، وقائمة بكل تعديل والسبب.
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.
Step 2
اطلب من كلود ينشر الموقع. بأول مرة بيطلب منك تسجّل دخول بحساب Vercel المجاني، وبعدها بيطلّعلك رابط شغّال. بتقدر تربط دومين خاص فيه بعدين.
Deploy this site to Vercel and give me the live link.
نصايح
المصادر
المستودع الرسمي من Microsoft — المتصفح اللي كلود بيستخدمه.
github.comالموقع الرسمي — الاشتراك والتثبيت.
anthropic.comالنشر المجاني للموقع.
vercel.comخذ الأسلوب مش المحتوى، واشتغل قسم قسم. برومت واحد لكل قسم بيطلع أدق بكثير من برومت واحد للموقع كله — وخلّي كلود يشوف شغله بسكرينشوت بعد كل تعديل.
بنيت موقعك الأول؟
كل يوم بنزّل محتوى يساعدك تبني بالذكاء الاصطناعي.
أبعتلك الدليل الجاي على الإيميل
إيميل واحد لكل فيديو جديد. بدون سبام، وبتقدر توقف بأي وقت.
11 سكيل مجانية بتخلّي Claude يكتب ويخطط ويحلل حساب LinkedIn تبعك، والنشر عليك إنت.
11 إضافة مجانية ومفتوحة المصدر من Anthropic، كل وحدة لوظيفة محددة.
5 إضافات مجانية بتخلّي Claude Code يشتغل زي مبرمج محترف.