Crea e pubblica un sito web con Claude Code Desktop

Cerca su Dribbble un design di sito che ti piace

Apri Dribbble

https://dribbble.com

Scegli una sola direzione di design

Fai uno screenshot e salvalo

Crea o raccogli le immagini del tuo sito web

Crea visual personalizzate con Google Flow, scarica contenuti pronti da Pexels oppure usa materiali reali dell'attività.

Apri Google Flow

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

Apri Pexels

https://www.pexels.com

Genera un'immagine per il sito web

Crea un prompt immagine di Google Flow pronto per il sito web.

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.

Apri Google Flow

Tipo di attività o progetto

Scegli un'opzione

Tipo di immagine

Scegli un'opzione

Stile visivo

Scegli un'opzione

Colori del brand

Scegli un'opzione

Atmosfera

Scegli un'opzione

Proporzioni

Scegli un'opzione

Genera un video hero

Crea un prompt video cinematografico di 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}}.

Apri Google Flow

Tipo di attività o progetto

Scegli un'opzione

Soggetto o scena

es. vapore che sale da un caffè appena fatto su un bancone di legno

Movimento di camera

Scegli un'opzione

Atmosfera visiva

Scegli un'opzione

Stile del brand

Scegli un'opzione

Orientamento del video

Scegli un'opzione

Organizza le risorse del tuo sito web

Metti le immagini del sito e il video principale in una cartella assets. Tieni lo screenshot di ispirazione al di fuori.

Installa Claude Desktop e accedi

Scarica Claude Desktop

https://claude.ai/download

Crea una cartella per il progetto del sito web

Aggiungi la cartella delle risorse e lo screenshot di ispirazione

Apri il progetto in Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Installa la skill frontend-design di 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.

Personalizza il prompt del sito web

Costruisci il sito web

Crea un prompt completo per la creazione del sito usando i dati della tua attività e i riferimenti visivi preparati.

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.

Dettagli aggiuntivi facoltativi. Lasciali vuoti se non sei sicuro: Claude te li chiederà se gli servono.

Nome del business

es. Apex Auto Detail

Tipo di business

Scegli un'opzione

Località

es. Lisbona, Portogallo

Servizi principali

Numero di telefono

Facoltativo

Indirizzo e-mail

Facoltativo

Indirizzo

Facoltativo

Dettagli di contatto

Colori del brand

Scegli un'opzione

Stile visivo preferito

Scegli un'opzione

Sezioni del sito web

Scegli un'opzione

Call to action principale

Scegli un'opzione

Qualsiasi altra cosa sull'attività

Facoltativo — orari di apertura, area di servizio, cosa rende diversa l'attività…

Crea e visualizza l'anteprima del sito web

Incolla il prompt in Claude Desktop, invialo e apri la prima anteprima quando la build è pronta.

Rivedi e perfeziona il sito web

Controlla i layout desktop e mobile, poi descrivi le modifiche o allega uno screenshot se necessario.

Apri Hostinger

Apri Hostinger

Apri la tua dashboard Hostinger per caricare e pubblicare il sito web.

https://www.hostg.xyz/SHJlq

Configura la migrazione del sito web

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

Scegli un dominio

Seleziona un dominio temporaneo, richiedi un dominio incluso oppure collega un dominio che possiedi già.

Carica lo ZIP del sito web

Comprimi i file e le cartelle all'interno della directory del progetto — non la cartella principale — in modo che index.html resti nella radice dello ZIP.

Testa il sito web online

Apri il dominio scelto e conferma che il sito funzioni correttamente su desktop e mobile.