Créer son site web avec Claude (1/2) : la méthode avant de coder

Benchmark, projet Cowork et direction artistique avec Claude Design. Le guide pratique d'une juriste qui l'a fait cet été, sans tuto ni formation technique.

Bonjour à toutes et à tous !

Jusqu’à cet été, je n’avais pas de site.

Mes formations sur une page Notion, mon kit sponsoring sur une autre, mon Parcours IA sur une landing page Carrd… Ça faisait des mois que je me disais qu’il me fallait un vrai site vitrine.

Je l’ai créé cet été, avec Claude. Il est en ligne depuis peu et je suis plutôt contente du résultat. Je vous partagerai le lien la semaine prochaine.

Je n’ai lu aucun guide et je n’ai regardé aucun tutoriel avant de me lancer. J’ai fait ce qui me paraissait logique, étape par étape. Sur la création, cette édition vient donc de ma seule expérience.

Sur la sécurité en revanche, je me suis renseignée sérieusement en amont, c’était ma priorité avant même d’ouvrir Claude Code. Je vous en parle dans la deuxième édition, une fois qu’on sera passés au concret technique.

Ce retour d’expérience sera peut-être utile à quelqu’un qui me ressemble : pas de grosses compétences techniques, mais l’envie d’essayer. Et si vous êtes plus expérimentés que moi, dites-moi en commentaire ce qu’il y aurait à améliorer. Je prends !

J’ai prévu de vous partager tout ça en deux éditions :

1. Aujourd’hui, on pose la base. Réunir sa matière, faire un benchmark, créer un projet dans Claude Cowork, travailler la direction artistique avec Claude Design. Aucune ligne de code, vous pouvez respirer.

2. La semaine prochaine, on entre dans le concret technique. Claude Code, GitHub, Vercel, la sécurité, plus un plugin que j’ai découvert en route et qui m’a beaucoup servi. C’est plus technique, mais vous allez voir que c’est faisable.

Pourquoi j’ai attendu si longtemps

Le bricolage Notion et Carrd fonctionnait, alors je repoussais.

Notion n’y est pour rien, je continue de l’utiliser assez souvent.

Le souci, c’est qu’à un moment l’écart devient trop grand entre ce qu’on fait et ce qu’on montre. Envoyer un lien Notion à une direction juridique de grand groupe qui veut une proposition de formation, ça manque un peu de sérieux.

Et puis j’avais déjà essayé deux fois de créer un site. Deux échecs.

Mes deux tentatives ratées

Il y a quelques années, j’ai créé un premier blog sur mes voyages, sur WordPress. J’ai fini par arrêter de le mettre à jour. Chaque modification devenait pénible, alors je ne modifiais plus rien. Le blog est mort tout seul.

Puis il y a quelques mois, j’ai commencé le site pour mon activité de formatrice IA sur Lovable, un outil de vibe coding. J’ai arrêté assez vite.

Le résultat avait ce style qu’on reconnaît immédiatement, celui de tous les sites générés par IA : même structure, mêmes dégradés, même impression de déjà-vu. Je voulais personnaliser davantage, je n’avais pas le temps d’aller plus loin, j’ai laissé tomber.

Le projet est resté dans un coin de ma tête pendant des mois. Cet été, j’ai retenté l’expérience, avec Claude cette fois.

Pourquoi créer son site avec Claude plutôt qu’avec un outil classique

Pour deux raisons : sortir du template et pouvoir modifier son site soi-même, en langage naturel, sans que ça devienne une corvée.

WordPress, Webflow et les autres sont de très bons outils, je ne les enterre pas. Mais on paie un abonnement pour un site construit sur un template, avec des limites de personnalisation.

Il y a aussi une question de rythme. Une refonte classique, c’est plusieurs semaines, souvent plusieurs mois, entre les allers-retours avec le prestataire, les validations et les corrections. Ici, on teste, on ajuste et on publie une nouvelle version en quelques minutes. Vous voulez changer un titre à 23h un dimanche ? Vous le faites vous-même.

Reste un piège propre aux outils IA : le site qui ressemble à tous les autres, celui que j’avais déjà rencontré avec Lovable.

Le système de crédits y est pour beaucoup, ils partent vite dès qu’on itère, qu’on ajuste un design ou qu’on teste plusieurs versions, et la facture devient difficile à anticiper. Le code généré n’est pas toujours fiable non plus, avec des bugs qui traînent parfois. Et le contrôle reste limité : on décrit ce qu’on veut et on espère, sans pouvoir ajuster un détail précis. Pour un prototype ou pour valider une idée vite, Lovable fait très bien le travail. Pour un site censé vous représenter durablement, ces limites pèsent.

Je sais que ChatGPT propose aussi la création de sites, avec les Sites Codex. On décrit ce qu’on veut, Codex construit avec vous et le site se déploie pour être partagé. L’idée est utile pour un outil de suivi, un tableau de bord ou une page d’onboarding, plutôt destinée à un usage interne. Mais mon objectif de l’été, c’était de me mettre à fond sur Claude Code. J’ai choisi cet outil-là tout simplement.

Et il y a bien sûr la question de la sécurité, qui touche tous les sites créés en vibe coding, pas seulement Lovable. J’y reviens en détail dans la prochaine édition.

Ici, le risque que j’ai voulu traiter en premier, c’est celui de la ressemblance.
Avec Claude, il existe aussi si on lui demande juste “un site pour une formatrice IA” et qu’on espère.

La différence se joue en amont. Plus on prépare le contenu, le positionnement et les références avant de lancer l’outil, plus le résultat sort du lot.

J’ai regroupé ce travail préparatoire en quatre étapes.

Allez, on commence !

Étape 1 : faire l’inventaire de ce que j’avais déjà

