url-to-code — Codex skill: clones websites into local code
Turns a live website into a working frontend app: captures elements, styles, interactions and assets via browser.
npx skills add openai/plugins --skill url-to-code -a codexWhat url-to-code does
The skill opens the target page in a browser, scrolls through it fully on desktop and mobile, records the DOM, styles, images, fonts, SVG and video. Tests buttons, menus, modals and other controls, copies real assets locally. When a file is unreachable, it generates a replacement via ImageGen or picks an open-source font match.
Builds a local prototype, runs it and gates handoff through design-qa. Always warns about following the target site's terms — this matters because cloning without permission violates usage rules. Works for recreating your own projects or those you have owner consent for.
What it helps with
- recreate a website locally without manual coding
- build a working prototype from a live page
- copy design and interactions from the browser
- generate frontend code from a visual reference
- test page behavior across different viewports
Example prompts for the agent
- Clone example.com as a local app
- Recreate this website as a working prototype
- Copy this page with all interactions
How to install url-to-code
1Skills CLI (Vercel)
npx skills add openai/plugins --skill url-to-code -a codex2Manually: put the files in place
.agents/skills/url-to-code/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add openai/plugins --skill url-to-code -a claude-code2Manually: put the files in place
~/.claude/skills/url-to-code/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/url-to-code/
Manually: put the files in place
.cursor/skills/url-to-code/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install openai/plugins url-to-code2Manually: put the files in place
.github/skills/url-to-code/SKILL.mdPlatform CLI
gemini skills install https://github.com/openai/plugins --path plugins/product-design/skills/url-to-codeManually: put the files in place
.devin/skills/url-to-code/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set201
The whole set →Similar
Questions about url-to-code
How do I install url-to-code in Codex?
Run npx skills add openai/plugins --skill url-to-code from your project root. The skill will appear in .agents/skills/url-to-code/SKILL.md.
What does url-to-code do?
Clones a live website into a local frontend app: opens the page in a browser, captures elements, styles, assets and interactions, builds a working prototype and verifies it through design-qa.
What does url-to-code need to work?
Browser access to capture the page, site owner permission to clone, and an npm environment to build the prototype. The skill warns about following the target site's terms before proceeding.
