Agent skill

Clone Page

by lintendo in lintendo/Axhub-Skills

高精度克隆网页。使用 Playwright 渐进式采集页面数据(DOM 结构、样式、截图、资源), 然后分阶段构建完整的 HTML/CSS 还原。支持快速还原和高精度还原两种模式。

MITAuto-check passedTesting & QA

Install Clone Page

skills CLI
$ npx skills add lintendo/Axhub-Skills --skill clone-page -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install lintendo/Axhub-Skills clone-page --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/clone-page .claude/skills/clone-page && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
clone-page
GitHub stars
127
Token cost
~1.3k tokens
SKILL.md length
202 words
Files
15 (incl. scripts)
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

高精度克隆网页。使用 Playwright 渐进式采集页面数据(DOM 结构、样式、截图、资源), 然后分阶段构建完整的 HTML/CSS 还原。支持快速还原和高精度还原两种模式。

  • Works in 3 steps: ⭐⭐⭐⭐⭐ screenshot.png — 视觉真相,以它为准 → ⭐⭐⭐⭐ theme.json — 颜色、字体、间距等设计令牌 → ⭐⭐⭐ skeleton.json — DOM 骨架(了解层级和语义标签)
  • Tasks that involve Browser testing
  • SKILL.md covers 采集脚本, 两种还原模式, 采集命令速查 and 查询命令速查, plus 3 more sections
  • Runs JavaScript scripts from its folder; calls node

What it does

Clone Page is an agent skill from lintendo/Axhub-Skills. 高精度克隆网页。使用 Playwright 渐进式采集页面数据(DOM 结构、样式、截图、资源), 然后分阶段构建完整的 HTML/CSS 还原。支持快速还原和高精度还原两种模式。 当用户需要克隆、复刻、还原、仿制网页时使用此技能。 当用户提供 URL 并要求"做一个一样的页面"、"把这个页面克隆过来"、 "参考这个网站的设计"、"还原这个页面"时,务必使用此技能。

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 17 other files, including scripts (for example `scripts/inject/extract-assets.js`, `scripts/inject/extract-section-styles.js` and `scripts/inject/extract-skeleton.js`).

It sits in Testing & QA, covering Browser testing. It works with Playwright. The licence is MIT.

When your agent uses it

  • Tasks that involve Browser testing

Example prompts

  • “做一个一样的页面”
  • “把这个页面克隆过来”
  • “参考这个网站的设计”
  • “/clone-page”

Requirements

  • Node.js

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. ⭐⭐⭐⭐⭐ screenshot.png — 视觉真相,以它为准
  2. ⭐⭐⭐⭐ theme.json — 颜色、字体、间距等设计令牌
  3. ⭐⭐⭐ skeleton.json — DOM 骨架(了解层级和语义标签)

What it can do on your machine

Read from SKILL.md and the folder at commit 1e1c5bc. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 14 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Clone Page loads about 1.3k tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 202 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~49
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from lintendo/Axhub-Skills at commit 1e1c5bc, republished under its MIT licence (© lintendo). 202 words, ~1,267 tokens.

