HTML Anything — 你的本地 AI Agent 寫 HTML，你負責發布.

為什麼需要它

工作流程

1. 01

   放入輸入內容

   支援 Markdown、CSV、TSV、JSON、SQL、Excel 或純文字。表格資料在瀏覽器內透過 papaparse 和 xlsx 解析，內容不會離開你的電腦。

   

2. 02

   選擇 Skill，由 Agent 渲染

   從 75 個 SKILL.md 模板中選擇一個。你已經登入的本地 CLI 會透過 SSE 把 stdout 直接流進沙盒 iframe，可以即時看到版面生成。

   

   

3. 03

   匯出到目標渠道

   一鍵匯出到微信 MP、X / 微博 / 小紅書、知乎、獨立 HTML 或 2× PNG。輸出是可發布成品，不是起手架。

   

示例

HTML Anything 開箱即用的輸出示例。每個卡片都對應 registry 裡的真實 Skill，可以 fork 資料夾、替換內容、直接匯出。

頁面之外的兩種形態

HTML Anything 也覆蓋簡報式 deck 和可交給影片流水線的 storyboard frames。

九種內容形態

每種形態都是一組策劃過的版面家族，按最終發布渠道選擇即可。

• 雜誌文章 帶首字下沉和引文的長篇編輯式版面。
• Keynote deck 帶編輯式封面和 Swiss-grid 變體的簡報。
• 履歷 一頁式 CV，強調可列印的字體層級。
• 海報 新聞紙風格海報，用網格突出一個核心觀點。
• 小紅書卡片 適合資訊流的直式 3:4 卡片。
• Tweet 卡片 按 X / 微博比例匯出 2× PNG。
• 網頁原型 可執行的 landing page 或產品頁草圖。
• 資料報告 表格資料一鍵變成帶註釋的 dashboard。
• Hyperframes 影片 可交給 Remotion 的 storyboard frames。

自動識別八種 coding agent

HTML Anything 複用你機器上已有的 CLI 登入態。不需要額外帳號，也不需要額外 API key。

• Claude Code
• Cursor Agent
• OpenAI Codex
• Gemini CLI
• GitHub Copilot CLI
• OpenCode
• Qwen Coder
• Aider

匯出目標

微信 MP

透過 juice 內聯 CSS，可直接貼到編輯器。

X / 微博

透過 modern-screenshot 生成 2× PNG，並可複製到剪貼簿。

小紅書

按資訊流尺寸匯出直式卡片。

知乎

LaTeX 公式會渲染為圖片佔位。

獨立 HTML

單檔下載，自包含，無外部資源路徑。

高 DPI PNG

2× 渲染，適合高清截圖。

快速開始

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev
# → http://localhost:3000

Agent 在你的電腦本地執行。Next.js 外殼也可以部署到 Vercel，但渲染循環仍留在本地。

路線圖