diff --git a/templates/overview-artifact.html b/templates/overview-artifact.html
new file mode 100644
index 0000000..0b1f4ec
--- /dev/null
+++ b/templates/overview-artifact.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{標題}}</title>
+<style>
+  /* 樣式全部集中在這裡，內文只放佔位——改版面不必動內容，換內容不必碰樣式 */
+  :root {
+    --bg: #ffffff;
+    --fg: #1f2328;
+    --muted: #59636e;
+    --line: #d1d9e0;
+    --accent: #0969da;
+    --surface: #f6f8fa;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --bg: #0d1117;
+      --fg: #e6edf3;
+      --muted: #9198a1;
+      --line: #3d444d;
+      --accent: #4493f8;
+      --surface: #151b23;
+    }
+  }
+  :root[data-theme="dark"] {
+    --bg: #0d1117;
+    --fg: #e6edf3;
+    --muted: #9198a1;
+    --line: #3d444d;
+    --accent: #4493f8;
+    --surface: #151b23;
+  }
+
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    padding: 48px 16px 96px;
+    background: var(--bg);
+    color: var(--fg);
+    font: 16px/1.7 -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
+  }
+  main { max-width: 900px; margin: 0 auto; }
+
+  header { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 40px; }
+  h1 { font-size: 30px; line-height: 1.3; margin: 0 0 12px; }
+  .meta { color: var(--muted); font-size: 14px; }
+  .meta a { color: var(--accent); text-decoration: none; }
+  .meta a:hover { text-decoration: underline; }
+
+  .lede {
+    font-size: 21px;
+    line-height: 1.6;
+    margin: 0 0 40px;
+    padding: 20px 24px;
+    background: var(--surface);
+    border-left: 3px solid var(--accent);
+    border-radius: 0 8px 8px 0;
+  }
+
+  section { margin-bottom: 40px; }
+  h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
+       color: var(--muted); margin: 0 0 16px; font-weight: 600; }
+  ul { margin: 0; padding-left: 22px; }
+  li { margin-bottom: 8px; }
+
+  figure { margin: 0; padding: 24px; background: var(--surface);
+           border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
+  figure .mermaid { display: flex; justify-content: center; }
+
+  footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
+           color: var(--muted); font-size: 13px; }
+
+  @media (max-width: 600px) {
+    body { padding: 32px 16px 64px; }
+    h1 { font-size: 24px; }
+    .lede { font-size: 18px; padding: 16px 18px; }
+  }
+</style>
+</head>
+<body>
+<main>
+  <header>
+    <h1>{{標題}}</h1>
+    <p class="meta">{{來源議題}}</p>
+  </header>
+
+  <p class="lede">{{總覽}}</p>
+
+  <section>
+    <h2>目標</h2>
+    <ul>{{目標}}</ul>
+  </section>
+
+  <section>
+    <h2>流程</h2>
+    <figure><div class="mermaid">{{流程圖}}</div></figure>
+  </section>
+
+  {{工作包全景}}
+
+  <footer>{{頁尾}}</footer>
+</main>
+
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+  const dark = matchMedia('(prefers-color-scheme: dark)').matches;
+  mermaid.initialize({ startOnLoad: true, theme: dark ? 'dark' : 'default' });
+</script>
+</body>
+</html>