html-anything：讓本地AI Agent直接輸出HTML，還可以一鍵複製到公眾號、小紅書、推特、知乎等

作者：惡人筆記
日期：2026年5月17日 上午7:45
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

html-anything：讓本地 AI Agent 直接輸出可交付 HTML，一鍵複製到公眾號、小紅書、Twitter

整理版摘要

呢篇文章由 Tom Huang 同 nexu-io 團隊嘅開源項目 html-anything 出發，講述點解喺 AI Agent 時代，HTML 開始取代 Markdown 成為內容輸出首選。作者想解決嘅問題係：AI Agent 成日輸出 Markdown 草稿，要人手再排版先用到，而 html-anything 就係要打通「最後一公里」，令 Agent 直接產出高質素、可交付嘅 HTML。整體結論係：好內容唔單止要寫得好，仲要呈現得好，而呢個工具正正幫手慳時間同提升質素。

項目係本地優先、開源免費，支援 Claude Code、Cursor、Codex 等主流 Agent，內置 75 套 Skill 模板，覆蓋 Deck、Document、Social、Frame 等 9 大場景。使用者可以喺左側貼 Markdown 或數據，中間揀模板，右側即時預覽，然後一鍵導出兼容公眾號、知乎、小紅書等平台嘅 HTML 或 PNG。整個過程喺本地運行，敏感資料唔會上傳，隱私好穩陣。

作者認為呢個方案特別適合內容創作者、產品經理同獨立開發者，可以大幅提升週報、產品規格、社交卡片等製作效率。不過都要留意，模板雖多，但高度定製場景可能需要手動微調，而且依賴本地 Agent 能力。總括嚟講，係一個值得試嘅 Agent 時代內容交付升級方案。

  • HTML 取代 Markdown 成為 AI Agent 輸出首選，因為排版自由、即貼即用、零二次排版。
  • html-anything 提供 75 套專業模板，覆蓋 Deck、Document、Social、Frame 等 9 大場景，內建硬約束減少 AI 低質輸出。
  • 本地優先，支援 8 款主流 Coding Agent，零 API Key 成本，直接複用終端 session。
  • 一鍵導出兼容微信公眾號、小紅書、Twitter、知乎等平台嘅 HTML 或 PNG，幾乎唔使再排版。
  • 使用建議：先用 Featured Skill 練手，畀 AI 嘅 Prompt 要強調「嚴格跟從 SKILL.md 約束，用真實數據」，效果更佳。
值得記低
連結 github.com

專案 GitHub 倉庫

html-anything 開源項目原始碼，Apache-2.0 協議

開啟
連結 github.com

中文說明文件

README.zh-CN，詳細嘅安裝使用指引

開啟
整理重點

點解 HTML 取代 Markdown 成為 Agent 輸出首選？

最近 Anthropic Claude Code 團隊公開分享，佢哋內部已經好少用 Markdown 寫文檔，幾乎全部轉用 HTML。原因好簡單：Markdown 排版受限於渲染器，而 HTML 幾乎無限自由；Markdown 截圖發 Twitter 或朋友圈通常好肉酸，HTML 直接係精美成品；複製到公眾號、知乎等平台，Markdown 成日要重排，但 HTML（尤其係內聯 CSS）基本上即貼即用。

整理重點

html-anything 嘅三大亮點

  • 支援 8 款主流 Coding Agent：包括 Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、Qwen Coder、Aider 等，會自動掃描 PATH 識別。
  • 75 套 Skill 模板，覆蓋 9 大場景：Deck（PPT）有瑞士國際主義風格、Guizang 編輯墨水風；Document 有暖羊皮紙風格、報紙長圖海報；Social 有小紅書筆記、Twitter 卡片；另外仲有 Frame、Web 原型、數據報告、簡歷、VFX 文字效果等。
  • 極致使用體驗：左側貼內容，中間揀模板，右側 iframe 即時流式預覽，一鍵導出兼容公眾號、知乎、小紅書等平台嘅 HTML 或高 DPI PNG。

每個模板都有嚴格嘅設計約束（字體棧、基線網格、對比度、真實數據優先），可以有效減少「AI slop」（低質泛化輸出）。

整理重點

