mirrors / alchaincyf--huashu-md-html
项目文件夹

文件
T
文件历史
wehub-resource-sync 42139b9974 chore: import upstream snapshot with attribution
2026-07-13 12:33:19 +08:00
input
chore: import upstream snapshot with attribution
2026-07-13 12:33:19 +08:00
output
chore: import upstream snapshot with attribution
2026-07-13 12:33:19 +08:00
readme.html
chore: import upstream snapshot with attribution
2026-07-13 12:33:19 +08:00
readme.html

此文件含有可能会与其他字符混淆的 Unicode 字符。如果您是想特意这样的，可以安全地忽略该警告。使用 Escape 按钮显示他们。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>huashu-md-html · md 是源代码，html/docx 是产物</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
  --c-cream: #FDF8EE;
  --c-cream-deep: #F7EFDF;
  --c-paper: #FFFFFF;
  --c-ink: #1A1A1A;
  --c-muted: #6B6B6B;
  --c-line: #E5DCC6;
  --c-line-soft: #F0E6D2;
  --c-orange: #C2410C;
  --c-orange-deep: #9A3412;
  --c-orange-bg: #FFEDD5;
  --c-orange-line: #FED7AA;
  --c-teal: #0E7C66;
  --c-teal-bg: #CCFBF1;
  --max-w: 880px;
  --max-w-wide: 1080px;
  --font-cn-sans: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --font-cn-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-en: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-cn-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body * { font-family: var(--font-en), var(--font-cn-sans); }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 32px; }

a { color: var(--c-orange); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--c-orange-deep); }

/* =====================================================
   HERO
====================================================== */
.hero {
  padding: 80px 0 70px;
  background:
    radial-gradient(ellipse at top right, rgba(194, 65, 12, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(14, 124, 102, 0.03) 0%, transparent 50%),
    var(--c-cream);
  border-bottom: 1px solid var(--c-line);
}

.hero-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: 0.02em;
}
.hero-badge.featured {
  background: var(--c-orange-bg);
  border-color: var(--c-orange-line);
  color: var(--c-orange);
  font-weight: 600;
}
.hero-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.hero-title {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-align: center;
  color: var(--c-ink);
  margin-bottom: 6px;
}
.hero-title .accent { color: var(--c-orange); }

.hero-arrow {
  font-family: var(--font-mono);
  display: block;
  text-align: center;
  font-size: 24px;
  color: var(--c-orange);
  margin: 14px 0 6px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.hero-products {
  font-family: var(--font-mono);
  text-align: center;
  font-size: 18px;
  color: var(--c-muted);
  margin-bottom: 36px;
  letter-spacing: 0.02em;
}
.hero-products span {
  color: var(--c-ink);
  font-weight: 600;
}

.hero-tagline {
  font-family: var(--font-cn-serif);
  font-style: italic;
  font-size: 21px;
  font-weight: 400;
  text-align: center;
  color: var(--c-muted);
  margin-bottom: 32px;
  letter-spacing: 0.01em;
}

.hero-desc {
  text-align: center;
  font-size: 16px;
  color: var(--c-muted);
  line-height: 1.85;
  max-width: 720px;
  margin: 0 auto 40px;
}
.hero-desc b { color: var(--c-ink); font-weight: 600; }

.hero-install {
  max-width: 580px;
  margin: 0 auto 28px;
  display: flex;
  align-items: stretch;
  background: var(--c-ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(26, 26, 26, 0.4);
}
.hero-install .label {
  background: var(--c-orange);
  color: var(--c-paper);
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
}
.hero-install code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 14px;
  color: #FED7AA;
  padding: 14px 18px;
  white-space: nowrap;
  overflow-x: auto;
}

.hero-meta {
  text-align: center;
  font-size: 13px;
  color: var(--c-muted);
}
.hero-meta strong { color: var(--c-ink); font-weight: 600; }

.hero-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 28px;
  font-size: 13px;
  color: var(--c-muted);
}
.hero-nav a {
  padding: 4px 14px;
  border-right: 1px solid var(--c-line);
  color: var(--c-muted);
}
.hero-nav a:hover { color: var(--c-orange); }
.hero-nav a:last-child { border-right: none; }

/* =====================================================
   SECTION COMMON
====================================================== */
section {
  padding: 80px 0;
  border-bottom: 1px solid var(--c-line);
}
section:last-of-type { border-bottom: none; }

.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 14px;
  padding: 4px 10px;
  background: var(--c-orange-bg);
  border-radius: 4px;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.section-sub {
  font-size: 16px;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 44px;
  max-width: 680px;
}

