前言¶
讓模型產出一個網頁，常見的結果是這樣的：一段說明文字，附帶零散的 HTML 片段，樣式不一致，手機上錯位，交互點需要用戶自己補。要麼把它當成「生成代碼」的任務，要麼把它當成「寫文檔」的任務，兩者都不會去管首屏該放什麼、用戶能不能直接點開、能不能繼續改。
html-visualizer 把這件事收斂成一個目標：輸入一段內容需求，直接產出一個獨立的 HTML artifact——首屏就有用、響應式、適配暗色模式，能打開、能下載、能繼續迭代。下面介紹它是什麼、能做什麼、怎麼啓用、適合哪些場景。
這是什麼¶
html-visualizer 是一個面向「把內容做成可視化頁面」場景的 Agent Skill，座標 @user_5b589a79/yunqueai-html-visualizer，版本 1.0.0，由發佈者 user_5b589a79 在 SkillHub 上以社區（community）來源發佈，分類爲 dev-programming。它基於通用 SKILL.md 格式。
它解決的問題是：模型要能根據一句需求判斷出該做哪種形態的頁面（互動課件、數據可視化、UI 原型、流程圖解、AI 工具等），並保證產出質量——而不是每次都從零寫 HTML，靠運氣拿到能用的結果。
核心功能¶
以下能力均來自官方頁面介紹。
- 類型自動路由。輸入任意內容需求，Skill 先判斷最合適的 artifact 類型，再決定交互形態，而不是用一個固定模板套所有需求。
- 首屏優先。產出的頁面把有用內容放在第一個視口內，不做「滾動很長才知道重點」的頁面。
- 響應式與暗色模式適配。佈局要覆蓋多視口，並適配暗色模式。
- 單文件交付。產出是獨立 HTML 文件，可直接打開、下載，也可作爲後續迭代的起點。
- 內置質量校驗。Skill 內置 20+ 個質量校驗腳本，覆蓋佈局、交互流、視覺打磨、多視口等維度，用於在產出前後檢查頁面。
- STEM 講題課件模板。針對講題場景提供場景化模板，用於生成帶講解流程的課件頁面。
安裝與啓用¶
該 Skill 在 SkillHub 上發佈，官方地址爲：
https://api.skillhub.cn/user_5b589a79/yunqueai-html-visualizer
頁面地址：
https://www.skillhub.cn/skills/user_5b589a79/yunqueai-html-visualizer
官方資料中沒有給出 npm install、npx 或 curl 之類的安裝命令，也沒有給出需要寫入 config.json 的配置字段。標籤 requires_api_key=false 表示啓用它不需要 API key。因此這裏只寫可覈實的部分：在 SkillHub 上通過座標 @user_5b589a79/yunqueai-html-visualizer 找到並啓用該 Skill；具體在 Cursor / Codex CLI / Claude Code 裏的啓用方式，官方資料未說明，不做推測。
典型用法¶
官方介紹給出的用法是一句需求驅動。例如，用戶輸入「做一個可以調節參數看結果的模擬頁」或「做一個講某個機制怎麼工作的課件」，Skill 會先路由 artifact 類型，再產出獨立 HTML 文件，並對結果做內置質量校驗。官方資料沒有給出逐字命令或完整對話示例，以下流程按頁面介紹的能力描述：
- 在支持通用 SKILL.md 的 Agent 環境中啓用該 Skill。
- 用一句話描述要做成什麼頁面，儘量寫清用途和受衆。
- 檢查產出的 HTML 是否滿足：首屏有內容、響應式、暗色模式正常、交互可點。
- 需要調整時繼續在同一產物上迭代，而不是重新生成一份。
適用場景與注意¶
適合的場景：需要把抽象內容變成可打開的頁面時——互動課件、講題頁面、數據圖表、數據儀表盤、UI 原型、AI 工具原型、流程/架構/狀態機演示、流程圖、架構圖、機制圖、知識圖譜、時間軸、小遊戲，以及「X 是怎麼工作的」「演示 X 的過程」這類解釋性頁面。
需要注意的邊界：它產出的是前端 HTML artifact，不是後端服務或數據管道；頁面裏的 AI 能力、存儲、發佈等邊界，官方介紹要求如實暴露，不要在頁面裏假裝這些能力已經具備。對於需要後端、鑑權、真實數據源的完整應用，這個 Skill 只能給出可運行的前端原型部分。
另外要留意來源信息：該 Skill 爲社區發佈，當前資料顯示安裝數爲 0、評分較高但樣本情況未說明，採用前建議先在官方頁面覈對最新狀態。
結尾¶
html-visualizer 的價值在於把「模型生成網頁」從一次性代碼輸出，變成有類型判斷、有首屏約束、有質量校驗、可繼續迭代的 artifact 流程。如果你的場景是把內容需求快速變成可直接打開和分享的 HTML 頁面，可以從官方地址開始試：
https://api.skillhub.cn/user_5b589a79/yunqueai-html-visualizer
