Custom instructions, styles et artifacts

ArrArrL'Annual Recurring Revenue (ARR) est le revenu normalisé et prévisible qu'une entreprise par abonnement attend de ses contrats actifs sur une année.Voir la définition complète →êtez de recoller les mêmes consignes « sois concis, pas de préambule, orthographe britannique » dans chaque conversation. Claude vous permet de définir le ton et le format une fois pour toutes, puis transforme la conversation elle-même en espace de travail vivant où il construit, vous éditez, et où la chose fonctionne vraiment. Cette leçon relie ces deux idées : la personnalisation persistante via les custom instructions et les Styles, et l'environnement de construction en panneau latéral appelé Artifacts.

Custom instructions et Styles : deux boutons différents

On les confond sans arrêt, alors séparons-les nettement.

Les custom instructions sont des règles permanentes qui s'appliquent à un contexte. Au niveau du compte (Settings), elles couvrent toutes les conversations. Dans un Project, les instructions du projet ne s'appliquent qu'à cet espace de travail et se superposent à celles du compte. C'est là que vous placez les faits et contraintes durables : « je suis product manager dans une fintech, utilise un langage simple par défaut, signale toujours le risque réglementaire, n'invente jamais de chiffres ».

Les Styles contrôlent *la façon dont Claude écrit*, pas *ce qu'il sait*. Un Style est un profil de voix et de format réutilisable que vous activez par conversation. Claude propose des préréglages comme Formal, Concise et Explanatory, et vous pouvez crcrLe pourcentage de visiteurs ou de prospects qui réalisent une action attendue (achat, inscription, formulaire de contact), calculé en divisant les conversions par le nombre total d'opportunités.Voir la définition complète →éererLe rapport entre les interactions (likes, commentaires, partages) et le reach d'un contenu, utilisé pour mesurer la réaction de l'audience au regard du nombre de personnes touchées.Voir la définition complète → un Custom Style en fournissant des exemples de l'écriture que vous voulez reproduire. Claude en déduit les régularités (longueur des phrases, structure, habitudes de mise en forme) et les applique.

Le partage pratique :

• Mettez ce qui est toujours vrai dans les custom instructions.
• Mettez la façon dont ça doit sonner maintenant dans un Style que vous pouvez activer ou désactiver.

Un Style personnalisé est l'outil approprié quand votre voix change selon la tâche. Vous pouvez rédiger des release notes dans un Style « Engineering » sec et des emails clients dans un Style « Support » plus chaleureux, le tout sous les mêmes instructions de compte. Voir le guide officiel sur la création et l'utilisation des Styles.

Construire un Style qui tient

Le chemin le plus rapide vers un bon Style personnalisé est de coller deux ou trois échantillons de votre écriture réelle et de laisser Claude en déduire les règles. Puis affinez avec des mots : « Plus serré. Pas de listes à puces sauf si je le demande. Commence par la réponse, pas par le contexte. » Les Styles sont modifiables après création, traitez donc la première version comme un brouillon.

Une mise en garde : un Style marqué entre en concurrence avec des instructions marquées dans la conversation. Si vous demandez une synthèse juridique formelle alors qu'un Style « Casual » est actif, vous créez une tension. Adaptez le Style à la tâche ou désactivez-le.

Artifacts : la conversation devient un espace de travail

Un Artifact est un contenu substantiel et autonome que Claude affiche dans un panneau latéral dédié au lieu de l'insérer dans le fil de la conversation. Du code, un document complet, un diagramme SVG, une page HTML : quand la sortie est quelque chose que vous allez conserver, éditer ou réutiliser, Claude la place dans le panneau Artifacts où elle persiste et se met à jour d'un tour à l'autre.

Le point important pour cette leçon : les Artifacts peuvent s'exécuter. Un Artifact HTML/CSS/JS ou un composant React s'affiche en direct. Vous ne lisez pas un listing de code, vous utilisez la chose. Cela fait entrer la boucle construction-test dans la conversation.

Exemple pratique : un outil web d'une page en deux tours

Construisons un utilitaire fonctionnel sous forme d'Artifact : un générateur de liens UTM qui prend une URL de base et des paramètres de campagne et produit une URL taguée avec un bouton de copie. C'est le type d'outil en fichier unique réellement utile et qui reste à vie dans vos favoris.

Tour 1 : le prompt

