1. タスクを説明する
Claudeは、解剖学、化学図、歴史的年表など、資料に直接取り組めるインタラクティブなツールを構築できます。プロンプトの精度が、結果の洗練度を左右します。
学びたい内容、どのように操作したいか、データの出典、そして美的基準など、求める体験を説明してください。プロンプトをデザインブリーフとして捉えてください。
最初からこれほど具体的にする必要はありません。まず求める体験から始め、ビルドがうまくいかない箇所を発見するにつれて、SVGのfillやUBERONに関する注意点のような技術的制約を織り込んでいきましょう。
npmの@ebi-gene-expression-group/anatomogramを使用して、インタラクティブな解剖学エクスプローラーを構築してください。homo_sapiens.male.svgとhomo_sapiens.brain.svgを使用します。図解は自分で生成しないでください—これらのSVGには、UBERONオントロジーIDが既に埋め込まれた正確なイラストが含まれています。SVGはHTMLに直接埋め込んでください—フェッチリクエストは不要です。
重要： これらの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は、長時間の会話全体にわたってデザイン上の決定や技術的なコンテキストを維持します。10回目の反復でも、最初の美的要件、技術的制約、そしてその間のすべての改良点を覚えています。最初にすべてを指定しようとするのではなく、継続的な構築セッションを計画できます。
既知のトラブルシューティングを事前に伝える
以前のClaudeセッションや自分自身のデバッグで、何らかの癖に遭遇したことがあれば、それをプロンプトに記載してください。この例では、anatomogramのSVGがデフォルトで見えない状態でレンダリングされること、そして最適化時にUBERON IDが削除されてしまうことを記載しています。これらの注意点がなければ、Claudeは動作するコードを書きますが、画面が真っ白になり、その後診断に何度も反復を費やすことになります。
学習に使う前にパネルをスポットチェックする
anatomogramパッケージは正確なイラストを提供しますが、情報パネル内のテキスト（各構造の機能、臨床的関連性、クイックファクト）はClaudeが書いています。このエクスプローラーを学習ツールとして信頼する前に、いくつかの構造をクリックして、パネルの記載内容を教科書や講義ノートと比較してください。一致しない箇所があれば指摘し、Claudeに修正を依頼してください。
出典を追加して自分のものにする
Opus 4.5のコンテキストウィンドウは、かなりの量の資料を処理できます。アプリに取り込みたい教科書の章、講義ノート、シラバスがある場合は、要約するのではなく、全体を貼り付けてください。Claudeは、要約版よりも完全な出典から、構造を抽出し、コンテンツの優先順位付けをより効果的に行います。
6. 自分で試してみる準備はできましたか？
理解したいと思っていたことを選んでください。Claudeがツールを構築し、あなたは学習に取り組みます。