22duxiaoyu/replicate-webpage-skill — explained in plain English
Analysis updated 2026-05-18
Rebuild a public landing page as maintainable code instead of screenshotting it.
Recreate a webpage's layout and interactions, then swap in your own brand name and images.
Prototype an internal tool that should look and behave like an existing reference page.
Reconstruct responsive breakpoints for desktop, tablet, and mobile from a single reference page.
| 22duxiaoyu/replicate-webpage-skill | 100/stock-analysis-markov | 100/tab-organizer | |
|---|---|---|---|
| Stars | 11 | 11 | 11 |
| Language | — | Java | JavaScript |
| Last pushed | — | 2016-12-25 | 2021-03-01 |
| Maintenance | — | Dormant | Dormant |
| Setup difficulty | easy | easy | easy |
| Complexity | 2/5 | 3/5 | 1/5 |
| Audience | vibe coder | researcher | general |
Figures from each repo's GitHub metadata at analysis time.
Requires Codex with the Skill Installer, or manual cloning into the local skills folder.
This repository is a skill file for Codex, an AI coding agent, not a standalone app you run yourself. Its job is to teach the agent how to look at any public webpage and rebuild it as real, working source code that looks and behaves the same way. Rather than taking a screenshot or wrapping the original page in an iframe, the agent studies the page's layout, spacing, fonts, colors, borders, shadows, icons, and image cropping, then writes fresh code that reproduces all of it. The skill also covers responsive behavior, meaning it checks how the page looks and rearranges itself on desktop, tablet, and mobile screens, and it rebuilds those breakpoints too. Interactive elements like menus, popups, tabs, collapsible panels, form states, and animations are copied as well, so the rebuilt page feels the same to use, not just look the same. One useful feature is content swapping: once the page structure is rebuilt, a user can ask the agent to replace the text, names, images, colors, or brand details with their own, while keeping the same layout and interactions. For example, someone could ask it to recreate a landing page but swap the brand name and hero image for their own project. The workflow follows a loop: gather the page's appearance across different screen sizes, catalog its components and interactions, rebuild them using whatever tech stack is already in the project, swap in the requested content, then compare screenshots and test interactions. If differences remain, it goes back and adjusts until the comparison passes. The README sets clear boundaries: the skill is meant for public pages, pages you own, internal prototypes, or pages you have permission to reference. It explicitly will not recreate login credential collection, payment capture, identity spoofing, malicious code, or third party tracking, and it will not copy private keys, session data, personal information, or inaccessible private backend logic. Installation happens through Codex's Skill Installer command, or by cloning the repository into a local Codex skills folder and restarting Codex. The project is released under the MIT license.
A Codex agent skill that rebuilds any public webpage as real, working code, matching its look, responsiveness, and interactions.
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly vibe coder.
This repo across BitVibe Labs
Verify against the repo before relying on details.