Construire des outils de diagrammes interactifs
Des systèmes corporels aux structures moléculaires, transformez une requête détaillée en une application de référence opérationnelle avec le niveau de détail et la conception que vous précisez.
- AuteurAnthropic
- CatégoriePersonnel
- ModèleOpus 4.5
- Fonctionnalités
- PartagerCopier le lien
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 de données anatomiques, de diagrammes de chimie ou de chronologies historiques. La précision de votre requête détermine la sophistication du résultat.
Décrivez l'expérience que vous souhaitez : ce que vous apprenez, comment vous souhaitez interagir avec lui, d'où proviennent les données et vos critères esthétiques. Considérez votre requête comme un brief de conception.
Créez un explorateur d’anatomie interactif à l’aide de @ebi-gene-expression-group/anatomogramme à partir de npm. Utilisez homo_sapiens.male.svg et homo_sapiens.brain.svg. Ne générez pas de diagrammes vous-même : 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, sans requête de récupération.
Critique : les SVG stylisent tous les éléments avec fill:none;stroke:none par défaut, ce qui les rend invisibles. Après le chargement, les remplissages et les traits par défaut sont appliqués avant toute autre mise en style. Définissez également cleanupIds : false lors de l'optimisation (les identifiants UBERON permettent de cibler des éléments) et supprimez l'attribut visibility:hidden en JavaScript.
Exigences de conception : sobre et sophistiquée. Pas de lueurs, pas d’emojis, pas de fluo. Des couleurs chaudes plutôt que des couleurs froides. Titres sérif, corps sans-serif, monospace pour les données. Pensez à des références médicales premium, pas à des résultats génériques d’IA.
Ajoutez des panneaux d'information à onglets, des retours sonores sensoriels et des contenus suffisamment riches pour permettre un véritable apprentissage. Visez une qualité exemplaire dès le départ – je vais itérer jusqu'à ce que ce soit exceptionnel.
2
Offrez un contexte à Claude
Pour créer des outils d'apprentissage interactifs, après avoir décrit ce que vous souhaitez apprendre et comment vous voulez interagir avec eux, assurez-vous que les capacités et les fonctionnalités sont activées.
Contexte obligatoire
Assurez-vous que la création de fichiers est activée dans les paramètres pour que Claude puisse créer des artéfacts.
No items found.
Contexte facultatif
Pour les applications complexes à plusieurs composants, activez la réflexion étendue pour que Claude planifie l'architecture avant la création.
Réflexion étendue
3
Le résultat produit par Claude
Claude crée une application React entièrement fonctionnelle avec la conception visuelle, les modèles d'interaction et le contenu éducatif que vous avez indiqués, prête à être utilisée immédiatement dans la visionneuse d'artéfacts.
Généré par Claude
C'est fait ! J'ai créé votre explorateur d’anatomie avec les SVG de qualité médicale, le ciblage UBERON approprié et le système de conception restreint 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 une structure pour afficher son nom, son ID UBERON et sa fonction principale. Cliquez pour obtenir des informations plus détaillées : pertinence clinique, structures associées et faits marquants. J'ai rempli environ 40 structures avec du contenu éducatif.
3. Filtres système
Les onglets vous permettent d'isoler un système corporel individuel. Lorsque vous sélectionnez « Squelette », les structures non squelettiques s'estompent tandis que les os concernés sont mis en évidence et deviennent interactifs.
4. Conception sonore
Un retour audio subtil lors du survol et de la sélection. Des clics et des sons doux qui semblent physiques, pas numériques. Désactivé par défaut ; basculez dans le coin.
5. Détails de conception
Un fond beige chaud, des accents terre cuite et ardoise, pas de couleurs vives. Playfair Display pour les titres, Inter pour le texte, IBM Plex Mono pour les données. Espace blanc généreux, pas d'encombrement visuel.
4
Requêtes de suivi
Continuez à converser avec Claude pour affiner, développer ou explorer plus en détail.
Ajouter des autotests
Des fonctionnalités supplémentaires comme un mode d’apprentissage actif qui renforce la rétention.
Ajoutez un mode quiz où l'on me montre une description ou une fonction et où je dois identifier la structure correcte. Suivre ma précision et montrer les systèmes avec lesquels j’ai des problèmes.
Ajouter des fonctionnalités avancées
Demandez à Claude d'étendre les détails anatomiques si vous avez besoin de plus de granularité.
Ajoutez des systèmes corporels au diagramme. Ils permettent également au cerveau de voir plus de détails.
Générer des supports complémentaires à partir de la même session
Continuez à apprendre à partir de différents supports. L'application et les supports d’étude peuvent partager une même source de vérité.
À partir des données anatomiques de cet explorateur, générez un guide d'étude PDF imprimable avec les mêmes structures organisées par système ainsi qu'un ensemble de fiches compatibles avec Anki, prêtes à être importées. Veillez à ce que la terminologie et les corrélations cliniques soient cohérentes avec celles de l’application.
5
Astuces, conseils et résolution des erreurs
Coller les erreurs directement dans le chat
En cas de panne, envoyez le message d'erreur ou décrivez le problème. Claude peut retracer la logique et dépanner pour identifier le problème, vous n'avez donc pas besoin de le déboguer vous-même.
Les longues sessions s'accumulent plutôt que de dériver
Opus 4.5 respecte vos décisions de conception et votre contexte technique lors de conversations prolongées. Votre dixième itération se souvient de vos exigences esthétiques d’origine, de vos contraintes techniques et de toutes les améliorations apportées entre les deux. Vous pouvez planifier des sessions de création prolongées plutôt que d’essayer de tout spécifier dès le départ.
Inclure dès le départ le dépannage connu
Si vous avez déjà eu des expériences exceptionnelles, lors de sessions précédentes de Claude ou lors de vos propres débogages, mentionnez-les dans votre requête. Cet exemple montre que les SVG des anatomogrammes sont invisibles par défaut et que les ID UBERON sont supprimés lors de l'optimisation. Sans ces notes, Claude écrit du code de travail qui produit un écran vierge, puis effectue des itérations de diagnostic.
Ajoutez des sources pour vous l'approprier
La fenêtre de contexte d’Opus 4.5 gère des supports importants. Si vous avez un chapitre de manuel, des notes de cours ou un programme que vous souhaitez que l'application traite, collez le tout au lieu de faire un résumé. Claude extrait les structures et hiérarchise le contenu à partir de sources complètes plus efficacement qu'à partir de votre version condensée.
Prêt·e à tester par vous-même ?
Choisissez un sujet que vous avez toujours voulu comprendre. Claude crée l'outil ; vous apprenez.
