web-to-markdown

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web to Markdown Converter

网页转Markdown转换器

웹페이지의 URL을 입력받아 해당 페이지의 내용을 마크다운 형식으로 변환하여 저장하는 스킬입니다.

这是一项接收网页URL并将该页面内容转换为Markdown格式保存的技能。

When to Use

使用场景

다음과 같은 요청이 있을 때 이 스킬을 사용하세요:

"웹페이지를 마크다운으로 변환해줘"
"이 URL을 마크다운으로 저장해줘"
"웹사이트 내용을 마크다운 파일로 만들어줘"
"웹페이지 아카이빙해줘"
"블로그 글을 마크다운으로 저장해줘"
"AI가 읽기 좋게 변환해줘" (AI 최적화 모드)
"컨텍스트로 사용하기 좋게 변환해줘" (AI 최적화 모드)
"원본이랑 AI 최적화 버전 둘 다 만들어줘" (듀얼 모드) ⭐ NEW

当有以下请求时，请使用此技能：

"把网页转换成Markdown"
"把这个URL保存为Markdown"
"把网站内容做成Markdown文件"
"帮我归档网页"
"把博客文章保存为Markdown"
"转换成AI易读的格式"（AI优化模式）
"转换成适合用作上下文的格式"（AI优化模式）
"同时生成原版和AI优化版"（双模式）⭐ 新增

Core Workflow

核心工作流程

Step 1: URL 입력받기

步骤1：接收URL

사용자에게 변환하고자 하는 웹페이지의 URL을 입력받습니다.

Example:

Claude: 변환하실 웹페이지의 URL을 입력해주세요.
User: https://example.com/article

Important:

URL은
```
http://
```
또는
```
https://
```
로 시작해야 합니다
HTTP URL은 자동으로 HTTPS로 업그레이드됩니다
유효하지 않은 URL은 에러를 반환합니다

向用户接收想要转换的网页URL。

示例：

Claude：请输入要转换的网页URL。
User：https://example.com/article

注意事项：

URL必须以
```
http://
```
或
```
https://
```
开头
HTTP URL会自动升级为HTTPS
无效URL会返回错误

Step 2: 변환 모드 선택

步骤2：选择转换模式

사용자의 요청을 분석하여 적절한 변환 모드를 선택합니다.

변환 모드:

일반 모드 (기본): 웹페이지를 읽기 좋은 마크다운으로 변환
AI 최적화 모드: AI 에이전트가 컨텍스트로 활용하기 최적화된 형태로 변환
듀얼 모드 ⭐ NEW: 원본 + AI 최적화 버전 2개 파일 생성

자동 감지 키워드:

"AI가 읽기 좋게", "컨텍스트로 사용", "AI 학습용" → AI 최적화 모드
"원본이랑", "둘 다", "2개", "both", "원본도 저장" → 듀얼 모드
기타 → 일반 모드

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개 파일을 생성합니다.

分析用户的请求，选择合适的转换模式。

转换模式：

普通模式（默认）：将网页转换为易读的Markdown格式
AI优化模式：转换为适合AI Agent作为上下文使用的优化格式
双模式 ⭐ 新增：同时生成原版和AI优化版两个文件

自动检测关键词：

"AI易读"、"用作上下文"、"AI学习用" → AI优化模式
"原版和"、"两个都"、"2个"、"both"、"也保存原版" → 双模式
其他 → 普通模式

示例1（AI优化模式）：

User：https://example.com/article 转换成AI易读的格式
Claude：将以AI优化模式进行转换。会添加结构化格式和元数据。

示例2（双模式）：

User：https://example.com/article 同时生成原版和AI优化版
Claude：将以双模式进行转换。
- 原版Markdown（article.md）
- AI优化版（article.context.md）
将生成2个文件。

Step 3: 저장 옵션 확인

步骤3：确认保存选项

사용자에게 저장 위치와 파일명을 확인합니다.

Example:

Claude: 마크다운 파일을 어디에 저장할까요?
옵션:
1. 현재 디렉토리 (./)
2. 특정 경로 지정
3. 파일로 저장하지 않고 내용만 보기

파일명은? (기본값: webpage.md)
User: 현재 디렉토리에 article.md로 저장해줘

向用户确认保存位置和文件名。

示例：

