MIT License Agent-Agnostic skills.sh Compatible NEW · md → docx

huashu-md-html

md → html / docx
md 是源代码,html / docx 是产物。
"Source once · publish many."

把任意文件(PDF / DOCX / PPTX / XLSX / EPUB / 图片 / 音频 / YouTube / 网页 URL)转成干净的 markdown; 再用 4 套精挑过的主题加工成出色的 html;或反过来把已发布的 html 拉回来归档; 需要给出版社/编辑/投稿系统时——一条命令把 md 加工成出版社级 docx,自动嵌图、加封面、做目录、配页眉页脚。

INSTALL
npx skills add alchaincyf/huashu-md-html

跨 agent 通用 · Claude Code · Cursor · Codex · OpenClaw · Hermes 都能装

20 秒看懂 md / html / docx 怎么流转

Kenya Hara 极简风格 · md → 入·排·出 → html · 衬线 + 留白 + 一抹赤陶橙。

huashu-md-html Hero · md 是源,html 是产物

👉 下载 MP4(含 BGM · 850KB)

ALT 另一版风格:Pentagram 信息建筑派 · 象牙白 + 墨黑 + 辛辣红 · 大字号 sans + 12 列网格 + tabular nums 查看 MP4 →

📌 以上两段动画都是用 huashu-design skill 做的——作为本 skill 的宣传短片。同一个产品,两种视觉哲学,差异不来自模板而来自设计语言。

四个能力 · 一条流水线

每个能力都是独立的脚本入口,互相可以组合。决策错了会绕远路——选哪个能力之前先读路由表。

01
PDF / DOCX / 网页… md

万物 → md

把任意输入(PDF、DOCX、PPTX、XLSX、EPUB、图片、音频、YouTube、网页 URL)转成干净的 markdown,作为后续加工的源。

markitdown scripts/any_to_md.py
02
md 精美 html

md → 精美 html

用 pandoc + 4 套自调主题(article / report / reading / interactive)加工成可发布的 html。自包含单文件,不依赖外部 CDN。

pandoc scripts/md_to_html.py
03
本地 html / URL md

html → md

把已发布的博客文章、新闻、Essay 反向归档成 md。trafilatura 自动去除导航/侧栏/广告,只留正文。

html-to-markdown trafilatura scripts/html_to_md.py
决策原则
  • 能力 1 产出的 md 可以直接喂给能力 2,组成「PDF → 精美阅读 html」一条龙
  • 能力 3 用于反向归档——把已发布的 html 博客文章存回项目源
  • 能力 4 是出版终点——给人类编辑/出版社审校时用 docx,不要直接给 html 或 md

URL 输入的两条路径

页面类型走哪个原因
结构化页面(产品详情、技术文档、API doc、证书页、电商商品页) 能力 1(markitdown) 保留 metadata、字段值、链接、标题层级
正文类页面(博客、新闻、Essay、长文) 能力 3(trafilatura) 自动去导航/侧栏/广告,只留正文
不确定 两个都跑一遍对比 看哪个对下游用途更合适

判断捷径:URL 里的内容是「读」的还是「查」的?读 → 能力 3(去噪),查 → 能力 1(保信息)。

4 套 html 主题

每套都过了反 AI slop 检查清单。自包含单 CSS,HTML 打开即用,不依赖外部 CDN。

主题哲学锚点适合场景
articleTufte CSS 启发 · Pentagram 式信息建筑essay、博客、深度阅读、独立文章
report出版社白皮书风 · 多表格密度型技术报告、调研、白皮书、产品文档
readingMedium 风极简 · 单栏窄体大字公众号转接、纯阅读、轻量分发
interactive长文档导航型 · 折叠 + 目录 + 边栏橙皮书章节、技术书籍、长教程
article 主题预览
article
Tufte 风 · 衬线 + 边距笔记
report 主题预览
report
白皮书风 · 宽体多表格
reading 主题预览
reading
Medium 风 · 单栏极简
interactive 主题预览
interactive
长文档 · 侧边栏 + 折叠目录

排版底线(所有主题共享)