Construis un générateur de liens UTM en page unique sous forme d'artifact HTML. Entrées : URL de base, source, medium, campaign, term et content optionnels. À mesure que l'utilisateur tape, affiche l'URL assemblée en direct avec un encodage correct. Inclus un bouton « Copier ». Autonome : CSS et JS inline, pas de bibliothèques externes. Aspect propre et moderne.

Claude génère un index.html complet dans le panneau Artifacts et l'affiche immédiatement. Vous tapez dans les champs et vous voyez l'URL se construire. Le cœur de ce qu'il produit ressemble à ceci :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>UTM Link Builder</title>
  <style>
    body { font: 16px/1.5 system-ui, sans-serif; max-width: 560px; margin: 2rem auto; padding: 0 1rem; }
    label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
    input { width: 100%; padding: .5rem; box-sizing: border-box; }
    #out { margin-top: 1rem; padding: .75rem; background: #f4f4f5; word-break: break-all; }
    button { margin-top: .5rem; padding: .5rem 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <h1>UTM Link Builder</h1>
  <label>Base URL</label><input id="url" placeholder="https://example.com/page" />
  <label>Source</label><input id="source" placeholder="newsletter" />
  <label>Medium</label><input id="medium" placeholder="email" />
  <label>Campaign</label><input id="campaign" placeholder="spring_launch" />
  <div id="out">Your tagged URL appears here.</div>
  <button id="copy">Copy</button>
  <script>
    const fields = ["source", "medium", "campaign"];
    const out = document.getElementById("out");
    function build() {
      const base = document.getElementById("url").value.trim();
      if (!base) { out.textContent = "Enter a base URL."; return; }
      const params = new URLSearchParams();
      fields.forEach(f => {
        const v = document.getElementById(f).value.trim();
        if (v) params.set("utm_" + f, v);
      });
      const q = params.toString();
      out.textContent = q ? base + (base.includes("?") ? "&" : "?") + q : base;
    }
    document.querySelectorAll("input").forEach(i => i.addEventListener("input", build));
    document.getElementById("copy").addEventListener("click", () =>
      navigator.clipboard.writeText(out.textContent)
    );
  </script>
</body>
</html>

Remarquez qu'il a utilisé URLSearchParams, qui encode correctement les valeurs sans effort supplémentaire. C'est le genre de détail que vous attendriez d'un ingénieur senior, et Claude a choisi la bonne primitive sans qu'on lui dise.

Tour 2 : affiner en langage naturel

Vous l'essayez et vous voulez deux changements. Vous ne redécrivez pas tout l'outil, vous pointez ce qui ne va pas.

Deux corrections : (1) ajoute les champs optionnels « term » et « content ». (2) Le bouton Copier doit changer brièvement son libellé en « Copié ! » pendant deux secondes pour me donner un retour.

Claude modifie l'Artifact existant au lieu de le régénérer de zéro. Le panneau se met à jour sur place : deux nouveaux champs apparaissent, et le gestionnaire de copie effectue maintenant un changement de libellé temporisé. Le diff est petit et chirurgical parce que les Artifacts conservent leur état d'un tour à l'autre. Cette boucle itérative « pointer et affiner » est toute la raison d'être des Artifacts. Vous conversez jusqu'à obtenir un outil fini.

Quand c'est terminé, vous pouvez copier le fichier, ou, dans les applications Claude, publier l'Artifact pour partager un lien fonctionnel. Pour les Artifacts React de type application, Claude prend en charge des composants interactifs que d'autres personnes peuvent utiliser directement.

Quand les Artifacts sont le mauvais outil

Les Artifacts s'exécutent dans un contexte navigateur en sandbox. C'est parfait pour des outils front-end autonomes, des calculateurs, des visualisations et des documents. Ce n'est *pas* là que vous construisez quelque chose qui nécessite des secrets, une base de données ou une exécution côté serveur.

Dès que vous avez besoin d'un accès réel au système de fichiers, d'installations de paquets ou d'un dépôt multi-fichiers, vous avez dépassé les Artifacts et il vous faut Claude Code, l'outil agentique en ligne de commande d'Anthropic qui travaille dans votre projet réel. Et si vous voulez que Claude récupère des données en direct dans la conversation (votre agenda, un document Google Drive, un dépôt GitHub), c'est le rôle des Connectors et de MCPMCPUn standard ouvert qui permet aux assistants IA de se connecter aux outils et données de l'entreprise de façon cohérente et gouvernée, sans intégration sur mesure à chaque fois.Voir la définition complète →, le Model Context Protocol, pas des Artifacts. Gardez un modèle mental propre : les Artifacts sont une surface de sortie et d'édition, pas une couche d'intégration.

Combiner les trois dans un Project

Le vrai workflow empile ces éléments. Imaginez un Project appelé « Marketing Tools » :

• Custom instructions du projet : « L'audience est composée de marketeurs non techniques. Les outils doivent être en HTML fichier unique, sans CDN externe, avec des labels accessibles sur chaque champ. »
• Style : un Style personnalisé « Docs » pour quand vous demandez à Claude de rédiger les notes d'utilisation, afin que les explications restent cohérentes.
• Artifacts : chaque outil que vous construisez (le générateur d'UTM, un générateur de slug, un parseur UTM vers texte lisible) existe comme Artifact auquel vous pouvez revenir et que vous pouvez affiner.

Parce que les instructions du projet imposent déjà « fichier unique, pas de CDN », vous cessez de répéter les contraintes dans chaque prompt. Les instructions façonnent chaque Artifact que Claude produit dans cet espace de travail. C'est le bénéfice de séparer les règles permanentes, la voix par tâche et la sortie constructible : chaque couche fait un seul travail, et elles se composent.

Une note sur les Skills

Vous verrez les Skills mentionnées à côté de ces fonctionnalités. Une Skill est un ensemble packagé d'instructions et de ressources (et éventuellement de code) que Claude charge quand c'est pertinent, afin d'exécuter une tâche spécialisée de façon constante, par exemple remplir un modèle de document précis ou suivre les règles de marque de votre équipe. Les Skills recoupent conceptuellement les custom instructions mais sont plus portables et structurées : vous construisez une Skill une fois et Claude l'invoque d'une conversation à l'autre quand la tâche correspond. Pour des travaux répétables et bien définis, une Skill est plus durable que de coller des instructions. Pour un réglage de voix ponctuel, un Style est plus léger. La documentation Anthropic est l'endroit pour suivre la façon dont Skills, Styles et instructions sont exposés au fil de l'évolution des applications, puisque leur emplacement dans l'interface bouge.

Tirer le meilleur de l'itération sur les Artifacts

Quelques habitudes rendent la boucle en deux tours rapide de façon fiable :

Pointez, ne répétez pas. Dans les tours d'affinage, nommez le comportement précis à changer. « Le bouton de copie a besoin d'un retour » vaut mieux que de recoller le cahier des charges. Claude édite sur place et garde tout le reste stable.

Demandez un seul ensemble de changements logiques par tour. Regrouper « ajouter des champs » et « ajouter un retour de copie » a marché parce que les deux étaient petits et indépendants. Empiler une refonte graphique, une nouvelle fonctionnalité et une correction de bug dans un même message rend la modification plus difficile à vérifier.

Vérifiez en utilisant, pas en lisant. L'avantage d'un Artifact vivant est que vous pouvez tester le comportement réel. Cliquez sur le bouton. Collez une URL contenant déjà une query string avec ? et confirmez qu'il ajoute avec &. Faites confiance à l'outil qui tourne plutôt qu'au listing de code.

Passez à l'étage supérieur quand vous l'avez dépassé. Quand un outil a besoin d'un backend ou d'un vrai dépôt, demandez à Claude d'exporter la logique et déplacez-la dans Claude Code ou votre propre projet. N'essayez pas de forcer des fonctionnalités serveur dans la sandbox.

Points clés

• Custom instructions = ce qui est toujours vrai ; Styles = comment ça sonne maintenant. Placez les contraintes durables dans les instructions de compte ou de Project, et activez un Style selon la tâche. Ne les confondez pas.
• Construisez un Style personnalisé à partir de vos propres échantillons d'écriture, puis affinez-le avec des mots. Adaptez le Style à la tâche, car un Style marqué s'oppose à des instructions marquées dans la conversation.
• Traitez les Artifacts comme un espace de travail vivant, pas comme un dépôt de code. Générez un outil HTML ou React autonome, puis affinez-le d'un tour à l'autre en pointant des comportements précis. Claude édite sur place et conserve l'état.
• Connaissez la frontière. Les Artifacts sont une surface front-end en sandbox. Dès que vous avez besoin de secrets, d'une base de données ou d'un vrai dépôt, passez à Claude Code ; pour des données en direct, tournez-vous vers les Connectors et MCP.
• Composez dans un Project. Les instructions de projet imposent automatiquement vos standards de construction à chaque Artifact, vous cessez donc de répéter des contraintes et vous commencez à livrer des outils.