url-to-code — скилл для Codex: клонирует сайт в локальный код
Превращает живой сайт в рабочее frontend-приложение: захватывает элементы, стили, взаимодействия и ассеты через браузер.
npx skills add openai/plugins --skill url-to-code -a codexЧто делает url-to-code
Скилл открывает целевую страницу в браузере, прокручивает её полностью на desktop и mobile, фиксирует DOM, стили, изображения, шрифты, SVG и видео. Тестирует кнопки, меню, модалки и прочие элементы управления, копирует реальные ассеты локально. Если файл недоступен, генерирует замену через ImageGen или подбирает open-source шрифт.
Создаёт локальный прототип, запускает его и прогоняет через design-qa как gate перед передачей. Обязательно предупреждает о соблюдении условий использования целевого сайта — это критично, потому что клонирование чужого ресурса без разрешения нарушает правила. Подходит для воссоздания собственных проектов или тех, на которые есть согласие владельца.
Какие задачи решает
- воссоздать сайт локально без ручной вёрстки
- собрать рабочий прототип с живой страницы
- скопировать дизайн и взаимодействия из браузера
- получить frontend-код по визуальному образцу
- проверить поведение страницы на разных экранах
Примеры запросов агенту
- Склонируй example.com в локальное приложение
- Воссоздай этот сайт как рабочий прототип
- Сделай копию страницы со всеми взаимодействиями
Как установить url-to-code
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill url-to-code -a codex2Вручную: положить файлы
.agents/skills/url-to-code/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill url-to-code -a claude-code2Вручную: положить файлы
~/.claude/skills/url-to-code/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/url-to-code/
Вручную: положить файлы
.cursor/skills/url-to-code/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/plugins url-to-code2Вручную: положить файлы
.github/skills/url-to-code/SKILL.mdКомандой платформы
gemini skills install https://github.com/openai/plugins --path plugins/product-design/skills/url-to-codeВручную: положить файлы
.devin/skills/url-to-code/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора201
Весь набор →Похожие
Вопросы о url-to-code
Как установить url-to-code в Codex?
Запусти команду npx skills add openai/plugins --skill url-to-code из корня проекта. Скилл появится в .agents/skills/url-to-code/SKILL.md.
Что делает url-to-code?
Клонирует живой сайт в локальное frontend-приложение: открывает страницу в браузере, захватывает элементы, стили, ассеты и взаимодействия, создаёт рабочий прототип и проверяет его через design-qa.
Что нужно для работы url-to-code?
Браузерный доступ для захвата страницы, разрешение владельца сайта на клонирование и npm-окружение для сборки прототипа. Скилл предупреждает о необходимости соблюдать условия использования целевого ресурса перед началом работы.