Avant d’ouvrir quoi que ce soit, j’ai listé ma matière première :

Mon positionnement : juriste, formatrice IA et droit, créatrice de contenu. Je savais à qui je parlais et sur quoi.

Mes offres : formation intra pour les directions juridiques et les cabinets d’avocats, accompagnement, Parcours IA en petit groupe, coaching individuel. Elles existaient déjà éparpillées sur Notion.

Mes preuves sociales : témoignages de participants, logos de clients, passages médias, vidéos avec mes interventions, chiffres de la newsletter et de LinkedIn.

Avec cette matière, j'avais de quoi obtenir un site qui parle vraiment de moi, pas le site générique que Claude propose par défaut.

Étape 2 : faire un benchmark

J’ai repéré quelques sites qui me parlaient.

Exemples : les sites de Caroline Mignaux et de Maud Alaves

Je cherchais des mécaniques qui fonctionnent, plus que de l’inspiration esthétique.

Le bandeau de logos clients qui défile sur la page d’accueil, par exemple. C’est simple, ça installe la crédibilité en 3 secondes sans avoir à écrire un paragraphe pour se justifier. Je l’ai repris.

J’avais déjà une idée de la structure de mon site. Le benchmark m’a surtout confirmé que j’étais sur la bonne voie.

Étape 3 : créer un projet dans Claude Cowork

J’ai ensuite créé un projet dans Claude Cowork. J’y ai déversé tout ce que j’avais sous la main.

Mes réflexions en vrac, sans mise en forme. La structure de site que j’avais en tête. Mes textes existants sur Notion et Carrd. Mes captures de benchmark.

Petit rappel pour celles et ceux qui n’ont pas lu mon édition sur Cowork : Cowork, c’est Claude qui accède à un dossier sur votre ordinateur. Il lit vos fichiers, en crée, en modifie. Vous lui décrivez un résultat, il fait un plan, vous validez, il exécute.

Claude m’a aidée à structurer tout ça. Il a rangé, classé, proposé une organisation de dossiers.

Par exemple, mes photos de références et les logos clients sont allés dans un dossier Entrées, qui a servi de base pour le travail avec Claude Code.

Pourquoi je ne suis pas allée directement dans Claude Code ?

Je me suis posé la question, évidemment.

Claude Code est très bon pour construire, mais je trouve qu’il est beaucoup moins à l’aise pour m’aider à décider quoi construire. En arrivant avec des idées floues, j’aurais passé des heures à faire et défaire des sections.

Cowork m’a servi d’étape intermédiaire. J’y ai clarifié, rangé, validé la structure et surtout préparé des instructions prêtes à copier-coller dans Claude Code. Je suis arrivée ensuite avec un dossier propre et un mode d’emploi tout fait.

Et au final, j'ai tout simplement donné l'accès à mon dossier de Cowork à Claude Code.

Étape 4 : la direction artistique avec Claude Design

Ma première demande à Claude Design n’était pas “fais-moi une page d’accueil”.

J’ai commencé par lui donner mes exigences pour construire ma direction artistique : palette de couleurs, typographies, ambiance générale, ce que je voulais qu’on ressente en arrivant.

Par exemple, suite à ma demande, Claude Design m’a proposé plusieurs déclinaisons de palette :

Et plusieurs choix de police :

Je vous montre la palette choisie 😊

Une fois cette base posée, tout le reste en a découlé.

Chaque maquette respectait la même charte sans que j’aie à le redemander à chaque fois.

Ensuite seulement, j’ai lancé un premier jet pour générer les maquettes dans Claude Design. C’est pratique, on peut voir déjà le site “en vrai”.

Le passage à Claude Code

Une fois cette première version obtenue, que je pouvais déjà modifier sur Claude Design dans le fond et dans la forme, j’ai basculé sur Claude Code.

J’ai pu tester toutes les sections pour de vrai, cliquer partout et voir ce qui cassait.

C’est là que commence la deuxième partie.

Et si je devais retenir trois choses de cette première partie

1. La qualité du site se décide avant le premier prompt. Ce que vous savez de votre métier vaut plus que n’importe quel outil.

2. Cowork sert à réfléchir, Claude Design à mettre en forme, Claude Code à construire.

3. Le résultat ne sera jamais fini. Mon site est en ligne et j’ai déjà une liste de choses à améliorer. Publier une version imparfaite vaut mieux que peaufiner une version qui ne sort jamais.

La semaine prochaine

On ouvre Claude Code.

Au programme : l’installation, le passage des maquettes au vrai site, GitHub pour versionner sans perdre son travail, Vercel pour la mise en ligne, le nom de domaine… Le plugin que j’ai téléchargé et qui m’a beaucoup aidé sur cette partie. Et le sujet de la sécurité des sites créés en vibe coding.

Je vous partagerai aussi le lien du site.

Si vous avez des questions sur cette première partie, posez-les en commentaire. J’essaierai d’y répondre dans l’édition 2.

Cette manière d'apprendre en testant, c'est aussi celle de mon Parcours IA pour les juristes. On pratique directement sur vos dossiers, en petit groupe.

Parcours IA pour les juristes, cohorte de septembre

Il reste 2 places.

En petit groupe, pour apprendre à utiliser l'IA dans votre pratique juridique quotidienne. Tarif préférentiel jusqu'au 1er septembre 2026.

👉 Réserver une place

Pour l'instant, je garde ma landing page Carrd pour cette offre, elle reste tout à fait fonctionnelle. Mais à partir de la semaine prochaine, vous retrouverez toutes les infos utiles directement sur mon nouveau site.

Et si cette newsletter vous est utile :

• Cliquez sur le ❤.

• Parlez-en autour de vous.

A très vite,

Daria