Blog

Astro v5Tailwind CSS v4Vanilla JS

Générateur de Prompts Avancés — fiche projet | labnodev

· labnodev

Deuxième projet du lab. Un studio de composition de prompts pour les LLMs — ChatGPT, Claude, Gemini, et les modèles open source.

Ce que c'est

Un outil web statique qui assemble des "megaprompts" à partir de paramètres structurés : demande brute, persona IA (20 personnalités disponibles), ton, format, LLM cible, audience, boosters méthodologiques (méta-cognition, garde-fous, chaînage, méthode socratique, few-shot).

Le prompt se construit en temps réel dans un panneau d'aperçu live, directement modifiable. Format de sortie : Markdown, Claude XML ou open source (balises texte).

Public cible : toute personne qui utilise des LLMs au quotidien et veut des réponses plus précises sans maîtriser le prompt engineering.

Stack technique

  • Astro v5 — génération statique, zéro JS serveur
  • Tailwind CSS v4 — styles utilitaires, mobile-first
  • Vanilla JS — logique de formulaire, assembly du prompt, copie presse-papier

Comment c'est construit

Point de départ : PRD rédigé en langage naturel. Claude Code a analysé le brief et généré l'architecture.

La V1 était un formulaire multi-étapes classique. La V3 est un studio deux colonnes — formulaire à gauche, aperçu live à droite — avec dropdown de personas recherchable, champs libres Ton/Format, et désélection uniforme par re-clic.

L'outil a été audité par la même IA qui l'a construit. Résultat : une faille XSS active depuis le premier déploiement, plus 28 autres problèmes. Tout a été corrigé.

Choix techniques à noter

Personas en JSON — 20 personas définis dans src/data/personas.json. Chacun embarque un label, un emoji, et un texte de prompt prêt à injecter dans l'assembly final.

Assembly multi-format — le même ensemble de paramètres produit trois sorties différentes selon le LLM cible : Markdown standard, balises XML pour Claude, balises texte pour les modèles open source.

Aperçu cliquable — le <pre> de preview est directement éditable au clic, sans bouton intermédiaire. Le textarea d'édition apparaît à la place, le prompt reste modifiable librement.

Champs libres primant sur les pills — si un champ libre (Ton, Format) est rempli, il prime sur le bouton pill sélectionné dans l'assembly. Pattern : const tonText = data.tonLibre || (tonObj ? tonObj.prompt : null).

État actuel

En ligne sur labnodev.com/outils/megaprompt-generator.

V3 déployée. Studio deux colonnes, 20 personas, 7 templates, aperçu live, boosters méthodologiques.

Monétisation par publicité (AdSense) — en cours d'examen Google.

Sur ce blog

Je ne savais pas ce que je faisais. Voici ce que ça a donné.

une semaine, 3 versions, une faille de sécurité depuis le premier commit, et un outil que j'ai intégralement jeté pour recommencer. La vraie histoire du Megaprompt Generator.

Building in publicClaude CodeIA