正文字体(中文)  PingFang SC, Source Han Serif, Noto Serif CJK
正文字体(英文)  Inter, IBM Plex Sans, et-book
代码字体         JetBrains Mono, Fira Code
行高(中文)     1.75 - 1.85
字号(桌面)     17 - 18px
最大宽度(文章)  680 - 720px
代码块底色       #F6F8FA(浅模式)/ #1F2428(深模式)
引用块           左 4px 色条 + 浅灰底

禁用清单:紫渐变、赛博霓虹、 #0D1117 深蓝底、Comic Sans、emoji 作正式图标。

md → 出版社级 docx

为什么单独做能力 4?因为 pandoc md -o docx 出来的 docx 默认 Calibri、无表格样式、无封面、章节首页平淡——能给 AI 看,不能给出版社编辑改稿。

能力 4 内置了出版社版式预设

章号小标 + 大字号章名 + 英文副标题 + 橙色分隔线、引用块按类型配色、表格表头底色、代码块左侧色条 + 浅灰底、页眉书名 + 页脚自动页码——这些细节都内置了,单文件或一整本书都能一条命令生成

# 单文件转换
python3 scripts/md_to_docx.py article.md

# 整本书(自动加封面 + 目录 + 页眉 + 章节分页)
python3 scripts/md_to_docx.py ch*.md postscript.md appendix.md --book \
    --title "图解 Agent Skills" \
    --subtitle "让 AI 记住你的工作方式" \
    --author "花叔" \
    --images-dir ./images \
    -o book.docx

版式特性一览

PAGE
大 32 开(176×240 mm)或 A4
CHAPTER TITLE
章号小标 + 24pt 大字号 + 橙色底分隔线 + 英文副标题
CALLOUT
按 emoji 自动配色:💡 琥珀 / ✅ 青色 / ⚠️ 玫红
CODE BLOCK
浅灰底 + 橙色左侧色边 + JetBrains Mono
TABLE
表头底色 + 灰色边框 + 居中对齐
FIGURE
居中嵌入 + 灰色斜体图说
HEADER
右对齐书名(斜体灰色)
FOOTER
居中自动页码字段
实战验证。用这个脚本生成《图解 Agent Skills》158 页出版社审校稿(9 章 + 后记 + 附录 + 57 张配图),一条命令搞定。

完整 cookbook 见 references/md-to-docx-cookbook.md · 依赖:python3 -m pip install python-docx Pillow

一条龙工作流

8 个典型场景——从 PDF 白皮书到出版社审校稿。每个都是真实跑过的命令。

SCENE 1PDF 白皮书 → 精美阅读 html
python3 scripts/any_to_md.py whitepaper.pdf -o whitepaper.md
python3 scripts/md_to_html.py whitepaper.md --theme report -o whitepaper.html
SCENE 2YouTube 视频 → 文章博客
python3 scripts/any_to_md.py "https://youtube.com/watch?v=xxx" -o video.md
# 编辑 video.md...
python3 scripts/md_to_html.py video.md --theme article -o blog.html
SCENE 3归档已发布的博客文章 → 项目源 md
python3 scripts/html_to_md.py "https://example.com/blog/article" -o article.md
SCENE 4抓产品页 / 技术文档 → 完整结构化 md
python3 scripts/any_to_md.py "https://learn.microsoft.com/en-us/some-doc" -o doc.md
SCENE 5橙皮书章节 → 多主题对比
python3 scripts/md_to_html.py chapter.md --theme article -o ch-article.html
python3 scripts/md_to_html.py chapter.md --theme interactive -o ch-interactive.html
SCENE 6URL 不确定走哪条路 → 两个都跑对比
python3 scripts/any_to_md.py "https://example.com/page" -o page-markitdown.md
python3 scripts/html_to_md.py "https://example.com/page" -o page-trafilatura.md
SCENE 7整本书 md → 出版社审校 docx
python3 scripts/md_to_docx.py md-v2/ch*.md md-v2/postscript.md md-v2/appendix.md --book \
    --title "图解 Agent Skills" --author "花叔" \
    --subtitle "让 AI 记住你的工作方式" \
    --images-dir ./images-v2 -o 出版社审校版.docx
