Créer un calculateur de devis avec Claude ou ChatGPT

Vous connaissez vos tarifs, mais un prospect ne peut pas les essayer facilement. Il ne peut pas choisir une formule, ajouter quelques pages et voir le total évoluer sans attendre votre devis.

Claude et ChatGPT peuvent créer ce calculateur à partir d'une grille tarifaire. Vous fournissez les prix et les règles, l'IA écrit la page. Deux tâches vous reviennent : vérifier les calculs et récupérer un fichier fonctionnel hors de la conversation. Cet article explique les deux, avec un prompt à copier et six résultats de contrôle.

Essayez d'abord l'exemple terminé. Choisissez une formule, changez le nombre de pages supplémentaires, puis activez et désactivez les options.

Votre projet

Formule

Une landing page et une série de corrections.

Landing pages supplémentaires

$150.00 par page, jusqu’à 10. Remise de 5% sur les pages supplémentaires à partir de 5 pages.

Options

Rédaction+$200.00, paiement unique

Assistance mensuelle+$75.00 par mois

Estimation

Prix de base: $800.00
Pages supplémentaires0 × $150.00: $0.00
Remise sur volumeÀ partir de 5 pages supplémentaires: $0.00
Rédaction: $0.00
Total ponctuel: $800.00
Assistance mensuelleFacturée chaque mois: $0.00
Première facture estiméeTotal ponctuel et premier mois d'assistance: $800.00

Estimation illustrative. Hors taxes. Le périmètre et le prix définitifs sont confirmés dans le devis. Montants en USD.

Ces prix ont été inventés pour une petite agence web et les taxes sont exclues. Remplacez-les par les vôtres une fois le fonctionnement compris.

Écrire les prix et les règles

Commencez par les chiffres avant le prompt. L'IA construit ce que vous décrivez ; une grille imprécise produit donc un calculateur imprécis. Celle-ci comporte six prix et une seule règle de remise.

Poste	Prix	Facturation
Formule Basic	$800	Unique
Formule Standard	$1,200	Unique
Formule Plus	$1,800	Unique
Landing page supplémentaire	$150 chacune, de 0 à 10	Unique
Rédaction en option	$200, facultatif	Unique
Assistance mensuelle	$75, facultatif	Chaque mois

Trois règles s'ajoutent aux prix :

À partir de cinq pages supplémentaires, une remise de 5% s'applique à toute la ligne des pages supplémentaires. La formule et la rédaction ne sont jamais remisées.
L'assistance mensuelle reste en dehors du total ponctuel, car une mensualité est un engagement différent du coût de création.
L'estimation de la première facture additionne le total ponctuel et un mois d'assistance.

Le calculateur démarre sur Basic, avec zéro page supplémentaire et les deux options désactivées. Si la quantité est vide, négative, décimale ou supérieure à 10, il affiche une erreur à côté du champ et masque les totaux jusqu'à correction.

Calculez vous-même les réponses avant de demander quoi que ce soit. Toute version doit réussir ces six contrôles :

Minimum. Basic, 0 page supplémentaire, aucune option. Ponctuel $800.00, mensuel $0.00, première facture $800.00.
Quantité. Standard, 2 pages supplémentaires, aucune option. Ponctuel $1,500.00, mensuel $0.00, première facture $1,500.00.
Option. Standard, 2 pages supplémentaires, rédaction. Ponctuel $1,700.00, mensuel $0.00, première facture $1,700.00.
Sous le seuil de remise. Standard, 4 pages supplémentaires, rédaction. Ponctuel $2,000.00, mensuel $0.00, première facture $2,000.00.
Au seuil de remise. Standard, 5 pages supplémentaires, rédaction et assistance. Ponctuel $2,112.50, mensuel $75.00, première facture $2,187.50.
Maximum. Plus, 10 pages supplémentaires, rédaction et assistance. Ponctuel $3,425.00, mensuel $75.00, première facture $3,500.00.

Ces totaux ont été calculés indépendamment du calculateur, et l'exemple ci-dessus correspond aux six. Collez la grille, les trois règles et les six résultats dans le prompt, puis gardez les résultats pour les vérifications suivantes.

Créer le calculateur dans Claude

Claude est la méthode principale ici, car il peut produire un artefact interactif, un outil fonctionnel à côté de la conversation. Anthropic propose les artefacts sur Free, Pro, Max, Team et Enterprise. Le réglage d'exécution de code et de création de fichiers doit être activé.

