Replicate Webpage

Rebuild a webpage from a user-provided URL with high visual and behavioral fidelity, then customize its text, names, images, colors, or branding. Use when the user asks to “replicate this webpage,” “clone this website,” “复刻这个网页,” recreate a reference site, or reproduce a page’s observable layout, responsive behavior, animations, and interactions in a local codebase.

12 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add 22duxiaoyu/replicate-webpage-skill --skill replicate-webpage

Manual install

git clone --depth 1 https://github.com/22duxiaoyu/replicate-webpage-skill.git /tmp/replicate-webpage-skill
mkdir -p ~/.claude/skills
cp -r /tmp/replicate-webpage-skill/. ~/.claude/skills/replicate-webpage

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Replicate Webpage

Recreate the observable frontend experience of a reference URL in the user's codebase. Produce maintainable source code rather than embedding the original site or substituting a screenshot.

## Establish Scope

1. Confirm the target URL and the pages or states in scope. If the user supplies one URL, implement that page and the states reachable through its visible interactions.
2. Identify requested substitutions for copy, names, images, colors, and branding. Preserve unspecified details.
3. Inspect the existing repository and reuse its framework, package manager, component conventions, and design tokens where practical.
4. Distinguish observable frontend behavior from private implementation. Reproduce visible outcomes; do not claim to reproduce an inaccessible backend, internal algorithm, or proprietary source code.

## Apply Safety and Ownership Boundaries

- Proceed with ordinary public pages, user-owned pages, internal prototypes, and authorized references.
- Do not reproduce credential collection, payment capture, identity verification, deceptive login flows, malware delivery, or third-party analytics and tracking identifiers.
- Replace functional authentication or payment submission with an inert demo state unless the user provides an authorized backend integration.
- Do not copy secrets, session data, private APIs, personal data, hidden tokens, or access-control bypasses discovered during inspection.

Read the full skill on GitHub

Details

Skill name: replicate-webpage
Repository: 22duxiaoyu/replicate-webpage-skill
License: MIT
Repo updated: 2 July 2026

FAQ

What does the Replicate Webpage skill do?

How do I install the Replicate Webpage skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add 22duxiaoyu/replicate-webpage-skill --skill replicate-webpage. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Replicate Webpage popular?

It lives in 22duxiaoyu/replicate-webpage-skill, which has 12 GitHub stars and 0 forks.

Related skills

Openclaw Darkpattern Buster

alphaparkinc/openclaw-darkpattern-buster

Bypasses UI dark patterns, un-checks hidden subscription boxes, and navigates confusing opt-out flows automatically during checkout to protect user intent.

Frontend & Design

Replica

Surya17155/Replica

Use when the user uploads a screenshot of a hero section or landing page (or a URL/description of one) and wants a copy-paste-ready developer prompt to recreate it exactly in a tool like Lovable, Bolt, Replit, or Cursor. Produces prompts with exact hex colors, Tailwind classes, animation timing tuples, and component structure — not vague descriptions.

Frontend & Design

Agential Skill

talhairfandev/agential-skill

Use this skill for any website, web application, frontend UI, component, layout, styling, refactor, or review. It enforces a self-contained editorial output standard: image-first composition, oversized typography, visible hairline grids, hard-edged rectangular framing, restrained copy, and review.

Frontend & Design

No Slop UI

LeoStehlik/no-slop-ui

Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.

Frontend & Design

Arbitrum Dapp Skill

hummusonrails/arbitrum-dapp-skill

Opinionated guide for building dApps on Arbitrum using Stylus (Rust) and/or Solidity. Covers local devnode setup, contract development, testing, deployment, and React frontend integration with viem. Use when starting a new Arbitrum project, writing Stylus or Solidity contracts, deploying to Arbitrum, or building a frontend that interacts with Arbitrum contracts.

Frontend & Design

Frontend Design Pro

Krishna-Modi12/frontend-design-pro

Production-grade frontend UI/UX skill registry. Auto-routes to the correct skill based on user intent. Use for anything involving what users see and click in a browser — building or fixing React/Next.js components, pages and layouts; visual defects; animation; dashboards; forms; accessibility audits; frontend performance; 3D with Three.js/R3F; design systems and tokens; and tests for any of it. Skip for backend logic, APIs, databases and infrastructure.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.