30 秒上手教程同分析

  1. 1 確保電腦裝咗 Node.js/pnpm 同至少一個支援嘅 Agent CLI（例如 Claude Code），並已經登錄。
  2. 2 終端執行：git clone https://github.com/nexu-io/html-anything cd html-anything pnpm install pnpm dev
  3. 3 瀏覽器打開 http://localhost:3000，頂欄會自動顯示可用 Agent → 揀一個 Skill 模板 → 左側貼內容 → ⌘+Enter 生成。
  4. 4 睇到右側效果之後，一鍵複製或下載就得。

作者分析咗優點同潛在侷限：優點係生產力飛躍，特別適合內容創作者、產品經理、獨立開發者；開源免費，社區潛力大。潛在侷限係依賴本地 Agent 能力，如果模型較弱輸出質素會受影響；初期模板雖多，但高度定製場景可能要手動微調。

整理重點

使用建議同總結

  • 入門：先用 Featured Skill 練手，例如 Guizang Editorial 做雜誌感文章，或者 Swiss International 做正式 PPT。
  • 進階：結合 Open Design 項目（同一團隊更大規模嘅工具）探索更多設計系統。
  • 內容策略：畀 AI 嘅 Prompt 要強調「嚴格跟從 SKILL.md 約束，用真實數據，避免泛化描述」，效果會更好。
  • 場景匹配：輕量分享用 Social 模板；正式報告用 Deck；視頻內容用 Hyperframes。

最近喺X（Twitter）上面見到一個好驚喜嘅開源項目：html-anything，由Tom Huang（@tuturetom）同nexu-io團隊推出，之前分享嘅Open Design都係同一班人整嘅。佢完全啱曬而家「Agent時代」嘅一個煩惱：既然我哋已經越嚟越依賴ClaudeCode、Codex呢啲AI Agent嚟生成內容，咁agent嘅輸出就應該係讀者真正想睇嘅HTML，而唔係仲停留喺「草稿級」嘅中間狀態Markdown上面。

核心理念其實就係一句說話：Markdown只不過係草稿，HTML先係俾人睇嘅成品。呢個工具就係俾本地AI Agent最終輸出可以直接交貨嘅專業HTML，而且支援微信公眾號、小紅書、推文卡片、Keynote PPT等多種場景，可以一鍵導出PNG或者內聯CSS格式，幾乎唔使再排版，一次過搞掂。

點解HTML正在「取代」Markdown成為Agent輸出首選？

最近Anthropic Claude Code團隊成員公開話：佢哋內部已經好少用Markdown寫文件，反而幾乎全部轉咗用HTML。理由其實都好簡單：

  • • Markdown排版受限於渲染器，HTML幾乎無限自由；
  • • Markdown截圖發推/朋友圈往往好樣衰，HTML直接係精美成品；
  • • 複製到公眾號、知乎等平台，Markdown成日要重新排版，而HTML（尤其係內聯CSS）基本上即貼即用。

但如果手動寫HTML門檻就太高，普通人唔識，設計師都懶得每次調整，所以html-anything正正係解決呢個「最後一公里」問題嘅工具。佢唔要求你成為前端專家，只需要俾AI「內置」75套專業模板，就可以產出高質量、可交付嘅HTML。

圖片

項目亮點：本地優先、零成本、高生產力

  1. 1. 支援主流Coding Agent
    可以自動掃描你嘅PATH，識別Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、Qwen Coder、Aider等8款工具。
    零API Key：直接複用你已經喺終端登錄嘅session（claude login等），邊際成本係0。好適合有訂閲唔想額外使錢嘅獨立開發者。
  2. 2. 75套Skill模板，覆蓋9大場景
    圖片

    每個模板都有嚴格嘅設計約束（字體棧、基線網格、對比度、真實數據優先），可以有效減少「AI slop」（低質泛化輸出）。

    • ◦ Deck（PPT）：20幾套，包括瑞士國際主義風格（乾淨學院派）、Guizang編輯墨水風（雜誌質感）等；
    • ◦ Doc/雜誌：暖羊皮紙風格、報紙長圖海報；
    • ◦ Social：小紅書筆記、推特/X卡片；
    • ◦ Frame/Video：Hyperframes兼容嘅視頻幀腳本，可以直接丟俾Remotion或者Hyperframes渲染成MP4；
    • ◦ 其他其他：Web原型、數據報告、簡歷、VFX文字效果、海報等。
  3. 3. 極致使用體驗
    • ◦ 左邊貼Markdown/CSV/JSON/圖片描述等，中間揀模板，右邊iframe就可以實時流式預覽（可以睇住AI一行行「寫」代碼出嚟）；
    • ◦ 一鍵導出：兼容公眾號嘅HTML、PNG（高DPI）、知乎等；
    • ◦ 沙箱預覽，安全隔離。

