1. 描述任务
Claude 可以构建交互式工具，让您直接与材料互动，无论是解剖学、化学图表还是历史时间线。您提示的精确程度决定了结果的精细程度。
描述您想要的体验：您在学习什么、您想如何与之互动、数据来自哪里，以及您的审美标准。把您的提示当作一份设计简报。
您不需要一开始就这么具体。先从您想要的体验开始，然后在发现构建过程中遇到的问题时，再加入像 SVG 填充和 UBERON 说明这样的技术约束。
使用 npm 上的 @ebi-gene-expression-group/anatomogram 构建一个交互式解剖探索器。使用 homo_sapiens.male.svg 和 homo_sapiens.brain.svg。不要自己生成图表——这些 SVG 已经包含了嵌入 UBERON 本体 ID 的精确插图。将 SVG 直接嵌入到 HTML 中——无需发起 fetch 请求。
关键点： 这些 SVG 默认将所有元素样式设置为 fill:none;stroke:none，使其不可见。加载后，在应用任何其他样式之前先应用默认的填充和描边。优化时还要设置 cleanupIds: false（UBERON ID 是您定位元素的方式），并在 JavaScript 中移除 visibility:hidden 属性。
设计要求： 克制而精致。不要发光效果，不要表情符号，不要霓虹色。暖色优于冷色。标题用衬线字体，正文用无衬线字体，数据用等宽字体。想象一下高端医学参考资料，而不是通用的 AI 输出。
添加带标签的信息面板、具有物理触感的声音反馈，以及足够丰富、真正可供学习的内容。从一开始就构建到旗舰级品质——我会不断迭代直到它变得卓越非凡。
2. 为 Claude 提供上下文
上面的提示提供了自己的上下文：数据来源（带有 UBERON ID 的 anatomogram 包）、交互模型（悬停、点击、带标签的身体系统），以及设计标准（高端医学参考资料、暖色调、衬线标题）。Claude 会严格按照您确定的内容进行构建，因此每一个选择都会体现在结果中。
必需的上下文
Artifacts 是 Claude 在对话旁边的专用窗口中创建的独立交互式输出。当您要求像这个解剖探索器这样的交互式工具时，Claude 通常会自动将其构建为一个 artifact，渲染完成后即可使用。
可选的上下文
对于复杂的多组件应用，请开启扩展思考（在新标签页中打开），以便 Claude 在构建之前规划架构。
3. Claude 创建的内容
Claude 构建了一个功能齐全的 React 应用，具有您所指定的视觉设计、交互模式和教育内容，可在 artifact 查看器中立即使用。
完成！我已经用医学级的 SVG、正确的 UBERON 定位，以及您描述的克制设计系统，构建好了您的解剖探索器。
包含内容：
1. 双视图探索器
在全身视图和大脑视图之间切换。全身视图按颜色组织各个系统（骨骼、肌肉、神经、循环、呼吸、消化），并具有正确的解剖定位。
2. 交互元素
悬停在任何结构上可查看其名称、UBERON ID 和主要功能。点击可获取更深入的信息：临床相关性、相关结构和快速事实。我已经为大约 40 个结构填充了适合学习的内容。
3. 系统筛选器
标签让您可以单独查看各个身体系统。当您选择"骨骼"时，非骨骼结构会淡化，而相关骨骼会突出显示并变为可交互。
4. 声音设计
悬停和选择时有细微的音频反馈。柔和的点击声和音调，感觉像是物理的，而非数字化的。默认静音；可在角落切换。
5. 设计细节
暖米色背景，赭陶色和灰蓝色点缀，没有刺眼的颜色。标题使用 Playfair Display，正文使用 Inter，数据使用 IBM Plex Mono。留白充足，没有视觉杂乱。
4. 后续提示
继续与 Claude 对话，以完善、扩展或进一步探索。
添加自我测试
叠加更多功能，比如一个能强化记忆的主动学习模式。
添加一个测验模式，向我展示一个描述或功能，让我识别出正确的结构。追踪我的准确率，并显示我在哪些系统上有困难。
添加高级功能
请 Claude 在您想要更多细节的地方扩展解剖细节。
在图表中添加更多身体系统。同时让大脑视图更详细一些。
从同一会话生成配套材料
继续用不同的媒介学习。应用和学习材料可以共享同一个真实来源。
根据这个探索器中的解剖数据，生成一份可打印的 PDF 学习指南，按系统组织相同的结构，再加上一套可导入 Anki 的闪卡。请保持术语和临床关联与应用中的内容一致。
5. 技巧、提示和故障排除
直接将错误粘贴到聊天中
当出现问题时，比如某个结构无法高亮显示，或某个系统标签停止筛选，请粘贴错误消息或描述您看到的情况。Claude 可以追踪逻辑并找出问题所在，这样您就不需要自己调试代码了。
长会话会累积而非漂移
Opus 4.5 在长时间的对话中保持您的设计决策和技术上下文。您的第十次迭代仍然记得您最初的审美要求、技术约束，以及其间的每一次改进。您可以规划持续的构建会话，而不必试图一开始就把所有内容都说清楚。
提前说明已知的故障排除事项
如果您之前遇到过一些怪异问题——无论是来自之前的 Claude 会话还是您自己的调试——请在提示中提及它们。这个示例指出，anatomogram 的 SVG 默认渲染为不可见，并且 UBERON ID 在优化过程中会被剥离。如果没有这些说明，Claude 会写出能运行但产生空白屏幕的代码，然后花费多次迭代来诊断问题。
在学习之前先抽查面板内容
anatomogram 包提供了精确的插图，但信息面板中的文字——每个结构的功能、临床相关性和快速事实——是由 Claude 编写的。在依赖这个探索器作为学习工具之前，请点击浏览几个结构，并将面板所说的内容与您的教科书或课堂笔记进行比对。标记出任何不匹配的内容，并请 Claude 进行更正。
添加资料来源，让它成为您自己的工具
Opus 4.5 的上下文窗口可以处理大量材料。如果您有一章教科书内容、课堂笔记或课程大纲想让应用涵盖，请粘贴整份内容，而不是进行总结。Claude 从完整的资料来源中提取结构和确定内容优先级，比从您精简后的版本中效果更好。
6. 准备好自己试试了吗？
选一个您一直想弄懂的东西。Claude 构建工具；您来学习。