Skip to content

URL to Code

Recreate an authorized live website as a runnable, frontend-only local copy, verified against the original.

Stars
13,743
Licence
MIT
Files
2 files

What it does

When you ask the agent to clone or faithfully recreate a live website or app you own or have permission to reproduce, this skill tells it to follow a fixed process: open the page in a browser, capture desktop and mobile views, inspect the page structure, styles and interactions, save permitted images and assets locally, and then build a frontend-only version. The agent then compares its build side by side with the original and writes a design QA report before handing it back. It also reminds you to check permissions and the site's terms first.

Great for

  • Front-end developers who need a pixel-close local reference of a page they have permission to reproduce
  • Designers or agencies rebuilding an existing client site they are authorized to copy
  • Teams migrating a legacy marketing page into a new local codebase

Skip it if

  • Copying someone else's site without permission, which raises copyright and terms-of-service problems; the skill only reminds you of this rather than enforcing it
  • Redesigns or loosely inspired pages; the skill itself routes those to a different workflow
  • Sites behind logins or with backend features, since the skill is explicitly limited to frontend-only output and will stop on login walls

Try asking

  • “Recreate my company's public landing page at https://example.com as a local React app, matching desktop and mobile layouts”
  • “Clone the pricing page I own, capture its hover and menu states, and build a static HTML version”
  • “Rebuild this authorized product page locally and run a design QA check before handing it off”
Step-by-step guide: how to use URL to CodeInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    url-to-code.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip url-to-code.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip url-to-code.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • State clearly in your request that you own or have permission to copy the site, so the agent proceeds rather than stopping.
  • Name your target framework up front (for example plain HTML or React); otherwise the agent picks the smallest suitable option.
  • Expect a design-qa.md report in the output; review it for any remaining mismatches before relying on the copy.

What's inside

  • agents/openai.yaml
  • SKILL.md

Redistributed unmodified from XiaomiMiMo/MiMo-Code under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.