Crée et publie un site web avec Claude Code Desktop

Cherche sur Dribbble un design de site qui te plaît

Ouvrir Dribbble

https://dribbble.com

Choisis une seule direction artistique

Fais une capture d'écran et enregistre-la

Crée ou rassemble les visuels de ton site web

Crée des visuels personnalisés avec Google Flow, télécharge du contenu prêt à l'emploi depuis Pexels ou utilise les vrais visuels de l'entreprise.

Ouvrir Google Flow

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

Ouvrir Pexels

https://www.pexels.com

Génère une image pour le site web

Crée un prompt d'image Google Flow prêt pour le site 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.

Ouvrir Google Flow

Type d'entreprise ou de projet

Choisis une option

Type d'image

Choisis une option

Style visuel

Choisis une option

Couleurs de la marque

Choisis une option

Ambiance

Choisis une option

Format d'image

Choisis une option

Génère une vidéo hero

Crée un prompt vidéo cinématique 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}}.

Ouvrir Google Flow

Type d'entreprise ou de projet

Choisis une option

Sujet ou scène

p. ex. de la vapeur s'élevant d'un café fraîchement préparé sur un comptoir en bois

Mouvement de caméra

Choisis une option

Ambiance visuelle

Choisis une option

Style de marque

Choisis une option

Orientation de la vidéo

Choisis une option

Organise les ressources de ton site web

Place les images du site et la vidéo principale dans un dossier assets. Garde la capture d'inspiration en dehors de ce dossier.

Installe Claude Desktop et connecte-toi

Télécharger Claude Desktop

https://claude.ai/download

Crée un dossier pour le projet de site web

Ajoute le dossier des ressources et la capture d'inspiration

Ouvre le projet dans Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Installe la skill frontend-design de 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.

Personnalise le prompt du site web

Construis le site web

Crée un prompt complet de construction du site à partir des informations de ton entreprise et des références visuelles préparées.

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.

Détails supplémentaires facultatifs. Laisse-les vides si tu n'es pas sûr — Claude te les demandera s'il en a besoin.

Nom du business

p. ex. Apex Auto Detail

Type de business

Choisis une option

Localisation

p. ex. Lisbonne, Portugal

Services principaux

Numéro de téléphone

Facultatif

Adresse e-mail

Facultatif

Adresse

Facultatif

Coordonnées

Couleurs de la marque

Choisis une option

Style visuel préféré

Choisis une option

Sections du site web

Choisis une option

Appel à l'action principal

Choisis une option

Autre chose à propos de l'entreprise

Facultatif — horaires d'ouverture, zone de service, ce qui rend l'entreprise différente…

Construis et prévisualise le site web

Colle le prompt dans Claude Desktop, envoie-le, puis ouvre le premier aperçu une fois la génération terminée.

Passe en revue et affine le site web

Vérifie les mises en page desktop et mobile, puis décris les changements ou joins une capture d'écran si nécessaire.

Ouvrir Hostinger

Ouvrir Hostinger

Ouvre ton tableau de bord Hostinger pour téléverser et publier le site web.

https://www.hostg.xyz/SHJlq

Configure la migration du site web

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

Choisis un domaine

Sélectionne un domaine temporaire, revendique un domaine inclus ou connecte un domaine que tu possèdes déjà.

Envoie le ZIP du site web

Compresse les fichiers et dossiers situés à l'intérieur du répertoire du projet — pas le dossier parent — afin qu'index.html reste à la racine du ZIP.

Teste le site web en ligne

Ouvre le domaine choisi et vérifie que le site fonctionne correctement sur ordinateur et mobile.