1. Describe la tarea
Claude puede crear herramientas interactivas que te permiten interactuar directamente con el material, ya sea anatomía, diagramas de química o líneas de tiempo históricas. La precisión de tu prompt determina la sofisticación del resultado.
Describe la experiencia que quieres: qué estás aprendiendo, cómo quieres interactuar con ella, de dónde provienen los datos y cuáles son tus estándares estéticos. Piensa en tu prompt como un brief de diseño.
No necesitas empezar con tanto detalle. Comienza con la experiencia que quieres y luego incorpora restricciones técnicas, como las notas sobre el relleno de SVG y UBERON, a medida que descubras qué hace tropezar la construcción.
Crea un explorador de anatomía interactivo usando @ebi-gene-expression-group/anatomogram de npm. Usa homo_sapiens.male.svg y homo_sapiens.brain.svg. No generes los diagramas tú mismo: estos SVG contienen ilustraciones precisas con IDs de ontología UBERON ya incrustados. Incrusta los SVG directamente en el HTML, sin necesidad de solicitudes fetch.
Crítico: los SVG aplican fill:none;stroke:none a todos los elementos de forma predeterminada, lo que los hace invisibles. Después de cargarlos, aplica los rellenos y trazos predeterminados antes de cualquier otro estilo. Además, establece cleanupIds: false al optimizar (los IDs UBERON son la forma en que apuntas a los elementos) y elimina el atributo visibility:hidden en JavaScript.
Requisitos de diseño: sobrio y sofisticado. Sin brillos, sin emojis, sin neón. Colores cálidos sobre fríos. Encabezados serif, cuerpo sans-serif, monoespaciado para los datos. Piensa en una referencia médica premium, no en una salida genérica de IA.
Agrega paneles de información con pestañas, retroalimentación sonora con sensación física y contenido lo bastante rico como para aprender de verdad. Constrúyelo con calidad insignia desde el principio: iteraré hasta que sea excepcional.
2. Dale contexto a Claude
El prompt anterior proporciona su propio contexto: la fuente de datos (el paquete anatomogram con sus IDs UBERON), el modelo de interacción (pasar el cursor, hacer clic, sistemas corporales con pestañas) y el estándar de diseño (referencia médica premium, colores cálidos, encabezados serif). Claude construye exactamente a partir de lo que defines, así que cada una de esas decisiones se refleja en el resultado.
Contexto requerido
Los Artifacts son resultados interactivos e independientes que Claude crea en una ventana dedicada junto a tu conversación. Cuando solicitas una herramienta interactiva como este explorador de anatomía, Claude normalmente la crea automáticamente como un Artifact, renderizado y listo para usar.
Contexto opcional
Para aplicaciones complejas con múltiples componentes, activa Pensamiento extendido(se abre en una pestaña nueva) para que Claude pueda planificar la arquitectura antes de construir.
3. Qué crea Claude
Claude crea una aplicación de React completamente funcional con el diseño visual, los patrones de interacción y el contenido educativo que especificaste, lista para usar de inmediato en el visor de Artifacts.
¡Listo! Construí tu explorador de anatomía con los SVG de calidad médica, la segmentación UBERON adecuada y el sistema de diseño sobrio que describiste.
Qué incluye:
1. Explorador de doble vista
Alterna entre las vistas de cuerpo completo y cerebro. La vista de cuerpo completo organiza los sistemas por color (esquelético, muscular, nervioso, circulatorio, respiratorio, digestivo) con un posicionamiento anatómico adecuado.
2. Elementos interactivos
Pasa el cursor sobre cualquier estructura para ver su nombre, ID UBERON y función principal. Haz clic para obtener información más detallada: relevancia clínica, estructuras relacionadas y datos rápidos. Poblé aproximadamente 40 estructuras con contenido de calidad educativa.
3. Filtros de sistema
Las pestañas te permiten aislar sistemas corporales individuales. Cuando seleccionas "Esquelético", las estructuras no esqueléticas se atenúan mientras los huesos relevantes ganan énfasis y se vuelven interactivos.
4. Diseño de sonido
Retroalimentación sonora sutil al pasar el cursor y al seleccionar. Clics y tonos suaves que se sienten físicos, no digitales. Silenciado de forma predeterminada; puedes activarlo en la esquina.
5. Detalles de diseño
Fondo beige cálido, acentos en terracota y pizarra, sin colores estridentes. Playfair Display para los encabezados, Inter para el texto del cuerpo, IBM Plex Mono para los datos. Espacio en blanco generoso, sin desorden visual.
4. Prompts de seguimiento
Continúa la conversación con Claude para refinar, expandir o explorar más a fondo.
Agrega autoevaluación
Incorpora más funcionalidad, como un modo de aprendizaje activo que refuerce la retención.
Agrega un modo de cuestionario donde se me muestre una descripción o función y tenga que identificar la estructura correcta. Registra mi precisión y muestra en qué sistemas tengo dificultades.
Agrega funciones avanzadas
Pídele a Claude que amplíe el detalle anatómico donde quieras más granularidad.
Agrega más sistemas corporales al diagrama. Además, haz que la vista del cerebro sea más detallada.
Genera materiales complementarios a partir de la misma sesión
Continúa aprendiendo a través de diferentes medios. La aplicación y los materiales de estudio pueden compartir una misma fuente de verdad.
A partir de los datos anatómicos de este explorador, genera una guía de estudio en PDF imprimible con las mismas estructuras organizadas por sistema, además de un conjunto de tarjetas de memoria compatibles con Anki que pueda importar. Mantén la terminología y las correlaciones clínicas coherentes con lo que hay en la aplicación.
5. Trucos, consejos y solución de problemas
Pega los errores directamente en el chat
Cuando algo se rompe, como una estructura que no se resalta o una pestaña de sistema que deja de filtrar, pega el mensaje de error o describe lo que estás viendo. Claude puede rastrear la lógica e identificar el problema para que no tengas que depurar el código tú mismo.
Las sesiones largas se acumulan en lugar de perder el rumbo
Opus 4.5 mantiene tus decisiones de diseño y el contexto técnico a lo largo de conversaciones extendidas. Tu décima iteración todavía recuerda tus requisitos estéticos originales, las restricciones técnicas y cada ajuste intermedio. Puedes planificar sesiones de construcción sostenidas en lugar de intentar especificarlo todo desde el principio.
Incluye de antemano los problemas conocidos
Si antes te has topado con peculiaridades, ya sea en sesiones anteriores con Claude o en tu propia depuración, menciónalas en el prompt. Este ejemplo señala que los SVG de anatomogram se renderizan invisibles de forma predeterminada y que los IDs UBERON se eliminan durante la optimización. Sin esas notas, Claude escribe código funcional que produce una pantalla en blanco y luego dedica iteraciones a diagnosticar el problema.
Revisa los paneles antes de estudiar con ellos
El paquete anatomogram proporciona las ilustraciones precisas, pero Claude escribe el texto de los paneles de información: la función de cada estructura, su relevancia clínica y los datos rápidos. Antes de confiar en el explorador como herramienta de estudio, haz clic en algunas estructuras y compara lo que dicen los paneles con tu libro de texto o tus apuntes de clase. Señala cualquier cosa que no coincida y pídele a Claude que la corrija.
Agrega fuentes para hacerlo tuyo
La ventana de contexto de Opus 4.5 maneja material sustancial. Si tienes un capítulo de un libro de texto, apuntes de clase o un programa de estudios que quieres que la aplicación cubra, pega todo el contenido en lugar de resumirlo. Claude extrae la estructura y prioriza el contenido de manera más efectiva a partir de fuentes completas que a partir de tu versión condensada.
6. ¿Listo para probarlo tú mismo?
Elige algo que hayas querido entender. Claude construye la herramienta; tú te encargas de aprender.