本地 Coding Agent 的 HTML 輸出介面。
「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。
Markdown
選技能
本地 Agent
SSE 串流
iframe 預覽
一鍵分發
Markdown is the draft. HTML is what humans read. Your local agent writes it.
git clone 後啟動，使用本機已安裝的 Coding Agent。
環境需求為 Node.js 與 pnpm。HTML Anything 不需要 API key，它會偵測本機已安裝並登入的 Coding Agent CLI。Claude Code 或 Cursor 的現有訂閱可直接作為執行層，不產生額外費用。
# 直接照 README 的 Quick Start
git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm dev
# → http://localhost:3000偵測不到 Agent CLI?
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 仍是空的,先在終端確認下面這條至少印出一條路徑:
which claude cursor-agent codex gemini gh opencode qwen aider
# 任一條印出絕對路徑,就代表 HTML Anything 能 spawn 它75 個技能模板，涵蓋 9 種輸出格式。
HTML Anything 將 75 個技能模板分為 9 種輸出格式 (deliverable surface)，選定一個模板即指定了本次輸出的版面結構。以下列出 12 個代表性入口，涵蓋設計、行銷、工程、產品、財務、HR 等使用場景。
Magazine · 01
/magazine
雜誌專題
編輯級長文版型,把 Markdown 草稿變成可貼公眾號或 Substack 的成品,標題、引述、註腳分層完整。
Deck · 02
/deck-swiss
Swiss International
20 種簡報模板之一,排版鎖死、附 Speaker Notes、可一鍵導 PDF。對外正式提案的安全選項。
Deck · 03
/deck-guizang
歸藏編輯風
整合 op7418/guizang-ppt-skill 的東方排版美學,適合中文場域提案,字型與留白為 CJK 優化。
Card · 04
/xhs-pastel
小紅書粉嫩卡
1080×1350 直幅輸出,自動套 CJK 字型與安全留白。給內容創作者出一週量產卡片用。
Card · 05
/tweet-card
X 推特卡
對話氣泡、引用樣式、頭像位置全 ready,modern-screenshot 直接出 2× PNG 貼推文。
Prototype · 06
/web-saas
SaaS Landing
頭圖、Pricing、Waitlist 預製組件,等待表單可直接接 Form。產品 idea 24 小時內就能放出測試頁。
Prototype · 07
/dashboard
儀表板
圖表、KPI 卡、側欄導覽全 ready,適合產品 demo 與內部工具雛形,不必再手刻 layout。
Frame · 08
/hyperframes-hero
Liquid Hero
10 個 Hyperframes 動態場景之一，液態流動標題。目標輸出格式為 MP4，目前輸出靜態 HTML 預覽。
Frame · 09
/hyperframes-glitch
Glitch Title
故障風標題動畫,可搭配 NYT 風資料圖、macOS 通知效果一起組成短影片敘事的素材庫。
Office · 10
/pm-spec
產品規格書
結構化目標、Scope、Metrics 段落,給工程與設計 reviewer 直接掃過。比 Notion 模板更收斂。
Office · 11
/okr-quarterly
季度 OKR
目標、Key Result、評分欄位齊備,可印出來貼會議室。也適合做季末複盤的對外簡報。
Report · 12
/finance-monthly
財務月報
把 CSV 或 xlsx 轉成有趨勢線、預警旗標的 HTML 報表。試算表用 papaparse / xlsx 在瀏覽器端解析,完全不離開電腦。
哪一種輸入,套哪一張版型?
| 你手上有什麼 | 推薦版型 | 一鍵分發到 |
|---|---|---|
| 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 貼上 |
README 與原始碼中的進階配置要點。
以下 8 條均來自 README 與專案文件。全部可對應至原始碼或 README 的具體描述，無模型推測內容。
⌘+Enter 跑、⌘+C 收手
agent 出貨時走 SSE 串流寫進 iframe,如果方向偏了,⌘+C 直接打斷不會留半截 token,改 prompt 再來一次。串流的好處就是早三秒看到不對勁。
來源 · README · Development Workflow
同一份草稿丟兩個 agent
picker 會列出所有偵測到的 CLI。把同段 Markdown 用 Claude Code 跑一次、Codex 跑一次,品味差別會直接攤出來,等於免費 A/B。對需要交客戶選版的場景特別好用。
來源 · README · Supported Coding Agents
用 juice 出微信公眾號版本
「匯出 WeChat MP」會把所有 CSS 用 juice 內聯到 HTML,貼進公眾號編輯器後格式不會掉,連 emoji、表格、引述樣式都保留。這條解決中文內容創作者最常踩的痛。
來源 · README · Export Capabilities
小紅書 / 微博出圖走 modern-screenshot
不要從瀏覽器另存圖片。點 「匯出 2× PNG」 走 modern-screenshot,字型不會被壓糊,Retina 尺寸標準,直接傳手機就能發。
來源 · README · Export Capabilities
CSV / xlsx 不會上傳
試算表由 papaparse 與 xlsx 在瀏覽器端解析，資料不離開本機。財務月報、HR 名單、客戶名單均可使用，本地處理是此專案的核心設計原則。
來源 · README · Technical Architecture
iframe sandbox 攔下惡意腳本
預覽用 iframe[sandbox="allow-scripts allow-same-origin"]。萬一 agent 寫出 fetch 把資料外送的程式碼,瀏覽器原生擋住,不會碰到你的 cookie 或母頁面。
來源 · README · Key Implementation Details
PATH 找不到就走補掃路徑
GUI 啟動的 Node 看不到 zsh 自訂 PATH。HTML Anything 會額外補掃 ~/.local/bin、~/.bun/bin、/opt/homebrew/bin、~/.npm-global/bin,新裝的 CLI 直接擺進這幾個目錄就會自動被偵測。
來源 · README · Detection logic
Hyperframes 是接 MP4 的入口
/hyperframes-* 目前先出靜態 HTML,但 README 已標 「Hyperframes-to-MP4 pipeline」 在 In Progress。先用同一份 frame script 累積素材庫,等管線釋出就能直接渲影片。
來源 · README · Roadmap Status
從 Markdown 草稿到小紅書卡片與簡報的完整流程。
以「2026 年 AI Coding 工具地圖」Markdown 草稿為例，輸出兩個版本：一張小紅書卡片，一份提案用簡報。以下流程在已安裝 Claude Code 與 Codex 的 Mac 上執行，不需要任何雲端 API key。
$ You › pnpm dev
claude: [Browser] localhost:3000
picker 自動填入:Claude Code / OpenAI Codex / Cursor Agent
hl: → 選 Claude Code
搜尋技能 → 「小紅書」
hl: → 選 /xhs-pastel · 1080×1350 · CJK-first
編輯區貼進 Markdown 草稿(約 1,200 字)
> ⌘+Enter
claude: [Preview · iframe srcdoc]
標題長出 → 副標長出 → 引述卡 → Reference 區塊 → 頁碼
sandbox 攔住任何 fetch 與 parent 存取
ok: [done] Generated 4,820 chars · 2.1 s
ok: [export] 按 [匯出 2× PNG]
ok: → modern-screenshot 出圖
ok: → /Downloads/xhs-2026-coding-map.png
ok: → 1080×1350 · Retina · 字型清晰
$ You ›
不換 agent、不換 Markdown,picker 切到 /deck-swiss
> ⌘+Enter
claude: [Preview]
16:9 投影片 · 自動章節分頁 · Speaker Notes 一起跑出來
ok: [export] 按 [匯出 PDF]
ok: → /Downloads/2026-coding-map-deck.pdf
同一份 Markdown，不同 CLI 產出不同風格，不同 SKILL 模板產出不同版面。75 × 8 的組合即為此專案的核心使用場景。
這個流程值得拆解的點
**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。
首次使用前需確認的環境條件與限制。
新增自訂技能模板與 Agent 支援。
每個技能都是一份 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 流程，專案文件標明這三類為高影響力貢獻方向。
HTML Anything 的設計定位：將本機已訂閱的 Coding Agent CLI 作為 HTML 生成執行層，不依賴雲端 API。