Coller le prompt

Ouvrez une nouvelle conversation sur claude.ai ou dans l'application de bureau. Commencez par Crée ceci sous forme d'artefact interactif autonome, entièrement contenu dans un seul fichier et sans ressources externes. pour obtenir un artefact durable plutôt qu'un visuel temporaire dans le chat. Collez ensuite le prompt ci-dessous. Ajoutez à la fin la grille tarifaire, les trois règles et les six résultats attendus, à l'emplacement indiqué.

Crée un calculateur de devis interactif fonctionnel pour une petite agence web.
Je fournis ci-dessous la grille tarifaire et les règles. Respecte exactement ces valeurs.
Si une règle manque ou se contredit, pose-moi la question avant de choisir une valeur.

Le livrable est un artefact autonome et complet : un aperçu et un seul fichier
téléchargeable intégral appelé quote-calculator.html. Inclus le HTML, le CSS et
le JavaScript dans ce fichier, sans charger de polices, images ni scripts externes.
Il doit fonctionner en ouvrant le fichier dans un navigateur, sans installation,
bibliothèques externes, appels à une IA ni serveur.

Prévois un choix de formule, un champ numérique pour les pages supplémentaires
et des cases à cocher pour la rédaction et l'assistance mensuelle. Mets l'estimation
à jour dès qu'une saisie change. Affiche séparément, avec un libellé, le prix de base,
les pages supplémentaires, la remise, la rédaction, le total ponctuel, l'assistance
mensuelle et la première facture estimée. Formate les montants en USD à deux décimales.

Affiche : « Estimation illustrative. Hors taxes. Le périmètre et le prix définitifs
sont confirmés dans le devis. » Ajoute un bouton Réinitialiser.

Le nombre de pages supplémentaires doit être un entier de 0 à 10. S'il est vide
ou invalide, affiche une erreur à côté du champ et masque les totaux jusqu'à
correction. Commence avec Basic, zéro page et les options désactivées.

Utilise des libellés clairs, un focus clavier visible et des contrôles lisibles sur téléphone.
Conserve les identifiants : package, extra-pages, copywriting, monthly-support, reset.
Regroupe les tarifs dans un bloc de configuration clairement identifié.
Ne collecte pas de coordonnées, n'envoie pas de commandes, ne mémorise pas les choix
et n'encaisse aucun paiement. Aucun code de suivi ; hébergement et suivi sont séparés.

Avant livraison, vérifie le tableau de résultats attendus fourni. Signale les
corrections et donne-moi le fichier HTML final.

Grille tarifaire, formules et résultats attendus :
[Coller ici les tableaux fournis.]

Trois éléments méritent de rester dans vos propres versions. Demander à l'IA de poser des questions lorsqu'une règle manque révèle les lacunes tarifaires avant le client. Exiger un seul fichier autonome sans ressources externes rend le calculateur portable. La comparaison finale avec votre tableau constitue une première vérification, sans remplacer la vôtre.

Vous préférez joindre un fichier ? Ajoutez rate-card.csv avec le bouton + et Add files or photos, ou glissez-le dans le chat. Anthropic cite CSV parmi les types de documents acceptés.

Le fichier contient les prix, les règles et les formules de total. Remplacez les deux dernières lignes du prompt par l'instruction suivante et collez uniquement les six résultats attendus dessous.

Les tarifs et règles figurent dans le fichier rate-card.csv joint. Confirme les
tarifs et règles lus, puis crée le calculateur dans un fichier autonome et complet,
sans ressources externes.

Examiner la première version

Vous devez voir un menu de formules, un champ pour les pages supplémentaires, deux cases d'options, un bouton Réinitialiser et sept montants distincts : prix de base, pages supplémentaires, remise, rédaction, total ponctuel, assistance mensuelle et première facture estimée. Toute modification doit actualiser l'estimation sans appuyer sur un bouton.

Affiner le résultat

Si un total est faux, expliquez le problème comme à une personne : nommez le cas et le résultat attendu.

Chaque total erroné renvoie à une règle. Standard avec cinq pages supplémentaires, rédaction et assistance doit afficher $2,112.50. Un total ponctuel de $2,042.50 signifie que la remise porte sur le total complet au lieu des seules pages supplémentaires. $2,150.00 signifie qu'elle a été oubliée.

