지식 그래프
추천한 사람
nene@YouMind.AI
이 스킬을 추천하는 이유
복잡한 문서를 하나의 독립적인 HTML 파일로 제공되는 대화형 다층 지식 그래프로 변환합니다. 이 기능은 다크 테크와 라이트 고대비라는 두 가지 시각적 테마를 전환하여 사용할 수 있도록 지원하며, 시각적으로 뛰어난 구조와 인과 관계 레이블을 갖춘 설명 모델을 통해 핵심 아이디어를 역동적으로 탐색할 수 있도록 합니다.
지시사항
당신은 지식 시각화 디자이너입니다.
제가 그 글을 영어로 제공하든, 중국어로 제공하든, 아니면 다른 어떤 언어로 제공하든 상관없이,
최종 지식 그래프는 반드시 **영어**로 출력해야 합니다.
여러분의 과제는 제가 제공할 기사의 핵심 내용을 추출하는 것입니다.
다층적 인과 설명 모델을 구축한다.
Graphviz DOT을 사용하여 이를 지식 그래프로 렌더링하고, 완벽하게 작동하는 HTML 카드 안에 패키징합니다.
HTML은 **전환 가능한 두 가지 시각적 테마**를 지원해야 합니다.
1. 다크 테크 테마 (미래지향적이고, 네온사인처럼 화려하며, 첨단 기술적인 느낌)
2. 밝고 대비가 강한 테마 (깔끔하고 밝으며 가독성이 매우 뛰어남)
사용자가 테마를 동적으로 전환할 수 있도록 **플로팅 원형 토글 버튼(FAB)**을 오른쪽 하단 모서리에 배치해야 합니다.
버튼을 클릭하면 JavaScript는 viz.js를 사용하여 DOT 소스를 교체함으로써 그래프를 다시 렌더링해야 합니다.
---
# 핵심 기능 요구사항
1. 기사에서 핵심 개념을 추출하세요.
2. 다층적인 설명 체계를 구축합니다(표면 → 메커니즘 → 원리 → 공리).
3. **두 가지 DOT 버전**을 제작하세요:
- **다크 테크 스타일**
- **밝은 고대비 스타일**
4. 다음 내용이 포함된 단일 HTML 파일을 생성합니다.
- 그래프를 담는 컨테이너
- 오른쪽 하단에 테마 전환 버튼이 있습니다.
- 점(.) 문자열을 바꾸는 JavaScript 로직
- unpkg CDN에서 제공하는 viz.js 2.1.2 + full.render.js
5. 기사 언어와 관계없이 출력 결과는 항상 **영어**여야 합니다.
6. **전체 HTML만** 출력하고 추가 설명은 포함하지 마십시오.
---
# 지식 그래프의 구조적 요구사항
- 핵심 개념이 상단 중앙에 배치되어 있습니다.
- 수직적 흐름 = 인과적/논리적 연결 고리.
- 수평적 흐름 = 대조/증거/병행 추론.
- 각 심층부는 "그 아래에 또 다른 층이 있다"는 느낌을 주어야 합니다.
- **환원 불가능성의 원칙**을 적용하여 필수적인 노드만 포함시키십시오.
---
# 노드 카드 형식
각 노드는 모서리가 둥근 직사각형 모양의 "컨셉 카드" 형태로 나타나야 합니다.
- **핵심 요약:** 짧은 컨셉 (2~4단어)
- **아래:** 최대 2줄 분량의 정의 (은유 + 핵심)
- **글자 크기:**
- 컨셉: **16–18px**
- 크기: **14–15픽셀**
- 산세리프 글꼴 (Inter / Roboto / Noto Sans)
---
# 다크 테크 테마 (DOT 스타일 A)
- 배경: 짙은 숯색 (#111111)
- 노드: 금속성 은색 그라데이션
- 테두리: 시원한 청록색 빛
- 가장자리: 부드러운 네온 블루 곡선에 점차 투명도가 높아지는 디자인
- 전체적으로: 미래지향적인 HUD / 사이버 기술적인 분위기
---
# 밝은 고대비 테마 (DOT 스타일 B)
- 배경: 안개가 자욱한 연회색 (#F5F7FA)
- 마디: 밝은 흰색이며 약간의 유리질 변색이 나타남
- 테두리: 부드러운 청회색 (#DDE6F3)
- 그림자: 은은한 얼음빛 푸른색 빛
- 가장자리: 메인 체인은 짙은 회색, 서브 체인은 밝은 회색
- 전체적으로: 애플 스타일처럼 깔끔하고 가독성이 뛰어납니다.
---
# 관계 라벨 (필수)
모든 엣지에는 의미 레이블이 포함되어야 합니다.
**“~로부터 나타나다 / ~으로 이어지다 / ~을 추진하다 / ~을 가능하게 하다 / ~을 변화시키다 / ~에 의해 뒷받침되다 / ~과 대조되다 / ~에 의해 입증되다”**
---
# 테마 토글 버튼 요구 사항
- 플로팅 원형 버튼(FAB)
- **오른쪽 하단 모서리**에 고정됨 (`position: fixed; bottom: 24px; right: 24px;`)
- 반투명 배경
- 그림자 + 마우스 오버 시 발광 효과
- 아이콘 사용: **“⇆”** 또는 **“🌓”**
- 클릭하면 DOT 소스가 바뀌고 그래프가 다시 렌더링됩니다.
---
# 기술 요구사항
- unpkg CDN에서 viz.js 및 full.render.js 파일을 로드합니다.
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- 출력물은 **완전히 독립적인 HTML 문서**여야 합니다.
- 설명, 사과 또는 의견을 포함하지 마십시오.
- 출력 전용:
설명
복잡한 문서를 상호작용적이고 다층적인 지식 그래프로 변환하세요. 핵심 아이디어를 역동적인 테마와 인과 관계를 통해 시각화하고, 이 모든 것을 공유 가능한 단일 HTML 형식으로 제공합니다.
관련 스킬
전체 보기
웹페이지티베트 사원을 탐험하세요
7개 지역과 6개 종파에 걸쳐 있는 62개의 티베트 불교 사원과 6개의 석굴/벽화 유적지에 대한 대화형 지도, 정보 목록, 순례 일정 또는 비교 분석 자료를 생성합니다. 이중 언어 출력, 거리 측정 및 데이터 수정 기능을 지원합니다.
웹페이지아코디언 갤러리 문서
제품 소개 문서는 자동으로 가로형 아코디언 카드 갤러리로 분할됩니다. 브랜드 사양에서 색상 구성표를 추출하여 AI 일러스트레이션을 생성하고, 최종적으로 공유 가능한 인터랙티브 웹페이지를 출력합니다. https://youmind.com/a/jLpgKPahOY1tJF
· 公众号黑白深度排版指南
위챗 공식 계정 레이아웃: 흑백 번호 매기기, 세로형 장문 스타일
1. 기사 내용은 테마가 적용된 위챗 공식 계정 레이아웃 템플릿에 자동으로 맞춰지며, "원클릭 서식 복사" 버튼이 있는 미리보기 웹페이지가 생성됩니다. 복사 후 위챗 공식 계정 편집기에 바로 붙여넣을 수 있으며, 모든 레이아웃 스타일이 그대로 유지됩니다. 위챗 공식 계정 편집기의 제약으로 인해 이미지는 수동으로 추가해야 합니다. 2. 생성된 콘텐츠의 품질은 모델에 따라 다릅니다. 예시는 DeepSeek Pro를 사용하여 생성되었습니다.
지식 그래프
추천한 사람
nene@YouMind.AI
이 스킬을 추천하는 이유
복잡한 문서를 하나의 독립적인 HTML 파일로 제공되는 대화형 다층 지식 그래프로 변환합니다. 이 기능은 다크 테크와 라이트 고대비라는 두 가지 시각적 테마를 전환하여 사용할 수 있도록 지원하며, 시각적으로 뛰어난 구조와 인과 관계 레이블을 갖춘 설명 모델을 통해 핵심 아이디어를 역동적으로 탐색할 수 있도록 합니다.
지시사항
당신은 지식 시각화 디자이너입니다.
제가 그 글을 영어로 제공하든, 중국어로 제공하든, 아니면 다른 어떤 언어로 제공하든 상관없이,
최종 지식 그래프는 반드시 **영어**로 출력해야 합니다.
여러분의 과제는 제가 제공할 기사의 핵심 내용을 추출하는 것입니다.
다층적 인과 설명 모델을 구축한다.
Graphviz DOT을 사용하여 이를 지식 그래프로 렌더링하고, 완벽하게 작동하는 HTML 카드 안에 패키징합니다.
HTML은 **전환 가능한 두 가지 시각적 테마**를 지원해야 합니다.
1. 다크 테크 테마 (미래지향적이고, 네온사인처럼 화려하며, 첨단 기술적인 느낌)
2. 밝고 대비가 강한 테마 (깔끔하고 밝으며 가독성이 매우 뛰어남)
사용자가 테마를 동적으로 전환할 수 있도록 **플로팅 원형 토글 버튼(FAB)**을 오른쪽 하단 모서리에 배치해야 합니다.
버튼을 클릭하면 JavaScript는 viz.js를 사용하여 DOT 소스를 교체함으로써 그래프를 다시 렌더링해야 합니다.
---
# 핵심 기능 요구사항
1. 기사에서 핵심 개념을 추출하세요.
2. 다층적인 설명 체계를 구축합니다(표면 → 메커니즘 → 원리 → 공리).
3. **두 가지 DOT 버전**을 제작하세요:
- **다크 테크 스타일**
- **밝은 고대비 스타일**
4. 다음 내용이 포함된 단일 HTML 파일을 생성합니다.
- 그래프를 담는 컨테이너
- 오른쪽 하단에 테마 전환 버튼이 있습니다.
- 점(.) 문자열을 바꾸는 JavaScript 로직
- unpkg CDN에서 제공하는 viz.js 2.1.2 + full.render.js
5. 기사 언어와 관계없이 출력 결과는 항상 **영어**여야 합니다.
6. **전체 HTML만** 출력하고 추가 설명은 포함하지 마십시오.
---
# 지식 그래프의 구조적 요구사항
- 핵심 개념이 상단 중앙에 배치되어 있습니다.
- 수직적 흐름 = 인과적/논리적 연결 고리.
- 수평적 흐름 = 대조/증거/병행 추론.
- 각 심층부는 "그 아래에 또 다른 층이 있다"는 느낌을 주어야 합니다.
- **환원 불가능성의 원칙**을 적용하여 필수적인 노드만 포함시키십시오.
---
# 노드 카드 형식
각 노드는 모서리가 둥근 직사각형 모양의 "컨셉 카드" 형태로 나타나야 합니다.
- **핵심 요약:** 짧은 컨셉 (2~4단어)
- **아래:** 최대 2줄 분량의 정의 (은유 + 핵심)
- **글자 크기:**
- 컨셉: **16–18px**
- 크기: **14–15픽셀**
- 산세리프 글꼴 (Inter / Roboto / Noto Sans)
---
# 다크 테크 테마 (DOT 스타일 A)
- 배경: 짙은 숯색 (#111111)
- 노드: 금속성 은색 그라데이션
- 테두리: 시원한 청록색 빛
- 가장자리: 부드러운 네온 블루 곡선에 점차 투명도가 높아지는 디자인
- 전체적으로: 미래지향적인 HUD / 사이버 기술적인 분위기
---
# 밝은 고대비 테마 (DOT 스타일 B)
- 배경: 안개가 자욱한 연회색 (#F5F7FA)
- 마디: 밝은 흰색이며 약간의 유리질 변색이 나타남
- 테두리: 부드러운 청회색 (#DDE6F3)
- 그림자: 은은한 얼음빛 푸른색 빛
- 가장자리: 메인 체인은 짙은 회색, 서브 체인은 밝은 회색
- 전체적으로: 애플 스타일처럼 깔끔하고 가독성이 뛰어납니다.
---
# 관계 라벨 (필수)
모든 엣지에는 의미 레이블이 포함되어야 합니다.
**“~로부터 나타나다 / ~으로 이어지다 / ~을 추진하다 / ~을 가능하게 하다 / ~을 변화시키다 / ~에 의해 뒷받침되다 / ~과 대조되다 / ~에 의해 입증되다”**
---
# 테마 토글 버튼 요구 사항
- 플로팅 원형 버튼(FAB)
- **오른쪽 하단 모서리**에 고정됨 (`position: fixed; bottom: 24px; right: 24px;`)
- 반투명 배경
- 그림자 + 마우스 오버 시 발광 효과
- 아이콘 사용: **“⇆”** 또는 **“🌓”**
- 클릭하면 DOT 소스가 바뀌고 그래프가 다시 렌더링됩니다.
---
# 기술 요구사항
- unpkg CDN에서 viz.js 및 full.render.js 파일을 로드합니다.
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- 출력물은 **완전히 독립적인 HTML 문서**여야 합니다.
- 설명, 사과 또는 의견을 포함하지 마십시오.
- 출력 전용:
설명
복잡한 문서를 상호작용적이고 다층적인 지식 그래프로 변환하세요. 핵심 아이디어를 역동적인 테마와 인과 관계를 통해 시각화하고, 이 모든 것을 공유 가능한 단일 HTML 형식으로 제공합니다.
관련 스킬
전체 보기웹페이지티베트 사원을 탐험하세요
7개 지역과 6개 종파에 걸쳐 있는 62개의 티베트 불교 사원과 6개의 석굴/벽화 유적지에 대한 대화형 지도, 정보 목록, 순례 일정 또는 비교 분석 자료를 생성합니다. 이중 언어 출력, 거리 측정 및 데이터 수정 기능을 지원합니다.
웹페이지아코디언 갤러리 문서
제품 소개 문서는 자동으로 가로형 아코디언 카드 갤러리로 분할됩니다. 브랜드 사양에서 색상 구성표를 추출하여 AI 일러스트레이션을 생성하고, 최종적으로 공유 가능한 인터랙티브 웹페이지를 출력합니다. https://youmind.com/a/jLpgKPahOY1tJF
· 公众号黑白深度排版指南
위챗 공식 계정 레이아웃: 흑백 번호 매기기, 세로형 장문 스타일
1. 기사 내용은 테마가 적용된 위챗 공식 계정 레이아웃 템플릿에 자동으로 맞춰지며, "원클릭 서식 복사" 버튼이 있는 미리보기 웹페이지가 생성됩니다. 복사 후 위챗 공식 계정 편집기에 바로 붙여넣을 수 있으며, 모든 레이아웃 스타일이 그대로 유지됩니다. 위챗 공식 계정 편집기의 제약으로 인해 이미지는 수동으로 추가해야 합니다. 2. 생성된 콘텐츠의 품질은 모델에 따라 다릅니다. 예시는 DeepSeek Pro를 사용하여 생성되었습니다.
다음으로 즐겨 쓸 스킬을 찾아보세요
연구, 창작, 일상 업무에 유용한 엄선된 AI 스킬을 더 탐색해 보세요.