Claude：Markdown文件要保存到哪里？
选项：
1. 当前目录（./）
2. 指定特定路径
3. 只查看内容不保存为文件

文件名是什么？（默认值：webpage.md）
User：保存到当前目录，文件名为article.md

Step 4: 웹페이지 가져오기 및 변환

步骤4：获取网页并转换

WebFetch 도구를 사용하여 웹페이지를 가져오고 마크다운으로 변환합니다.

使用WebFetch工具获取网页并转换为Markdown格式。

일반 모드 프롬프트

普通模式提示词

python

url = "https://example.com/article"
prompt = "웹페이지의 전체 내용을 마크다운 형식으로 변환해주세요. 제목, 본문, 링크, 이미지 등 모든 요소를 포함하되, 불필요한 네비게이션이나 광고는 제외해주세요."

python

url = "https://example.com/article"
prompt = "请将网页的全部内容转换为Markdown格式。包含标题、正文、链接、图片等所有元素，但请去除不必要的导航栏或广告。"

AI 최적화 모드 프롬프트 (CRITICAL)

AI优化模式提示词（关键）

python

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. **본문 구조**

python

url = "https://example.com/article"
prompt = """请将此网页转换为适合AI Agent作为上下文使用的优化格式：

**必填结构：**

1. **前置元数据（YAML格式）**
---
title: "页面标题"
url: "原版URL"
author: "作者（如有）"
date: "发布日期（如有）"
word_count: 大致字数
topics: ["主题1", "主题2", "主题3"]
summary: |
  用3-5行总结本文核心
  方便AI快速理解
main_points:
  - 核心要点1
  - 核心要点2
  - 核心要点3
content_type: "教程|指南|文章|文档|新闻|博客"
difficulty: "入门|中级|高级"
---

2. **正文结构**

[원본 제목]

[原版标题]

핵심 요약

核心摘要

[3-5줄로 이 글이 무엇을 다루는지 명확하게]

[用3-5行明确说明本文内容]

주요 내용

主要内容

[명확한 계층 구조로 섹션 구분, H2/H3 사용]

[用清晰的层级结构划分章节，使用H2/H3]

섹션 1

章节1

[내용]

[内容]

섹션 2

章节2

[내용]

[内容]

핵심 인사이트

核心见解

인사이트 1
인사이트 2
인사이트 3

见解1
见解2
见解3

실용적 적용

实际应用

[이 내용을 어떻게 활용할 수 있는지]

[如何运用这些内容]

결론

结论

[마무리 요약]

변환 규칙:

광고, 네비게이션, 푸터, 사이드바 완전 제거
코드 블록은 언어 명시 (
```
python, 
```
javascript 등)
링크는 설명 형식으로 명확하게
이미지는 형식으로
불필요한 수식어 제거, 간결하게
리스트는 명확한 bullet points로
중요한 개념은 굵게 강조

최종 목표: AI가 이 문서를 읽고 핵심을 3초 안에 파악하고, 사용자의 질문에 정확하게 답변할 수 있도록 최적화 """


**Important:**
- WebFetch는 HTML을 자동으로 마크다운으로 변환합니다
- 15분 캐시가 적용되어 같은 URL을 반복 요청해도 빠릅니다
- 리다이렉트가 발생하면 새로운 URL로 다시 요청합니다
- **AI 최적화 모드는 토큰을 30-50% 절감하고 구조를 명확하게 합니다**

[总结收尾]

转换规则：

完全去除广告、导航栏、页脚、侧边栏
代码块需注明语言（
```
python, 
```
javascript等）
链接使用说明的清晰格式
图片使用的格式
去除不必要的修饰词，保持简洁
列表使用清晰的项目符号
重要概念用粗体强调

