前言¶
产品评审、内部演示或快速验证交互时，常见路径是：先写一段需求说明，再让设计师出稿，或自己在 Figma 里搭一版，最后再由前端落成 HTML。若目标只是「能打开、能演示、结构清晰」的静态页面，这条链路往往偏长。另一类做法是直接让模型写 HTML，但输出容易缺少信息归纳，版式与组件层次也不稳定。
下面介绍 SkillHub 社区 Skill「需求转换为html」（坐标 @user_988e28be/requirement-to-html，版本 1.0.0）。它面向「从需求描述到 HTML 文件」这一段：接受文字说明，也接受手绘草图或参考图片，由 Agent 按 Skill 指引整理需求并生成高保真 HTML。
这是什么¶
需求转换为html 是发布者 user_988e28be 在 SkillHub 上架的社区 Skill，分类为 dev-programming，当前版本 1.0.0，标签标明 requires_api_key=false（按 SkillHub 元数据，不依赖额外 API Key）。
官方简介中的定位是：根据用户的文字描述或手绘草图/参考图片，自动整理并归纳用户需求，生成高保真 HTML 页面。适用方向包括 UI 原型、数据看板、演示文稿页、产品展示页、表单页等「需要从需求到 HTML」的场景。
- SkillHub 页面：https://www.skillhub.cn/skills/user_988e28be/requirement-to-html
- API 坐标页：https://api.skillhub.cn/user_988e28be/requirement-to-html
SkillHub 展示数据（以页面与抓取资料为准）：评分 100000，下载 775 次。
核心功能¶
以下能力均来自官方简介与 SkillHub 页面，未展开 SKILL.md 正文时，不臆造具体工作流细节。
- 多模态输入：支持纯文字需求，以及手绘草图、参考图片作为输入，用于对齐布局与视觉意图。
- 需求整理：在生成页面前，对描述做归纳与结构化，减少「一句话需求直接堆 HTML」时的遗漏与歧义。
- 高保真 HTML 输出：产出可直接在浏览器打开的 HTML 页面，覆盖原型、看板、演示、展示、表单等常见静态页类型。
安装与启用¶
Skill 基于通用 SKILL.md 格式，需安装到当前 Agent 能识别的 skills 目录后才会被加载（多数环境安装后需重启或重载 Agent）。
方式一：让 AI 按官方指引安装¶
将下面提示词发给支持 Skill 的客户端（文案来自 SkillHub 页面）：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_988e28be/requirement-to-html`。
方式二：SkillHub CLI¶
先确认本机是否已有 skillhub（安装说明见 https://skillhub.cn/install/skillhub.md）：
command -v skillhub && skillhub --version
未安装时，可使用官方脚本完整安装 CLI（节选）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安装 Skill 时，必须用 --dir 指向当前 Agent 的 skills 目录；默认装到 ./skills/ 时，部分客户端不会自动识别。
skillhub install @user_988e28be/requirement-to-html --dir <你的 skills 目录>
常见客户端 skills 路径（摘自 SkillHub 安装文档）：
| 客户端 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
Cursor、Codex CLI、Claude Code 的差异主要体现在 skills 目录位置；安装命令中的坐标与 --dir 用法一致。若环境限网，需在具备外网权限的终端执行安装脚本与 skillhub install。
典型用法¶
官方页面未附带独立「示例仓库」链接；可复现的入口是：安装完成后，在对话中启用该 Skill，并按简介所述提供输入。建议按下面顺序组织一次任务（步骤为结合官方能力描述的实操方式，非 SKILL.md 原文摘录）。
-
写清页面类型与目标
例如：数据看板、产品落地页、多段表单、演示用单页等，并说明是否需要响应式、主色、信息层级。 -
补充结构化需求
列出模块（导航、图表区、卡片列表、页脚等）、文案要点、交互仅作展示还是需简单前端行为（若 Skill 内对脚本范围有约束，以安装后的 SKILL.md 为准）。 -
可选：附上草图或参考图
上传手绘草图或 UI 截图，并简短说明「以哪张为准、哪些元素可简化」。 -
索取 HTML 产物
明确要求输出完整 HTML（单文件或按 Agent 建议的文件结构），并在本地浏览器打开验证版式与内容是否覆盖需求。
搜索与核对坐标时，也可使用：
skillhub search requirement-to-html
适用场景与注意¶
适合谁
- 需要快速从需求文档或草图得到可演示 HTML 的产品、运营、全栈或前端同学。
- 做内部评审、投标演示、数据看板静态样稿，且接受「静态页 + 适度样式」而非完整工程化前端栈的场景。
使用注意
- 生成结果是 HTML 页面，是否包含外部 CDN、图表库等，取决于 Skill 正文与模型执行；上线前需自行审查依赖与合规。
- 复杂业务逻辑、鉴权、真实接口联调不在「简介」承诺范围内，应视为原型或视觉稿，再接入既有后端。
- 社区来源（
community）Skill，维护节奏以发布者为准；版本以 SkillHub 显示的 1.0.0 为准，升级可用skillhub在对应目录更新（遵循 https://skillhub.cn/install/skillhub.md 第三节）。
结尾¶
「需求转换为html」把「文字 / 图 + 需求归纳 → 高保真 HTML」收敛成一条 Skill 路径，适合缩短从想法到可打开页面的距离。安装与详情以 SkillHub 为准：
https://www.skillhub.cn/skills/user_988e28be/requirement-to-html
