前言¶
设计阶段产出的往往是结构化描述（JSON、YAML），而评审和演示更需要能在浏览器里直接打开的页面。手工从 DSL 或规格说明写 HTML，容易漏布局、漏样式，和上游设计稿也对不齐。
下面介绍 SkillHub 上的「生成页面」（@user_ad708a9f/unified-html-generator）。它面向 phase-design 链路：把上游输出的 DSL JSON 或 SPEC YAML 转成可运行的单文件 HTML 原型，减少从设计到可点击原型之间的重复劳动。
这是什么¶
「生成页面」是社区来源（community）的 Agent Skill，当前版本为 1.0.0，发布者为 user_ad708a9f，分类为 dev-programming。SkillHub 标注 requires_api_key=false，安装后不需要额外 API Key。
官方简介概括为：将上游设计方案（phase-design 输出的 DSL JSON / SPEC YAML）转换为可直接运行的单文件 HTML 原型，实现 100% 设计还原。这里的「100%」来自 SkillHub 页面表述，实际效果仍取决于上游设计稿的完整度与 Agent 执行质量。
核心功能¶
根据 SkillHub 已公开信息，可以确认的能力边界如下：
- 输入形态：接受 phase-design 阶段的 DSL JSON，或 SPEC YAML。
- 输出形态：生成单文件 HTML，强调「可直接运行」——通常意味着样式与结构打包在一个文件里，便于本地用浏览器打开或发给同事预览。
- 定位：处于设计流水线下游，与 phase-design 配套使用，而不是从零用自然语言随意画页面。
页面未单独列出更多子命令或脚本；具体生成规则写在 Skill 包内的 SKILL.md 中，安装后由 Agent 按技能说明执行。
安装与启用¶
SkillHub 推荐两种方式：用 CLI 安装，或把安装提示词发给 AI 让其按官方文档操作。
1、安装 SkillHub CLI（若尚未安装）¶
先检查是否已有 CLI：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档执行完整安装（含 CLI 与默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅需要 CLI 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安装「生成页面」到当前 Agent 的 skills 目录¶
安装技能时必须用 --dir 指向当前 Agent 识别的 skills 目录；否则默认会装到 ./skills/，Agent 可能读不到。
skillhub install @user_ad708a9f/unified-html-generator --dir <你的 skills 目录>
常用路径（以 SkillHub 安装文档为准）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
也可在对话中让 AI 按下面说明安装（与 SkillHub 页面一致）：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_ad708a9f/unified-html-generator。
安装完成后，按你所用客户端的要求重启或刷新 Agent，使新 Skill 生效。
典型用法¶
公开页面未附带逐步截图或固定示例仓库，典型流程可按上下游关系复现：
- 在 phase-design（或等价设计阶段）得到 DSL JSON 或 SPEC YAML。
- 在已启用「生成页面」的 Agent 对话中，说明要按该 Skill 将设计稿转为单文件 HTML 原型，并附上 JSON/YAML 内容或文件路径。
- 让 Agent 生成 HTML 后，在本地用浏览器打开该文件，对照设计稿检查布局与样式。
对话侧可以收敛为类似意图（措辞可按项目习惯调整）：
使用「生成页面」技能，将附件中的 phase-design SPEC YAML 转成单文件 HTML 原型，要求可直接在浏览器打开。
若你的流水线里 phase-design 与 HTML 生成由不同 Skill 串联，应先完成设计输出，再调用本 Skill，避免在缺少结构化设计稿时强行生成页面。
适用场景与注意¶
适合谁
- 已经在用或计划用 phase-design 产出 DSL JSON / SPEC YAML 的团队。
- 需要快速得到可点击 HTML 原型、又不想手写整页 markup 的开发者或设计协作角色。
限制与注意
- 依赖上游设计稿质量；YAML/JSON 缺字段时，生成结果无法凭空补全设计意图。
- 输出为单文件 HTML，复杂应用的多页路由、后端接口不会由本 Skill 自动补齐。
- SkillHub 统计（以抓取资料为准）：评分 100000，下载 2720，安装 26；社区 Skill，升级与维护节奏以发布者为准。
- 与线索中的旧数据（如另一套下载量）不一致时，以 SkillHub 页面与最新抓取为准。
结尾¶
「生成页面」把 phase-design 的结构化设计稿接到可运行的 HTML 原型上，适合放在设计到演示的短链路上。安装时记住坐标 @user_ad708a9f/unified-html-generator 与 --dir 指向正确的 skills 目录。
官方 SkillHub 页面：https://www.skillhub.cn/skills/user_ad708a9f/unified-html-generator
API 坐标入口：https://api.skillhub.cn/user_ad708a9f/unified-html-generator
