Replicate Webpage

Gjenoppbygger en referanse-nettside som vedlikeholdbar kildekode, ikke et skjermbilde eller iframe-speil.

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

Bestått ★ 9.6/10

Replicate Webpage — Gjenoppbygger en referanse-nettside som vedlikeholdbar kildekode, ikke et skjermbilde eller iframe-speil.

Hva den gjør

Veileder Claude til å inspisere en referanse-URL ved flere visningsporter, inventere dens struktur/visuelle elementer/interaksjoner via en bundlet lojalitets-sjekkliste, og deretter gjenoppbygge den som semantisk, tilgjengelig, responsiv kode med et sentralisert innholdslag for tekst/merkevare-substitusjoner. Utløses på 'replicate/clone this webpage' eller '复刻这个网页' forespørsler, med eksplisitte grenser mot å reprodusere autentiseringsfangst, betalingsflyter, hemmeligheter eller sporings-ID-er.

Testrapport

Kjørte en ekte A/B-test av gjenoppbygging av en pris-kort referanseside: baseline-klonen ødela '·'-separatoren til '·' (mangler charset meta), droppet featured-plan-stilen og merkevare-substitusjonen, og hadde en død FAQ; den ferdighetsstyrte gjenoppbyggingen fikset alt dette pluss la til focus-visible states og et sentralisert innholdsobjekt, uten noen konsollfeil.

Testet på: 2026-07-16 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

  • /replicate-webpageGjenoppbygger en referanse-nettside som vedlikeholdbar kildekode, ikke et skjermbilde eller iframe-speil.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

  • 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.