Replicate Webpage
Genopbygger en reference webside som vedligeholdelig kildekode, ikke et screenshot eller iframe spejl.
Testet · Virker
Hvad det gør
Guider Claude til at inspicere en reference URL ved flere viewports, inventarere dens struktur/visuelle elementer/interaktioner via en bundtet fidelity tjekliste, og derefter genopbygge den som semantisk, tilgængelig, responsiv kode med et centraliseret indholdslag til tekst/branding substitutioner. Udløses ved 'replicate/clone this webpage' eller '复刻这个网页' anmodninger, med eksplicitte grænser mod reproduktion af credential capture, betalingsflows, hemmeligheder eller tracking IDs.
Testrapport
Kørte en rigtig A/B genopbygning af en pris-kort reference side: den baseline klon manglede '·' separatoren til '·' (mangler charset meta), droppede featured-plan styling og brand substitution, og havde en død FAQ; den skill-guided genopbygning rettede alt det plus tilføjede focus-visible states og et centraliseret indholdsobjekt, med nul konsolfejl.
Testet: 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
Kommandoer og eksempelprompter
/replicate-webpageGenopbygger en reference webside som vedligeholdelig kildekode, ikke et screenshot eller iframe spejl.
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen 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.