最终目标： 让AI能在3秒内读完本文并掌握核心，能准确回答用户的问题 """


**注意事项：**
- WebFetch会自动将HTML转换为Markdown
- 应用15分钟缓存，重复请求同一URL也能快速响应
- 发生重定向时会自动用新URL重新请求
- **AI优化模式可减少30-50%的令牌使用量，并使结构更清晰**

Step 5: 마크다운 저장

步骤5：保存Markdown

변환된 마크다운을 파일로 저장합니다.

bash

undefined

将转换后的Markdown保存为文件。

bash

undefined

Write 도구를 사용하여 파일 저장

使用Write工具保存文件

Write { file_path: "/Users/symverse/workspaces-skill-test/my-skills-hub/article.md" content: "[변환된 마크다운 내용]" }


**AI 최적화 모드 파일명 권장:**
- 일반: `article.md`
- AI 최적화: `article-ai-optimized.md` 또는 `article.context.md`

Write { file_path: "/Users/symverse/workspaces-skill-test/my-skills-hub/article.md" content: "[转换后的Markdown内容]" }


**AI优化模式推荐文件名：**
- 普通版：`article.md`
- AI优化版：`article-ai-optimized.md`或`article.context.md`

Step 6: 결과 확인

步骤6：确认结果

저장된 파일의 경로와 간단한 통계를 사용자에게 보여줍니다.

✅ 웹페이지를 마크다운으로 변환했습니다!

📄 파일: 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)

向用户展示保存文件的路径和简单统计信息。

✅ 已将网页转换为Markdown！

📄 文件：article.md
📍 路径：/Users/symverse/workspaces-skill-test/my-skills-hub/article.md
📊 大小：约1,234字符

[查看文件](computer:///Users/symverse/workspaces-skill-test/my-skills-hub/article.md)

듀얼 모드 워크플로우 ⭐ NEW

双模式工作流程 ⭐ 新增

듀얼 모드는 원본 마크다운과 AI 최적화 버전을 모두 생성합니다. 사람이 읽을 자료와 AI가 처리할 자료를 동시에 확보할 수 있습니다.

双模式会同时生成原版Markdown和AI优化版。可同时保留供人类阅读的资料和供AI处理的资料。

듀얼 모드 Step 1: URL 및 파일명 확인

双模式步骤1：确认URL和文件名

User: https://react.dev/reference/react/useState 원본이랑 AI 최적화 버전 둘 다 만들어줘

Claude: 듀얼 모드로 변환하겠습니다.
기본 파일명은? (기본: webpage)

User：https://react.dev/reference/react/useState 同时生成原版和AI优化版

Claude：将以双模式进行转换。
默认文件名是什么？（默认值：webpage）

듀얼 모드 Step 2: 원본 마크다운 생성

双模式步骤2：生成原版Markdown

일반 모드 프롬프트로 WebFetch를 사용하여 원본 마크다운을 생성합니다.

python

url = "https://react.dev/reference/react/useState"
prompt = "웹페이지의 전체 내용을 마크다운 형식으로 변환해주세요. 제목, 본문, 링크, 이미지 등 모든 요소를 포함하되, 불필요한 네비게이션이나 광고는 제외해주세요."

원본 파일 저장:

bash

Write {
  file_path: "/path/to/useState.md"
  content: "[원본 마크다운 내용]"
}

使用普通模式提示词，通过WebFetch生成原版Markdown。

python

url = "https://react.dev/reference/react/useState"
prompt = "请将网页的全部内容转换为Markdown格式。包含标题、正文、链接、图片等所有元素，但请去除不必要的导航栏或广告。"

保存原版文件：

bash

Write {
  file_path: "/path/to/useState.md"
  content: "[原版Markdown内容]"
}

듀얼 모드 Step 3: AI 최적화 버전 생성

双模式步骤3：生成AI优化版

CRITICAL: 같은 URL에 대해 AI 최적화 프롬프트로 다시 WebFetch를 호출합니다.

python

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. **본문 구조**

关键：对同一URL使用AI优化提示词再次调用WebFetch。

python

url = "https://react.dev/reference/react/useState"  # 同一URL
prompt = """请将此网页转换为适合AI Agent作为上下文使用的优化格式：

**必填结构：**

1. **前置元数据（YAML格式）**
---
title: "页面标题"
url: "原版URL"
author: "作者（如有）"
date: "发布日期（如有）"
word_count: 大致字数
topics: ["主题1", "主题2", "主题3"]
summary: |
  用3-5行总结本文核心
  方便AI快速理解
main_points:
  - 核心要点1
  - 核心要点2
  - 核心要点3
content_type: "教程|指南|文章|文档|新闻|博客"
difficulty: "入门|中级|高级"
---

2. **正文结构**

[원본 제목]

[原版标题]

핵심 요약

核心摘要

[3-5줄로 이 글이 무엇을 다루는지 명확하게]

[用3-5行明确说明本文内容]