SCENE 8PDF 论文 → docx 投稿(能力 1 → 能力 4)
python3 scripts/any_to_md.py paper.pdf -o paper.md
# 编辑 paper.md 修正格式...
python3 scripts/md_to_docx.py paper.md --page-size a4 -o paper.docx

依赖

脚本启动时会自检,缺失的依赖会明确提示安装命令,不会静默失败。

工具用途安装
markitdown万物 → mdpython3 -m pip install 'markitdown[all]'
pandocmd → htmlbrew install pandoc(macOS)
html-to-markdownhtml → md(高速 Rust 引擎)python3 -m pip install html-to-markdown
trafilaturaURL 正文提取python3 -m pip install trafilatura
python-docx + Pillowmd → 精美 docxpython3 -m pip install python-docx Pillow
⚠ macOS Python 环境陷阱: pippython3 可能指向不同的 Python 版本(实测踩过:pip 是 3.11、python3 是 3.14)。安装依赖请用 python3 -m pip install ...,不要直接 pip install

仓库结构

huashu-md-html/ ├── SKILL.md # Agent 主文档(中文) ├── README.md # 本文件 ├── scripts/ # 四能力入口 │ ├── any_to_md.py # 能力 1:万物 → md │ ├── md_to_html.py # 能力 2:md → 精美 html │ ├── html_to_md.py # 能力 3:html → md │ └── md_to_docx.pyNEW # 能力 4:md → 出版社级 docx ├── templates/ # 4 套精挑 html 主题 + 公众号专用 │ ├── article/ # Tufte 风 │ ├── report/ # 白皮书风 │ ├── reading/ # Medium 极简 │ ├── interactive/ # 长文档导航 │ └── wechat/ # 公众号转接 ├── references/ # 按任务深入文档(中文) │ ├── markitdown-cookbook.md │ ├── md-to-html-themes.md │ ├── html-to-md-cookbook.md │ ├── md-to-docx-cookbook.mdNEW │ ├── design-tokens.md │ └── anti-ai-slop.md ├── examples/ # 主题预览 │ ├── input/md-vs-html.md │ └── output/{article,report,reading,interactive}.{html,png} ├── demos/ # README 引用的宣传动画 │ ├── v3-hara-hero.{gif,mp4} # Kenya Hara 极简 │ └── v1-pentagram.{gif,mp4} # Pentagram 信息建筑 └── requirements.txt

设计哲学

这个 skill 的存在源于一个简单观察——AI 时代,文档的「生产格式」和「消费格式」第一次解耦了。

写作发生在 markdown——可 diff、AI 友好、版本可控。
分发发生在 html / docx——排版精致、可分享、可导航、可投稿。
来回切换不应该有成本。

大多数「转 X 到 Y」工具优化的是「转换保真度」。这个 skill 优化的是写作者的循环

  • 一份 md 是源——所有创作和编辑都在 md 里
  • 多套 html 是产物——按场景挑主题,渲染一份精美的 html
  • docx 是出版终点——给人类编辑/出版社/投稿系统的最终交付物
  • 来回往返不丢结构——把已发布的博客拉回项目源,或者把别人的好内容归档成 md

继承自 huashu-design 的反 AI slop 审美底线——4 套 html 主题各有一个克制的强调色和一个出版级的排印签名,看起来像出版社做的,不像 SaaS 落地页。docx 模板做了同样的事——奶油底、赤陶橙、章号小标、英文副标题,整套版式语言一脉相承。

联系花叔

花叔是 AI Native Coder、独立开发者、AI 自媒体博主。代表作:小猫补光灯(App Store 付费榜 Top 1)、《一本书玩转 DeepSeek》、 nuwa-skill(GitHub 18k+ stars)、 huashu-design(GitHub 13k+ stars)。全平台累计粉丝 30 万+。

公众号:微信搜索「花叔」 · 商业合作请发邮件到 alchaincyf@gmail.com