xiaopu-ai/web-clone-prompt — explained in plain English
Analysis updated 2026-05-18
Turn an authorized website's URL into a detailed prompt for rebuilding it with an AI coding tool.
Convert screenshots of a webpage into a clone prompt with precise layout and color details.
Create internal visual regression briefs for comparing a rebuild against the original page.
Generate implementation prompts to hand off to Codex, Claude Code, Cursor, v0, or Bolt.
| xiaopu-ai/web-clone-prompt | aestheticsuraj234/chai-gpt-build | appariciojunior/motion-studio-open | |
|---|---|---|---|
| Stars | 15 | 15 | 15 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | easy | easy | moderate |
| Complexity | 2/5 | 2/5 | — |
| Audience | vibe coder | developer | vibe coder |
Figures from each repo's GitHub metadata at analysis time.
Requires the Codex CLI with a skills folder already set up.
web-clone-prompt is a skill for the Codex coding assistant that turns a webpage you are authorized to look at, either through its live URL or through screenshots of it, into a detailed, precise prompt describing exactly how to rebuild it. Instead of jumping straight into writing code, the skill first inspects the page and pins down concrete details like layout structure, colors, fonts, spacing, and motion behavior, then hands back a portable prompt that any AI coding tool can use to actually build the clone. It supports two ways of feeding it a source page. With a live URL, it can inspect the page's structure, styles, fonts, scripts, hover states, scroll behavior, and take runtime screenshots, preferring stable public assets and falling back to generated descriptions for anything private or unstable. With one or more screenshots instead, it treats each image as visual evidence, pinning down exactly what is visible and clearly marking any assumptions it has to make about parts of the page that were not captured. The output is meant to be a deterministic set of instructions rather than a vague creative brief. It includes exact constraints for colors, fonts, spacing, and assets, rules for how to source images and media, notes on responsive behavior, and checkpoints for visually comparing the rebuilt page against the original. It intentionally pauses before any local implementation begins. The author is clear that this skill is meant for authorized clone prompts, screenshot to prompt reconstruction, and internal visual regression work, and should not be used for original design work, brand new pages without a source, non-web tasks, or reusing third-party brand assets without permission. To install it, you clone the repository into your Codex skills folder and call it from within Codex. The repository also includes a small React and Vite site that is deployed to GitHub Pages to showcase demos of the skill in action. It is released under the MIT license.
A Codex skill that turns an authorized webpage URL or screenshots into a precise, build-ready prompt for cloning that page's design.
Mainly TypeScript. The stack also includes TypeScript, Codex, React.
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
double-check against the repo, no cap.