주요 내용

主要内容

[명확한 계층 구조로 섹션 구분, H2/H3 사용]

[用清晰的层级结构划分章节，使用H2/H3]

섹션 1

章节1

[내용]

[内容]

섹션 2

章节2

[내용]

[内容]

핵심 인사이트

核心见解

인사이트 1
인사이트 2
인사이트 3

见解1
见解2
见解3

실용적 적용

实际应用

[이 내용을 어떻게 활용할 수 있는지]

[如何运用这些内容]

결론

结论

[마무리 요약]

변환 규칙:

광고, 네비게이션, 푸터, 사이드바 완전 제거
코드 블록은 언어 명시 (
```
python, 
```
javascript 등)
링크는 설명 형식으로 명확하게
이미지는 형식으로
불필요한 수식어 제거, 간결하게
리스트는 명확한 bullet points로
중요한 개념은 굵게 강조

최종 목표: AI가 이 문서를 읽고 핵심을 3초 안에 파악하고, 사용자의 질문에 정확하게 답변할 수 있도록 최적화 """


**AI 최적화 파일 저장:**
```bash
Write {
  file_path: "/path/to/useState.context.md"
  content: "[AI 최적화 마크다운 내용]"
}

[总结收尾]

转换规则：

完全去除广告、导航栏、页脚、侧边栏
代码块需注明语言（
```
python, 
```
javascript等）
链接使用说明的清晰格式
图片使用的格式
去除不必要的修饰词，保持简洁
列表使用清晰的项目符号
重要概念用粗体强调

最终目标： 让AI能在3秒内读完本文并掌握核心，能准确回答用户的问题 """


