用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/bear2u/my-skills --skill web-to-markdown命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | web-to-markdown |
| description | 웹페이지 URL을 입력받아 마크다운 형태로 변환하여 저장합니다. 웹 문서를 로컬 마크다운 파일로 아카이빙하거나 정리할 때 유용합니다. |
웹페이지의 URL을 입력받아 해당 페이지의 내용을 마크다운 형식으로 변환하여 저장하는 스킬입니다.
다음과 같은 요청이 있을 때 이 스킬을 사용하세요:
사용자에게 변환하고자 하는 웹페이지의 URL을 입력받습니다.
Example:
Claude: 변환하실 웹페이지의 URL을 입력해주세요.
User: https://example.com/article
Important:
http:// 또는 https://로 시작해야 합니다사용자의 요청을 분석하여 적절한 변환 모드를 선택합니다.
변환 모드:
자동 감지 키워드:
Example 1 (AI 최적화):
User: https://example.com/article AI가 읽기 좋게 변환해줘
Claude: AI 최적화 모드로 변환하겠습니다. 구조화된 포맷과 메타데이터를 추가합니다.
Example 2 (듀얼 모드):
User: https://example.com/article 원본이랑 AI 최적화 버전 둘 다 만들어줘
Claude: 듀얼 모드로 변환하겠습니다.
- 원본 마크다운 (article.md)
- AI 최적화 버전 (article.context.md)
2개 파일을 생성합니다.
사용자에게 저장 위치와 파일명을 확인합니다.
Example:
Claude: 마크다운 파일을 어디에 저장할까요?
옵션:
1. 현재 디렉토리 (./)
2. 특정 경로 지정
3. 파일로 저장하지 않고 내용만 보기
파일명은? (기본값: webpage.md)
User: 현재 디렉토리에 article.md로 저장해줘
WebFetch 도구를 사용하여 웹페이지를 가져오고 마크다운으로 변환합니다.
url = "https://example.com/article"
prompt = "웹페이지의 전체 내용을 마크다운 형식으로 변환해주세요. 제목, 본문, 링크, 이미지 등 모든 요소를 포함하되, 불필요한 네비게이션이나 광고는 제외해주세요."
url = "https://example.com/article"
prompt = """이 웹페이지를 AI 에이전트가 컨텍스트로 활용하기 최적화된 형태로 변환해주세요:
**필수 구조:**
1. **프론트매터 (YAML 형식)**
---
title: "페이지 제목"
url: "원본 URL"
author: "작성자 (있는 경우)"
date: "발행일 (있는 경우)"
word_count: 대략적인 단어 수
topics: ["주제1", "주제2", "주제3"]
summary: |
이 글의 핵심을 3-5줄로 요약
AI가 빠르게 파악할 수 있도록
main_points:
- 핵심 포인트 1
- 핵심 포인트 2
- 핵심 포인트 3
content_type: "tutorial|guide|article|documentation|news|blog"
difficulty: "beginner|intermediate|advanced"
---
2. **본문 구조**
# [원본 제목]
## 핵심 요약
[3-5줄로 이 글이 무엇을 다루는지 명확하게]
## 주요 내용
[명확한 계층 구조로 섹션 구분, H2/H3 사용]
### 섹션 1
[내용]
### 섹션 2
[내용]
## 핵심 인사이트
- 인사이트 1
- 인사이트 2
- 인사이트 3
## 실용적 적용
[이 내용을 어떻게 활용할 수 있는지]
## 관련 리소스
[링크가 있다면 설명과 함께]
## 결론
[마무리 요약]
**변환 규칙:**
- 광고, 네비게이션, 푸터, 사이드바 완전 제거
- 코드 블록은 언어 명시 (```python, ```javascript 등)
- 링크는 [설명](URL) 형식으로 명확하게
- 이미지는  형식으로
- 불필요한 수식어 제거, 간결하게
- 리스트는 명확한 bullet points로
- 중요한 개념은 **굵게** 강조
**최종 목표:**
AI가 이 문서를 읽고 핵심을 3초 안에 파악하고,
사용자의 질문에 정확하게 답변할 수 있도록 최적화
"""
Important:
변환된 마크다운을 파일로 저장합니다.
# Write 도구를 사용하여 파일 저장
Write {
file_path: "/Users/symverse/workspaces-skill-test/my-skills-hub/article.md"
content: "[변환된 마크다운 내용]"
}
AI 최적화 모드 파일명 권장:
article.mdarticle-ai-optimized.md 또는 article.context.md저장된 파일의 경로와 간단한 통계를 사용자에게 보여줍니다.
✅ 웹페이지를 마크다운으로 변환했습니다!
📄 파일: article.md
📍 경로: /Users/symverse/workspaces-skill-test/my-skills-hub/article.md
📊 크기: 약 1,234 글자
[View file](computer:///Users/symverse/workspaces-skill-test/my-skills-hub/article.md)
듀얼 모드는 원본 마크다운과 AI 최적화 버전을 모두 생성합니다. 사람이 읽을 자료와 AI가 처리할 자료를 동시에 확보할 수 있습니다.
User: https://react.dev/reference/react/useState 원본이랑 AI 최적화 버전 둘 다 만들어줘
Claude: 듀얼 모드로 변환하겠습니다.
기본 파일명은? (기본: webpage)
일반 모드 프롬프트로 WebFetch를 사용하여 원본 마크다운을 생성합니다.
url = "https://react.dev/reference/react/useState"
prompt = "웹페이지의 전체 내용을 마크다운 형식으로 변환해주세요. 제목, 본문, 링크, 이미지 등 모든 요소를 포함하되, 불필요한 네비게이션이나 광고는 제외해주세요."
원본 파일 저장:
Write {
file_path: "/path/to/useState.md"
content: "[원본 마크다운 내용]"
}
CRITICAL: 같은 URL에 대해 AI 최적화 프롬프트로 다시 WebFetch를 호출합니다.
url = "https://react.dev/reference/react/useState" # 동일한 URL
prompt = """이 웹페이지를 AI 에이전트가 컨텍스트로 활용하기 최적화된 형태로 변환해주세요:
**필수 구조:**
1. **프론트매터 (YAML 형식)**
---
title: "페이지 제목"
url: "원본 URL"
author: "작성자 (있는 경우)"
date: "발행일 (있는 경우)"
word_count: 대략적인 단어 수
topics: ["주제1", "주제2", "주제3"]
summary: |
이 글의 핵심을 3-5줄로 요약
AI가 빠르게 파악할 수 있도록
main_points:
- 핵심 포인트 1
- 핵심 포인트 2
- 핵심 포인트 3
content_type: "tutorial|guide|article|documentation|news|blog"
difficulty: "beginner|intermediate|advanced"
---
2. **본문 구조**
# [원본 제목]
## 핵심 요약
[3-5줄로 이 글이 무엇을 다루는지 명확하게]
## 주요 내용
[명확한 계층 구조로 섹션 구분, H2/H3 사용]
### 섹션 1
[내용]
### 섹션 2
[내용]
## 핵심 인사이트
- 인사이트 1
- 인사이트 2
- 인사이트 3
## 실용적 적용
[이 내용을 어떻게 활용할 수 있는지]
## 관련 리소스
[링크가 있다면 설명과 함께]
## 결론
[마무리 요약]
**변환 규칙:**
- 광고, 네비게이션, 푸터, 사이드바 완전 제거
- 코드 블록은 언어 명시 (```python, ```javascript 등)
- 링크는 [설명](URL) 형식으로 명확하게
- 이미지는  형식으로
- 불필요한 수식어 제거, 간결하게
- 리스트는 명확한 bullet points로
- 중요한 개념은 **굵게** 강조
**최종 목표:**
AI가 이 문서를 읽고 핵심을 3초 안에 파악하고,
사용자의 질문에 정확하게 답변할 수 있도록 최적화
"""
AI 최적화 파일 저장:
Write {
file_path: "/path/to/useState.context.md"
content: "[AI 최적화 마크다운 내용]"
}
2개 파일 생성 결과를 사용자에게 보여줍니다.
✅ 듀얼 모드 변환 완료! 2개 파일이 생성되었습니다.
📄 원본 마크다운:
- 파일: useState.md
- 경로: /path/to/useState.md
- 크기: 약 3,500 글자
- 용도: 사람이 읽기 좋은 원본 보존
[View file](computer:///path/to/useState.md)
📄 AI 최적화 버전:
- 파일: useState.context.md
- 경로: /path/to/useState.context.md
- 크기: 약 2,100 글자 (40% 절감)
- 용도: AI 컨텍스트로 활용
[View file](computer:///path/to/useState.context.md)
💡 팁:
- 원본(.md)은 사람이 읽을 때 사용
- AI 최적화(.context.md)는 RAG 시스템이나 AI 에이전트 컨텍스트로 사용
패턴 1: 확장자 구분 (권장)
article.mdarticle.context.md패턴 2: 접미사 구분
article.mdarticle-ai-optimized.md패턴 3: 폴더 구분
/docs
├── original/
│ └── article.md
└── optimized/
└── article.md
시나리오 1: 기술 문서 아카이빙
User: 이 React 문서들 원본이랑 AI 최적화 버전 둘 다 만들어줘
- https://react.dev/reference/react/useState
- https://react.dev/reference/react/useEffect
Claude: 듀얼 모드로 4개 파일 생성합니다.
- useState.md (원본)
- useState.context.md (AI 최적화)
- useEffect.md (원본)
- useEffect.context.md (AI 최적화)
시나리오 2: 블로그 글 백업
User: 내 블로그 글을 백업하는데 원본도 저장하고 AI가 읽을 수 있는 버전도 만들어줘
Claude: 듀얼 모드로 변환하겠습니다.
- 원본: 사람이 다시 읽을 때
- AI 최적화: 나중에 AI에게 질문할 때
시나리오 3: 학습 자료 구축
User: 이 튜토리얼들을 둘 다 버전으로 저장해줘
Claude:
study-materials/
├── original/ # 사람이 학습용
│ ├── intro.md
│ └── advanced.md
└── ai-optimized/ # AI 질문 답변용
├── intro.context.md
└── advanced.context.md
여러 웹페이지를 한 번에 변환할 수 있습니다.
Example:
User: 이 URL들을 전부 마크다운으로 저장해줘
- https://example.com/article1
- https://example.com/article2
- https://example.com/article3
Claude: 3개의 웹페이지를 변환하겠습니다. 파일명은 자동으로 생성할까요, 아니면 각각 지정하시겠어요?
User: 자동으로
Claude: [각 URL을 순차적으로 변환하여 article1.md, article2.md, article3.md로 저장]
웹페이지의 특정 부분만 추출할 수 있습니다.
Example:
User: https://example.com/docs 에서 "Installation" 섹션만 마크다운으로 저장해줘
Claude: [WebFetch 프롬프트에 "Installation 섹션만 추출"을 명시하여 해당 부분만 변환]
변환 시 원하는 마크다운 스타일을 지정할 수 있습니다.
Example:
User: 이 블로그 글을 마크다운으로 변환하되, 모든 제목을 H2(##)로 시작하고 코드 블록은 syntax highlighting 포함해줘
Claude: [WebFetch 프롬프트에 포맷 요구사항을 명시]
User: htp://wrong-url
Claude: ❌ 올바르지 않은 URL입니다. http:// 또는 https://로 시작하는 전체 URL을 입력해주세요.
Claude: ❌ 해당 웹페이지에 접근할 수 없습니다.
- 페이지가 삭제되었거나
- 접근 권한이 필요하거나
- 네트워크 오류가 발생했을 수 있습니다.
Claude: ❌ 파일을 저장할 수 없습니다.
- 경로가 올바른지 확인해주세요
- 쓰기 권한이 있는지 확인해주세요
- 디렉토리가 존재하는지 확인해주세요
User: https://docs.python.org/3/tutorial/index.html 이거 마크다운으로 저장해줘
Claude: 파이썬 튜토리얼 페이지를 마크다운으로 변환하겠습니다.
파일명을 어떻게 할까요? (기본: webpage.md)
User: python-tutorial.md
Claude: [WebFetch로 페이지 가져오기]
Claude: [마크다운으로 변환]
Claude: [파일 저장]
✅ 웹페이지를 마크다운으로 변환했습니다!
📄 파일: python-tutorial.md
📍 경로: /Users/symverse/workspaces-skill-test/my-skills-hub/python-tutorial.md
📊 크기: 약 15,234 글자
[View file](computer:///Users/symverse/workspaces-skill-test/my-skills-hub/python-tutorial.md)
User: 이 블로그 글들을 전부 마크다운으로 저장해서 아카이브 폴더에 넣어줘
- https://blog.example.com/post1
- https://blog.example.com/post2
Claude: 2개의 블로그 글을 archive 폴더에 저장하겠습니다.
[디렉토리 생성]
[각 URL을 순차적으로 변환]
✅ 2개의 웹페이지를 변환했습니다!
📁 archive/
├── post1.md
└── post2.md
User: https://github.com/anthropics/claude-code 이 페이지 내용을 마크다운으로 보여줘만 하고 저장은 하지마
Claude: [WebFetch로 페이지 가져오기]
다음은 해당 페이지의 마크다운 변환 내용입니다:
---
# Claude Code
Claude Code is an official CLI...
[전체 내용 출력]
---
저장하지 않고 내용만 보여드렸습니다.
WebFetch는 다음 요소를 마크다운으로 변환합니다:
불필요한 요소는 제외됩니다:
.mdWebFetch는 정적 HTML만 가져오므로 React, Vue, Next.js 등 JavaScript로 렌더링되는 페이지는 빈 내용이 반환될 수 있습니다.
증상:
WebFetch로 가져온 내용이 비어있거나 불충분하면, AskUserQuestion을 사용하여 사용자에게 Playwright 사용 여부를 물어봅니다.
# WebFetch로 가져온 마크다운 내용 확인
if len(markdown_content.strip()) < 500: # 너무 짧으면
# 동적 콘텐츠일 가능성 높음
AskUserQuestion 사용:
AskUserQuestion {
questions: [
{
question: "이 페이지는 동적 콘텐츠(JavaScript)를 사용하는 것 같습니다. Playwright를 실행해서 브라우저로 데이터를 가져올까요?",
header: "Playwright",
multiSelect: false,
options: [
{
label: "Yes, Playwright로 재시도",
description: "Chromium 브라우저를 실행해서 JavaScript 렌더링 후 콘텐츠 가져오기 (느림, 정확함)"
},
{
label: "No, 현재 내용만 저장",
description: "WebFetch 결과만 저장 (빠름, 불완전할 수 있음)"
}
]
}
]
}
사전 준비: MCP Playwright 서버가 설치되어 있어야 합니다.
# 최초 1회만 설치
npx @modelcontextprotocol/server-playwright
스킬에서 사용:
// 1. 페이지 이동
mcp__playwright__navigate({
url: "https://example.com"
})
// 2. JavaScript 렌더링 대기
mcp__playwright__waitForLoadState({
state: "networkidle"
})
// 3. HTML 콘텐츠 가져오기
const htmlContent = mcp__playwright__getContent()
// 4. 마크다운으로 변환 (WebFetch 프롬프트 재사용)
// htmlContent를 마크다운으로 변환하는 로직
MCP Playwright가 없는 경우 Node.js로 직접 실행:
# Playwright 스크립트 실행
node << 'EOF'
const playwright = require('playwright');
(async () => {
const browser = await playwright.chromium.launch({ headless: true });
const page = await browser.newPage();
console.log('⏳ 페이지 로딩 중...');
await page.goto('https://example.com', { waitUntil: 'networkidle' });
console.log('⏳ JavaScript 렌더링 대기 중...');
await page.waitForTimeout(3000); // 3초 대기
const content = await page.content();
console.log(content);
await browser.close();
})();
EOF
출력을 파일로 저장:
# HTML을 임시 파일로 저장
node playwright-script.js > temp.html
# 이제 이 HTML을 마크다운으로 변환
# (WebFetch 대신 직접 변환 로직 사용)
Playwright로 가져온 HTML을 마크다운으로 변환합니다.
Option A: WebFetch 프롬프트 재사용
Playwright로 가져온 전체 HTML을 WebFetch 프롬프트에 넣어 마크다운으로 변환합니다.
Option B: 직접 파싱
HTML → 마크다운 변환 라이브러리 사용 (예: turndown, html-to-markdown)
1. WebFetch로 시도 (빠름)
↓
2. 결과 검증 (내용이 충분한가?)
↓ NO
3. AskUserQuestion (Playwright 사용할까요?)
↓ YES
4. Playwright로 재시도
├─ MCP Playwright (권장) 또는
└─ Node Playwright (대안)
↓
5. 마크다운 변환 및 저장
| 항목 | MCP Playwright ⭐ | Node Playwright |
|---|---|---|
| 설치 | MCP 서버 설치 필요 | npm install playwright |
| 호출 방식 | MCP 도구 호출 | Bash 명령어 실행 |
| 세션 관리 | 자동 | 수동 (스크립트 작성) |
| 에러 핸들링 | 깔끔함 | 복잡함 |
| Claude Code 통합 | 네이티브 지원 | 간접 실행 |
| 추천도 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
시나리오: React 공식 문서 변환
User: https://react.dev/reference/react/useState 마크다운으로 변환해줘
Claude: [WebFetch 시도]
Claude: ⚠️ 이 페이지는 JavaScript로 렌더링되는 것 같습니다.
내용이 거의 비어있네요.
[AskUserQuestion 호출]
User: Yes, Playwright로 재시도
Claude: ⏳ Playwright로 페이지 로딩 중...
Claude: ✅ JavaScript 렌더링 완료
Claude: ✅ 마크다운 변환 완료
📄 파일: useState.md
📍 경로: /path/to/useState.md
📊 크기: 약 5,234 글자 (전체 콘텐츠 포함)
고급 사용자를 위해 --auto-playwright 플래그를 지원할 수 있습니다:
User: https://react.dev/reference/react/useState 마크다운으로 변환해줘 (자동으로 Playwright 사용해도 돼)
Claude: [WebFetch 시도]
Claude: [자동으로 Playwright 폴백]
Claude: ✅ 마크다운 변환 완료