Download SKILL.mdSave it as .claude/skills/clone-page/SKILL.md (or your agent's skills folder). This skill also uses 14 other files; get the full folder from GitHub.
name
clone-page
description
高精度克隆网页。使用 Playwright 渐进式采集页面数据(DOM 结构、样式、截图、资源), 然后分阶段构建完整的 HTML/CSS 还原。支持快速还原和高精度还原两种模式。 当用户需要克隆、复刻、还原、仿制网页时使用此技能。 当用户提供 URL 并要求"做一个一样的页面"、"把这个页面克隆过来"、 "参考这个网站的设计"、"还原这个页面"时,务必使用此技能。

克隆网页

使用 Playwright 渐进式采集页面数据,然后分阶段还原 HTML/CSS。

前置条件: Node.js >= 18(Playwright + Chromium 首次运行自动安装)

采集脚本

从技能目录下的 scripts/ 运行:

bash
node scripts/clone.mjs <url> <command> [options]

两种还原模式

🚀 快速还原(推荐先用这个)

适合快速出原型,token 消耗少,几分钟完成。

采集:

bash
node scripts/clone.mjs <url> quick -o ./clone-data --scroll

数据源优先级:

  1. ⭐⭐⭐⭐⭐ screenshot.png — 视觉真相,以它为准
  2. ⭐⭐⭐⭐ theme.json — 颜色、字体、间距等设计令牌
  3. ⭐⭐⭐ skeleton.json — DOM 骨架(了解层级和语义标签)

还原步骤:

  1. 看 screenshot.png,理解页面整体布局
  2. 读 theme.json,提取关键设计令牌(主色、字体、间距、圆角、阴影)
  3. 粗读 skeleton.json --depth=2,了解大的 section 划分
  4. 按 header → main → footer 的顺序,参照截图逐 section 写 HTML/CSS
  5. 使用 theme.json 中的值作为 CSS 变量
bash
# 渐进式读取数据
node scripts/query.mjs ./clone-data summary
node scripts/query.mjs ./clone-data skeleton --depth=2

🎨 高精度还原

适合生产环境,还原到像素级别。在快速还原的基础上追加采集。

采集:

bash
# 先执行 quick(如果还没有)
node scripts/clone.mjs <url> quick -o ./clone-data --scroll

# 然后逐 section 深入采集样式
node scripts/clone.mjs <url> styles -o ./clone-data --selector "header"
node scripts/clone.mjs <url> styles -o ./clone-data --selector "main > section:nth-child(1)"
node scripts/clone.mjs <url> styles -o ./clone-data --selector "main > section:nth-child(2)"
node scripts/clone.mjs <url> styles -o ./clone-data --selector "footer"

# 需要时:交互态
node scripts/clone.mjs <url> interact -o ./clone-data --hover "nav a:first-child"

# 需要时:响应式截图
node scripts/clone.mjs <url> responsive -o ./clone-data

# 最后:下载资源
node scripts/clone.mjs <url> assets -o ./clone-data

数据源优先级:

  1. ⭐⭐⭐⭐⭐ screenshot.png — 还是以截图为准
  2. ⭐⭐⭐⭐⭐ sections/*/nodes.json — 精确的 DOM 结构 + selector
  3. ⭐⭐⭐⭐⭐ sections/*/styles.json — 完整的 computedStyle
  4. ⭐⭐⭐⭐ theme.json — 设计令牌
  5. ⭐⭐⭐ sections/*/screenshot.png — 单 section 截图对比

还原步骤:

  1. 同快速还原 Step 1-3
  2. 查看已采集的 section 列表:
    bash
    node scripts/query.mjs ./clone-data sections
  3. 逐 section 还原:
    bash
    # 查看 section 的完整数据(DOM + 样式)
    node scripts/query.mjs ./clone-data section header
    • 按 nodes.json 中的 children 严格构建层级
    • 按 styles.json 中的 styleId 应用精确样式
    • 对比 screenshot.png 微调
  4. 如果 section 样式不够精确,可以进一步缩小 selector 范围重新采集
  5. 如果需要 hover/focus 态,使用 interact 命令采集
  6. 使用 assets/ 目录中的图片和字体

采集命令速查

命令用途产出
quick快速模式 = init + skeletonscreenshot + meta + theme + skeleton
full全量模式 = init + skeleton + responsive + assets上述 + 响应式截图 + 资源
init截图 + 元信息 + 设计令牌screenshot.png, meta.json, theme.json
skeletonDOM 骨架(不含样式)skeleton.json
styles --selector "X"指定区域的完整样式sections/X/nodes.json + styles.json + screenshot.png
interact交互态截图interactions/*.png + *-styles.json
responsive多 viewport 截图responsive/*.png
assets下载图片/字体/SVGassets/

查询命令速查

bash
node scripts/query.mjs <dir> summary                  # 概览
node scripts/query.mjs <dir> skeleton --depth=2        # 骨架(前 2 层)
node scripts/query.mjs <dir> subtree n2 --depth=3      # 某节点子树
node scripts/query.mjs <dir> node n15                  # 单节点(含已采集样式)
node scripts/query.mjs <dir> sections                  # 已采集的 section 列表
node scripts/query.mjs <dir> section header            # 某 section 的完整数据
node scripts/query.mjs <dir> find --tag=button         # 按标签查找
node scripts/query.mjs <dir> find --text="登录"        # 按文本查找
node scripts/query.mjs <dir> find --interactive        # 交互元素
node scripts/query.mjs <dir> file theme.json           # 读取任意文件

产出目录结构

clone-data/
├── meta.json              # 元信息(url, title, phases, sections)
├── screenshot.png         # 全页截图
├── theme.json             # 设计令牌
├── skeleton.json          # DOM 骨架树(含 selector)
│
├── sections/              # 按 section 的样式(逐步追加)
│   ├── header/
│   │   ├── nodes.json     # DOM + selector + bbox + styleId
│   │   ├── styles.json    # computedStyle 去重池
│   │   └── screenshot.png
│   └── main-section-nth-child-1/
│       └── ...
│
├── interactions/           # 交互态数据
│   ├── hover-nav-a.png
│   └── hover-nav-a-styles.json
│
├── responsive/             # 多视口截图
│   ├── desktop.png
│   ├── tablet.png
│   └── mobile.png
│
└── assets/                 # 下载的资源
    ├── images/
    ├── fonts/
    ├── svgs/
    └── manifest.json

需要登录的页面

bash
# 方法 1: 连接已登录的 Chrome(推荐)
# 先启动 Chrome:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# 在 Chrome 中登录后运行:
node scripts/clone.mjs https://internal.site.com quick --connect-cdp http://localhost:9222

# 方法 2: 显示浏览器窗口手动登录
node scripts/clone.mjs https://internal.site.com quick --no-headless

提示

  • 截图是最终真相 — 如果数据与截图冲突,以截图为准
  • 渐进式采集 — 不需要一次 full,先 quick 看效果,再按需 styles
  • selector 是桥梁 — skeleton.json 中每个节点都有 CSS selector,用于后续精确定位
  • 每个 Phase 独立 — 数据增量追加,不会覆盖已有内容
  • 先粗后细 — 快速还原出大框架 → 对比截图 → 精细调整

© lintendo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 14 other files (scripts) in skills/clone-page of lintendo/Axhub-Skills.

  • SKILL.md
  • scripts/clone.mjs
  • scripts/inject/extract-assets.js
  • scripts/inject/extract-section-styles.js
  • scripts/inject/extract-skeleton.js
  • scripts/lib/assets.mjs
  • scripts/lib/browser.mjs
  • scripts/lib/init.mjs
  • scripts/lib/injected-function.mjs
  • scripts/lib/injected-function.test.mjs
  • scripts/lib/interact.mjs
  • scripts/lib/responsive.mjs
  • scripts/lib/section-styles.mjs
  • scripts/lib/skeleton.mjs
  • scripts/query.mjs

Open the folder on GitHubat commit 1e1c5bc

Compare with similar skills

Clone Page next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Clone Page compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Clone Page this skilllintendo/Axhub-Skills127—~1.3kAutomated safety check: PassMIT
Web Application Testinganthropics/skills180k51 repos~966Automated safety check: PassApache-2.0
Playwright CLIsanity-io/sanity6.4k18 repos~1.9kAutomated safety check: PassMIT
playwright-cli Browser Automationgithub/gh-aw5.4k24 repos~2.8kAutomated safety check: PassMIT
Write and Verify Playwright Testsappsmithorg/appsmith41k—~2.9kAutomated safety check: NotesApache-2.0
Cucumber and Playwright E2E Testslanggenius/dify158k—~682Automated safety check: PassCustom licence

Similar skills

  • Web Application Testing

    anthropics/skills

    Official

    Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.

    180k GitHub starsUsed in 51 repos~966 tokens
    Testing & QAAuto-check passed
  • Playwright CLI

    sanity-io/sanity

    Official

    Automates browser interactions for web testing, form filling, screenshots, and data extraction.

    6.4k GitHub starsUsed in 18 repos~1.9k tokens
    Testing & QAAuto-check passed
  • Official

    Drives a real browser from the command line with playwright-cli to open pages, interact, mock requests, save state and work with Playwright tests.

    5.4k GitHub starsUsed in 24 repos~2.8k tokens
    Testing & QAAuto-check passed
  • Writes a Playwright end-to-end test from a prompt, runs it against a live Appsmith deployment and retries with fixes up to three times until it passes.

    41k GitHub stars~2.9k tokensUpdated today
    Testing & QAAuto-check: notes
  • Guides changes and reviews of the Cucumber and Playwright end-to-end suite under `e2e/`: feature files, step definitions, support code, tags, locators and assertions.

    158k GitHub stars~682 tokensUpdated today
    Testing & QAAuto-check passed
  • E2E Testing

    langflow-ai/langflow

    Write and review Playwright E2E tests for Langflow. An agent skill from langflow-ai/langflow.

    156k GitHub stars~3.3k tokensUpdated today
    Testing & QAAuto-check passed

More from lintendo/Axhub-Skills

All 13 skills in this repo
  • React To Figma Make

    lintendo/Axhub-Skills

    A skill your agent uses when 需要把现有 React、Vite、Next.js、V0 或 AI Studio 页面转换为 Figma Make 可导入的 .fig 资产,或补齐、更新、验证已有 Figma Make 导出壳和 canvas.fig。

    127 GitHub stars~4.2k tokensUpdated 1 mo ago
    Auto-check passed
  • Search Design System

    lintendo/Axhub-Skills

    A skill your agent uses when selecting an existing design system or theme for a product, page, prototype, or implementation through Axhub design knowledge indexes; not when creating or updating a…

    127 GitHub stars~643 tokensUpdated 1 mo ago
    Auto-check passed
  • Axhub Prototype Context

    lintendo/Axhub-Skills

    A skill your agent uses when an annotated prototype URL exposes PRD, directory, annotation, or source context that an AI Agent needs for review, implementation planning, production work, source…

    127 GitHub stars~684 tokensUpdated 1 mo ago
    Auto-check passed
  • Extract Axure Data

    lintendo/Axhub-Skills

    Extract structured data from Axure prototypes using Playwright — screenshots, design tokens, interaction maps, annotations, and page text.

    127 GitHub stars~1.9k tokensUpdated 1 mo ago
    Auto-check: warnings
  • Extract Page Data

    lintendo/Axhub-Skills

    Extract structured data from any web page using Playwright — screenshots, design tokens, page text as Markdown, interactive element maps, and full page data packs.

    127 GitHub stars~2.7k tokensUpdated 1 mo ago
    Auto-check: warnings
  • Figma Content Operator

    lintendo/Axhub-Skills

    用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务,也用于将 HTML/React/Vue 等网页复制到 Figma,尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时,也应与 axhub-commentary 组合。

    127 GitHub stars~630 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Clone Page

What does Clone Page do?

高精度克隆网页。使用 Playwright 渐进式采集页面数据(DOM 结构、样式、截图、资源), 然后分阶段构建完整的 HTML/CSS 还原。支持快速还原和高精度还原两种模式。. Clone Page is an agent skill from lintendo/Axhub-Skills.

When should I use Clone Page?

Clone Page fits situations like: tasks that involve Browser testing.

How do I install Clone Page in Claude Code?

Run `npx skills add lintendo/Axhub-Skills --skill clone-page -a claude-code`. Or copy the skill folder (skills/clone-page in lintendo/Axhub-Skills) into .claude/skills/clone-page in your project. Claude Code loads it when a task matches its description.

How do I install Clone Page in Codex?

Run `npx skills add lintendo/Axhub-Skills --skill clone-page -a codex`. Or copy the skill folder (skills/clone-page in lintendo/Axhub-Skills) into .agents/skills/clone-page in your project. Codex loads it when a task matches its description.

Can I use Clone Page in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lintendo/Axhub-Skills --skill clone-page -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/clone-page, .gemini/skills/clone-page, .github/skills/clone-page and .opencode/skills/clone-page in your project.

What does Clone Page need to run?

Going by SKILL.md and its folder, Clone Page needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.

Does Clone Page access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Clone Page safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Clone Page use?

Clone Page is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Clone Page use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Clone Page?

Skills that share tags, products or a category with Clone Page: Web Application Testing (anthropics/skills, 180k stars), Playwright CLI (sanity-io/sanity, 6.4k stars), playwright-cli Browser Automation (github/gh-aw, 5.4k stars) and Write and Verify Playwright Tests (appsmithorg/appsmith, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Clone Page?

lintendo (a GitHub user) maintains it in lintendo/Axhub-Skills, which has 127 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on August 21, 2026.

Source: lintendo/Axhub-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.