Si vider le champ conserve un ancien total ou affiche NaN, demandez directement : « Quand les pages supplémentaires sont vides, affiche une erreur à côté du champ et masque les totaux. Conserve un seul fichier autonome sans ressources externes. » Modifiez une chose par message, puis rejouez le cas qui échouait.

Exporter le fichier

Une fois les chiffres corrects, récupérez le fichier. Si Claude a utilisé son modèle Design, cliquez sur Export et choisissez le HTML autonome. La page des artefacts d'Anthropic nomme Export comme commande des artefacts issus de modèles. Sa page d'aide Claude Design cite le HTML autonome parmi les formats d'export.

Si votre artefact ne propose pas HTML, demandez le calculateur complet sous forme d'un unique fichier autonome téléchargeable appelé quote-calculator.html, sans ressources externes.

Utiliser Claude Cowork avec une grille existante

Cowork ajoute un fonctionnement par dossier à la pièce jointe CSV : Claude lit le fichier dans un dossier de votre ordinateur et y enregistre le calculateur terminé, sans envoi ni téléchargement. Anthropic indique qu'il peut lire et écrire vos fichiers locaux dans les dossiers connectés.

Placez rate-card.csv dans un dossier et connectez-le dans l'application de bureau Claude. Cowork est disponible avec les offres payantes, soit Pro, Max, Team et Enterprise.

Gardez le même prompt et sa première ligne, mais remplacez les deux dernières lignes sur la grille à coller par l'instruction ci-dessous. Le fichier contient les prix et règles ; ajoutez donc uniquement les six résultats attendus dessous.

Lis rate-card.csv dans le dossier connecté. Confirme les tarifs et règles lus.
Crée le calculateur sous forme d'un fichier HTML autonome et complet, sans
ressources externes, puis enregistre-le sous quote-calculator.html dans ce dossier.
Ne modifie pas la grille d'origine et indique où tu as enregistré le résultat.

Cowork exécute ses tâches dans le cloud et accède au dossier via l'application de bureau. Laissez donc cette application ouverte.

Certains comptes proposent encore Chat et Cowork ; choisissez alors Cowork. Anthropic réunit les deux dans une seule conversation, progressivement, en commençant par Pro et Max. Avec l'expérience unifiée, faites la même demande dans une conversation ordinaire et connectez le dossier dans l'application de bureau comme auparavant.

Utiliser ChatGPT comme alternative

La grille, le prompt et les six vérifications restent identiques. Seules la création et la récupération diffèrent. Collez le même prompt, les tarifs, les règles et les résultats attendus dans ChatGPT. Le livrable reste le fichier autonome complet quote-calculator.html, sans ressources externes, téléchargeable.

La documentation d'OpenAI explique que les HTML générés peuvent s'ouvrir en aperçu interactif lorsque cette fonction est disponible, et que les outils d'aperçu et de révision dépendent de l'interface. Pour ChatGPT Work sur le web, elle indique de consulter le fichier dans le chat et de le télécharger au besoin.

ChatGPT peut aussi présenter une page comme Site, Canvas ou aperçu HTML plutôt que comme fichier. Le guide du partage d'un site HTML créé avec ChatGPT couvre chaque cas. Sans aperçu, téléchargez le fichier et ouvrez-le dans votre navigateur.

Dans tous les cas, testez le fichier téléchargé : c'est cette version que vous partagerez.

Vérifier le calculateur exporté

Un calculateur peut sembler correct et se tromper. Un mauvais total devant un client vous coûte de l'argent ou de la crédibilité. Fermez la conversation avec l'IA et vérifiez le fichier téléchargé.

Ouvrez-le par un double-clic. Il doit fonctionner dans le navigateur sans connexion à un compte, sans internet et sans Claude ouvert.
Choisissez Standard, 2 pages supplémentaires et la rédaction. Le total ponctuel doit être $1,700.00.
Passez à 4 pages : $2,000.00 sans remise. Passez à 5 et cochez l'assistance : $2,112.50 ponctuels, $75.00 mensuels et $2,187.50 pour la première facture, avec une ligne de remise de -$37.50.
Videz le champ, puis essayez -1, 2.5 et 11. Chaque entrée doit déclencher une erreur à côté du champ et masquer les totaux jusqu'à correction.
Cliquez sur Réinitialiser : Basic, 0 page, les deux options désactivées et $800.00.
Exécutez les autres cas parmi les six. Plus avec 10 pages et les deux options constitue un bon dernier contrôle : $3,425.00, $75.00 et $3,500.00.
Réduisez la fenêtre à la largeur d'un téléphone ou ouvrez le fichier sur mobile. Aucun défilement horizontal ; les contrôles doivent rester faciles à toucher.
Utilisez le clavier sans souris. Tab doit parcourir chaque contrôle avec un contour de focus visible, et Espace doit cocher ou décocher les cases. Sur Mac, Safari n'atteint les boutons et autres contrôles avec Tab que si la navigation au clavier est activée dans les réglages Clavier.

