أنشئ موقعًا وانشره باستخدام Claude Code Desktop

ابحث في Dribbble عن تصميم موقع يعجبك

افتح Dribbble

https://dribbble.com

اختر اتجاهًا تصميميًا واحدًا

التقط لقطة شاشة واحفظها

أنشئ صور موقعك أو اجمعها

أنشئ صورًا مخصصة باستخدام Google Flow، أو نزّل محتوى جاهزًا من Pexels، أو استخدم أصول النشاط التجاري الحقيقية.

افتح Google Flow

https://labs.google/fx/tools/flow

افتح Pexels

https://www.pexels.com

أنشئ صورة للموقع

أنشئ أمر صورة واحدًا في Google Flow جاهزًا للاستخدام في الموقع.

Create one premium, photorealistic, website-ready image for {{BUSINESS_TYPE}}. The image should show {{IMAGE_TYPE}}, shot in a {{VISUAL_STYLE}} style. Aim for {{MOOD}}. For colors, use {{BRAND_COLORS}}. Make it realistic and high-end, like professional commercial photography: clean, well lit, and uncluttered, with natural depth, sharp detail, and calm empty space where website text can sit on top. Generate one single, final, website-ready image only, and set its aspect ratio to {{ASPECT_RATIO}}. Do not create multiple variations, a collage, an image grid, a contact sheet, a split-screen or multi-panel composition, or several images combined into one result — return exactly one image. Avoid text, logos, watermarks, distorted faces or hands, busy or distracting backgrounds, heavy filters, neon glow, and any obviously AI-generated look.

افتح Google Flow

نوع العمل أو المشروع

اختر خيارًا

نوع الصورة

اختر خيارًا

النمط المرئي

اختر خيارًا

ألوان العلامة التجارية

اختر خيارًا

الأجواء

اختر خيارًا

نسبة العرض إلى الارتفاع

اختر خيارًا

أنشئ فيديو hero

أنشئ أمر فيديو سينمائي في Google Flow.

Create a short, cinematic background video for the hero section of {{BUSINESS_TYPE}}. It should show {{VIDEO_SUBJECT}}, filmed using {{CAMERA_MOVEMENT}}. Aim for {{VISUAL_MOOD}}. The overall style should be {{BRAND_STYLE}}. Keep the clip short and easy to loop, around 5 to 10 seconds, with smooth, slow, steady motion. Make it premium and realistic, like a high-end commercial, and simple enough that a headline stays readable on top of it. Keep the lighting and color consistent with a professional website. Avoid text, logos, watermarks, fast cuts, shaky or jarring movement, distorted faces or hands, busy backgrounds, and any obviously AI-generated look. Deliver the video in {{VIDEO_ORIENTATION}}.

افتح Google Flow

نوع العمل أو المشروع

اختر خيارًا

الموضوع أو المشهد

مثال: بخار يتصاعد من قهوة طازجة على طاولة خشبية

حركة الكاميرا

اختر خيارًا

الأجواء المرئية

اختر خيارًا

أسلوب العلامة التجارية

اختر خيارًا

اتجاه الفيديو

اختر خيارًا

نظّم أصول موقعك

ضع صور الموقع وفيديو الواجهة داخل مجلد assets، واحتفظ بلقطة الشاشة المرجعية للتصميم خارجه.

ثبّت Claude Desktop وسجّل الدخول

نزّل Claude Desktop

https://claude.ai/download

أنشئ مجلدًا لمشروع الموقع

أضف مجلد الأصول ولقطة الشاشة المرجعية

افتح المشروع في Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

ثبّت مهارة frontend-design في Claude

frontend-design

Install the frontend-design Claude Skill from https://github.com/anthropics/skills/tree/main/skills/frontend-design for my user account. Inspect the SKILL.md and LICENSE.txt files first, then copy the complete frontend-design folder to ~/.claude/skills/frontend-design while preserving its structure. Confirm when it is installed and ready to use.

خصّص أمر إنشاء الموقع

ابنِ الموقع

أنشئ أمرًا كاملًا لبناء الموقع باستخدام بيانات نشاطك التجاري والمراجع البصرية التي جهّزتها.

Build a premium, visually impressive website for my business using the brief below. BUSINESS Business name: {{BUSINESS_NAME}} Business type: {{BUSINESS_TYPE}} Location: {{BUSINESS_LOCATION}} Main services: {{MAIN_SERVICES}} {{CONTACT_DETAILS}} Additional information: {{EXTRA_INFO}} DESIGN DIRECTION Brand colors: {{BRAND_COLORS}} Visual style: {{VISUAL_STYLE}} Main call to action: {{MAIN_CTA}} Sections: {{WEBSITE_SECTIONS}} Use the inspiration screenshot in this project folder as the visual direction. Match its layout feel, spacing, and quality level. Do not copy it exactly, and do not reuse its brand, logo, or text. ASSETS Use the images, logo, and video inside the assets folder in this project folder. Use the hero video wherever it makes the design stronger, and keep the headline readable on top of it. Do not use placeholder or stock images when a real file exists in the assets folder. WHAT TO BUILD Build a complete static website using only HTML, CSS, and JavaScript. If you ask me to choose a project type, use a multi-file static site. Name the main file index.html. Organize every required file clearly inside this project folder. Make the website: - premium, modern, and visually impressive - fully responsive on desktop, tablet, and mobile - built around a memorable, visually strong hero section - premium in its typography, with polished spacing and clear visual hierarchy - smooth, with tasteful animations and interactive details - easy to navigate, with clear navigation and obvious calls to action Avoid: - a generic AI-generated appearance - cluttered layouts, excessive gradients, or neon glow - placeholder text left in the final result - broken links or empty sections - React, Vite, npm, a build step, a backend, or a database Before you start building, ask me any essential questions if important information is missing. Do not invent contact details, prices, reviews, awards, or business claims. Use clearly editable placeholders instead.

تفاصيل إضافية اختيارية. اتركها فارغة إذا لم تكن متأكدًا — سيسألك Claude عنها عند الحاجة.

اسم العمل

مثال: Apex Auto Detail

نوع العمل

اختر خيارًا

الموقع الجغرافي

مثال: لشبونة، البرتغال

الخدمات الرئيسية

رقم الهاتف

اختياري

عنوان البريد الإلكتروني

اختياري

العنوان

اختياري

تفاصيل التواصل

ألوان العلامة التجارية

اختر خيارًا

النمط المرئي المفضّل

اختر خيارًا

أقسام الموقع

اختر خيارًا

الدعوة الرئيسية لاتخاذ إجراء

اختر خيارًا

أي شيء آخر عن العمل

اختياري — ساعات العمل، منطقة الخدمة، ما الذي يميّز العمل…

ابنِ الموقع وعاينه

الصق الأمر في Claude Desktop وأرسله، ثم افتح المعاينة الأولى عند اكتمال البناء.

راجع الموقع وحسّنه

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

افتح Hostinger

افتح Hostinger

افتح لوحة تحكم Hostinger لرفع الموقع ونشره.

https://www.hostg.xyz/SHJlq

جهّز عملية نقل الموقع

Hostinger Add Website Migrate an Existing Website Upload Website or Backup Files

اختر نطاقًا

اختر نطاقًا مؤقتًا، أو احصل على نطاق مشمول في الخطة، أو اربط نطاقًا تملكه بالفعل.

ارفع ملف ZIP الخاص بالموقع

اضغط الملفات والمجلدات الموجودة داخل مجلد المشروع — وليس المجلد الأب — حتى يبقى index.html في جذر ملف ZIP.

اختبر الموقع المباشر

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