/* =====================================================
   DEMO SECTION
====================================================== */
.demo-hero {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.demo-hero img {
  display: block;
  width: 100%;
  height: auto;
}
.demo-caption {
  text-align: center;
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.7;
}
.demo-caption a { color: var(--c-orange); font-weight: 500; }

.demo-secondary {
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.demo-secondary .icon {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-orange);
  background: var(--c-orange-bg);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.1em;
}
.demo-secondary .text { flex: 1; min-width: 240px; font-size: 14px; color: var(--c-muted); line-height: 1.6; }
.demo-secondary .text b { color: var(--c-ink); font-weight: 600; }
.demo-secondary a {
  font-size: 13px;
  color: var(--c-orange);
  font-weight: 500;
}

/* =====================================================
   4 ABILITIES GRID
====================================================== */
.abilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .abilities-grid { grid-template-columns: 1fr; }
}

.ability {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 30px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.ability:hover {
  border-color: var(--c-orange-line);
  transform: translateY(-2px);
}
.ability.featured {
  background: linear-gradient(180deg, var(--c-orange-bg) 0%, var(--c-paper) 35%);
  border-color: var(--c-orange-line);
}
.ability .ab-num {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: var(--font-en);
  font-size: 36px;
  font-weight: 800;
  color: var(--c-orange);
  opacity: 0.18;
  line-height: 1;
}
.ability.featured .ab-num { opacity: 0.32; }

.ability .ab-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.ability .ab-route .from, .ability .ab-route .to {
  color: var(--c-ink);
  font-weight: 600;
}
.ability .ab-route .arrow {
  color: var(--c-orange);
  font-weight: 700;
}

.ability h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.ability p {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.ability .ab-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
.ability .ab-tool {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-orange);
  background: var(--c-orange-bg);
  border: 1px solid var(--c-orange-line);
  padding: 3px 9px;
  border-radius: 4px;
}

.principle-box {
  margin-top: 28px;
  padding: 20px 24px;
  background: #FFFEF9;
  border-left: 3px solid var(--c-orange);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: var(--c-ink);
  line-height: 1.8;
}
.principle-box strong { color: var(--c-orange); font-weight: 700; }
.principle-box ul { margin: 8px 0 0 0; padding-left: 20px; list-style: none; }
.principle-box li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 4px;
}
.principle-box li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--c-orange);
  font-weight: 700;
}

/* =====================================================
   4 THEMES GALLERY
====================================================== */
.themes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
@media (max-width: 720px) {
  .themes-grid { grid-template-columns: 1fr; }
}
.theme-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
}
.theme-card img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--c-line);
}
.theme-card .theme-info {
  padding: 14px 18px;
}
.theme-card .theme-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
  margin-bottom: 4px;
}
.theme-card .theme-desc {
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.5;
}

/* =====================================================
   TABLES
====================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
  background: var(--c-paper);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--c-line);
}
thead th {
  background: var(--c-cream-deep);
  color: var(--c-ink);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--c-line);
}
tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line-soft);
  line-height: 1.6;
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(194, 65, 12, 0.02); }
table code {
  font-family: var(--font-mono);
  background: var(--c-cream-deep);
  color: var(--c-orange);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}
table strong { color: var(--c-ink); font-weight: 600; }

/* =====================================================
   DOCX SPOTLIGHT (NEW ABILITY)
====================================================== */
.docx-spotlight {
  background: linear-gradient(135deg, var(--c-orange-bg) 0%, var(--c-cream) 60%);
  border: 1px solid var(--c-orange-line);
  border-radius: 16px;
  padding: 44px 48px;
  position: relative;
  overflow: hidden;
}
.docx-spotlight::before {
  content: "NEW";
  position: absolute;
  top: 24px;
  right: 36px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--c-paper);
  background: var(--c-orange);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.15em;
}

.docx-spotlight h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.docx-spotlight .docx-why {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 640px;
}
.docx-spotlight .docx-why em {
  color: var(--c-orange);
  font-style: normal;
  font-weight: 600;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: var(--c-paper);
  border: 1px solid var(--c-orange-line);
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
}
.feature-grid .cell {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line-soft);
  border-right: 1px solid var(--c-line-soft);
}
.feature-grid .cell:nth-child(2n) { border-right: none; }
.feature-grid .cell:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 600px) {
  .feature-grid .cell { border-right: none; }
  .feature-grid .cell:nth-last-child(2) { border-bottom: 1px solid var(--c-line-soft); }
}
.feature-grid .label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-orange);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}
.feature-grid .value {
  font-size: 13px;
  color: var(--c-ink);
  line-height: 1.5;
}