Ouvrez ensuite le fichier dans un éditeur de texte. Les prix doivent apparaître une seule fois, regroupés dans un bloc identifié. Vous modifierez ce bloc plus tard, vous-même ou avec l'IA.

Gardez les chiffres confidentiels hors du fichier

Quiconque ouvre le fichier peut lire son code : coûts internes, marges et seuils d'approbation n'y ont pas leur place. Le calcul dans le navigateur n'impose pas non plus vos tarifs approuvés, car le destinataire peut modifier sa copie du fichier.

Partager le calculateur avec un client

Envoyez un lien plutôt que le fichier. Les messageries et le stockage cloud affichent souvent le HTML comme du code ou le bloquent. Le guide pour partager un fichier HTML avec un client explique pourquoi.

Claude peut partager l'artefact directement, avec des options qui dépendent du forfait et des réglages de l'organisation. Selon la documentation d'Anthropic, il faut un compte Claude pour ouvrir un artefact nouvellement partagé, sauf les anciens artefacts publiés depuis un chat. C'est pratique pour un collègue déjà utilisateur, mais cela ajoute une étape pour un client sans compte.

Pour un lien que tout client peut ouvrir, chargez le fichier exporté chez un hébergeur qui sert du HTML. Notre produit HummingDeck le fait ; la page de partage HTML en donne les détails.

Un seul fichier HTML fonctionne avec le forfait gratuit. Voici les étapes :

Dans la Bibliothèque de documents, choisissez Ajouter un document, puis quote-calculator.html. Le fichier doit respecter les exigences d'import HTML.
Après traitement, choisissez Nouveau lien, puis un lien personnel. Créez-en d'abord un pour vous, nommé comme test.
Ouvrez-le dans une fenêtre privée, comme le client, puis refaites les contrôles. Le lecteur exécute le fichier dans un cadre isolé ; un test réussi en local ne prouve pas que le lien destinataire fonctionne.
Créez ensuite le lien personnel du client et envoyez-le. Votre visite reste sur le lien test, et le lien client commence sans activité. Après son ouverture, consultez Liens sur le document pour retrouver la visite associée à ce lien.

Si la vente comporte plusieurs documents, placez le calculateur dans une Room avec un devis fixe et une étude de cas. Le client ouvre alors un seul lien. Le forfait gratuit autorise une Room avec jusqu'à trois documents ; le modèle de devis de création web convient pour le devis fixe.

Ce que révèlent estimation et activité

Le calculateur et le devis ont des rôles différents. Le premier permet au client d'explorer des options et une estimation. Le prix auquel vous vous engagez figure dans un devis fixe que vous émettez vous-même.

Pour obtenir une réponse du client sur ce devis, un lien de devis enregistre une acceptation, une demande de modifications ou un refus sur Pro et Business. C'est une réponse de workflow liée au document ; elle ne recueille ni signature ni montant affiché par le calculateur.

Le forfait gratuit affiche sur la page du document les ouvertures totales, visiteurs uniques, temps passé et taux moyen de lecture complète. Starter et les offres supérieures ajoutent l'analyse par page et les clics pris en charge. Le guide pour ajouter des analyses à une page HTML compare cela aux scripts analytiques. Un clic sur les boutons, cases, menu déroulant ou champ numérique compte comme un clic de lien ; le nombre est visible par visiteur et par session.

Ce que montre l'activité

Une consultation signifie que le lien a été demandé et qu'une session a commencé. Elle ne vérifie pas l'identité du visiteur et le lien peut être transféré.
Le nombre de clics reflète l'usage des contrôles. HummingDeck n'affiche ni les options choisies ni le total à l'écran. Saisir un nombre ou modifier le menu au clavier ne compte pas comme clic.
Aucun signal ne prouve une intention d'achat. Utilisez-les pour décider quand une relance serait utile.

