Créer son premier site avec Claude Code : du brief produit au domaine personnalisé

Le nom est choisi et le domaine est acheté. L’étape suivante consiste à faire en sorte que toute personne qui ouvre ce domaine puisse voir le produit, comprendre son utilité et effectuer l’action attendue.

Dans ce guide, nous allons utiliser Claude Code pour créer un site produit prêt à être publié. L’exemple est un outil de gestion des retours clients dont les inscriptions ne sont pas encore ouvertes. La mission du site est claire : présenter le produit aux indépendants et permettre aux personnes intéressées de demander un accès anticipé.

L’ensemble du travail se déroule dans l’outil de programmation : création de la page, ajustement de la mise en page, connexion du formulaire, vérification du résultat et déploiement. Le site lui-même n’a pas besoin d’un chatbot ni d’une autre fonction d’IA.

Commencer par définir le mode de développement

Claude Code peut lire un projet, modifier des fichiers et exécuter des commandes. Il convient donc bien au développement et aux corrections successives d’un même site. Ce guide utilise Claude Code dans un terminal local.

Créez un dossier réservé au site et placez-y le nom validé du produit, les textes et les ressources disponibles. Si un projet existe déjà, conservez sa structure. Pour un nouveau projet, vous pouvez demander à l’outil de proposer une implémentation simple d’un site monopage.

Si Claude Code fonctionne déjà avec votre mode d’accès actuel, continuez à l’utiliser. Configurez un fournisseur de modèles lorsque vous choisissez un accès API facturé à l’usage.

Pour utiliser Claude Code avec BetterToken, suivez le guide de configuration de Claude Code et renseignez l’API Key et la Base URL. Conservez ces paramètres dans l’environnement local de développement afin que l’outil puisse les utiliser ; ne les ajoutez pas au site public. Les modèles disponibles et les conditions d’accès dépendent de la configuration actuelle du compte.

Après la configuration, demandez à Claude Code d’examiner le dossier du site et de résumer les fichiers existants, la stack technique et la commande de démarrage. La compatibilité d’une passerelle tierce peut varier selon le client et la fonction, vérifiez donc le modèle et les capacités nécessaires avant de commencer.

Étape 1 : fournir à l’IA un brief directement exploitable

« Crée un site haut de gamme et technologique » ne précise ni le public visé ni l’action attendue du bouton principal.

Après avoir fourni le nom validé et les ressources, envoyez une tâche comme celle-ci :

Objectif : créer la première version du site d’un outil de gestion des retours clients destiné aux indépendants. Le produit aide à centraliser les demandes de modification des clients afin d’éviter de rechercher les besoins dans l’historique des conversations. Les inscriptions ne sont pas encore ouvertes et le bouton principal doit afficher « Demander un accès anticipé ».

Périmètre autorisé : créer uniquement la page d’accueil. Elle doit contenir une présentation du produit, un scénario d’utilisation clairement indiqué comme démonstration, trois usages principaux, une FAQ et un accès à la demande d’essai. Utiliser le nom du produit et les ressources que je fournirai.

À ne pas faire : ne pas ajouter de connexion, de paiement ni de tableau de bord produit. Ne pas inventer de nombre de clients, de témoignages ni de logos partenaires.

Critères de réalisation : fournir d’abord un aperçu ouvrable dans le navigateur et utilisable sur ordinateur comme sur mobile. Si l’accès anticipé n’est pas encore relié à un service réel, l’indiquer clairement comme démonstration.

Vérification : vérifier que la page démarre correctement, contrôler la mise en page mobile et le comportement du bouton principal, puis indiquer les tests réellement effectués.

Ce brief suffit à définir le périmètre de la première version. Les détails pourront être ajoutés après l’examen de la page.

Lors de la première revue, vérifiez que la page explique correctement le produit. D’où viennent les retours clients ? Pourquoi un visiteur devrait-il l’essayer ? Que se passe-t-il après le clic ? Les couleurs et les animations pourront être ajustées ensuite, mais la page doit d’abord répondre à ces questions.

Étape 2 : rattacher chaque modification à une zone précise

Une fois la première version prête, le retour le plus utile désigne la partie exacte qui gêne la compréhension ou l’utilisation.

Par exemple, si une grande image occupe tout le premier écran sur mobile et oblige le visiteur à faire défiler la page avant de comprendre le produit, poursuivez avec une tâche comme celle-ci :

Objectif : ajuster la zone d’en-tête mobile de la page d’accueil afin que le visiteur voie d’abord l’utilité du produit et le bouton « Demander un accès anticipé ».

