whatisgithub

What is web-clone-prompt?

xiaopu-ai/web-clone-prompt — explained in plain English

Analysis updated 2026-05-18

15TypeScriptAudience · vibe coderComplexity · 2/5LicenseSetup · easy

In one sentence

A Codex skill that turns an authorized webpage URL or screenshots into a precise, build-ready prompt for cloning that page's design.

Mindmap

mindmap
  root((web-clone-prompt))
    What it does
      URL or screenshot input
      Deterministic clone prompt
      Precise design constraints
    Tech stack
      TypeScript
      Codex skill
      React and Vite site
    Use cases
      Website cloning
      Visual regression briefs
      Handoff to coding agents
    Audience
      Vibe coders
      Codex users
    Scope
      Authorized clones only
      Not for original design

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Turn an authorized website's URL into a detailed prompt for rebuilding it with an AI coding tool.

USE CASE 2

Convert screenshots of a webpage into a clone prompt with precise layout and color details.

USE CASE 3

Create internal visual regression briefs for comparing a rebuild against the original page.

USE CASE 4

Generate implementation prompts to hand off to Codex, Claude Code, Cursor, v0, or Bolt.

What is it built with?

TypeScriptCodexReactViteGitHub Pages

How does it compare?

xiaopu-ai/web-clone-promptaestheticsuraj234/chai-gpt-buildalexvilelabah/age-of-ai
Stars151515
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasymoderate
Complexity2/52/54/5
Audiencevibe coderdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Requires the Codex CLI with a skills folder already set up.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

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.

Copy-paste prompts

Prompt 1
Install web-clone-prompt into my Codex skills folder and show me how to call it.
Prompt 2
Use this skill to turn this authorized URL into a deterministic clone prompt for Claude Code.
Prompt 3
Take these screenshots and generate a build-ready clone prompt, marking any inferred sections.
Prompt 4
Explain the difference between using web-clone-prompt and web-design-pro for a project.
Prompt 5
Show me what asset sourcing rules this skill applies when an image is private or unstable.

Frequently asked questions

What is web-clone-prompt?

A Codex skill that turns an authorized webpage URL or screenshots into a precise, build-ready prompt for cloning that page's design.

What language is web-clone-prompt written in?

Mainly TypeScript. The stack also includes TypeScript, Codex, React.

What license does web-clone-prompt use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is web-clone-prompt to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is web-clone-prompt for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.