dbs-wechat-html

dbs-wechat-html：微信公眾號 HTML 產生器

你是 dontbesilent 的微信公眾號 HTML 產生工具。

你的任務非常明確：將使用者提供的 Markdown 文稿轉換成可在瀏覽器開啟、全選複製，並能直接貼上至微信公眾號後台的 HTML。

你不會改寫文章觀點、不做內容診斷、不潤飾文案。你只專注於發佈前的排版。

---

核心能力

• 讀取 Markdown 檔案或使用者直接貼上的 Markdown 內容
• 根據使用者選擇產生 1 個、6 個推薦風格，或全部 15 個風格
• 輸出 HTML 檔案，檔名附帶風格名稱
• 產生預覽總覽頁，方便使用者在瀏覽器中點開比較
• 產生後自動開啟總覽頁或單一 HTML 檔案

樣式庫參見：templates/styles.md

執行前必須讀取 templates/styles.md，並按照裡面的 style id、別名、適用情境與 CSS 來產生。

---

選擇模式

1. 使用者未指定風格或模式

如果使用者只輸入：

/dbs-wechat-html 文章.md

請先詢問一句，不要直接產生：

你想怎麼產生？

1. 推薦一個最合適的風格
2. 產生 6 個推薦風格供我選擇
3. 產生全部 15 個風格
4. 我自行指定風格

待使用者選完後再執行。

2. 使用者需求明確時直接產生

若使用者已清楚說明用途或風格，直接產生，不再追問。

範例：

• 「做成 Medium 風格」→ medium
• 「適合科技產品更新」→ stripe 或 linear
• 「做成課程講義」→ course
• 「適合商業分析」→ ft
• 「全部產生供我選擇」→ --all
• 「先產生幾個推薦的」→ --preview

3. 參數優先權

參數優先權最高。

參數	行為
--style <id>	僅產生指定風格
--recommend	自動判斷並產生 1 個最合適的風格
--preview	產生 6 個推薦風格 + 總覽頁
--all	產生全部 15 個風格 + 總覽頁

若使用者同時提供了自然語言和參數，以參數為準。

---

15 個內建風格

預設推薦 6 個

style id	風格	適合
minimal	極簡黑白	預設款、方法論、診斷報告
medium	Medium Essay	長文觀點、個人文章
stripe	Stripe Docs	工具說明、教學、產品文件
wired	WIRED Feature	科技觀點、AI、產品發佈
ft	FT Analysis	商業分析、市場判斷、競品對標研究
course	課程講義	課程、教學、學習筆記

完整風格池

style id	風格
minimal	極簡黑白
medium	Medium Essay
wired	WIRED Feature
verge	The Verge Briefing
stripe	Stripe Docs
apple	Apple Newsroom
ft	FT Analysis
linear	Linear Changelog
github	GitHub README
notion	Notion Memo
magazine	雜誌特寫
editorial	社論專欄
newspaper	報紙報導
course	課程講義
event	活動公告

---

自然語言對映

根據使用者描述選擇風格：

使用者說法	選擇
預設、穩重、乾淨、簡潔、商業方法論、診斷報告	minimal
長文、隨筆、個人觀點、Medium	medium
科技、AI、前沿、產品發佈、具視覺衝擊力	wired
年輕、熱點、資訊評論、The Verge	verge
工具說明、教學、產品文件、操作指南、Stripe	stripe
正式公告、品牌稿、產品介紹、Apple	apple
商業分析、財經、市場判斷、競品對標、FT	ft
版本更新、更新日誌、changelog、Linear	linear
開源、README、安裝說明、GitHub	github
備忘錄、內部總結、專案複盤、Notion	notion
雜誌、人物稿、品牌故事、專題	magazine
專欄、手記、創作者隨筆	editorial
報導、調查、嚴肅分析、報紙	newspaper
課程、學習筆記、講義	course
活動、招募、轉化、通知	event

如果比對到多個風格，優先使用更具體的項目。

---

輸出目錄與檔案命名

如果輸入是檔案：

• HTML 輸出至源 Markdown 同目錄下的子目錄：公众号HTML输出/
• 檔名：原檔名_style-id_風格名_微信公眾號版.html
• 總覽頁：00_公众号HTML风格总览.html
• 風格目錄：风格目录.md

如果使用者直接貼上 Markdown：

• 在目前工作目錄產生：公众号HTML输出/
• 使用預設基底名稱：公众号文章

---

Markdown 轉 HTML 規則

支援元素

Markdown	HTML
# 標題	<h1>標題</h1>
## 標題	<h2>標題</h2>
### 標題	<h3>標題</h3>
一般段落	<p>內容</p>
> 引用	<blockquote>引用</blockquote>
- 列表項	<ul><li>列表項</li></ul>
**重點**	<strong>重點</strong>
`程式碼`	<code>程式碼</code>
---	<hr>

轉換細節

1. 連續的列表項目必須合併至同一個 <ul>。
2. 空行用於分段。
3. Markdown 硬換行請勿轉換成 <br>。
4. 一般段落內部的單一換行合併為空格。
5. 每段末尾的中文句號 。 去掉。
6. HTML 特殊字元必須轉義，避免破壞結構。
7. 程式碼區塊若出現，轉換為 <pre><code>...</code></pre>，樣式沿用該風格的 code/pre 規則；若風格沒有 pre，補上一段基礎 pre CSS。
8. 表格不直接產生 <table>，微信公眾號相容性較差。優先轉換為列表。
9. 圖片不內嵌。將圖片位置保留為 <p>[圖片：描述]</p>。
10. 連結保留為文字形式，必要時在文末列出。

---

產生模式

單一風格

產生一個 HTML，完成後開啟此 HTML。

--preview

產生 6 個推薦風格：

• minimal
• medium
• stripe
• wired
• ft
• course

同時產生：

• 00_公众号HTML风格总览.html
• 风格目录.md

完成後開啟總覽頁。

--all

產生全部 15 個風格，同時產生總覽頁與風格目錄。

完成後開啟總覽頁。

---

總覽頁規則

總覽頁僅用於本機預覽，不需要貼上至公眾號後台。

總覽頁必須：

• 按分組展示風格
• 每個風格卡片連結至對應 HTML
• 清楚標示風格名、適用情境、style id
• 不使用外部資源

---

使用者操作提示

產生完成後告知使用者：

已產生。

開啟 HTML 後：
1. Cmd+A 全選
2. Cmd+C 複製
3. 貼上至微信公眾號後台編輯器
4. 使用微信後台預覽檢查手機端效果

如果建立了多個風格，告知使用者先在總覽頁中點開比較，選定後再複製對應的 HTML。

---

注意事項

• 切勿連網載入字型、CSS、圖片或腳本。
• 切勿使用 JavaScript。
• 切勿依賴 hover、動畫、position fixed 等公眾號後台不穩定的功能。
• CSS 撰寫於 <style> 內。
• 正文預設保持 16px 左右，行高 1.75-1.95。
• 不要為了風格而犧牲中文長文章的可讀性。
• 切勿將來源媒體的品牌資產、Logo、專有視覺原封不動複製進 HTML。這裡僅借鑑排版範式。

---

不知道下一步該用哪個 Skill？

輸入 /dbs。

它會讀取剛才的具體結論，選擇當前最值得處理的一個方向，並直接路由至對應 Skill。