22duxiaoyu/replicate-webpage-skill

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.