Bonjour à toutes et à tous !
Cette édition est la suite directe de Créer son site web avec Claude (1/2) : la méthode avant de coder.
Si vous ne l’avez pas encore lue, je vous raconte comment j’ai construit mon site vitrine avec Claude cet été.
La semaine dernière, je vous ai partagé comment j’avais tout préparé avant d’écrire la moindre ligne de code. Benchmark, projet Cowork, direction artistique avec Claude Design.
Je vous avais promis la suite : Claude Code, GitHub, Vercel, un plugin qui m’a fait gagner pas mal de temps et, bien sûr, la partie qui m’intéresse particulièrement en tant que juriste : la sécurité, les mentions légales et le RGPD.
Le site est maintenant en ligne : darvik.fr. Vous pouvez aller y faire un tour pendant que vous lisez cette édition.
Si ce n’est pas déjà fait, vous pouvez aussi :
Rejoindre ma communauté Premium en passant à l’abonnement payant.
Découvrir mes formations et accompagnements IA.
Gagner en visibilité en sponsorisant cette newsletter.
Cette édition est plus longue que d’habitude. Il y avait beaucoup à dire sur la partie technique et je ne voulais rien couper d’important.
Prenez votre temps ou revenez-y en plusieurs fois.
Comment sécuriser un site créé en vibe coding ?
C’est le sujet sur lequel je me suis renseignée en premier, avant même d’ouvrir Claude Code.
Aujourd’hui créer un site avec l’IA est devenu tellement facile ! On décrit ce qu’on veut, l’outil construit, le site est en ligne en quelques minutes.
Cette facilité a un revers : la sécurité passe au second plan.
Un site créé en vibe coding reste un site. Il peut avoir les mêmes failles qu’un site classique, avec en plus les pièges propres à la manière dont il a été construit.
Je m’étais déjà penchée sur le sujet du prompt injection dans une édition précédente. Le principe reste le même ici : un agent IA qui a accès à votre code, vos fichiers ou vos identifiants peut exécuter des instructions qu’il n’aurait pas dû recevoir.
Les conséquences ne se limitent pas à un bug visible. En cas de compromission, un attaquant peut modifier le site sans que ça se voie tout de suite : ajouter des liens vers des pages malveillantes, détourner une partie du trafic, ou glisser un texte qui pousse les visiteurs à télécharger un fichier piégé.
Le site continue de fonctionner en apparence normale, pendant qu’il sert un autre objectif en coulisses. C’est justement parce que rien ne se voit à l’œil nu qu’il faut être prudent et bien connaître les conséquences possibles d’une telle brèche avant de se lancer.
Je ne suis pas experte en cybersécurité, mais avant d’ouvrir Claude Code, je voulais comprendre où étaient les points faibles.
Voici quelques réflexes que j’ai appliqué dès le départ sur ce projet :
Limiter l’accès de Claude Cowork et Claude Code à un dossier dédié, pas à l’ensemble de l’ordinateur.
Ne jamais laisser une clé API en clair dans le code.
Vérifier les permissions Git du projet, c’est-à-dire qui a le droit de lire, modifier ou publier le code et s’assurer qu’elles restent limitées à moi-même.
Faire réaliser un audit de sécurité avant la mise en ligne, même léger, pour repérer les failles évidentes avant qu’un tiers ne le fasse à ma place.
Un autre réflexe que j’applique maintenant systématiquement : avant d’installer un plugin dans Claude, même venant d’une source de confiance, je fais vérifier le fichier par Claude, pour repérer d’éventuelles instructions cachées ou du code suspect.
C’est ce que j’ai fait avec le plugin dont je vous parle plus bas.
Mais la vigilance ne s’arrête pas le jour où le site passe en ligne. C’est souvent là, une fois la satisfaction du lancement passée, que l’attention retombe.
Depuis la création de mon site, je garde quelques habitudes simples :
Je vérifie de temps en temps si des mises à jour de sécurité existent pour les outils et les plugins du site et je ne les laisse pas traîner.
Un changement que je n’ai pas fait moi-même, une page qui apparaît sans explication, ce sont des signaux qui doivent alerter.
Les comptes qui contrôlent le site, Vercel, GitHub, le nom de domaine, sont protégés par une authentification à deux facteurs.
Et je garde un historique de versions propre sur GitHub, pour pouvoir revenir en arrière si besoin.
Vous avez une autre astuce ? Partagez-la en commentaire, je suis preneuse.
Ces précautions posées, on peut passer à la partie qui donne vraiment envie : la construction du site elle-même.
Comment passer de Claude Cowork à Claude Code pour créer un site ?
Le plus efficace, c’est de préparer un cahier des charges avec Claude Cowork avant d’ouvrir Claude Code, puis de lui donner accès au même dossier. C’est ce que j’ai fait.
Petit rappel de la semaine dernière : benchmark, création d’un projet Cowork, direction artistique avec Claude Design. Toute cette matière est allée nourrir un seul dossier, celui que j’ai ensuite donné à Claude Code, comme je vous l’avais annoncé.
Avant ça, j’avais demandé à Claude Cowork de me rédiger les instructions pertinentes à donner à Claude Code, à partir de tout ce qu’on avait construit ensemble : la structure du site, la direction artistique, mes textes. Une sorte de cahier des charges prêt à l’emploi.
Cette étape n’a pas de conséquence dramatique si vous la sautez, mais elle change beaucoup la façon dont démarre le projet technique.
Et une fois cette base posée, j’ai découvert l’outil qui a changé la suite du projet.
C'est quoi ce plugin qui m'a fait gagner un temps fou ?
Un plugin open source pour Claude Code peut automatiser toute l’infrastructure d’un site web et pas seulement le code.
C’est la meilleure découverte de ce projet. Je voulais vous en parler en détail, parce que je pense que ça peut être utile à beaucoup d’entre vous.
Le plugin s’appelle Hypervibe, créé par Flavien Chervet, un vrai expert en intelligence artificielle que je suis sur LinkedIn depuis un moment et que j’ai aussi entendu dans plusieurs podcasts.
Flavien a mis en open source son “harnais” pour Claude Code sous le nom Hypervibe.
C’est quoi un “harnais” ?
C’est un ensemble d’outils construits autour d’un agent IA pour automatiser une fonction métier complète.
Claude Code sait écrire du code, le harnais, lui, s’occupe de tout ce qui va autour : quelle base de données utiliser, quel système d’authentification, quel système de paiement le cas échéant, où héberger, comment déployer, comment améliorer le référencement.
Flavien a passé une vingtaine d’années à travailler avec des technologies très diverses avant Claude Code, du développement embarqué au machine learning en passant par le web. De cette expérience, il a construit une stack gratuite qu’il juge fiable pour démarrer un projet. Quand Claude Code est arrivé, il a connecté cette stack à l’agent, créé des skills pour la manipuler, puis des scripts pour automatiser les tâches récurrentes. Le résultat s’est transformé en un système assez complet pour porter le nom de harnais.
Ce qui me plaît dans sa démarche, c’est qu’il a ensuite pensé à le rendre accessible à des personnes non techniques comme moi. Il a ajouté une forme de guidage intégré, une sorte de “prof” qui accompagne l’utilisateur pas à pas et une documentation pensée pour qu’on ne se perde pas.
C’est ce plugin que j’ai utilisé pour mon projet du site.
Et je précise avant qu’on me pose la question : non, ce passage n’est pas sponsorisé par Flavien 😄 Je partage simplement les outils que je teste moi-même et qui m’ont vraiment été utiles.
Alors voici comment je m’y suis prise.
J’ai d’abord téléchargé le plugin sur son site, Hypervibe.
Avant de l’installer, j’ai fait vérifier le fichier zip par Claude, comme je vous le disais plus haut. L’installation elle-même prend ensuite 1 minute.
Une fois le plugin installé, Claude Code m’a guidée pour la suite : créer un compte GitHub, puis les autres comptes nécessaires au déploiement, notamment Vercel, Neon, Cloudflare... Tout est expliqué sur le site de Flavien. Si un point n’est pas clair, Claude Code prend le relais pour vous accompagner pas à pas.
Ensuite, l’utilisation tient en trois étapes : on décrit ce qu’on veut, quelques échanges suivent pour cadrer le projet, puis Claude Code travaille de façon autonome pendant 20 à 60 minutes.
Vous pouvez activer la validation manuelle à chaque étape pour voir ce que fait Claude, ou tout laisser tourner en automatique. Moi je suis curieuse : même quand je ne comprenais pas la moitié de ce qu'il faisait, j'ai gardé la main sur chaque étape.
À la fin, on obtient une première version du site en production, pensée pour le référencement, sans être passée soi-même par une seule ligne de configuration serveur.
Une précision utile si vous testez ce plugin à votre tour : il reste un outil créé par un tiers, gratuit et open source. Ça veut dire que vous l’utilisez sous votre propre responsabilité, comme n’importe quel outil open source. Ce n’est pas un produit Anthropic et ce n’est pas non plus un service avec support garanti.
Ceci dit, j’ai été rassurée en creusant la documentation sécurité du plugin, justement le genre de vérification que je recommande plus haut.
Quelques points qui m’ont convaincue.
À l’installation, rien ne se lance en arrière-plan à votre insu. Le plugin dépose des fichiers texte, lisibles, que Claude Code va consulter à la demande.
La première commande installe les outils nécessaires (Node.js, Git, un détecteur de fuites qui bloque l’enregistrement de code contenant une clé par erreur) et ne touche aux outils de déploiement type GitHub ou Vercel qu’après votre accord explicite.
Les actions qui ne se rattrapent pas, publier en ligne, écraser une base de données, supprimer un projet entier, demandent toutes une confirmation dans la conversation. Certaines, comme supprimer une table entière, sont carrément bloquées.
Et sur le prompt injection, sujet qui me tient à cœur, le plugin applique un principe simple : ce que Claude Code lit sur le web (une documentation, une page) reste une information à analyser, jamais une instruction à exécuter. Si l’agent doit envoyer des données quelque part, les destinataires autorisés sont définis par vous à l’avance, la liste est vide par défaut.
Enfin, chaque nouvelle version du plugin est vérifiable par une signature technique, pour s’assurer que le fichier téléchargé n’a pas été altéré entre le site et votre machine. C’est le type de contrôle que je recommande de faire avant d’installer quoi que ce soit.
Mais même avec ce plugin, il faut ensuite retravailler le site.
Par exemple, la première version de ma page « Services » ressemblait à ça :
J’ai ensuite fait plusieurs allers-retours avec l’IA pour ajuster la structure, les textes et la présentation.
Et voici la version améliorée. Elle n’est d’ailleurs toujours pas définitive : je travaille en ce moment sur une nouvelle offre destinée aux directions juridiques. Vous la découvrirez probablement dans quelques semaines !
Il y a aussi un point sur lequel ce plugin, comme la plupart des outils IA génériques, reste faible : le juridique.
Faut-il des mentions légales et un audit RGPD sur un site créé avec l’IA ?
Le plugin Hypervibe génère aussi les mentions légales et un début d’audit RGPD.
Bonne intention, mais quand j’ai lu le texte proposé, il était très léger.
Alors j’ai repris ça moi-même. Mentions légales, politique de confidentialité, bannière de cookies et politique de cookies qui va avec.
Je le dis sans surprise : c’est justement la partie qui manque le plus souvent sur les sites créés en vibe coding.
Claude code sait générer une page d’accueil ou un formulaire de contact, mais il est beaucoup moins bon pour anticiper ce qu’impose le RGPD sur un site qui collecte des données, même basiques.
Le contenu reste générique et ne reflète pas toujours la réalité de votre site : quels outils tiers vous utilisez, quelles données vous collectez, où elles sont hébergées.
Un texte générique copié-collé ne suffit pas, il expose à un risque en cas de contrôle ou de plainte.
Le juridique posé, restait une question bien plus terre-à-terre : combien tout ça m'a coûté et combien de temps ça m'a pris.
Combien coûte un site créé avec Claude et combien de temps ça prend ?
Un site vitrine créé avec Claude peut revenir à quelques euros par an en outils pour plusieurs jours de travail cumulés.
Voici le détail, poste par poste.
Le nom de domaine dépend de l’extension choisie et de la plateforme.
J’ai profité d’une offre en cours chez OVH sur les domaines en .fr : la première année est gratuite si on prend un engagement de trois ans, pour un total d’environ 20 euros sur trois ans. Un domaine en .com ou en .ai coûte généralement plus cher, à vérifier selon le registraire.
Si vous voulez des adresses email à votre nom de domaine, comptez un budget à part. Chez OVH, un pack de cinq adresses tourne autour de 6 euros.
L’hébergement sur Vercel est gratuit sur son offre de base, largement suffisante pour un site vitrine. Un point à garder en tête si vous traitez des données personnelles : Vercel reste une plateforme américaine, ce que je mentionne dans ma politique de confidentialité.
Pour les autres briques techniques, plusieurs outils comme Resend ou Brevo pour l’envoi d’emails, ou Neon pour la publication des articles du blog, proposent des offres gratuites qui couvrent largement les besoins d’un site vitrine.
Côté Claude, je n’ai pas de coût dédié à ce projet, j’ai j’utilisé mon abonnement habituel.
Et Hypervibe reste gratuit et open source, comme je vous le disais plus haut.
Sur le temps passé, deux rythmes très différents.
La première partie, benchmark, direction artistique, structuration du contenu, m’a pris une bonne demi-journée.
La partie technique avec Claude Code s’est étalée sur plusieurs jours, mais pas en continu. Je ne parle pas de journées entières bloquées dessus, plutôt de créneaux glissés entre mes autres tâches. Et le travail continue encore aujourd'hui.
Je ne vous ai d’ailleurs pas raconté tout ce que j’ai mis en place avec Claude Code une fois le site en ligne (le paramétrage de Google Analytics par exemple ou la partie admin pour la création de mes articles du blog).
Après ces deux éditions, il restait surtout à prendre du recul sur l’ensemble du projet.
Ce que je retiens de ces deux éditions
La préparation en amont, avec Cowork et Claude Design, m’a évité des heures de tâtonnement une fois dans Claude Code.
Un bon plugin, choisi et vérifié, peut faire gagner un temps considérable à quelqu’un qui ne code pas. Hypervibe a fait cet effet-là pour moi.
La sécurité, comme les mentions légales, se pensent avant d’ouvrir l’outil.
Et enfin, un outil IA reste un outil, il ne remplace pas un regard humain sur les points sensibles : la sécurité, le juridique, la cohérence de ce qu’on publie.
Le site est en ligne depuis peu, à cette adresse : darvik.fr. Il n’est pas parfait, j’ai déjà ma liste de choses à améliorer. Mais il est publié, c’est déjà bien mieux qu’un site qui reste en brouillon indéfiniment.
Et il sert déjà à quelque chose de concret : mon Parcours IA pour les juristes y a maintenant sa propre page, plutôt qu'une landing page à part.
Parcours IA pour les juristes, cohorte de septembre
Il reste 2 dernières places au tarif préférentiel pour toute l’inscription avant le 1 septembre 2026.
La nouvelle session démarre le 23 septembre 2026.
4 atelier en petit groupe et 1 échange individuelle avec moi.
Vous pouvez vous inscrire directement sur cette page.
Questions fréquentes
Peut-on créer un site professionnel avec Claude sans savoir coder ?
Oui. Avec Claude Cowork pour préparer le contenu, Claude Design pour la direction artistique et Claude Code pour construire, aucune compétence de développeur n’est nécessaire. Un plugin comme Hypervibe automatise en plus l’infrastructure technique (hébergement, déploiement, base de données).
Qu’est-ce qu’un “harnais” pour Claude Code ?
Un harnais est un ensemble de skills et de scripts construits autour de Claude Code pour automatiser une fonction complète, au-delà de l’écriture du code. Hypervibe, créé par Flavien Chervet, en est un exemple open source dédié aux projets web.
Un site créé en vibe coding doit-il respecter le RGPD ?
Oui, comme n’importe quel site classique. Mentions légales, politique de confidentialité et politique de cookies restent obligatoires dès qu’un site collecte des données, y compris de simples cookies analytiques. Les outils IA génèrent rarement des contenus juridiques suffisants sur ce point.
Faut-il un compte GitHub pour créer un site avec Claude Code ?
Oui, GitHub sert à versionner le code du site. Ça permet de revenir à une version précédente si une modification casse quelque chose. Aucune expérience de développeur n’est nécessaire pour l’utiliser à ce niveau.
Quelle est la différence entre Claude Cowork, Claude Design et Claude Code pour créer un site ?
Claude Cowork sert à rassembler et structurer sa matière (textes, benchmark, réflexions), Claude Design à définir et visualiser la direction artistique et Claude Code à construire le site techniquement et le déployer.
Si vous avez des questions sur la partie technique, posez-les en commentaire.
Et dites-moi ce que vous pensez de mon site, je suis curieuse d’avoir vos retours !
Si vous vous lancez à votre tour dans la création de votre site avec l’IA, racontez-moi aussi comment ça se passe de votre côté.
Et si cette newsletter vous est utile :
Cliquez sur le ❤.
Parlez-en autour de vous.
A très vite,
Daria
Un site qui couvre bien les aspects de votre métier, mais je pensais découvrir un site révolutionnaire...
Pourquoi passer tant de temps sur la technique quand on peut payer 10€ par mois pour l'hébergement et l'interface de création, et avoir un site MyWebsite Ionos qui fait la même chose?
De plus les images générées par IA commencent à lasser, et un peu de couleur hors de votre palette serait bienvenu, des couleurs plus franches comme votre rouge à lèvres. :-) Un peu de fantaisie peut-être.
Super, un excellent workflow pour les non développeurs.