.realworld {
  margin-top: 24px;
  font-family: var(--font-cn-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--c-ink);
  line-height: 1.7;
  padding-left: 14px;
  border-left: 3px solid var(--c-orange);
}
.realworld b { font-style: normal; color: var(--c-orange); }

/* =====================================================
   CODE BLOCKS
====================================================== */
pre {
  background: var(--c-ink);
  color: #FED7AA;
  padding: 22px 26px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  overflow-x: auto;
  margin: 18px 0;
  box-shadow: 0 4px 20px -8px rgba(26, 26, 26, 0.3);
}
pre code { font-family: inherit; }
pre .comment { color: #94A3B8; font-style: italic; }
pre .cmd { color: #FCD34D; font-weight: 600; }
pre .arg { color: #BEF264; }
pre .str { color: #FED7AA; }

code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--c-cream-deep);
  color: var(--c-orange);
  padding: 1px 7px;
  border-radius: 4px;
}

/* =====================================================
   WORKFLOW
====================================================== */
.workflow-scenarios {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.workflow-item {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
}
.workflow-item .wf-head {
  padding: 14px 22px;
  background: var(--c-cream-deep);
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 14px;
}
.workflow-item .wf-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-paper);
  background: var(--c-orange);
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.workflow-item .wf-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--c-ink);
}
.workflow-item pre {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* =====================================================
   DEPENDENCY TABLE
====================================================== */
.warning-box {
  background: #FFFBEB;
  border-left: 3px solid #D97706;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 18px 0;
  font-size: 13px;
  color: var(--c-ink);
  line-height: 1.7;
}
.warning-box strong { color: #D97706; }

/* =====================================================
   FILE TREE
====================================================== */
.filetree {
  background: var(--c-ink);
  color: #E5DCC6;
  padding: 24px 28px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.85;
  overflow-x: auto;
}
.filetree .dir { color: #FED7AA; font-weight: 600; }
.filetree .file { color: #BEF264; }
.filetree .new { color: var(--c-paper); background: var(--c-orange); padding: 1px 6px; border-radius: 3px; font-size: 10px; margin-left: 6px; font-weight: 700; letter-spacing: 0.05em; }
.filetree .cmt { color: #94A3B8; font-style: italic; }

/* =====================================================
   PHILOSOPHY
====================================================== */
.philosophy {
  font-family: var(--font-cn-serif);
  font-size: 18px;
  line-height: 1.95;
  color: var(--c-ink);
  letter-spacing: 0.01em;
}
.philosophy p { margin-bottom: 20px; }
.philosophy p.lede {
  font-size: 22px;
  color: var(--c-ink);
}
.philosophy p.lede b {
  color: var(--c-orange);
  font-weight: 700;
  font-style: italic;
}
.philosophy ul {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}
.philosophy ul li {
  padding-left: 24px;
  position: relative;
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--c-muted);
}
.philosophy ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-orange);
  font-weight: 700;
}
.philosophy ul li b { color: var(--c-ink); font-weight: 600; }

/* =====================================================
   CONTACT
====================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}
@media (max-width: 600px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  transition: border-color 0.2s;
}
.contact-card:hover { border-color: var(--c-orange-line); }
.contact-card .platform {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: 0.05em;
  min-width: 90px;
}
.contact-card .handle {
  font-size: 14px;
  color: var(--c-ink);
  font-weight: 500;
  flex: 1;
}

/* =====================================================
   FOOTER
====================================================== */
footer {
  padding: 60px 0 70px;
  background: var(--c-cream-deep);
  text-align: center;
  border-top: 1px solid var(--c-line);
}
footer .sig {
  font-family: var(--font-cn-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--c-orange);
  margin-bottom: 10px;
}
footer .sub {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.7;
}
footer .sub a { color: var(--c-orange); font-weight: 500; }

/* responsive */
@media (max-width: 720px) {
  .hero-title { font-size: 44px; }
  .hero { padding: 60px 0 50px; }
  section { padding: 60px 0; }
  .section-title { font-size: 28px; }
  .docx-spotlight { padding: 30px 24px; }
  .wrap, .wrap-wide { padding: 0 20px; }
}
</style>
</head>
<body>

<!-- ============== HERO ============== -->
<header class="hero">
  <div class="wrap">
    <div class="hero-badges">
      <span class="hero-badge"><span class="dot"></span>MIT License</span>
      <span class="hero-badge"><span class="dot"></span>Agent-Agnostic</span>
      <span class="hero-badge"><span class="dot"></span>skills.sh Compatible</span>
      <span class="hero-badge featured"><span class="dot"></span>NEW · md → docx</span>
    </div>

    <h1 class="hero-title">huashu<span class="accent">-</span>md<span class="accent">-</span>html</h1>

    <div class="hero-arrow">md  →  html / docx</div>
    <div class="hero-products"><span>md</span> 是源代码，<span>html / docx</span> 是产物。</div>

    <div class="hero-tagline">"Source once · publish many."</div>

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

    <div class="hero-install">
      <div class="label">INSTALL</div>
      <code>npx skills add alchaincyf/huashu-md-html</code>
    </div>

    <p class="hero-meta">
      跨 agent 通用 · <strong>Claude Code · Cursor · Codex · OpenClaw · Hermes</strong> 都能装
    </p>

    <nav class="hero-nav">
      <a href="#demo">看效果</a>
      <a href="#abilities">四个能力</a>
      <a href="#themes">4 套主题</a>
      <a href="#docx">出版社 docx</a>
      <a href="#workflow">一条龙工作流</a>
      <a href="#philosophy">设计哲学</a>
    </nav>
  </div>
</header>

<!-- ============== DEMO ============== -->
<section id="demo">
  <div class="wrap">
    <span class="section-label">DEMO</span>
    <h2 class="section-title">20 秒看懂 md / html / docx 怎么流转</h2>
    <p class="section-sub">Kenya Hara 极简风格 · md → 入·排·出 → html · 衬线 + 留白 + 一抹赤陶橙。</p>

    <div class="demo-hero">
      <img src="../demos/v3-hara-hero.gif" alt="huashu-md-html Hero · md 是源，html 是产物">
    </div>
    <p class="demo-caption">
      👉 <a href="../demos/v3-hara-hero.mp4">下载 MP4（含 BGM · 850KB）</a>
    </p>

    <div class="demo-secondary">
      <span class="icon">ALT</span>
      <span class="text">
        <b>另一版风格：</b>Pentagram 信息建筑派 · 象牙白 + 墨黑 + 辛辣红 · 大字号 sans + 12 列网格 + tabular nums
      </span>
      <a href="../demos/v1-pentagram.mp4">查看 MP4 →</a>
    </div>

    <p class="demo-caption" style="margin-top: 24px; padding: 16px; background: var(--c-paper); border-radius: 8px; border: 1px solid var(--c-line);">
      📌 <b>以上两段动画都是用 <a href="https://github.com/alchaincyf/huashu-design">huashu-design</a> skill 做的</b>——作为本 skill 的宣传短片。同一个产品，两种视觉哲学，差异不来自模板而来自设计语言。
    </p>
  </div>
</section>

<!-- ============== 4 ABILITIES ============== -->
<section id="abilities">
  <div class="wrap">
    <span class="section-label">FOUR ABILITIES</span>
    <h2 class="section-title">四个能力 · 一条流水线</h2>
    <p class="section-sub">每个能力都是独立的脚本入口，互相可以组合。决策错了会绕远路——选哪个能力之前先读路由表。</p>

    <div class="abilities-grid">

      <div class="ability">
        <div class="ab-num">01</div>
        <div class="ab-route">
          <span class="from">PDF / DOCX / 网页…</span>
          <span class="arrow">→</span>
          <span class="to">md</span>
        </div>
        <h3>万物 → md</h3>
        <p>把任意输入（PDF、DOCX、PPTX、XLSX、EPUB、图片、音频、YouTube、网页 URL）转成干净的 markdown，作为后续加工的源。</p>
        <div class="ab-tools">
          <span class="ab-tool">markitdown</span>
          <span class="ab-tool">scripts/any_to_md.py</span>
        </div>
      </div>

      <div class="ability">
        <div class="ab-num">02</div>
        <div class="ab-route">
          <span class="from">md</span>
          <span class="arrow">→</span>
          <span class="to">精美 html</span>
        </div>
        <h3>md → 精美 html</h3>
        <p>用 pandoc + 4 套自调主题（article / report / reading / interactive）加工成可发布的 html。自包含单文件，不依赖外部 CDN。</p>
        <div class="ab-tools">
          <span class="ab-tool">pandoc</span>
          <span class="ab-tool">scripts/md_to_html.py</span>
        </div>
      </div>

      <div class="ability">
        <div class="ab-num">03</div>
        <div class="ab-route">
          <span class="from">本地 html / URL</span>
          <span class="arrow">→</span>
          <span class="to">md</span>
        </div>
        <h3>html → md</h3>
        <p>把已发布的博客文章、新闻、Essay 反向归档成 md。trafilatura 自动去除导航/侧栏/广告，只留正文。</p>
        <div class="ab-tools">
          <span class="ab-tool">html-to-markdown</span>
          <span class="ab-tool">trafilatura</span>
          <span class="ab-tool">scripts/html_to_md.py</span>
        </div>
      </div>

      <div class="ability featured">
        <div class="ab-num">04</div>
        <div class="ab-route">
          <span class="from">md</span>
          <span class="arrow">→</span>
          <span class="to">出版社级 docx</span>
        </div>
        <h3>md → 精美 docx</h3>
        <p>给出版社、编辑、投稿系统的<b>终极交付物</b>。自动嵌图、加封面、做目录、配页眉页脚。专为纸质书审校 / 投稿 / 出版定稿设计。</p>
        <div class="ab-tools">
          <span class="ab-tool">python-docx</span>
          <span class="ab-tool">scripts/md_to_docx.py</span>
        </div>
      </div>

    </div>

    <div class="principle-box">
      <strong>决策原则</strong>
      <ul>
        <li>能力 1 产出的 md 可以直接喂给能力 2，组成「PDF → 精美阅读 html」<b>一条龙</b></li>
        <li>能力 3 用于<b>反向归档</b>——把已发布的 html 博客文章存回项目源</li>
        <li>能力 4 是<b>出版终点</b>——给人类编辑/出版社审校时用 docx，不要直接给 html 或 md</li>
      </ul>
    </div>

    <h3 style="font-size: 18px; margin: 40px 0 14px; color: var(--c-ink);">URL 输入的两条路径</h3>
    <table>
      <thead>
        <tr><th>页面类型</th><th>走哪个</th><th>原因</th></tr>
      </thead>
      <tbody>
        <tr>
          <td><strong>结构化页面</strong>（产品详情、技术文档、API doc、证书页、电商商品页）</td>
          <td>能力 1（markitdown）</td>
          <td>保留 metadata、字段值、链接、标题层级</td>
        </tr>
        <tr>
          <td><strong>正文类页面</strong>（博客、新闻、Essay、长文）</td>
          <td>能力 3（trafilatura）</td>
          <td>自动去导航/侧栏/广告，只留正文</td>
        </tr>
        <tr>
          <td><strong>不确定</strong></td>
          <td>两个都跑一遍对比</td>
          <td>看哪个对下游用途更合适</td>
        </tr>
      </tbody>
    </table>

    <p style="margin-top: 16px; font-size: 14px; color: var(--c-muted); line-height: 1.7;">
      <strong style="color: var(--c-ink);">判断捷径：</strong>URL 里的内容是<em style="color: var(--c-orange); font-style: normal; font-weight: 600;">「读」</em>的还是<em style="color: var(--c-orange); font-style: normal; font-weight: 600;">「查」</em>的？读 → 能力 3（去噪），查 → 能力 1（保信息）。
    </p>
  </div>
</section>

<!-- ============== 4 THEMES ============== -->
<section id="themes">
  <div class="wrap">
    <span class="section-label">HTML THEMES</span>
    <h2 class="section-title">4 套 html 主题</h2>
    <p class="section-sub">每套都过了反 AI slop 检查清单。自包含单 CSS，HTML 打开即用，不依赖外部 CDN。</p>

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

    <div class="themes-grid">
      <div class="theme-card">
        <img src="output/article.png" alt="article 主题预览">
        <div class="theme-info">
          <div class="theme-name">article</div>
          <div class="theme-desc">Tufte 风 · 衬线 + 边距笔记</div>
        </div>
      </div>
      <div class="theme-card">
        <img src="output/report.png" alt="report 主题预览">
        <div class="theme-info">
          <div class="theme-name">report</div>
          <div class="theme-desc">白皮书风 · 宽体多表格</div>
        </div>
      </div>
      <div class="theme-card">
        <img src="output/reading.png" alt="reading 主题预览">
        <div class="theme-info">
          <div class="theme-name">reading</div>
          <div class="theme-desc">Medium 风 · 单栏极简</div>
        </div>
      </div>
      <div class="theme-card">
        <img src="output/interactive.png" alt="interactive 主题预览">
        <div class="theme-info">
          <div class="theme-name">interactive</div>
          <div class="theme-desc">长文档 · 侧边栏 + 折叠目录</div>
        </div>
      </div>
    </div>

    <h3 style="font-size: 16px; margin: 36px 0 12px; color: var(--c-ink);">排版底线（所有主题共享）</h3>
    <pre><span class="comment">正文字体（中文）</span>  PingFang SC, Source Han Serif, Noto Serif CJK
<span class="comment">正文字体（英文）</span>  Inter, IBM Plex Sans, et-book
<span class="comment">代码字体</span>         JetBrains Mono, Fira Code
<span class="comment">行高（中文）</span>     1.75 - 1.85
<span class="comment">字号（桌面）</span>     17 - 18px
<span class="comment">最大宽度（文章）</span>  680 - 720px
<span class="comment">代码块底色</span>       #F6F8FA（浅模式）/ #1F2428（深模式）
<span class="comment">引用块</span>           左 4px 色条 + 浅灰底</pre>

    <p style="margin-top: 14px; font-size: 13px; color: var(--c-muted);">
      <strong style="color: var(--c-orange);">禁用清单：</strong>紫渐变、赛博霓虹、 <code>#0D1117</code> 深蓝底、Comic Sans、emoji 作正式图标。
    </p>
  </div>
</section>

<!-- ============== DOCX SPOTLIGHT ============== -->
<section id="docx">
  <div class="wrap">
    <span class="section-label">FEATURED</span>
    <h2 class="section-title">md → 出版社级 docx</h2>
    <p class="section-sub">为什么单独做能力 4？因为 <code>pandoc md -o docx</code> 出来的 docx 默认 Calibri、无表格样式、无封面、章节首页平淡——能给 AI 看，不能给出版社编辑改稿。</p>

    <div class="docx-spotlight">
      <h3>能力 4 内置了出版社版式预设</h3>
      <p class="docx-why">
        章号小标 + 大字号章名 + 英文副标题 + 橙色分隔线、引用块按类型配色、表格表头底色、代码块左侧色条 + 浅灰底、页眉书名 + 页脚自动页码——这些细节都内置了，<em>单文件或一整本书都能一条命令生成</em>。
      </p>

<pre><span class="comment"># 单文件转换</span>
<span class="cmd">python3</span> scripts/md_to_docx.py article.md

<span class="comment"># 整本书（自动加封面 + 目录 + 页眉 + 章节分页）</span>
<span class="cmd">python3</span> scripts/md_to_docx.py ch*.md postscript.md appendix.md <span class="arg">--book</span> \
    <span class="arg">--title</span> <span class="str">"图解 Agent Skills"</span> \
    <span class="arg">--subtitle</span> <span class="str">"让 AI 记住你的工作方式"</span> \
    <span class="arg">--author</span> <span class="str">"花叔"</span> \
    <span class="arg">--images-dir</span> ./images \
    <span class="arg">-o</span> book.docx</pre>

      <h3 style="margin-top: 28px; font-size: 18px;">版式特性一览</h3>
      <div class="feature-grid">
        <div class="cell">
          <div class="label">PAGE</div>
          <div class="value">大 32 开（176×240 mm）或 A4</div>
        </div>
        <div class="cell">
          <div class="label">CHAPTER TITLE</div>
          <div class="value">章号小标 + 24pt 大字号 + 橙色底分隔线 + 英文副标题</div>
        </div>
        <div class="cell">
          <div class="label">CALLOUT</div>
          <div class="value">按 emoji 自动配色：💡 琥珀 / ✅ 青色 / ⚠️ 玫红</div>
        </div>
        <div class="cell">
          <div class="label">CODE BLOCK</div>
          <div class="value">浅灰底 + 橙色左侧色边 + JetBrains Mono</div>
        </div>
        <div class="cell">
          <div class="label">TABLE</div>
          <div class="value">表头底色 + 灰色边框 + 居中对齐</div>
        </div>
        <div class="cell">
          <div class="label">FIGURE</div>
          <div class="value">居中嵌入 + 灰色斜体图说</div>
        </div>
        <div class="cell">
          <div class="label">HEADER</div>
          <div class="value">右对齐书名（斜体灰色）</div>
        </div>
        <div class="cell">
          <div class="label">FOOTER</div>
          <div class="value">居中自动页码字段</div>
        </div>
      </div>

      <div class="realworld">
        <b>实战验证。</b>用这个脚本生成《图解 Agent Skills》158 页出版社审校稿（9 章 + 后记 + 附录 + 57 张配图），一条命令搞定。
      </div>
    </div>

    <p style="margin-top: 24px; font-size: 14px; color: var(--c-muted);">
      完整 cookbook 见 <a href="../references/md-to-docx-cookbook.md"><code>references/md-to-docx-cookbook.md</code></a> · 依赖：<code>python3 -m pip install python-docx Pillow</code>
    </p>
  </div>
</section>

<!-- ============== WORKFLOW ============== -->
<section id="workflow">
  <div class="wrap">
    <span class="section-label">WORKFLOW</span>
    <h2 class="section-title">一条龙工作流</h2>
    <p class="section-sub">8 个典型场景——从 PDF 白皮书到出版社审校稿。每个都是真实跑过的命令。</p>

    <div class="workflow-scenarios">

      <div class="workflow-item">
        <div class="wf-head"><span class="wf-num">SCENE 1</span><span class="wf-title">PDF 白皮书 → 精美阅读 html</span></div>
<pre><span class="cmd">python3</span> scripts/any_to_md.py whitepaper.pdf <span class="arg">-o</span> whitepaper.md
<span class="cmd">python3</span> scripts/md_to_html.py whitepaper.md <span class="arg">--theme</span> report <span class="arg">-o</span> whitepaper.html</pre>
      </div>

      <div class="workflow-item">
        <div class="wf-head"><span class="wf-num">SCENE 2</span><span class="wf-title">YouTube 视频 → 文章博客</span></div>
<pre><span class="cmd">python3</span> scripts/any_to_md.py <span class="str">"https://youtube.com/watch?v=xxx"</span> <span class="arg">-o</span> video.md
<span class="comment"># 编辑 video.md...</span>
<span class="cmd">python3</span> scripts/md_to_html.py video.md <span class="arg">--theme</span> article <span class="arg">-o</span> blog.html</pre>
      </div>

      <div class="workflow-item">
        <div class="wf-head"><span class="wf-num">SCENE 3</span><span class="wf-title">归档已发布的博客文章 → 项目源 md</span></div>
<pre><span class="cmd">python3</span> scripts/html_to_md.py <span class="str">"https://example.com/blog/article"</span> <span class="arg">-o</span> article.md</pre>
      </div>

      <div class="workflow-item">
        <div class="wf-head"><span class="wf-num">SCENE 4</span><span class="wf-title">抓产品页 / 技术文档 → 完整结构化 md</span></div>
<pre><span class="cmd">python3</span> scripts/any_to_md.py <span class="str">"https://learn.microsoft.com/en-us/some-doc"</span> <span class="arg">-o</span> doc.md</pre>
      </div>

      <div class="workflow-item">
        <div class="wf-head"><span class="wf-num">SCENE 5</span><span class="wf-title">橙皮书章节 → 多主题对比</span></div>
<pre><span class="cmd">python3</span> scripts/md_to_html.py chapter.md <span class="arg">--theme</span> article <span class="arg">-o</span> ch-article.html
<span class="cmd">python3</span> scripts/md_to_html.py chapter.md <span class="arg">--theme</span> interactive <span class="arg">-o</span> ch-interactive.html</pre>
      </div>

      <div class="workflow-item">
        <div class="wf-head"><span class="wf-num">SCENE 6</span><span class="wf-title">URL 不确定走哪条路 → 两个都跑对比</span></div>
<pre><span class="cmd">python3</span> scripts/any_to_md.py <span class="str">"https://example.com/page"</span> <span class="arg">-o</span> page-markitdown.md
<span class="cmd">python3</span> scripts/html_to_md.py <span class="str">"https://example.com/page"</span> <span class="arg">-o</span> page-trafilatura.md</pre>
      </div>

      <div class="workflow-item">
        <div class="wf-head"><span class="wf-num">SCENE 7</span><span class="wf-title">整本书 md → 出版社审校 docx</span></div>
<pre><span class="cmd">python3</span> scripts/md_to_docx.py md-v2/ch*.md md-v2/postscript.md md-v2/appendix.md <span class="arg">--book</span> \
    <span class="arg">--title</span> <span class="str">"图解 Agent Skills"</span> <span class="arg">--author</span> <span class="str">"花叔"</span> \
    <span class="arg">--subtitle</span> <span class="str">"让 AI 记住你的工作方式"</span> \
    <span class="arg">--images-dir</span> ./images-v2 <span class="arg">-o</span> 出版社审校版.docx</pre>
      </div>

      <div class="workflow-item">
        <div class="wf-head"><span class="wf-num">SCENE 8</span><span class="wf-title">PDF 论文 → docx 投稿（能力 1 → 能力 4）</span></div>
<pre><span class="cmd">python3</span> scripts/any_to_md.py paper.pdf <span class="arg">-o</span> paper.md
<span class="comment"># 编辑 paper.md 修正格式...</span>
<span class="cmd">python3</span> scripts/md_to_docx.py paper.md <span class="arg">--page-size</span> a4 <span class="arg">-o</span> paper.docx</pre>
      </div>

    </div>
  </div>
</section>

<!-- ============== DEPENDENCIES ============== -->
<section>
  <div class="wrap">
    <span class="section-label">DEPENDENCIES</span>
    <h2 class="section-title">依赖</h2>
    <p class="section-sub">脚本启动时会自检，缺失的依赖会明确提示安装命令，不会静默失败。</p>

    <table>
      <thead>
        <tr><th>工具</th><th>用途</th><th>安装</th></tr>
      </thead>
      <tbody>
        <tr><td><code>markitdown</code></td><td>万物 → md</td><td><code>python3 -m pip install 'markitdown[all]'</code></td></tr>
        <tr><td><code>pandoc</code></td><td>md → html</td><td><code>brew install pandoc</code>（macOS）</td></tr>
        <tr><td><code>html-to-markdown</code></td><td>html → md（高速 Rust 引擎）</td><td><code>python3 -m pip install html-to-markdown</code></td></tr>
        <tr><td><code>trafilatura</code></td><td>URL 正文提取</td><td><code>python3 -m pip install trafilatura</code></td></tr>
        <tr><td><code>python-docx</code> + <code>Pillow</code></td><td>md → 精美 docx</td><td><code>python3 -m pip install python-docx Pillow</code></td></tr>
      </tbody>
    </table>

    <div class="warning-box">
      <strong>⚠ macOS Python 环境陷阱：</strong>
      <code>pip</code> 和 <code>python3</code> 可能指向不同的 Python 版本（实测踩过：<code>pip</code> 是 3.11、<code>python3</code> 是 3.14）。安装依赖请用 <code>python3 -m pip install ...</code>，不要直接 <code>pip install</code>。
    </div>
  </div>
</section>

<!-- ============== STRUCTURE ============== -->
<section>
  <div class="wrap">
    <span class="section-label">STRUCTURE</span>
    <h2 class="section-title">仓库结构</h2>

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

  </div>
</section>

<!-- ============== PHILOSOPHY ============== -->
<section id="philosophy">
  <div class="wrap">
    <span class="section-label">DESIGN PHILOSOPHY</span>
    <h2 class="section-title">设计哲学</h2>

    <div class="philosophy">
      <p class="lede">这个 skill 的存在源于一个简单观察——<b>AI 时代，文档的「生产格式」和「消费格式」第一次解耦了。</b></p>

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

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

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

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

<!-- ============== CONTACT ============== -->
<section>
  <div class="wrap">
    <span class="section-label">CONTACT</span>
    <h2 class="section-title">联系花叔</h2>
    <p class="section-sub">
      花叔是 AI Native Coder、独立开发者、AI 自媒体博主。代表作：小猫补光灯（App Store 付费榜 Top 1）、《一本书玩转 DeepSeek》、
      <a href="https://github.com/alchaincyf/nuwa-skill">nuwa-skill</a>（GitHub 18k+ stars）、
      <a href="https://github.com/alchaincyf/huashu-design">huashu-design</a>（GitHub 13k+ stars）。全平台累计粉丝 30 万+。
    </p>

    <div class="contact-grid">
      <a href="https://x.com/AlchainHust" class="contact-card">
        <span class="platform">X / TWITTER</span>
        <span class="handle">@AlchainHust</span>
      </a>
      <a href="https://space.bilibili.com/14097567" class="contact-card">
        <span class="platform">B 站</span>
        <span class="handle">花叔</span>
      </a>
      <a href="https://www.youtube.com/@Alchain" class="contact-card">
        <span class="platform">YOUTUBE</span>
        <span class="handle">花叔</span>
      </a>
      <a href="https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf" class="contact-card">
        <span class="platform">小红书</span>
        <span class="handle">花叔</span>
      </a>
      <a href="https://www.huasheng.ai/" class="contact-card">
        <span class="platform">官网</span>
        <span class="handle">huasheng.ai</span>
      </a>
      <a href="https://bookai.top" class="contact-card">
        <span class="platform">开发者 HUB</span>
        <span class="handle">bookai.top</span>
      </a>
    </div>

    <p style="margin-top: 28px; font-size: 14px; color: var(--c-muted); text-align: center;">
      公众号：微信搜索<strong style="color: var(--c-ink);">「花叔」</strong> · 商业合作请发邮件到 <a href="mailto:alchaincyf@gmail.com">alchaincyf@gmail.com</a>
    </p>
  </div>
</section>

<!-- ============== FOOTER ============== -->
<footer>
  <div class="wrap">
    <p class="sig">md 是源代码，html / docx 是产物。</p>
    <p class="sub">
      MIT License · 个人和商业使用均自由<br>
      如果这个 skill 对你有帮助，欢迎在 <a href="https://github.com/alchaincyf/huashu-md-html">GitHub</a> 上 star 仓库
    </p>
  </div>
</footer>

</body>
</html>
readme.html Unescape Escape

readme.html