30秒上手教程

  1. 1. 確保你電腦已經安裝Node.js/pnpm同至少一個支援嘅Agent CLI（例如Claude Code），並且已經登錄。
  2. 2. 終端運行：
    git clone https://github.com/nexu-io/html-anything
    cd html-anything
    pnpm install
    pnpm dev
  3. 3. 瀏覽器打開 http://localhost:3000
  4. 4. 頂欄會自動顯示可用Agent → 揀一個Skill模板 → 左邊貼你嘅內容（Markdown或原始數據）→ ⌘+Enter生成
  5. 5. 右邊見到效果之後，一鍵複製或者下載就得。
圖片

成個過程本地運行，數據唔上傳伺服器，私隱友好。

分析：值得用嗎？

優點：

  • • 生產力飛躍：特別適合內容創作者、產品經理、獨立開發者。寫週報、產品規格、分享卡片、數據報告嘅速度同質量都會明顯上一個台階。
  • • 開源免費 + 社區潛力：Apache-2.0協議，基於Open Design團隊（已經有幾萬星）嘅成熟框架，新增Skill模板門檻低（複製文件夾改SKILL.md就得）。
  • • 反AI低質設計：模板內置咗硬約束，比純提示詞俾AI freestyle更加可靠。

潛在限制：

  • • 依賴本地Agent能力：如果你嘅ClaudeCode/Codex使用模型比較弱，輸出質量會受影響。
  • • 初期模板雖然多，但高度定製化場景可能仲要手動微調。

總體嚟講，呢個係一個唔錯嘅Agent時代內容交付升級方案。如果你每週都要產出面向讀者嘅內容（公眾號、Notion分享、社交卡片、PPT等），強烈推薦試嚇。

圖片
圖片

使用建議

  • • 入門：先用推薦嘅8個Featured Skill練手，例如Guizang Editorial做雜誌感文章，或者Swiss International做正式PPT。
  • • 進階：配合Open Design項目（同一團隊更大規模嘅工具）使用，探索更多設計系統。
  • • 內容策略：俾AI嘅Prompt裏面可以強調「嚴格遵循SKILL.md約束，使用真實數據，避免泛化描述」，效果會更加好。
  • • 場景匹配：日常輕量分享用Social模板；正式報告/演講用Deck；視頻內容用Hyperframes。

項目地址：
GitHub: https://github.com/nexu-io/html-anything
中文README: https://github.com/nexu-io/html-anything/blob/main/README.zh-CN.md

喺AI越嚟越能「寫」嘅今日，html-anything提醒咗我哋：好內容唔止要「寫得好」，仲要「呈現得好」。試嚇，你可能會同我一樣，覺得Markdown只係開始，HTML先係終點。

最近在X（Twitter）上刷到一個讓人眼前一亮的開源項目：html-anything，由Tom Huang（@tuturetom）和nexu-io團隊推出，前段時間分享的Open Design也是同一撥人做的。它完美契合了當下“Agent時代”的一個痛點：既然我們已經越來越依賴ClaudeCode、Codex等AI Agent來生成內容了，那agent的輸出就應該是讀者真正想看的HTML，而不是還停留在“草稿級”的中間態Markdown上。

核心理念其實就一句話：Markdown只是草稿，HTML才是給人看的成品。這個工具就是讓本地AI Agent最終輸出可以直接交付的專業HTML，而且支持微信公眾號、小紅書、推文卡片、Keynote PPT等多種場景，可以一鍵導出PNG或內聯CSS格式，幾乎零二次排版，一次交付。

為什麼HTML正在“取代”Markdown成為Agent輸出首選？

最近Anthropic Claude Code團隊成員公開分享：他們內部已經很少用Markdown寫文檔了，而是幾乎全都切換到了HTML。理由其實也很簡單：

  • • Markdown排版受限於渲染器，HTML幾乎無限自由；
  • • Markdown截圖發推/朋友圈往往醜陋，HTML直接就是精美成品；
  • • 複製到公眾號、知乎等平台，Markdown經常需要重排，而HTML（尤其是內聯CSS）基本即粘即用。