**保存AI优化文件：**
```bash
Write {
  file_path: "/path/to/useState.context.md"
  content: "[AI优化后的Markdown内容]"
}

듀얼 모드 Step 4: 결과 요약

双模式步骤4：结果总结

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 에이전트 컨텍스트로 사용

向用户展示2个文件的生成结果。

✅ 双模式转换完成！已生成2个文件。

📄 原版Markdown：
- 文件：useState.md
- 路径：/path/to/useState.md
- 大小：约3,500字符
- 用途：保留适合人类阅读的原版

[查看文件](computer:///path/to/useState.md)

📄 AI优化版：
- 文件：useState.context.md
- 路径：/path/to/useState.context.md
- 大小：约2,100字符（减少40%）
- 用途：用作AI上下文

[查看文件](computer:///path/to/useState.context.md)

💡 提示：
- 原版(.md)供人类阅读使用
- AI优化版(.context.md)供RAG系统或AI Agent作为上下文使用

듀얼 모드 파일명 규칙

双模式文件名规则

패턴 1: 확장자 구분 (권장)

원본:
```
article.md
```
AI 최적화:
```
article.context.md
```

패턴 2: 접미사 구분

원본:
```
article.md
```
AI 최적화:
```
article-ai-optimized.md
```

패턴 3: 폴더 구분

/docs
├── original/
│   └── article.md
└── optimized/
    └── article.md

模式1：扩展名区分（推荐）

原版：
```
article.md
```
AI优化版：
```
article.context.md
```

模式2：后缀区分

原版：
```
article.md
```
AI优化版：
```
article-ai-optimized.md
```

模式3：文件夹区分

/docs
├── original/
│   └── article.md
└── optimized/
    └── article.md

듀얼 모드 장점

双模式优势

원본 보존: 사람이 읽을 자료는 원본 그대로 유지
AI 효율성: AI용은 토큰 절감 및 구조화
용도별 분리: 목적에 맞는 파일 사용
백업 효과: 2가지 형태로 동시 백업
비교 가능: 원본과 최적화 버전 비교 분석 가능

保留原版：供人类阅读的资料保持原版不变
AI效率：AI专用版本减少令牌使用量并结构化
按用途区分：根据目的使用对应文件
备份效果：同时以两种形式备份
可对比性：可对比原版和优化版进行分析

듀얼 모드 사용 시나리오

双模式使用场景

시나리오 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

场景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

Advanced Options

高级选项

여러 URL 일괄 변환

批量转换多个URL

여러 웹페이지를 한 번에 변환할 수 있습니다.

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로 저장]

可一次性转换多个网页。

示例：

User：把这些URL都保存为Markdown
- 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 섹션만 추출"을 명시하여 해당 부분만 변환]

可仅提取网页的特定部分。

示例：

User：只把https://example.com/docs里的"Installation"章节保存为Markdown

Claude：[在WebFetch提示词中注明"仅提取Installation章节"，仅转换该部分]

마크다운 포맷 커스터마이징

自定义Markdown格式

변환 시 원하는 마크다운 스타일을 지정할 수 있습니다.

Example:

User: 이 블로그 글을 마크다운으로 변환하되, 모든 제목을 H2(##)로 시작하고 코드 블록은 syntax highlighting 포함해줘

Claude: [WebFetch 프롬프트에 포맷 요구사항을 명시]

转换时可指定想要的Markdown样式。

示例：

User：把这篇博客文章转换成Markdown，所有标题都以H2(##)开头，代码块要包含语法高亮

Claude：[在WebFetch提示词中注明格式要求]

Error Handling

错误处理

잘못된 URL

无效URL

User: htp://wrong-url
Claude: ❌ 올바르지 않은 URL입니다. http:// 또는 https://로 시작하는 전체 URL을 입력해주세요.

User：htp://wrong-url
Claude：❌ URL无效，请输入以http://或https://开头的完整URL。

접근 불가능한 페이지

无法访问的页面

Claude: ❌ 해당 웹페이지에 접근할 수 없습니다.
- 페이지가 삭제되었거나
- 접근 권한이 필요하거나
- 네트워크 오류가 발생했을 수 있습니다.

Claude：❌ 无法访问该网页。
- 页面可能已删除
- 可能需要访问权限
- 可能发生网络错误

파일 저장 오류

文件保存错误

Claude: ❌ 파일을 저장할 수 없습니다.
- 경로가 올바른지 확인해주세요
- 쓰기 권한이 있는지 확인해주세요
- 디렉토리가 존재하는지 확인해주세요

Claude：❌ 无法保存文件。
- 请确认路径是否正确
- 请确认是否有写入权限
- 请确认目录是否存在

Example Workflows

示例工作流程

Example 1: 단일 웹페이지 변환

示例1：转换单个网页

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://docs.python.org/3/tutorial/index.html保存为Markdown

Claude：将把Python教程页面转换为Markdown。
文件名要设为？（默认：webpage.md）

User：python-tutorial.md

Claude：[用WebFetch获取页面]
Claude：[转换为Markdown]
Claude：[保存文件]

✅ 已将网页转换为Markdown！

📄 文件：python-tutorial.md
📍 路径：/Users/symverse/workspaces-skill-test/my-skills-hub/python-tutorial.md
📊 大小：约15,234字符

[查看文件](computer:///Users/symverse/workspaces-skill-test/my-skills-hub/python-tutorial.md)

Example 2: 블로그 글 아카이빙

示例2：归档博客文章

User: 이 블로그 글들을 전부 마크다운으로 저장해서 아카이브 폴더에 넣어줘
- https://blog.example.com/post1
- https://blog.example.com/post2

Claude: 2개의 블로그 글을 archive 폴더에 저장하겠습니다.

[디렉토리 생성]
[각 URL을 순차적으로 변환]

✅ 2개의 웹페이지를 변환했습니다!

📁 archive/
  ├── post1.md
  └── post2.md

User：把这些博客文章都保存为Markdown并存到archive文件夹里
- https://blog.example.com/post1
- https://blog.example.com/post2

Claude：将把2篇博客文章保存到archive文件夹。

[创建目录]
[依次转换每个URL]

✅ 已转换2个网页！

📁 archive/
  ├── post1.md
  └── post2.md

Example 3: 문서 내용만 보기 (저장 안 함)

示例3：仅查看文档内容（不保存）

User: https://github.com/anthropics/claude-code 이 페이지 내용을 마크다운으로 보여줘만 하고 저장은 하지마

Claude: [WebFetch로 페이지 가져오기]

다음은 해당 페이지의 마크다운 변환 내용입니다:

---

User：把https://github.com/anthropics/claude-code页面转换成Markdown给我看，但不要保存

Claude：[用WebFetch获取页面]

以下是该页面的Markdown转换内容：

---

Claude Code

Claude Code is an official CLI...

[전체 내용 출력]

저장하지 않고 내용만 보여드렸습니다.

undefined

Claude Code is an official CLI...

[完整内容输出]

已为您展示内容，未进行保存。

undefined

Technical Details

技术细节

WebFetch 사용

WebFetch的使用

자동 변환: HTML → 마크다운 자동 변환
캐싱: 15분 자가 정리 캐시
리다이렉트 처리: 자동으로 새 URL로 재요청

自动转换：HTML → Markdown自动转换
缓存：15分钟自动清理缓存
重定向处理：自动用新URL重新请求

마크다운 변환 품질

Markdown转换质量

WebFetch는 다음 요소를 마크다운으로 변환합니다:

제목 (H1-H6)
단락과 텍스트 포맷 (bold, italic, code)
링크와 이미지
리스트 (ordered, unordered)
코드 블록
인용구
테이블

불필요한 요소는 제외됩니다:

네비게이션 메뉴
푸터
광고
사이드바 (상황에 따라)

WebFetch会将以下元素转换为Markdown：

标题（H1-H6）
段落和文本格式（粗体、斜体、代码）
链接和图片
列表（有序、无序）
代码块
引用块
表格

会去除不必要的元素：

导航菜单
页脚
广告
侧边栏（视情况而定）

파일 저장

文件保存

기본 경로: 현재 작업 디렉토리
파일 확장자:
```
.md
```
인코딩: UTF-8
덮어쓰기: 기존 파일이 있으면 확인 후 덮어씀

默认路径：当前工作目录
文件扩展名：
```
.md
```
编码：UTF-8
覆盖：若存在同名文件会先确认再覆盖

Best Practices

最佳实践

명확한 파일명 사용: 내용을 잘 나타내는 파일명 사용
폴더 구조화: 여러 페이지를 변환할 때는 주제별로 폴더 정리
URL 확인: 변환 전 URL이 올바른지 확인
개인적 아카이빙: 주로 개인적인 참고 자료로 사용

使用清晰的文件名：使用能体现内容的文件名
结构化文件夹：转换多个页面时按主题整理文件夹
确认URL：转换前确认URL是否正确
注意版权：尊重网页内容的版权
个人归档使用：主要用作个人参考资料

Dynamic Content Handling (동적 콘텐츠 처리)

动态内容处理

문제: JavaScript 렌더링 페이지

问题：JavaScript渲染页面

WebFetch는 정적 HTML만 가져오므로 React, Vue, Next.js 등 JavaScript로 렌더링되는 페이지는 빈 내용이 반환될 수 있습니다.

증상:

변환된 마크다운이 거의 비어있음
"Loading..." 같은 플레이스홀더만 보임
핵심 콘텐츠가 누락됨

WebFetch仅能获取静态HTML，因此React、Vue、Next.js等用JavaScript渲染的页面可能会返回空内容。

症状：

转换后的Markdown几乎为空
仅显示"Loading..."等占位符
核心内容缺失

해결책: Playwright 폴백

解决方案：Playwright备选方案

WebFetch로 가져온 내용이 비어있거나 불충분하면, AskUserQuestion을 사용하여 사용자에게 Playwright 사용 여부를 물어봅니다.

若WebFetch获取的内容为空或不完整，会使用AskUserQuestion询问用户是否使用Playwright。

Step 1: WebFetch 결과 검증

步骤1：验证WebFetch结果

python

undefined

python

undefined

WebFetch로 가져온 마크다운 내용 확인

检查WebFetch获取的Markdown内容

if len(markdown_content.strip()) < 500: # 너무 짧으면 # 동적 콘텐츠일 가능성 높음

undefined

if len(markdown_content.strip()) < 500: # 内容过短 # 很可能是动态内容

undefined

Step 2: 사용자에게 물어보기

步骤2：询问用户

AskUserQuestion 사용:

javascript

AskUserQuestion {
  questions: [
    {
      question: "이 페이지는 동적 콘텐츠(JavaScript)를 사용하는 것 같습니다. Playwright를 실행해서 브라우저로 데이터를 가져올까요?",
      header: "Playwright",
      multiSelect: false,
      options: [
        {
          label: "Yes, Playwright로 재시도",
          description: "Chromium 브라우저를 실행해서 JavaScript 렌더링 후 콘텐츠 가져오기 (느림, 정확함)"
        },
        {
          label: "No, 현재 내용만 저장",
          description: "WebFetch 결과만 저장 (빠름, 불완전할 수 있음)"
        }
      ]
    }
  ]
}

使用AskUserQuestion：

javascript

AskUserQuestion {
  questions: [
    {
      question: "该页面似乎使用了动态内容(JavaScript)。是否使用Playwright通过浏览器获取数据？",
      header: "Playwright",
      multiSelect: false,
      options: [
        {
          label: "是，用Playwright重试",
          description: "运行Chromium浏览器，渲染JavaScript后获取内容（速度慢，准确）"
        },
        {
          label: "否，仅保存当前内容",
          description: "仅保存WebFetch结果（速度快，可能不完整）"
        }
      ]
    }
  ]
}

Step 3-A: MCP Playwright 사용 (권장 ⭐)

步骤3-A：使用MCP Playwright（推荐 ⭐）

사전 준비: MCP Playwright 서버가 설치되어 있어야 합니다.

bash

undefined

**准备工作：**需安装MCP Playwright服务器。

bash

undefined

최초 1회만 설치

仅需首次安装

npx @modelcontextprotocol/server-playwright


**스킬에서 사용:**

```javascript
// 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를 마크다운으로 변환하는 로직

