← Synthèse de l'atelier Atelier du 25 juin
Étape 2

Créer une page avec Claude

À partir de rien, d'une maquette ou d'un PDF. La méthode exacte montrée pendant l'atelier.

2.1La règle d'or : une demande claire

Tout part de ce que vous demandez. Pendant l'atelier, Jérôme l'a répété : plus la demande est claire et simple, plus le résultat est proche de ce que vous voulez.

Jérôme : « N'oubliez pas, plus la demande est claire et simple, plus le résultat peut être proche du résultat voulu. »

Une bonne demande contient en général : pour qui vous faites la page (votre client, votre métier), ce que vous proposez, le type de page voulu (vitrine, webinaire, guide), et en HTML pour le préciser.

2.2Organisez une conversation par client

Jérôme travaille pour plusieurs personnes, donc il sépare. Chaque conversation dans Claude Code correspond à un client ou un business. Comme ça, Claude garde en mémoire la charte, la cible, le contexte, sans qu'il faille tout répéter à chaque fois.

Pour vous qui démarrez : si vous ne travaillez que pour vous, c'est plus simple, une seule conversation suffit. Mais prenez quand même l'habitude de bien nommer vos demandes, ça vous fera gagner du temps plus tard.

2.3Méthode A : créer une page à partir de rien

Vous n'avez pas de maquette ? Vous donnez simplement les informations à Claude. Exemple réel construit en direct pendant l'atelier pour Tony, préparateur mental.

Exemple de demande (à adapter)
Je suis préparateur mental pour footballeurs de haut niveau. Mes thèmes : confiance en soi, gestion du stress, fixation d'objectifs, accompagnement sur des événements spécifiques (compétitions). Fais-moi une page vitrine comme un site web, en HTML. Donne des éléments d'information sur ce qu'est la préparation mentale, le coaching et la PNL, avec des boutons qui dirigent vers ces informations (je te donnerai les liens prochainement). Mets une photo masculine générique et une bio inventée qu'on remplacera ensuite, avec la possibilité de prendre un rendez-vous d'audit sportif (je te donnerai le lien prochainement).
Astuce vue en direct : dire à Claude « une bio inventée qu'on remplacera ensuite » et « une photo générique » lui permet de produire une page complète tout de suite. Vous remplacez les vrais textes et photos après.

2.4Méthode B : partir d'une maquette ou d'une image

Vous avez une maquette (par exemple sortie d'un autre outil), une capture, un visuel ? Vous la glissez directement dans la conversation Claude Code, puis vous demandez de la reproduire.

Demande utilisée pendant l'atelier
À partir de cette maquette, fais-moi le site web en HTML qui ressemblera respectivement à celle-ci.
Important sur les images de la maquette : Claude reproduit la mise en page, mais il ne récupère pas automatiquement vos vraies images. Pour les intégrer, il faudra les lui donner une par une (voir le tutoriel sur les images).

2.5Méthode C : partir d'un PDF, d'un Word ou d'un lien

Ce que vous glissez peut être autre chose qu'une image. Catherine a posé la question pendant l'atelier, et la réponse est : presque tout.

Jérôme : « Ça pourrait être un PDF ou un Word dans lequel tu as dit : je voudrais que tu utilises ces trois couleurs, cette police, et tu donnes toutes tes idées en vrac de ton business. »

2.6Récupérer le résultat

Quand Claude a fini, il crée un fichier (souvent index.html) dans un dossier sur votre ordinateur. Vous pouvez l'ouvrir pour voir le rendu dans votre navigateur.

Pour retrouver le fichier
Où se trouve cette page dans mon ordinateur ? Ouvre-moi le dossier dans lequel elle est rangée.
Exemple de résultat : la page de Tony
Exemple de résultat : la page de Tony. Voici la page vitrine générée en direct pour Tony, préparateur mental, à partir de la simple demande vue plus haut. Aucun code écrit à la main, tout vient de Claude.
Suite logique : votre page est prête sur votre ordinateur. Reste à régler les images, puis à la mettre en ligne. C'est l'objet des deux tutoriels suivants.