Périmètre autorisé : modifier uniquement la mise en page et les styles de la zone d’en-tête de la page d’accueil.

Modifications précises : sur mobile, déplacer l’image de démonstration sous le bouton et conserver les textes actuels. Sur ordinateur, préserver la disposition actuelle en deux colonnes.

Critères de réalisation : aucun débordement horizontal sur mobile, l’image ne recouvre ni le titre ni le bouton, et la mise en page sur ordinateur reste inchangée.

Vérification : contrôler une largeur mobile et une largeur d’ordinateur. Corriger uniquement les problèmes provoqués par cette modification.

Rouvrez la page après chaque changement et vérifiez que le résultat correspond à la demande. Si des outils de navigation sont disponibles, demandez à l’IA d’effectuer directement l’aperçu. Sinon, ouvrez vous-même la page et transmettez des captures accompagnées de problèmes reproductibles.

Lorsqu’une version vous convient, conservez un point de restauration avant de commencer la série de modifications suivante. Vous pourrez ainsi revenir rapidement à une version stable si la nouvelle direction ne fonctionne pas.

Étape 3 : faire arriver réellement les demandes d’accès

Pour ce site, la fonction la plus importante n’est pas une interaction complexe, mais la réception des demandes.

La première version peut ouvrir un formulaire hébergé déjà configuré. Il n’est pas nécessaire de construire un système de comptes uniquement pour recueillir des adresses e-mail. Le formulaire peut demander l’adresse e-mail et proposer une question facultative : « Comment gérez-vous actuellement les retours de vos clients ? » Précisez que les informations seront utilisées pour le contact lié à l’accès anticipé et pour la recherche produit.

Donnez à Claude Code l’URL réelle du formulaire et demandez-lui de remplacer l’accès de démonstration. Ouvrez ensuite le site, envoyez une demande de test et confirmez que l’enregistrement apparaît dans le système de réception.

Si le formulaire est intégré au site, connectez le véritable service d’envoi et implémentez les états d’envoi, de réussite et d’échec. Affichez le message de réussite seulement après confirmation de l’enregistrement des données par le système destinataire.

Les messages affichés doivent correspondre à l’action réellement accomplie. C’est plus important que l’ajout de nouvelles sections de présentation.

Étape 4 : vérifier l’aperçu public avant de connecter le domaine

Après validation de l’aperçu local, publiez le projet sur une plateforme compatible avec sa stack. Commencez par une URL publique de test et ouvrez-la sur un autre appareil pour vérifier les images, les liens et le formulaire.

Sur Vercel, par exemple, vous ajoutez le domaine acheté au projet, puis configurez le DNS avec les valeurs affichées pour ce projet. Utilisez les enregistrements fournis par le projet actuel. Si le domaine sert aussi à la messagerie, conservez les enregistrements MX et les autres enregistrements e-mail existants. Le processus complet est décrit dans la documentation Vercel sur les domaines personnalisés.

Une fois le domaine connecté, refaites tout le parcours depuis votre propre adresse : ouvrir le site, comprendre le produit et terminer la demande.

Une page de présentation fixe comme celle-ci n’appelle pas un modèle à chaque visite. Le modèle intervient uniquement pendant le développement ; après le déploiement, le site fonctionne comme un projet web classique. Si vous ajoutez plus tard de la génération de contenu, de l’analyse ou une conversation pour les visiteurs, concevez cette intégration du modèle à l’exécution comme une fonction distincte.

Étape 5 : lancer le produit avec un site déjà utilisable

Lorsque vous commencez à le présenter, utilisez de vraies captures, une description claire et un accès opérationnel. Si le produit recrute encore des testeurs, écrivez « Demander un accès anticipé » sur la page comme dans les supports de lancement.

Quand le site est prêt, parcourez l’annuaire de startups de NewName.ai pour voir comment des produits similaires présentent leur utilité, puis soumettez votre propre projet. Appuyez-vous sur les fonctions réelles, des captures actuelles et une URL accessible.

Ramenez ensuite dans le projet les retours concrets issus des visites et des demandes. Si les personnes ne comprennent pas la différence entre le produit et une application de messagerie, améliorez l’explication. Si elles cliquent sans terminer la demande, examinez le formulaire et le parcours. Résolvez un problème clair à la fois et améliorez progressivement le site.

Le nom donne une identité au projet et le domaine lui donne une adresse. Le résultat concret d’une création assistée par l’IA est un site que les personnes peuvent ouvrir, comprendre et utiliser pour passer à l’étape suivante.