HTML Anything 是 nexu-io 的開源專案。它將本機已安裝的 Claude Code、Cursor、Codex 等 8 個 Coding Agent CLI 對接至 75 個技能模板，輸出格式涵蓋雜誌、Keynote 簡報、海報、小紅書卡片、工程 Runbook 與財務月報。不呼叫 LLM API，不需要 API 金鑰，直接使用已訂閱的 agent 執行轉換。
「Markdown is the draft. HTML is what humans read. Your local agent writes it.」是 nexu-io 在 README 開頭的定義。HTML Anything 的設計前提是：終端讀者收到的內容需要已排版、可直接貼上公眾號、知乎、小紅書、X 的版本。這個轉換步驟由本地 agent 執行，不依賴雲端工具。
HTML Anything 是一個 Next.js 網頁應用，運行在本機 localhost:3000。它不呼叫任何 LLM API，而是掃描 PATH 上已安裝的 Coding Agent CLI，額外補掃 ~/.local/bin、~/.bun/bin、/opt/homebrew/bin、~/.npm-global/bin，透過 child_process.spawn 將任務派發給對應的 CLI。因此不需要額外的 API 金鑰，Claude Code 或 Cursor 的訂閱可直接作為執行層。
真正的設計判斷寫在它的「反 AI Slop」原則裡:CJK 優先字型堆疊、8 像素基線網格、最低 4.5:1 對比、禁用純黑純白、絕不放 Lorem Ipsum 必須使用真實資料。換句話說它不是給你「能跑」的 HTML,而是強迫 agent 出排版及格、可以直接交客戶或讀者的 HTML。
環境需求為 Node.js 與 pnpm。HTML Anything 不需要 API key，它會偵測本機已安裝並登入的 Coding Agent CLI。Claude Code 或 Cursor 的現有訂閱可直接作為執行層，不產生額外費用。
HTML Anything 會掃 PATH 找這 8 個 CLI:Claude Code、Cursor Agent、OpenAI Codex、Gemini CLI、GitHub Copilot CLI、OpenCode、Qwen Coder、Aider。GUI 啟動的 Node 程序常常拿不到 zsh 自訂的 PATH,所以它額外補掃 ~/.local/bin、~/.bun/bin、/opt/homebrew/bin、~/.npm-global/bin。如果 picker 仍是空的,先在終端確認下面這條至少印出一條路徑:
HTML Anything 將 75 個技能模板分為 9 種輸出格式 (deliverable surface)，選定一個模板即指定了本次輸出的版面結構。以下列出 12 個代表性入口，涵蓋設計、行銷、工程、產品、財務、HR 等使用場景。
| 你手上有什麼 | 推薦版型 | 一鍵分發到 |
|---|---|---|
| Markdown 長文 / 內容草稿 | /magazine · /xhs-pastel |
公眾號、知乎、小紅書 |
| CSV / xlsx 數字 | /dashboard · /finance-monthly |
Standalone HTML、PNG |
| 簡報大綱 / 提案內容 | /deck-swiss · /deck-guizang |
PDF、Keynote |
| 一段推文草稿 | /tweet-card · /xhs-pastel |
X、微博、小紅書 |
| 產品規格 / 會議紀錄 | /pm-spec · /weekly-update |
Standalone HTML、Notion 貼上 |
以下 8 條均來自 README 與專案文件。全部可對應至原始碼或 README 的具體描述，無模型推測內容。
agent 出貨時走 SSE 串流寫進 iframe,如果方向偏了,⌘+C 直接打斷不會留半截 token,改 prompt 再來一次。串流的好處就是早三秒看到不對勁。
picker 會列出所有偵測到的 CLI。把同段 Markdown 用 Claude Code 跑一次、Codex 跑一次,品味差別會直接攤出來,等於免費 A/B。對需要交客戶選版的場景特別好用。
來源 · README · Supported Coding Agents「匯出 WeChat MP」會把所有 CSS 用 juice 內聯到 HTML,貼進公眾號編輯器後格式不會掉,連 emoji、表格、引述樣式都保留。這條解決中文內容創作者最常踩的痛。
不要從瀏覽器另存圖片。點 「匯出 2× PNG」 走 modern-screenshot,字型不會被壓糊,Retina 尺寸標準,直接傳手機就能發。
試算表由 papaparse 與 xlsx 在瀏覽器端解析，資料不離開本機。財務月報、HR 名單、客戶名單均可使用，本地處理是此專案的核心設計原則。
預覽用 iframe[sandbox="allow-scripts allow-same-origin"]。萬一 agent 寫出 fetch 把資料外送的程式碼,瀏覽器原生擋住,不會碰到你的 cookie 或母頁面。
GUI 啟動的 Node 看不到 zsh 自訂 PATH。HTML Anything 會額外補掃 ~/.local/bin、~/.bun/bin、/opt/homebrew/bin、~/.npm-global/bin,新裝的 CLI 直接擺進這幾個目錄就會自動被偵測。
/hyperframes-* 目前先出靜態 HTML,但 README 已標 「Hyperframes-to-MP4 pipeline」 在 In Progress。先用同一份 frame script 累積素材庫,等管線釋出就能直接渲影片。
以「2026 年 AI Coding 工具地圖」Markdown 草稿為例，輸出兩個版本：一張小紅書卡片，一份提案用簡報。以下流程在已安裝 Claude Code 與 Codex 的 Mac 上執行，不需要任何雲端 API key。
spawn 而不是 API。因為走 child_process.spawn,你已經訂閱的 Claude Code、Cursor 訂閱量直接被吸進來,不會多開一條帳單。這也是 nexu-io 把它定位為 「local-first」 而非 「LLM 包皮」 的關鍵。
iframe srcdoc 串流。agent 邊生成邊顯示，不需等待全部完成即可預覽。若方向有誤，可提早按 ⌘+C 中止並修改 prompt，避免浪費 token。
一鍵分發。WeChat 走 juice 內聯、X 與小紅書走 modern-screenshot 出 2× PNG、知乎把 LaTeX 換成圖,每條通路的格式陷阱都被內建處理掉,你不用再記哪個平台會吃掉哪段 CSS。
which 出路徑不夠,還要試 spawn 能拿到輸出。
pnpm dev,不行就把 CLI 軟連結到 /usr/local/bin。
modern-screenshot 在瀏覽器端截圖。如果你裝的 Noto Sans / Serif SC 沒被瀏覽器讀到,字會 fallback。建議系統先裝好對應字型,Chrome 或 Safari 都重啟一次。
papaparse 與 xlsx 處理 5 萬列以上會卡 UI。大檔先在外部切片再丟。
/hyperframes-* 模板現階段只出靜態 HTML 預覽,影片管線標在 In Progress。要跑生產級短影片,先用 frame script 累積素材,等 MP4 pipeline 釋出。
每個技能都是一份 SKILL.md 加設計檔，沿用上游 nexu-io/open-design 的協定。複製現有模板、修改版型規則與輸出指令，存回 src 後 picker 自動顯示，不需修改 React 或 Next.js 程式碼。
1. 改你公司的版型規則。打開最接近你需求的 SKILL.md,把字型、配色、間距改成品牌規範,picker 重整就能用。比養一份對外的 design system 文件還快。
2. 加新的 Coding Agent。看 nexu-io/open-design 的 agent detection 層,寫一個 adapter,把 spawn 指令、wire protocol 接好,就能讓 HTML Anything 支援第 9、第 10 個 CLI。
3. 換掉 Markdown 輸入,接你公司的 schema。README 提到輸入格式包含 Markdown / CSV / JSON / SQL。你可以加 Notion API、Linear issue、Jira ticket 解析層,讓內部工單直接變成週報 HTML。
4. 加新的分發目標。路線圖標出 WeChat Channels、Douyin、Notion、Linear、Telegraph。如果你有自己的 CMS,寫一個 export adapter 就能接進去,變成內部編輯流程的一環。
5. 把它包成 CLI。目前是 Web UI,但 spawn 邏輯與 UI 解耦。可以包成 npx html-anything 之類的命令,放進 CI 流程裡每週自動跑出報表 HTML。
① AGENTS.md：8 個 Coding Agent 各自的 spawn 指令、wire protocol 細節、PATH 補掃邏輯。
② nexu-io/open-design：agent detection 層、DESIGN.md schema 與 SKILL.md 協定的源頭。
③ CONTRIBUTING.md：新增 SKILL、adapter、export 的 PR 流程，專案文件標明這三類為高影響力貢獻方向。