Replicate Webpage

Bygger om en referenswebbsida som underhållbar källkod, inte en skärmdump eller iframe-spegel.

av 22duxiaoyu · 22duxiaoyu/replicate-webpage-skill

Testad · Fungerar ★ 9.6/10

Replicate Webpage — Bygger om en referenswebbsida som underhållbar källkod, inte en skärmdump eller iframe-spegel.

Vad den gör

Guidar Claude att inspektera en referens-URL vid flera visningsportar, inventera dess struktur/visuella element/interaktioner via en medföljande trovärdighetschecklista, och sedan bygga om den som semantisk, tillgänglig, responsiv kod med ett centraliserat innehållslager för text-/varumärkesbyten. Triggas på 'replikera/klona denna webbsida' eller '复刻这个网页'-förfrågningar, med explicita gränser mot att reproducera autentiseringsinsamling, betalningsflöden, hemligheter eller spårnings-ID:n.

Testrapport

Körde en verklig A/B-ombyggnad av en prissättningskorts-referenssida: baslinjekloningen förstörde '·'-avdelaren till '·' (saknar teckenkodnings-meta), tappade den framhävda planens styling och varumärkesbyte, och hade en död FAQ; den färdighetsstyrda ombyggnaden fixade allt detta plus lade till fokus-synliga tillstånd och ett centraliserat innehållsobjekt, utan några konsolfel.

Testad: 2026-07-16 · Claude Code 2.x (agent harness)

Installation

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

Kommandon och exempelprompter

  • /replicate-webpageBygger om en referenswebbsida som underhållbar källkod, inte en skärmdump eller iframe-spegel.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • Rebuild this competitor's pricing page as clean, accessible code.
  • Clone this landing page but swap in our brand name and logo everywhere.
  • Recreate this reference site's layout without copying its payment forms.