但如果手動寫HTML門檻就太高，普通人不會，設計師也懶得每次都調，所以html-anything正是解決這個“最後一公里”問題的工具。它不要求你成為前端專家，只需讓AI“內置”75套專業模板，就能產出高質量、可交付的HTML。

圖片

項目亮點：本地優先、零成本、高生產力

  1. 1. 支持主流Coding Agent
    可以自動掃描你的PATH，識別Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、Qwen Coder、Aider等8款工具。
    零API Key：直接複用你已經在終端登錄的session（claude login等），邊際成本為0。非常適合有訂閲不想額外花錢的獨立開發者。
  2. 2. 75套Skill模板，覆蓋9大場景
    圖片

    每個模板都有嚴格的設計約束（字體棧、基線網格、對比度、真實數據優先），可以有效減少“AI slop”（低質泛化輸出）。

    • ◦ Deck（PPT）：20多套，包括瑞士國際主義風格（乾淨學院派）、Guizang編輯墨水風（雜誌質感）等；
    • ◦ Doc/雜誌：暖羊皮紙風格、報紙長圖海報；
    • ◦ Social：小紅書筆記、推特/X卡片；
    • ◦ Frame/Video：Hyperframes兼容的視頻幀腳本，可直接丟給Remotion或Hyperframes渲染成MP4；
    • ◦ 其他：Web原型、數據報告、簡歷、VFX文字效果、海報等。
  3. 3. 極致使用體驗
    • ◦ 左側粘貼Markdown/CSV/JSON/圖片描述等，中間選模板，右側iframe就能實時流式預覽（可以看着AI一行行“寫”代碼出來）；
    • ◦ 一鍵導出：兼容公眾號的HTML、PNG（高DPI）、知乎等；
    • ◦ 沙箱預覽，安全隔離。

30秒上手教程

  1. 1. 確保你電腦上已經安裝Node.js/pnpm和至少一個支持的Agent CLI（如Claude Code），並已登錄。
  2. 2. 終端運行：
    git clone https://github.com/nexu-io/html-anything
    cd html-anything
    pnpm install
    pnpm dev
  3. 3. 瀏覽器打開 http://localhost:3000
  4. 4. 頂欄會自動顯示可用Agent → 選一個Skill模板 → 左側粘貼你的內容（Markdown或原始數據）→ ⌘+Enter生成
  5. 5. 右側看到效果後，一鍵複製或下載即可。
圖片

整個過程本地運行，數據不上傳服務器，隱私友好。

分析：值得用嗎？

優點：

  • • 生產力飛躍：特別適合內容創作者、產品經理、獨立開發者。寫週報、產品規格、分享卡片、數據報告的速度和質量都會明顯上一個台階。
  • • 開源免費 + 社區潛力：Apache-2.0協議，基於Open Design團隊（已有數萬星）的成熟框架，新增Skill模板門檻低（複製文件夾改SKILL.md即可）。
  • • 反AI低質設計：模板內置了硬約束，比純提示詞讓AI freestyle更可靠。

潛在侷限：

  • • 依賴本地Agent能力：如果你的ClaudeCode/Codex使用模型較弱，輸出質量會受影響。
  • • 初期模板雖多，但高度定製化場景可能仍需手動微調。

總體來說，這是一個不錯的Agent時代內容交付升級方案。如果你每週都要產出面向讀者的內容（公眾號、Notion分享、社交卡片、PPT等），強烈推薦嘗試一下。

圖片
圖片

使用建議

  • • 入門：先用推薦的8個Featured Skill練手，比如Guizang Editorial做雜誌感文章，或Swiss International做正式PPT。
  • • 進階：結合Open Design項目（同一團隊更大規模的工具）使用，探索更多設計系統。
  • • 內容策略：給AI的Prompt中可以強調“嚴格遵循SKILL.md約束，使用真實數據，避免泛化描述”，效果會更好。
  • • 場景匹配：日常輕量分享用Social模板；正式報告/演講用Deck；視頻內容用Hyperframes。

項目地址：
GitHub: https://github.com/nexu-io/html-anything
中文README: https://github.com/nexu-io/html-anything/blob/main/README.zh-CN.md

在AI越來越能“寫”的今天，html-anything提醒了我們：好內容不僅要“寫得好”，還要“呈現得好”。試試看，你可能會像我一樣，覺得Markdown只是開始，HTML才是終點。