대화형 다이어그램 도구 구축
신체 시스템부터 분자 구조에 이르기까지, 상세한 프롬프트를 지정한 깊이와 디자인을 갖춘 실행되는 참조 앱으로 전환하세요.
- AuthorAnthropic
- Category개인
- ModelOpus 4.5
- Features
- ShareCopy link
1
작업 설명
Claude는 해부학, 화학 다이어그램, 역사적 타임라인과 같은 자료를 직접 활용할 수 있는 대화형 도구를 구축할 수 있습니다. 프롬프트의 정확성이 결과의 정교함을 결정합니다.
원하는 경험을 설명하세요. 여기에는 배우고 있는 내용, 원하는 상호작용 방식, 데이터의 출처, 미적 기준이 포함됩니다. 프롬프트를 디자인 요약이라고 생각하세요.
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 속성을 제거해.
디자인 요구 사항: 절제 및 정교함. 발광, 이모티콘, 네온 금지. 차가운 색상보다 따뜻한 색상 선호. 제목 serif, 본문 sans-serif 본문, 데이터 monospace 일반적인 AI 결과물이 아닌 프리미엄 의료 참조 자료 고려.
탭 기반 정보 패널, 실제 느낌의 사운드 피드백, 그리고 실제로 학습 가능한 풍부한 콘텐츠 추가. 처음부터 플래그십 품질을 유지하고, 탁월한 결과가 될 때까지 반복해서 진행할 거야.
2
Give Claude context
대화형 학습 도구를 만들려면, 학습 내용과 상호작용 방법을 설명한 후, 올바른 성능과 기능이 활성화되었는지 확인하세요.
Required context
Claude가 아티팩트를 생성하도록 설정에서 파일 생성이 활성화되어 있는지 확인하세요.
No items found.
Optional context
복잡한 멀티 컴포넌트 앱의 경우, Claude가 빌드하기 전에 아키텍처 계획을 세울 수 있도록 확장된 사고를 켜세요.
확장된 사고
3
What Claude creates
Claude는 시각적 디자인, 상호작용 패턴, 교육 콘텐츠를 바탕으로 완전한 기능을 갖춘 React 응용 프로그램을 구축하고, 아티팩트 뷰어에서 즉시 사용할 수 있습니다.
From Claude
끝났습니다! 의료용 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 세션이나 디버깅 작업에서 단점을 발견했다면, 프롬프트에서 언급하세요. 이 예시는 해부학 SVG가 기본적으로 보이지 않고, 최적화 과정에서 UBERON ID가 제거된다는 것을 보여줍니다. 이러한 메모가 없으면, Claude는 빈 화면을 생성하는 작업 코드를 작성하고, 진단을 반복적으로 수행합니다.
소스를 추가하여 자신의 것으로 만들기
Opus 4.5의 컨텍스트 창은 상당한 자료를 처리합니다. 교과서 챕터, 강의 노트, 강의 계획서를 앱에 포함시키고 싶다면, 요약이 아닌 전체 내용을 붙여 넣으세요. Claude는 요약된 버전보다 완전한 소스에서 더 효과적으로 구조를 추출하고 콘텐츠의 우선순위를 지정합니다.
직접 시도해 볼 준비가 되셨나요?
이해하고 싶었던 것을 선택하세요. Claude가 도구를 구축하고, 사용자가 배우는 것입니다.