Le CPQ, pour configure, price, quote, est un outil différent. Salesforce le décrit comme un logiciel permettant de configurer des produits, appliquer des règles tarifaires, gérer les remises et approbations et générer des devis, avec intégration CRM et ERP.

Ce calculateur gère la configuration et le prix d'une grille simple. Pour enregistrer des devis, gérer un catalogue privé ou approuver des remises, il vous faut un système de devis.

Questions fréquentes

Faut-il Claude Cowork pour créer un calculateur de devis ?

Une conversation Claude ordinaire suffit : collez la grille ou joignez rate-card.csv. Cowork ajoute un fonctionnement par dossier : Claude lit le fichier dans un dossier connecté et y enregistre le calculateur terminé. Il faut un forfait Claude payant et garder l'application de bureau ouverte pour accéder au dossier.

Peut-on utiliser une liste de prix Excel ou Google Sheets ?

Exportez la liste en CSV et joignez-la à la conversation, ou collez le tableau dans le prompt. Avant toute création, demandez à l'IA de répéter chaque tarif et règle lus. Comparez cette liste avec votre feuille, puis testez le calculateur avec des totaux calculés dans la feuille elle-même.

Comment envoyer un calculateur de devis interactif à un client ?

Envoyez un lien plutôt que le fichier. Chargez le HTML chez un hébergeur adapté, par exemple via un lien HummingDeck gratuit, ou partagez l'artefact depuis Claude si le client a un compte. Testez d'abord avec votre propre lien séparé pour que votre visite n'apparaisse pas sur le lien client.

Un calculateur de devis est-il un logiciel CPQ ?

Un calculateur affiche une estimation issue d'une grille fixe. Un logiciel CPQ applique aussi des règles tarifaires et des approbations de remises, génère des devis et s'intègre aux CRM et ERP. Laissez le client explorer les options dans le calculateur, puis envoyez un devis fixe au prix auquel vous vous engagez.

Comment modifier les prix plus tard ?

Modifiez les chiffres du bloc tarifaire identifié, ou demandez à l'IA de les changer dans le même fichier autonome, puis rejouez les six contrôles. Utilisez ensuite Remplacer sur le document HummingDeck pour conserver les liens existants. Cette fonction est indisponible avec un lien de devis actif ; révoquez-le d'abord.

Le calculateur peut-il m'envoyer le devis ou enregistrer les choix du client ?

La version de cet article calcule uniquement dans le navigateur. Envoyer des devis, conserver les choix ou encaisser nécessite un service de formulaires, une base de données ou un système de devis derrière la page. Gardez ces fonctions hors du calculateur et envoyez un devis fixe au prix auquel vous vous engagez.

À propos de l'auteur

Ilya Spiridonov est le fondateur de HummingDeck, une plateforme de partage de documents qui sert des fichiers HTML autonomes à des destinataires externes via des liens suivis.

Sources

Que sont les artefacts et comment les utiliser ?, aide Claude, consulté le 18 octobre 2026
Bien démarrer avec Claude Design, aide Claude, consulté le 18 octobre 2026
Bien démarrer avec Claude Cowork, aide Claude, consulté le 18 octobre 2026
Claude Cowork sur web, ordinateur et mobile, aide Claude, consulté le 18 octobre 2026
Claude Cowork et Chat réunis, aide Claude, consulté le 18 octobre 2026
Partager les artefacts, aide Claude, consulté le 18 octobre 2026
Importer des fichiers dans Claude, aide Claude, consulté le 18 octobre 2026
Travailler avec les fichiers, ChatGPT Learn, OpenAI, consulté le 18 octobre 2026
Raccourcis et gestes Safari sur Mac, assistance Apple, consulté le 18 octobre 2026
Qu'est-ce que le CPQ, Configure, Price, Quote ?, Salesforce, 17 septembre 2026

Partagez votre calculateur de devis par un lien

Articles connexes :

Partager un HTML avec un client : pourquoi la messagerie et le cloud gênent le HTML, et quel lien choisir.
Ajouter des analyses à une page HTML : scripts analytiques et couche de partage suivie comparés.
Héberger un fichier HTML : huit outils comparés : hébergeurs publics, plateformes développeurs et partage contrôlé.
Partager un site HTML créé par ChatGPT : le même processus pour une page créée dans ChatGPT.
Partager Claude Design hors de votre organisation : export et partage externe des fichiers Claude Design.