Bibliothèque de prompts IA pour créer des sites avec vagejs

Vous lancez un nouveau site ? Le générateur de prompts écrit le premier prompt pour vous à partir de quelques réponses. Ces prompts fonctionnent avec n'importe quel agent de code capable de lire votre projet, que ce soit Claude Code, Codex, Cursor, Copilot ou Gemini CLI. Chacun oriente l'agent vers AGENTS.md, vous laisse la maîtrise des faits et se termine par une vérification : vous obtenez un site qui fonctionne plutôt qu'une supposition faite avec assurance. Remplacez les parties en majuscules.

Lancer un nouveau site

Lis AGENTS.md. Ce site est pour MON ENTREPRISE, qui FAIT QUOI pour QUI. Écris une page d'accueil avec un titre clair en une phrase, trois sections courtes et un lien de contact. Demande-moi tout ce que tu devrais sinon inventer. Ensuite, lance npm run check jusqu'à ce qu'il signale 0 erreur.

Construis ce design Figma comme une page de ce site vagejs : LIEN FIGMA. Lis d'abord AGENTS.md. Utilise les outils MCP de Figma et demande du HTML et du CSS simples, pas de React ni de Tailwind. Mets l'apparence dans un layout et dans public/styles.css, et tout le texte dans la page Markdown, exactement comme dans le design. Enregistre les images dans public/images/ avec un texte alternatif. Pas de JavaScript côté navigateur. Lance npx vage check et npx vage audit, corrige ce qu'ils signalent et liste ce que tu n'as pas pu reproduire.

Voir transformer un design Figma en site web (en anglais) pour la configuration et le prompt de suivi.

Propose les pages dont ce site a besoin, d'après les notes ci-dessous. Pour chaque page, donne-moi un titre, une description de moins de 160 caractères et l'URL. Ne crée rien tant que je n'ai pas approuvé la liste.

NOTES

Ajouter et modifier du contenu

Ajoute une page à /SLUG-DE-LA-PAGE/ à partir du texte ci-dessous. Garde ma formulation, corrige seulement l'orthographe et écris une description de moins de 160 caractères. Lance npm run check.

TEXTE

Écris un article de blog intitulé "TITRE" à partir de ces notes. Utilise type: article, et ne renseigne author et datePublished qu'avec ce que je te donne ici&nbsp;: AUTEUR, DATE. Lance npm run check quand tu as terminé.

Renomme /ANCIEN-SLUG/ en /NOUVEAU-SLUG/. Déplace le fichier, ajoute une redirection dans vage.config.ts et mets à jour tous les liens qui pointaient vers l'ancienne adresse. Confirme avec npm run check.

Langues et composants

Traduis /SLUG-DE-LA-PAGE/ en LANGUE. Si le site n'a pas encore de réglage i18n, ajoute d'abord i18n: { locales: ["CODE-LANGUE"] } à vage.config.ts. Enregistre la traduction dans src/pages/CODE-LANGUE/ avec le même nom de fichier, traduis aussi le titre et la description, et n'ajoute aucun fait absent de l'original. Lance npm run check et liste les pages qui restent à traduire.

Rends interactif le composant NOM-DU-COMPOSANT sur /SLUG-DE-LA-PAGE/, pour qu'il DÉCRIS CE QU'IL DOIT FAIRE. Garde-le dans src/components/, ne lui passe que des données simples (texte, nombres, listes) et utilise client:visible sauf s'il est en haut de la page. Si la page est un fichier .md, transforme-la d'abord en .mdx. Ensuite, lance npm run audit, dis-moi combien de JavaScript la page charge maintenant, et dis-moi si du HTML simple pourrait faire le même travail.

Corriger les problèmes

Lance npx vage check --json. Corrige chaque erreur, un fichier à la fois. Ensuite, liste les avertissements que tu n'as pas pu corriger et explique pourquoi.

Lance npm run audit et explique les résultats en termes simples. Corrige ce que tu peux sans changer l'apparence des pages, et dis-moi ce qui demande une décision de ma part.

La page /SLUG-DE-LA-PAGE/ s'affiche mal&nbsp;: DÉCRIS CE QUE TU VOIS. Trouve la cause, corrige-la et lance npm run check.

Recherche et visibilité dans l'IA

Passe en revue le titre et la description de chaque page. Signale les titres de plus de 60 caractères, les descriptions de plus de 160, et toute paire de pages qui vise le même sujet. Propose des corrections, mais ne change rien pour l'instant.

Les informations de notre entreprise sont&nbsp;: NOM, SITE WEB, CHEMIN DU LOGO. Ajoute-les comme données structurées Organization dans vage.config.ts, en n'utilisant que ces faits. Lance npm run check.

Nous voulons autoriser les robots de recherche IA mais pas les robots d'entraînement d'IA. Mets à jour les réglages robots dans vage.config.ts, puis montre-moi le robots.txt généré.

Statistiques

Ajoute Google Analytics 4 avec l'ID de mesure G-XXXXXXX. Lis-le depuis une variable d'environnement au lieu de l'écrire dans le code, et commence avec le consentement réglé sur denied. Lance npm run check.

Suis les clics sur le bouton "Réserver un appel" avec un événement nommé book_call. Déclare l'événement dans vage.config.ts et utilise data-vage-event sur le lien, sans JavaScript personnalisé.

Publier sans risque

Lance npx vage deploy:github --dry-run et montre-moi exactement quels fichiers seraient commités. Ne pousse rien.

Prépare le site pour la publication&nbsp;: lance check, build et audit, et résume ce que je devrais corriger d'abord. Arrête-toi avant le déploiement. Je lancerai le déploiement moi-même.

Conseils pour de meilleurs résultats

Donnez-lui les faits. Collez vos notes, vos prix ou vos horaires d'ouverture. Un agent qui doit deviner devinera.
Demandez d'abord un plan pour les changements importants : « Montre-moi le plan avant de modifier quoi que ce soit. »
Une tâche par prompt. De petites étapes vérifiées sont plus faciles à relire qu'un gros changement.
Terminez toujours par une vérification. npm run check vous permet de savoir que le site fonctionne toujours.