前言¶

做网页复刻或「照着某站扩几页」时，常见做法是直接让模型写 HTML/CSS，再在对话里口头描述配色和间距。页面能跑起来，但风格约束散落在聊天记录里，后续加页面时很容易跑偏。下面介绍 SkillHub 上的 图片网页设计复刻规范生成器（@user_2516c825/html-replica-style-lock）：在还原页面的同时，把设计语言写成可复用的 Markdown 规范与 JSON 设计令牌，便于交给其他前端类 Skill 做同风格扩展。

这是什么¶

图片网页设计复刻规范生成器 是一款面向网页复刻与风格继承的高保真 Agent Skill，坐标 @user_2516c825/html-replica-style-lock，当前版本 1.0.0，来源为 SkillHub community，分类 dev-programming，发布者 user_2516c825（SkillHub 页面标注作者为「老廖的Agent实验室」）。标签 requires_api_key=false，不依赖额外 API Key 配置。

它解决的核心问题是：在输入 网页 URL 或 页面截图 后，不只输出一页 HTML，还同步产出两份供后续 AI/Skill 引用的风格约束文件，把视觉气质「锁定」下来。

核心功能¶

经官方简介核实，Skill 会完成视觉逆向分析，并输出三类产物：

1. 高还原 HTML 页面：可直接运行的静态页面实现。
2. design-style-spec.md：沉淀整体设计语言、版式逻辑、组件规则与不宜偏移的视觉约束（style-lock 规范）。
3. design-tokens.json：结构化设计令牌，涵盖颜色、字体、间距、圆角、阴影、栅格等。

完成复刻后，可将上述规范交给 frontend-skill 或其他页面生成 Skill 继续扩展新页面；英文简介中还提到可与 frontend-slides 等配合，在严格对齐原风格的前提下做演示或幻灯类扩展。Skill 基于通用 SKILL.md 格式，由 Agent 读取后按流程执行。

安装与启用¶

方式一：SkillHub CLI（推荐可复现）¶

先确认本机是否已安装 skillhub：

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

安装本 Skill 时，必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 且可能不被识别。示例：

skillhub install @user_2516c825/html-replica-style-lock --dir <你的 skills 目录>

各客户端常用路径（来自 SkillHub 安装文档）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或项目下的 .agents/skills/

安装后按所用客户端要求刷新或重启 Agent，使新 Skill 被加载。

方式二：让 AI 按官方提示安装¶

SkillHub 页面提供的安装提示为：请根据 SkillHub 安装与优先源配置，安装 @user_2516c825/html-replica-style-lock。将上述说明发给支持 Skill 的 AI 客户端，由 Agent 按文档完成 CLI 检查与安装。

Cursor、Codex CLI、Claude Code 的差异主要体现在 skills 目录路径 与是否需重启；安装命令与坐标一致，无单独分叉版本。

典型用法¶

官方未给出固定 CLI 子命令，用法是在已启用 Skill 的对话中提供输入并说明目标。可复现的流程如下：

1. 准备输入：提供目标页面的 URL，或上传 页面截图（整页或关键视口，以你能提供的素材为准）。
2. 触发 Skill：在 Agent 中调用或引用 @user_2516c825/html-replica-style-lock，要求完成网页复刻并生成风格约束文件。
3. 验收产物：检查生成的 HTML 是否可本地打开；确认同目录（或 Skill 约定路径）下存在 design-style-spec.md 与 design-tokens.json。
4. 风格继承扩展：需要新增页面或幻灯时，将 HTML 与两份约束文件一并交给 frontend-skill、frontend-slides 等 Skill，并明确要求遵守 design-style-spec.md 与 design-tokens.json 中的令牌与不可偏移项。

搜索安装时也可在 SkillHub 使用：

skillhub search html-replica-style-lock

适用场景与注意¶

适合：网页复刻、设计还原、多页面同风格扩展、需要把参考页沉淀为设计系统文档、或需要为「页面转 PPT / 幻灯」准备统一视觉规范的场景。

注意：

• 还原质量取决于 URL 可访问性、截图完整度以及 Agent 对 Skill 指令的遵循程度；复杂交互与后端逻辑不在「静态高还原 HTML」承诺范围内。
• 扩展阶段务必把 design-style-spec.md 与 design-tokens.json 作为硬约束传给下游 Skill，否则仅靠 HTML 很难长期保持风格一致。
• SkillHub 统计（以抓取资料为准）：评分 100000，下载 4815，安装 29；数据会随平台更新变化，以 SkillHub 页面为准。

结尾¶

图片网页设计复刻规范生成器 把「复刻一页」和「锁住风格」拆成可交付的 HTML + 规范 + 令牌，降低后续 AI 扩页时的漂移。安装坐标 @user_2516c825/html-replica-style-lock，官方入口：

• API / 安装页：https://api.skillhub.cn/user_2516c825/html-replica-style-lock
• SkillHub 展示页：https://www.skillhub.cn/skills/user_2516c825/html-replica-style-lock