npx @modelcontextprotocol/server-playwright


**在技能中使用：**

```javascript
// 1. 跳转页面
mcp__playwright__navigate({
  url: "https://example.com"
})

// 2. 等待JavaScript渲染
mcp__playwright__waitForLoadState({
  state: "networkidle"
})

// 3. 获取HTML内容
const htmlContent = mcp__playwright__getContent()

// 4. 转换为Markdown（复用WebFetch提示词）
// 将htmlContent转换为Markdown的逻辑

Step 3-B: Node Playwright 사용 (대안)

步骤3-B：使用Node Playwright（备选）

MCP Playwright가 없는 경우 Node.js로 직접 실행:

bash

undefined

若无MCP Playwright，可直接用Node.js运行：

bash

undefined

Playwright 스크립트 실행

运行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


**출력을 파일로 저장:**
```bash

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


**将输出保存为文件：**
```bash

HTML을 임시 파일로 저장

将HTML保存为临时文件

node playwright-script.js > temp.html

이제 이 HTML을 마크다운으로 변환

现在将此HTML转换为Markdown

(WebFetch 대신 직접 변환 로직 사용)

（替代WebFetch，使用直接转换逻辑）

undefined

undefined

Step 4: 변환 및 저장

步骤4：转换并保存

Playwright로 가져온 HTML을 마크다운으로 변환합니다.

Option A: WebFetch 프롬프트 재사용

Playwright로 가져온 전체 HTML을 WebFetch 프롬프트에 넣어 마크다운으로 변환합니다.

Option B: 직접 파싱

HTML → 마크다운 변환 라이브러리 사용 (예: turndown, html-to-markdown)

将Playwright获取的HTML转换为Markdown。

选项A：复用WebFetch提示词

将Playwright获取的完整HTML放入WebFetch提示词中转换为Markdown。

选项B：直接解析

使用HTML→Markdown转换库（如turndown, html-to-markdown）

워크플로우 요약

工作流程总结

1. WebFetch로 시도 (빠름)
   ↓
2. 결과 검증 (내용이 충분한가?)
   ↓ NO
3. AskUserQuestion (Playwright 사용할까요?)
   ↓ YES
4. Playwright로 재시도
   ├─ MCP Playwright (권장) 또는
   └─ Node Playwright (대안)
   ↓
5. 마크다운 변환 및 저장

1. 尝试WebFetch（速度快）
   ↓
2. 验证结果（内容是否充足？）
   ↓ 否
3. AskUserQuestion（是否使用Playwright？）
   ↓ 是
4. 用Playwright重试
   ├─ MCP Playwright（推荐）或
   └─ Node Playwright（备选）
   ↓
5. 转换为Markdown并保存

MCP Playwright vs Node Playwright 비교

MCP Playwright vs Node Playwright对比

항목	MCP Playwright ⭐	Node Playwright
설치	MCP 서버 설치 필요	`npm install playwright`
호출 방식	MCP 도구 호출	Bash 명령어 실행
세션 관리	자동	수동 (스크립트 작성)
에러 핸들링	깔끔함	복잡함
Claude Code 통합	네이티브 지원	간접 실행
추천도	⭐⭐⭐⭐⭐	⭐⭐⭐

项目	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 글자 (전체 콘텐츠 포함)

场景：转换React官方文档

User：把https://react.dev/reference/react/useState转换成Markdown

Claude：[尝试WebFetch]
Claude：⚠️ 该页面似乎使用JavaScript渲染。
        内容几乎为空。

[调用AskUserQuestion]

User：Yes, 用Playwright重试

Claude：⏳ 用Playwright加载页面中...
Claude：✅ JavaScript渲染完成
Claude：✅ Markdown转换完成

📄 文件：useState.md
📍 路径：/path/to/useState.md
📊 大小：约5,234字符（包含完整内容）

추가 옵션: 자동 감지 모드

附加选项：自动检测模式

고급 사용자를 위해

--auto-playwright

플래그를 지원할 수 있습니다:

User: https://react.dev/reference/react/useState 마크다운으로 변환해줘 (자동으로 Playwright 사용해도 돼)

Claude: [WebFetch 시도]
Claude: [자동으로 Playwright 폴백]
Claude: ✅ 마크다운 변환 완료

为高级用户支持

--auto-playwright

标志：

User：把https://react.dev/reference/react/useState转换成Markdown（可以自动用Playwright）

Claude：[尝试WebFetch]
Claude：[自动切换到Playwright备选方案]
Claude：✅ Markdown转换完成

Tips

提示

긴 문서: 매우 긴 웹페이지는 요약이 포함될 수 있습니다
동적 콘텐츠: JavaScript로 렌더링되는 콘텐츠는 Playwright로 해결 가능 ⭐ NEW
이미지: 이미지는 원본 URL 링크로 포함됩니다 (다운로드되지 않음)
재변환: 같은 URL을 15분 내에 다시 요청하면 캐시된 버전을 사용합니다
MCP Playwright: 동적 콘텐츠가 많은 경우 MCP Playwright 서버 설치 권장

长文档：非常长的网页可能会包含摘要
动态内容：JavaScript渲染的内容可通过Playwright解决 ⭐ 新增
图片：图片会以原版URL链接包含（不会下载）
重新转换：15分钟内重复请求同一URL会使用缓存版本
MCP Playwright：动态内容较多时推荐安装MCP Playwright服务器 ",

web-to-markdown

Original

Translation

Web to Markdown Converter

网页转Markdown转换器

When to Use

使用场景

Core Workflow

核心工作流程

Step 1: URL 입력받기

步骤1：接收URL

Step 2: 변환 모드 선택

步骤2：选择转换模式

Step 3: 저장 옵션 확인

步骤3：确认保存选项

Step 4: 웹페이지 가져오기 및 변환

步骤4：获取网页并转换

일반 모드 프롬프트

普通模式提示词

AI 최적화 모드 프롬프트 (CRITICAL)

AI优化模式提示词（关键）

[원본 제목]

[原版标题]

핵심 요약

核心摘要

주요 내용

主要内容

섹션 1

章节1

섹션 2

章节2

핵심 인사이트

核心见解

실용적 적용

实际应用

관련 리소스

相关资源

결론

结论

Step 5: 마크다운 저장

步骤5：保存Markdown

Write 도구를 사용하여 파일 저장

使用Write工具保存文件

Step 6: 결과 확인

步骤6：确认结果

듀얼 모드 워크플로우 ⭐ NEW

双模式工作流程 ⭐ 新增

듀얼 모드 Step 1: URL 및 파일명 확인

双模式步骤1：确认URL和文件名

듀얼 모드 Step 2: 원본 마크다운 생성

双模式步骤2：生成原版Markdown

듀얼 모드 Step 3: AI 최적화 버전 생성

双模式步骤3：生成AI优化版

[원본 제목]

[原版标题]

핵심 요약

核心摘要

주요 내용

主要内容

섹션 1

章节1

섹션 2

章节2

핵심 인사이트

核心见解

실용적 적용

实际应用

관련 리소스

相关资源

결론

结论

듀얼 모드 Step 4: 결과 요약

双模式步骤4：结果总结

듀얼 모드 파일명 규칙

双模式文件名规则

듀얼 모드 장점

双模式优势

듀얼 모드 사용 시나리오

双模式使用场景

Advanced Options