Replicate Webpage
Herbouwt een referentiewebpagina als onderhoudbare broncode, niet als een screenshot of iframe-spiegel.
Getest · Werkt
Wat het doet
Begeleidt Claude bij het inspecteren van een referentie-URL op meerdere viewports, het inventariseren van de structuur/visuals/interacties via een gebundelde fidelity checklist, en vervolgens het herbouwen als semantische, toegankelijke, responsieve code met een gecentraliseerde contentlaag voor tekst/branding substituties. Wordt geactiveerd bij verzoeken om 'replicate/clone this webpage' of '复刻这个网页', met expliciete grenzen tegen het reproduceren van credential capture, betalingsstromen, geheimen of tracking-ID's.
Testrapport
Een echte A/B van het herbouwen van een pricing-card referentiepagina uitgevoerd: de baseline kloon verminkte de '·' separator tot '·' (ontbrekende charset meta), liet de featured-plan styling en merksubstitutie vallen, en had een dode FAQ; de skill-geleide herbouw loste dit allemaal op plus voegde focus-visible states en een gecentraliseerd contentobject toe, met nul consolefouten.
Getest op: 2026-07-16 · Claude Code 2.x (agent harness)
Installatie
git clone https://github.com/22duxiaoyu/replicate-webpage-skill.git mkdir -p ~/.claude/skills cp -r replicate-webpage-skill ~/.claude/skills/replicate-webpage
Commando's en voorbeeldprompts
/replicate-webpageHerbouwt een referentiewebpagina als onderhoudbare broncode, niet als een screenshot of iframe-spiegel.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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.