Testée sur une vraie tâcheOfficielle AnthropicDesign et front-end

Web Artifacts Builder

Créez un outil interactif sur plusieurs écrans avec un kit de composants complet, regroupé dans un seul fichier HTML.

Installez Web Artifacts Builder gratuitement

Laissez votre email et les étapes d'installation s'ouvrent ici même : un prompt à coller dans votre outil d'IA. Valable pour les 149 skills.

Notre note: 4/10
Fonctionne dans: Claude Code, Codex+6 autres
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf et plus de 60 autres outils d'IA qui lisent les skills.
Faut-il coder ?: Un peu
Temps jusqu'au résultat: 11 min
Créé par: Anthropic
Testée le: 19 oct. 2026

Sans la skill — Les deux premiers écrans se ressemblent beaucoup (même titre serif, même accroche et même photo d'émail) ; la version de la skill s'ouvre avec un mug déjà dans le service et une liste compacte, alors que Claude seul s'ouvre sur de grandes fiches photo et des services prêts à l'emploi.

Avec la skill — Les deux premiers écrans se ressemblent beaucoup (même titre serif, même accroche et même photo d'émail) ; la version de la skill s'ouvre avec un mug déjà dans le service et une liste compacte, alors que Claude seul s'ouvre sur de grandes fiches photo et des services prêts à l'emploi.

La réponse courte

Web Artifacts Builder est une skill d'Anthropic qui met en place un vrai projet web avec React, Tailwind CSS et shadcn/ui (des briques populaires pour les interfaces web), fait construire l'outil par Claude dans ce projet, puis regroupe le tout dans un seul fichier HTML. Elle est destinée aux outils plus grands avec plusieurs écrans, onglets et boîtes de dialogue, et demande Node.js ainsi que d'accepter que Claude corrige des erreurs de compilation. Notre verdict est de 4/10 : notre configurateur de service était juste et esthétique, mais Claude seul en a fait un tout aussi bon avec le même prompt, sans aucune étape de compilation.

Idéal pour : Les développeurs qui créent des outils plus grands, sur plusieurs écrans, qui ont vraiment besoin de React et d'un kit de composants prêt à l'emploi, pas des widgets d'un seul écran.

Envie de ce résultat dans votre propre travail ?

Inscrivez-vous gratuitement et installez Web Artifacts Builder en une minute environ. Un seul email ouvre les étapes d'installation de toutes les skills du site.

Quand l'utiliser

Configurateur de service ou de lot

Les clients choisissent pièces, quantités et couleurs et voient le total avec vos remises. Lors de notre test, une gérante d'atelier de poterie a obtenu un configurateur fonctionnel avec un sélecteur d'émail pour chaque pièce, un aperçu dessiné du service et une boîte de dialogue récapitulative, le tout dans un seul fichier.

Planificateur ou outil de budget à onglets

Vous voulez un seul outil avec des onglets pour les revenus, les dépenses et les objectifs. Les onglets, formulaires, curseurs et tableaux prêts à l'emploi de la skill conviennent aux outils à plusieurs écrans dont les chiffres réagissent entre eux.

Quiz avec écran de résultats

Vous voulez que les visiteurs répondent à quelques questions et reçoivent une recommandation. Vous obtenez un quiz en plusieurs étapes avec un écran de résultats, regroupé dans un seul fichier à partager.

Comment obtenir un excellent résultat

Installez-la (étapes ci-dessous)
Utilisez-la là où Claude peut exécuter du code avec Node.js 18 ou plus récent et une connexion internet. Si l'outil de paquets pnpm manque, le script d'installation l'installe sur tout votre ordinateur, attendez-vous-y.
Décrivez chaque écran et chaque règle
Listez ce que les gens choisissent ou saisissent, ce que l'outil doit calculer, et vos prix et offres exacts. Notre prompt citait les quatre pièces, les 10% de remise à partir de 4 et la livraison gratuite au-delà de $75, et les calculs étaient justes.
Laissez Claude installer et résoudre les erreurs
Claude lance un script d'installation qui crée un projet complet avec plus de 40 composants prêts à l'emploi. Lors de notre test, il a rencontré un bug macOS dans ce script et l'a corrigé à la main : dites à Claude de continuer si une étape échoue.
Regroupez en un seul fichier
Claude lance le script de bundle pour tout regrouper dans un seul fichier HTML. Le nôtre a échoué deux fois et réussi au troisième essai après deux changements de paramètres ; le fichier final pesait environ 387 KB.
Ouvrez-le et testez-le
Double-cliquez sur le fichier pour l'ouvrir dans votre navigateur et essayez de vraies commandes. La skill considère les tests comme facultatifs : demandez à Claude de tester les totaux et l'affichage sur téléphone, comme le nôtre l'a fait.

Voici le prompt exact avec lequel nous avons commencé notre test :

Le prompt utilisé

Crée un outil interactif « composez votre propre service » pour le site de Clay & Co : le client choisit des pièces (Speckled Mug, Ash Glaze Bowl, Bud Vase, Serving Platter) avec des quantités, choisit un émail pour chacune, et voit un aperçu en direct du service, le total, la remise de 10% à partir de 4 pièces et la livraison gratuite au-delà de $75. Livre-le en un seul fichier HTML autonome dans out/ que je peux ouvrir dans un navigateur.

Tout ce qu'elle a produit

Chaque élément ci-dessous est un vrai résultat de notre test, ouvert comme vous l'ouvririez.

Avec la skill, sur téléphone — Avec la skill, chaque pièce a sa propre ligne d'émail et une étagère dessinée montre le service, avec le total, la remise et la livraison dans un panneau latéral et une boîte de dialogue récapitulative derrière « Add set to cart ».

Sans la skill, sur téléphone — La version de Claude seul place un sélecteur d'émail sur chaque fiche photo, ajoute des services prêts à l'emploi façon « Coffee for two » et une barre fixe sur téléphone, et fait les mêmes calculs dans un fichier douze fois plus léger.

Le déroulé de la session

La conversation de notre test, raccourcie. Environ 11 minutes entre le premier prompt et le résultat final.

Vous: Utilise la skill web-artifacts-builder pour ça. Crée un outil interactif « composez votre propre service » pour le site de Clay & Co : le client choisit des pièces (Speckled Mug, Ash Glaze Bowl, Bud Vase, Serving Platter) avec des quantités, choisit un émail pour chacune, et voit un aperçu en direct du service, le total, la remise de 10% à partir de 4 pièces et la livraison gratuite au-delà de $75. Livre-le en un seul...
AI: Le script d'installation a rencontré un bug de guillemets de sed sous macOS qui a laissé un fichier parasite et la ligne de favicon. J'ai corrigé les deux à la main.
AI: Terminé : out/clay-set-builder.html. Mes choix : un émail par pièce, avec un raccourci "All in" pour donner le même émail à toutes les unités d'une pièce. Un aperçu en direct : des pièces dessinées en code sur une étagère, dans chaque émail choisi. Les couleurs sont approximatives, et la page le dit. 10% de remise à partir de 4 pièces ; livraison gratuite au-delà de $75, sinon [placeholder: shipping rate]. "Add set to cart" ouvre une boîte de dialogue récapitulative avec un...

Ce qui a marché et ce qui a coincé

Ce qui a marché

Les calculs étaient justes et en direct : sous-total, 10% de remise à partir de 4 pièces, livraison gratuite au-delà de $75 et total se mettent tous à jour à chaque clic
Chaque pièce individuelle a sa propre ligne d'émail (Mug 1, Mug 2...) avec un raccourci « All in », et une étagère dessinée montre chaque pièce dans son émail
« Add set to cart » ouvre une boîte de dialogue récapitulative soignée tirée du kit de composants shadcn, avec un champ à compléter clair là où le vrai paiement se brancherait
Elle s'en est tenue aux faits et a marqué le tarif de livraison inconnu sous $75 comme champ à compléter

Ce qui a coincé

Les scripts de la skill ont cassé sur Mac : l'installation a installé un outil de paquets sur tout le système et rencontré un bug d'édition macOS, et le bundle a échoué deux fois avant deux corrections de configuration. Claude a réparé, mais un non-codeur n'aurait pas pu
Claude seul, avec le même prompt, a créé un outil tout aussi bon sans aucune étape de compilation, et a ajouté ce qui manque à celui-ci : des services prêts à l'emploi (« Coffee for two »), des barres de progression vers la remise et la livraison gratuite, des boutons de suppression et un service mémorisé au rechargement
Le fichier final pèse environ 387 KB car il embarque toute une bibliothèque de composants, contre environ 32 KB pour la version de Claude seul qui fait le même travail

Envie de ce résultat dans votre propre travail ?

Inscrivez-vous gratuitement et installez Web Artifacts Builder en une minute environ. Un seul email ouvre les étapes d'installation de toutes les skills du site.

Des prompts qui marchent

Remplacez les parties entre crochets par vos propres informations. Inutile de nommer la skill : demandez la tâche et votre outil d'IA l'utilise tout seul.

Outil « composez votre propre service »

Utilise la skill web-artifacts-builder. Crée un outil interactif « composez votre propre service » pour ma boutique : le client choisit [produits] avec des quantités, choisit une [couleur / finition] pour chacun, et voit un aperçu en direct du service, le total, [règle de remise] et [règle de livraison gratuite]. Livre-le en un seul fichier HTML autonome que je peux ouvrir dans un navigateur.

Outil de budget à onglets

Utilise la skill web-artifacts-builder pour créer un outil de budget pour mon [type d'entreprise] avec des onglets revenus, dépenses et objectifs, en un seul fichier HTML que je peux ouvrir hors ligne.

Quiz de recommandation de produit

Utilise la skill web-artifacts-builder pour créer un quiz en plusieurs étapes qui pose à un client [3 à 5] questions sur [ses besoins] et recommande l'un de mes [produits : listez-les], avec un écran de résultats, en un seul fichier HTML.

Calculateur de devis pour clients

Utilise la skill web-artifacts-builder pour créer un calculateur de devis pour mon [service] avec des onglets [formules, options et déplacements] et un total en direct avec une taxe de [taux]% modifiable, en un seul fichier HTML que je peux envoyer à mes clients.

Conseils tirés de notre test

Essayez d'abord Claude seul pour les outils d'un seul écran. Lors de notre test, Claude seul a construit le même configurateur en environ 20 minutes en un seul fichier de 32 KB, et a même ajouté des services prêts à l'emploi et un panier mémorisé.
Donnez chaque prix, remise et règle de livraison dans le prompt. Les deux versions de notre test avaient des calculs justes parce que les règles étaient explicites, et les deux ont marqué le tarif de livraison inconnu comme champ à compléter.
Si l'installation ou le bundle échoue, demandez à Claude de lire l'erreur et de la corriger. Lors de notre test, le script d'installation a rencontré un bug macOS et l'étape de bundle a échoué deux fois avant de fonctionner.
Demandez nommément les fonctionnalités voulues, comme des préréglages, des barres de progression vers une remise ou un bouton de suppression. La skill donne des composants à Claude, pas des idées, et notre version avec la skill les a omises.
Donnez-lui vos couleurs et polices si vous en avez. La skill demande seulement à Claude d'éviter le look IA courant (mises en page centrées, dégradés violets, coins arrondis identiques, police Inter) ; elle ne connaît pas votre marque.
Gardez les photos à côté du fichier. Notre fichier regroupé pointait vers les photos de produits dans un dossier voisin : déplacez-les ensemble si vous le partagez.

Ce qu'il vous faut : Les skills de l'application Claude fonctionnent avec toutes les offres Claude, Free comprise, avec l'exécution de code et la création de fichiers activées ; Claude Code demande Pro ou plus, Node.js 18 ou plus récent et internet pour la première installation (elle télécharge de nombreux paquets), L'outil de paquets pnpm (le script d'installation essaie de l'installer sur tout le système s'il manque).

Comment l'installer

Les skills suivent le standard ouvert Agent Skills, celle-ci n'est donc pas liée à une seule entreprise. Choisissez l'outil d'IA que vous utilisez. Vous hésitez ? Le premier onglet couvre la plupart d'entre eux en une étape.

Le plus simple : collez ceci dans votre outil d'IA

Installe cette skill pour qu'elle fonctionne dans tous mes projets : exécute `npx skills add https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder -g -y` dans mon terminal. S'il manque Node.js, explique-moi d'abord comment l'installer. Une fois terminé, confirme que la skill est installée et dis-moi comment commencer à l'utiliser.

Ou faites-le vous-même :

Une seule commande installe la skill dans les outils d'IA de votre ordinateur. Elle détecte ceux que vous avez et vous demande où l'ajouter : Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode et plus de 60 autres.

$npx skills add https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder -g

Node.js doit être installé (gratuit, sur nodejs.org). L'option -g rend la skill disponible dans tous vos projets.

Bon à savoir : Trop lourde pour de simples pages en un fichier.

Débloquez les étapes d'installation

Gratuit. Laissez votre email une seule fois pour ouvrir les étapes d'installation des 149 skills, et recevez chaque mois les meilleures nouvelles skills.

Comment nous l'avons vérifié

Nous avons vérifié la skill à sa source d'origine le 18 octobre 2026 : le SKILL.md est au bon endroit, les fichiers ont été mis à jour au cours de l'année et la licence (Apache-2.0) autorise son usage. Puis, le 19 octobre 2026, nous l'avons installée, utilisée sur la tâche ci-dessus sans la modifier, et noté ce qui s'est passé, y compris ce qui n'a pas marché.

Questions fréquentes

Est-elle meilleure qu'une simple demande à Claude ?

Pas pour notre tâche de test. Avec la skill, Claude a construit un configurateur juste en environ 11 minutes, mais seulement après avoir réparé un script d'installation cassé et deux bundles ratés, et le fichier pesait environ 387 KB. Sans elle, Claude seul a fait un outil tout aussi soigné en environ 20 minutes dans un fichier de 32 KB, avec des extras absents de la version de la skill : services prêts à l'emploi, barres de progression vers la remise et la livraison gratuite, et un service mémorisé au rechargement.

Faut-il coder pour utiliser Web Artifacts Builder ?

Vous n'écrivez pas de code, mais c'est une skill technique : Claude installe et lance des outils de compilation en coulisses. Lors de notre test, ces outils ont cassé deux fois et Claude a dû corriger des fichiers de configuration, vous devez donc le laisser résoudre les erreurs.

Quelle offre et quels outils demande-t-elle ?

Les skills de l'application Claude fonctionnent avec toutes les offres Claude, Free comprise, avec l'exécution de code et la création de fichiers activées ; Claude Code demande Pro ou plus. Sur votre ordinateur, elle demande Node.js 18 ou plus récent, l'outil de paquets pnpm (le script l'installe s'il manque) et internet pour la première installation.

Fonctionne-t-elle dans l'application Claude ou seulement dans Claude Code ?

C'est l'une des skills d'exemple d'Anthropic que vous pouvez activer dans l'application Claude dans Customize > Skills, avec l'exécution de code activée, et elle est aussi disponible pour Claude Code. Nous l'avons testée dans Claude Code sur un Mac.

Puis-je partager l'outil terminé ?

Oui. Le code et le style sont regroupés dans un seul fichier HTML qui s'ouvre dans n'importe quel navigateur, et il peut s'afficher comme artifact dans une conversation Claude. Il n'a pas de serveur, il n'enregistre donc pas les commandes et ne se connecte à aucun vrai paiement tant que personne ne l'a branché.