前言¶
活动页、品牌落地页往往从 Photoshop 出稿。手工切图、写布局、再补入场和点击动效，周期长，也容易和源文件对不齐。常见做法是前端按图层自己量尺寸，或用通用切图工具只产出静态资源，动效和交互仍要另做一套。
下面介绍 SkillHub 上的社区 Skill psdtoh5-new（坐标 @user_5b12983f/psdtoh5-new，版本 1.0.0）。它在 Agent 对话里提供「PSD → 可交互 H5」的工作流指引，面向需要较快还原设计稿、并带上基础动效的场景。
这是什么¶
psdtoh5-new 是 SkillHub 分类 dev-programming 下的社区来源 Skill，由发布者 user_5b12983f 维护。官方简介概括为：将 PSD 源文件精确还原为带动画的 H5 页面，并支持 入场动画、呼吸效果、点击交互。
该 Skill 标注 requires_api_key=false，安装后不需要额外配置 API Key。在 SkillHub 页面上，当前统计为评分 100000、下载 2452、安装 81（以页面展示为准）。
核心功能¶
以下能力均来自官方 Skill 页与 API 元数据，未在资料中出现的细节不作延伸。
- 设计稿还原：以 PSD 为输入，目标是把视觉结构落到 H5 页面，而不是只导出零散图片。
- 动效：支持入场动画、呼吸类循环效果，适合 Banner、按钮等常见营销组件。
- 交互：支持点击交互，便于做简单跳转或状态反馈。
- 触发词：在对话中可用官方列出的关键词唤起 Skill 相关能力，例如「PSD转H5」「PSD转网页」「Photoshop转HTML」「psd to h5」「psd转移动端」「透底图导出」「设计稿还原」「设计师H5」「PSD动效」等。
安装与启用¶
Skill 基于通用 SKILL.md 格式，通过 SkillHub CLI 安装到当前 Agent 的 skills 目录；装错目录时 Agent 不会加载，需要按环境选对路径。
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、安装 psdtoh5-new¶
官方页面给出的安装说明是：依据 SkillHub 安装文档，安装坐标 @user_5b12983f/psdtoh5-new。对应 CLI 操作为（--dir 必须指向当前 Agent 的 skills 目录）：
skillhub install @user_5b12983f/psdtoh5-new --dir <skills 目录>
常用客户端的 skills 路径示例（来自 SkillHub 安装文档）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
安装完成后，按你所用客户端的要求重启或刷新 Agent，使新 Skill 被识别。
3、在 Cursor 等环境中用自然语言安装¶
若你更习惯让 AI 代为安装，可将官方提示词发给 Agent：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_5b12983f/psdtoh5-new`。
Agent 应按文档检查 CLI、选择正确的 --dir 并完成安装。
典型用法¶
资料未提供单独的命令行子工具示例，典型路径是：安装 Skill → 在对话中说明需求并附上 PSD（或说明文件位置）→ 用触发词或自然语言描述动效与交互。
可复现的对话起点示例（需你本地已有 PSD 与可写出的项目目录）：
- 确认
@user_5b12983f/psdtoh5-new已出现在当前 Agent 的 skills 列表中。 - 发送类似请求：「使用 PSD转H5，把这个活动页 PSD 还原成移动端 H5，按钮要有呼吸效果，主图入场淡入，点击 CTA 跳转链接。」
- 按 Agent 在 Skill 指引下的输出，在本地预览 HTML/CSS/JS（或 Skill 建议的目录结构），对照 PSD 检查图层与透底资源是否一致。
「透底图导出」「设计稿还原」等触发词可用于强调切图与视觉对齐；具体导出步骤与目录约定以 Skill 内 SKILL.md 为准，本文不臆造脚本名或配置字段。
适用场景与注意¶
适合谁
- 需要把营销类 PSD 快速落成可演示 H5 的前端或全栈开发者。
- 设计师与开发协作时，希望减少反复标注尺寸、重复描述动效口径的情况。
使用上注意
- 社区 Skill，行为依赖发布者在 SKILL.md 中写的流程；复杂业务逻辑、后端接口、数据统计仍需你自己接入。
- 「精确还原」以 Skill 描述为目标表述，实际效果仍取决于 PSD 规范程度（命名图层、是否使用智能对象、字体是否可替换等）。
- 安装统计与评分会随 SkillHub 页面更新变化，引用数据时以官网为准。
结尾¶
psdtoh5-new 把「PSD 静态稿 → 带入场、呼吸与点击的 H5」收拢到 Agent Skill 工作流里，适合作为设计稿落地的前几步加速器。需要安装或查看详情时，可访问 SkillHub 页面：
- 技能页：https://www.skillhub.cn/skills/user_5b12983f/psdtoh5-new
- API 元数据：https://api.skillhub.cn/user_5b12983f/psdtoh5-new
