1. Décrivez la tâche
Claude peut créer des outils interactifs qui vous permettent d'interagir directement avec le contenu, qu'il s'agisse d'anatomie, de diagrammes de chimie ou de chronologies historiques. La précision de votre invite façonne la sophistication du résultat.
Décrivez l'expérience que vous souhaitez : ce que vous apprenez, comment vous voulez interagir avec, d'où viennent les données, et vos standards esthétiques. Considérez votre invite comme un cahier des charges de design.
Vous n'avez pas besoin de commencer aussi précisément. Commencez par l'expérience que vous souhaitez, puis intégrez des contraintes techniques comme le remplissage SVG et les notes UBERON au fur et à mesure que vous découvrez ce qui fait échouer la construction.
Créez un explorateur d'anatomie interactif en utilisant @ebi-gene-expression-group/anatomogram depuis npm. Utilisez homo_sapiens.male.svg et homo_sapiens.brain.svg. Ne générez pas vous-même les diagrammes—ces SVG contiennent des illustrations précises avec des ID d'ontologie UBERON déjà intégrés. Intégrez les SVG directement dans le HTML—aucune requête fetch n'est nécessaire.
Critique : Les SVG stylisent tous les éléments avec fill:none;stroke:none par défaut, les rendant invisibles. Après le chargement, appliquez les remplissages et traits par défaut avant tout autre style. Définissez également cleanupIds: false lors de l'optimisation (les ID UBERON sont la façon dont vous ciblez les éléments) et supprimez l'attribut visibility:hidden en JavaScript.
Exigences de design : Sobre et sophistiqué. Pas de lueurs, pas d'emojis, pas de néon. Couleurs chaudes plutôt que froides. Titres en serif, corps en sans-serif, monospace pour les données. Pensez référence médicale haut de gamme, pas production générique d'IA.
Ajoutez des panneaux d'information à onglets, un retour sonore à sensation physique, et un contenu suffisamment riche pour réellement apprendre. Construisez dès le départ une qualité phare—j'itérerai jusqu'à ce que ce soit exceptionnel.
2. Donnez du contexte à Claude
L'invite ci-dessus fournit son propre contexte : la source des données (le package anatomogram avec ses ID UBERON), le modèle d'interaction (survol, clic, systèmes corporels à onglets), et le standard de design (référence médicale haut de gamme, couleurs chaudes, titres en serif). Claude construit exactement à partir de ce que vous précisez, donc chacun de ces choix se retrouve dans le résultat.
Contexte requis
Les Artifacts sont des résultats autonomes et interactifs que Claude crée dans une fenêtre dédiée à côté de votre conversation. Lorsque vous demandez un outil interactif comme cet explorateur d'anatomie, Claude le construit généralement automatiquement sous forme d'artifact, rendu et prêt à l'emploi.
Contexte facultatif
Pour les applications complexes à plusieurs composants, activez la Réflexion étendue(s’ouvre dans un nouvel onglet) afin que Claude puisse planifier l'architecture avant de construire.
3. Ce que Claude crée
Claude construit une application React entièrement fonctionnelle avec le design visuel, les modèles d'interaction et le contenu éducatif que vous avez spécifiés, prête à être utilisée immédiatement dans la visionneuse d'artifacts.
Terminé ! J'ai construit votre explorateur d'anatomie avec les SVG de qualité médicale, un ciblage UBERON approprié, et le système de design sobre que vous avez décrit.
Ce qui est inclus :
1. Explorateur à double vue
Basculez entre les vues du corps entier et du cerveau. La vue du corps entier organise les systèmes par couleur (squelettique, musculaire, nerveux, circulatoire, respiratoire, digestif) avec un positionnement anatomique approprié.
2. Éléments interactifs
Survolez n'importe quelle structure pour voir son nom, son ID UBERON et sa fonction principale. Cliquez pour des informations plus approfondies : pertinence clinique, structures associées et faits rapides. J'ai renseigné environ 40 structures avec un contenu de qualité pédagogique.
3. Filtres de système
Des onglets vous permettent d'isoler des systèmes corporels individuels. Lorsque vous sélectionnez « Squelettique », les structures non squelettiques s'estompent tandis que les os pertinents gagnent en importance et deviennent interactifs.
4. Conception sonore
Retour audio subtil au survol et à la sélection. Des clics et tonalités doux qui semblent physiques, pas numériques. Désactivé par défaut ; à activer dans le coin.
5. Détails de design
Fond beige chaud, accents terracotta et ardoise, pas de couleurs agressives. Playfair Display pour les titres, Inter pour le corps du texte, IBM Plex Mono pour les données. Espace blanc généreux, pas d'encombrement visuel.
4. Invites de suivi
Poursuivez la conversation avec Claude pour affiner, développer ou explorer davantage.
Ajouter l'auto-évaluation
Ajoutez davantage de fonctionnalités, comme un mode d'apprentissage actif qui renforce la mémorisation.
Ajoute un mode quiz où l'on me montre une description ou une fonction et où je dois identifier la structure correcte. Suis ma précision et montre les systèmes avec lesquels j'ai des difficultés.
Ajouter des fonctionnalités avancées
Demandez à Claude d'étendre le détail anatomique là où vous souhaitez plus de granularité.
Ajoute davantage de systèmes corporels au diagramme. Rends aussi la vue du cerveau plus détaillée.
Générer des supports complémentaires à partir de la même session
Continuez à apprendre à travers différents supports. L'application et les supports d'étude peuvent partager une source de vérité commune.
À partir des données anatomiques de cet explorateur, génère un guide d'étude PDF imprimable avec les mêmes structures organisées par système, ainsi qu'un ensemble de cartes mémoire compatibles Anki que je peux importer. Garde la terminologie et les corrélations cliniques cohérentes avec ce qui figure dans l'application.
5. Astuces, conseils et résolution de problèmes
Collez les erreurs directement dans le chat
Lorsque quelque chose ne fonctionne pas, comme une structure qui ne se met pas en surbrillance ou un onglet de système qui arrête de filtrer, collez le message d'erreur ou décrivez ce que vous voyez. Claude peut retracer la logique et identifier le problème afin que vous n'ayez pas besoin de déboguer le code vous-même.
Les longues sessions s'accumulent plutôt que de dériver
Opus 4.5 conserve vos décisions de design et votre contexte technique tout au long de conversations prolongées. Votre dixième itération se souvient toujours de vos exigences esthétiques initiales, de vos contraintes techniques et de chaque affinement intermédiaire. Vous pouvez planifier des sessions de construction soutenues plutôt que d'essayer de tout spécifier dès le départ.
Incluez les problèmes connus dès le départ
Si vous avez déjà rencontré des bizarreries auparavant—lors de sessions Claude précédentes ou de votre propre débogage—mentionnez-les dans l'invite. Cet exemple note que les SVG anatomogram s'affichent invisibles par défaut et que les ID UBERON sont supprimés lors de l'optimisation. Sans ces notes, Claude écrit un code fonctionnel qui produit un écran vide, puis passe des itérations à diagnostiquer.
Vérifiez les panneaux avant de les utiliser pour étudier
Le package anatomogram fournit les illustrations précises, mais Claude écrit le texte des panneaux d'information : la fonction de chaque structure, sa pertinence clinique et ses faits rapides. Avant de vous appuyer sur l'explorateur comme outil d'étude, parcourez quelques structures et comparez ce que disent les panneaux avec votre manuel ou vos notes de cours. Signalez tout ce qui ne correspond pas et demandez à Claude de le corriger.
Ajoutez des sources pour vous l'approprier
La fenêtre de contexte d'Opus 4.5 gère un contenu substantiel. Si vous avez un chapitre de manuel, des notes de cours ou un programme que vous souhaitez que l'application couvre, collez l'intégralité du texte plutôt que de le résumer. Claude extrait la structure et hiérarchise le contenu plus efficacement à partir de sources complètes qu'à partir de votre version condensée.
6. Prêt à essayer par vous-même ?
Choisissez quelque chose que vous aviez l'intention de comprendre. Claude construit l'outil ; vous faites l'apprentissage.