Bangun dan Publikasikan Website dengan Claude Code Desktop

Cari Desain Situs Web yang Anda Suka di Dribbble

Buka Dribbble

https://dribbble.com

Pilih Satu Arah Desain

Ambil Screenshot dan Simpan

Buat atau Kumpulkan Visual Situs Web Anda

Buat visual khusus dengan Google Flow, unduh konten siap pakai dari Pexels, atau gunakan aset asli milik bisnis.

Buka Google Flow

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

Buka Pexels

https://www.pexels.com

Buat Gambar Website

Buat satu prompt gambar Google Flow yang siap dipakai di situs.

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.

Buka Google Flow

Jenis Bisnis atau Proyek

Pilih opsi

Jenis Gambar

Pilih opsi

Gaya Visual

Pilih opsi

Warna Merek

Pilih opsi

Suasana

Pilih opsi

Rasio Aspek

Pilih opsi

Buat Video Hero

Buat prompt video sinematik 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}}.

Buka Google Flow

Jenis Bisnis atau Proyek

Pilih opsi

Subjek atau Adegan

mis. uap yang mengepul dari kopi segar di atas meja kayu

Gerakan Kamera

Pilih opsi

Suasana Visual

Pilih opsi

Gaya merek

Pilih opsi

Orientasi Video

Pilih opsi

Rapikan Aset Situs Web Anda

Letakkan gambar situs dan video hero di dalam folder assets. Simpan screenshot inspirasi desain di luar folder tersebut.

Instal dan Masuk ke Claude Desktop

Unduh Claude Desktop

https://claude.ai/download

Buat Folder untuk Proyek Situs Web

Tambahkan Folder Aset dan Screenshot Inspirasi

Buka Proyek di Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Instal Claude Skill frontend-design

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.

Sesuaikan Prompt Situs Web

Bangun Website

Buat prompt pembuatan situs yang lengkap menggunakan detail bisnis Anda dan referensi visual yang sudah disiapkan.

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.

Detail tambahan yang opsional. Biarkan kosong jika Anda ragu — Claude akan bertanya jika membutuhkannya.

Nama bisnis

mis. Apex Auto Detail

Tipe bisnis

Pilih opsi

Lokasi

mis. Lisabon, Portugal

Layanan utama

Nomor telepon

Opsional

Alamat email

Opsional

Alamat

Opsional

Detail Kontak

Warna Merek

Pilih opsi

Gaya Visual yang Disukai

Pilih opsi

Bagian Website

Pilih opsi

Call to Action Utama

Pilih opsi

Hal lain tentang bisnis

Opsional — jam buka, area layanan, apa yang membuat bisnis ini berbeda…

Bangun dan Pratinjau Situs Web

Tempel prompt ke Claude Desktop, kirim, lalu buka pratinjau pertama saat build selesai.

Tinjau dan Sempurnakan Situs Web

Periksa tampilan desktop dan mobile, lalu jelaskan perubahan yang diinginkan atau lampirkan screenshot jika perlu.

Buka Hostinger

Buka Hostinger

Buka dashboard Hostinger Anda untuk mengunggah dan mempublikasikan website.

https://www.hostg.xyz/SHJlq

Siapkan Migrasi Situs Web

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

Pilih Domain

Pilih domain sementara, klaim domain yang sudah termasuk dalam paket, atau hubungkan domain yang sudah Anda miliki.

Unggah ZIP Situs Web

Kompres file dan folder yang ada di dalam direktori proyek — bukan folder induknya — agar index.html tetap berada di root ZIP.

Uji Situs Web Versi Live

Buka domain yang dipilih dan pastikan situs web berfungsi dengan benar di desktop maupun mobile.