Claude Code Desktop ile Bir Web Sitesi Oluşturun ve Yayınlayın

Dribbble'da Beğendiğiniz Bir Web Sitesi Tasarımı Arayın

Dribbble'ı açın

https://dribbble.com

Tek Bir Tasarım Yönü Seçin

Ekran Görüntüsü Alın ve Kaydedin

Web Sitenizin Görsellerini Oluşturun veya Toplayın

Google Flow ile özel görseller oluşturun, Pexels'ten hazır içerik indirin veya işletmenin gerçek görsellerini kullanın.

Google Flow'u açın

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

Pexels'i açın

https://www.pexels.com

Bir Web Sitesi Görseli Oluşturun

Web sitesine hazır tek bir Google Flow görsel prompt'u oluşturun.

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'u açın

İşletme veya Proje Türü

Bir seçenek seçin

Görsel Türü

Bir seçenek seçin

Görsel Tarz

Bir seçenek seçin

Marka Renkleri

Bir seçenek seçin

Atmosfer

Bir seçenek seçin

En Boy Oranı

Bir seçenek seçin

Bir Hero Videosu Oluşturun

Sinematik bir Google Flow video prompt'u oluşturun.

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'u açın

İşletme veya Proje Türü

Bir seçenek seçin

Konu veya Sahne

örn. ahşap bir tezgâhta taze kahveden yükselen buhar

Kamera Hareketi

Bir seçenek seçin

Görsel Atmosfer

Bir seçenek seçin

Marka Tarzı

Bir seçenek seçin

Video Yönü

Bir seçenek seçin

Web Sitesi Varlıklarınızı Düzenleyin

Web sitesi görsellerini ve hero videosunu bir assets klasörüne koyun. Tasarım ilhamı ekran görüntüsünü bu klasörün dışında tutun.

Claude Desktop'ı Kurun ve Oturum Açın

Claude Desktop'ı İndirin

https://claude.ai/download

Web Sitesi Projesi için Bir Klasör Oluşturun

Varlıklar Klasörünü ve İlham Ekran Görüntüsünü Ekleyin

Projeyi Claude Desktop'ta Açın

Claude Desktop Code Local Select Project Folder Open Trust Workspace

frontend-design Claude Skill'ini Kurun

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.

Web Sitesi Prompt'unu Özelleştirin

Web Sitesini Oluşturun

İşletme bilgilerinizi ve hazırladığınız görsel referansları kullanarak eksiksiz bir web sitesi oluşturma prompt'u hazırlayın.

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.

İsteğe bağlı ek ayrıntılar. Emin değilseniz boş bırakın — Claude ihtiyaç duyarsa soracaktır.

İşletme Adı

örn. Apex Auto Detail

İşletme Türü

Bir seçenek seçin

Konum

örn. Lizbon, Portekiz

Ana Hizmetler

Telefon Numarası

İsteğe bağlı

E-posta Adresi

İsteğe bağlı

Adres

İsteğe bağlı

İletişim Bilgileri

Marka Renkleri

Bir seçenek seçin

Tercih Edilen Görsel Tarz

Bir seçenek seçin

Web Sitesi Bölümleri

Bir seçenek seçin

Ana Harekete Geçirici Mesaj

Bir seçenek seçin

İşletme Hakkında Başka Bir Şey

İsteğe bağlı — çalışma saatleri, hizmet bölgesi, işletmeyi farklı kılan şeyler…

Web Sitesini Oluşturun ve Önizleyin

Prompt'u Claude Desktop'a yapıştırın, gönderin ve derleme tamamlandığında ilk önizlemeyi açın.

Web Sitesini Gözden Geçirin ve İyileştirin

Masaüstü ve mobil düzenleri kontrol edin, ardından değişiklikleri açıklayın veya gerekirse bir ekran görüntüsü ekleyin.

Hostinger'ı açın

Hostinger'ı açın

Web sitesini yüklemek ve yayınlamak için Hostinger panelinizi açın.

https://www.hostg.xyz/SHJlq

Web Sitesi Taşıma İşlemini Kurun

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

Bir Alan Adı Seçin

Geçici bir alan adı seçin, pakete dahil bir alan adını talep edin veya halihazırda sahip olduğunuz bir alan adını bağlayın.

Web Sitesi ZIP'ini Yükleyin

Proje dizininin içindeki dosya ve klasörleri sıkıştırın — üst proje klasörünü değil — böylece index.html ZIP'in kök dizininde kalır.

Yayındaki Web Sitesini Test Edin

Seçtiğiniz alan adını açın ve web sitesinin masaüstü ile mobilde doğru çalıştığını doğrulayın.