web-clone-prompt

Turn authorized URLs or webpage screenshots into deterministic, build-ready clone prompts.

web-clone-prompt is a prompt-first Codex skill for web clone work. It inspects visual evidence, pins layout and motion decisions into exact implementation constraints, and returns a portable prompt before any local build starts.

It is intentionally separate from web-design-pro: use this skill for authorized clone prompts; use web-design-pro for original or reference-inspired web design.

Demo

The skill supports two input paths: a live URL or one or more screenshots. Click a card to open the recorded workflow.

| URL input | Screenshot input | |---|---| | | | | Extracts source structure, visual rhythm, assets, copy hierarchy, motion triggers, responsive behavior, and QA checkpoints from a public URL. | Turns one or more webpage screenshots into a clone prompt with explicit layout, asset, font, color, and regression instructions. |

More demos are available on the GitHub Pages site.

Install

mkdir -p ~/.codex/skills
git clone https://github.com/xiaopu-ai/web-clone-prompt ~/.codex/skills/web-clone-prompt

Then call it in Codex:

$web-clone-prompt

To update an existing install:

cd ~/.codex/skills/web-clone-prompt
git pull

What It Produces

• a deterministic clone prompt, not a vague design brief
• exact color, font, spacing, asset, and motion constraints
• screenshot or URL evidence boundaries
• asset sourcing rules for stable URLs, generated media briefs, or fetch-only fallback
• responsive behavior and visual regression checkpoints
• an explicit pause before local implementation

Input Modes

URL

Use this when the source page is publicly reachable and authorized for analysis.

The skill can inspect DOM structure, source assets, styles, fonts, scripts, motion primitives, opening sequences, hover states, scroll behavior, and runtime screenshots. Public stable assets are preferred; private, unstable, or protected assets are converted into generation briefs.

Screenshot

Use this when you have one or more captured reference frames.

The skill treats each screenshot as a visual evidence frame. Visible regions are pinned precisely; off-screen sections are inferred only when the user asks for a full page or landing site, and those assumptions are marked in the prompt.

Scope

Use this skill for:

• authorized webpage clone prompts from URLs
• screenshot-to-prompt reconstruction
• internal visual regression briefs
• prompt specs for Codex, Claude Code, Cursor, v0, Bolt, or similar implementation agents

• original landing page design
• brand-new product pages without a source page
• backend, database, or non-web clone tasks
• public reuse of third-party brand assets without permission

Repository Layout

SKILL.md                  # Codex skill entrypoint
agents/openai.yaml        # Skill metadata for Codex
references/               # Prompt, asset, font, motion, and regression guides
src/                      # React/Vite GitHub Pages intro site
public/                   # Site media and static assets

Local Site Development

npm install
npm run dev
npm run build

The site deploys to GitHub Pages through .github/workflows/pages.yml.

License

MIT