前言¶
活动页、品牌落地页往往同时有参考截图、PPT 或 Word 里的文案，以及带标注的切图。手写 HTML/CSS 再补淡入、呼吸类动效，耗时长，且 PC 与移动端两套布局容易走样。下面介绍 SkillHub 社区技能 design-to-h5（@user_5b12983f/design-to-h5）：在对话里把多源素材交给 Agent，按 Skill 约定生成可部署的响应式 H5 页面。
这是什么¶
design-to-h5 是 SkillHub 上由社区用户 user_5b12983f 发布的编程类 Skill（分类 dev-programming，版本 1.0.0，来源 community）。它面向「设计/文案素材 → 可浏览网页」这一链路：参考页面布局截图、文案文档（PPT / txt / doc / pdf）、标注了文案的图片素材，生成带基础动画的响应式 H5。页面元数据标明 requires_api_key=false，不依赖额外 API Key 即可按 Skill 流程使用。
官方入口：SkillHub 技能页；API 坐标页：https://api.skillhub.cn/user_5b12983f/design-to-h5。
核心功能¶
以下能力均来自 SkillHub 公开简介，未在资料中出现的细节不写。
- 多源输入：页面布局参考图、办公文档文案、带文案标注的图片，可作为生成依据。
- 输出形态：响应式 H5 网页；支持 PC 端 UI 界面与移动端页面两类场景描述。
- 动效：资料中明确提到图片淡入淡出、文字呼吸效果等页面动画。
- 对话触发：可用自然语言或下列触发词唤起流程——设计转 H5、截图转网页、文档生成 H5、图片标注转 H5、参考图生成网页、多源素材 H5、设计稿还原、平面设计 H5。
安装与启用¶
安装方式以 SkillHub 官方说明为准：先具备 skillhub CLI，再把技能装进当前 Agent 能识别的 skills 目录。
1、检查或安装 SkillHub CLI¶
command -v skillhub && skillhub --version
若未安装，可使用官方安装脚本（完整安装含 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、安装 design-to-h5¶
SkillHub 页面给出的安装指引为：依据 skillhub 安装文档，安装坐标 @user_5b12983f/design-to-h5。命令行示例（--dir 须指向当前客户端的 skills 目录，否则默认落在 ./skills/ 可能不会被识别）：
skillhub install user_5b12983f/design-to-h5 --dir <你的 skills 目录>
常用客户端 skills 路径（摘自官方安装文档，按你实际环境选择其一）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
安装完成后，按所用客户端要求刷新或重启 Agent，使新 Skill 被加载。
3、在 Cursor 等环境中启用¶
将技能安装到对应目录后，在对话中提及上述触发词或说明「根据截图/文档生成 H5」，Agent 会按 Skill 包内的 SKILL.md 流程执行。本技能不要求配置 API Key。
典型用法¶
资料未提供逐步截图教程，可按下述可复现路径操作。
- 准备素材：一张页面布局参考截图；文案可来自 txt/doc/pdf/PPT 之一；若有带标注的文案图片，一并提供。
- 发起任务：在已启用该 Skill 的对话中发送需求，例如：
使用 design-to-h5：参考我上传的页面截图和这份 doc 文案，生成移动端 H5，图片淡入淡出，标题文字做呼吸效果。
或使用官方列出的触发词，如「设计稿还原」「多源素材 H5」。
3. 迭代：根据生成结果在对话中补充版式、断点或动效强度；Skill 侧会按多轮反馈调整页面结构。
适用场景与注意¶
适合谁：需要快速把平面参考与文档文案落成可分享 H5 的前端、运营、独立开发者；已有设计截图但不想从零搭脚手架的场景。
限制与注意：
- 能力边界以 Skill 简介为准，复杂交互、后端接口、数据统计等未在资料中承诺，需自行扩展或另选方案。
- 文档格式支持 PPT / txt / doc / pdf，实际解析质量取决于 Agent 与上传文件内容，复杂版式建议在对话里说明优先级（例如以截图布局为准、以 doc 正文为准）。
- 社区来源（
community），升级与维护节奏跟随发布者；安装前可在 SkillHub 页查看版本 v1.0.0 与下载、安装统计（页面数据会变动，以官网为准）。 - 安装时务必使用
--dir指向正确 skills 目录，避免装到项目根下未被客户端扫描的路径。
结尾¶
design-to-h5 把「参考图 + 文档 + 标注图」收敛成一条 Agent 工作流，输出带基础动效的响应式 H5，且无需 API Key。若你经常在 Cursor 或 Claude Code 里做落地页原型，可先按上文安装 @user_5b12983f/design-to-h5，用触发词试一轮素材转页。
官方地址：https://www.skillhub.cn/skills/user_5b12983f/design-to-h5
