前言¶
让模型产出一个网页，常见的结果是这样的：一段说明文字，附带零散的 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
