Как снять дизайн-систему с сайта скиллом и перенести ее в свой проект

Какой инструмент для какой задачи

• Получить токены сайта для Tailwind, shadcn/ui и Figma — designlang.
• Собрать токены и проверять, что они не разъехались, в CI — Dembrandt.
• Дать агенту повторяемый процесс снятия токенов с одной страницы — extract-design-system.
• Воспроизвести страницу на Next.js по ее виду — AI Website Cloner Template.

Первые три работают с токенами: цвет, шрифт, отступ, скругление. Это основа, на которой строят свой интерфейс. Четвертый переносит страницу целиком, и поэтому по нему больше всего ограничений.

Токены с готового сайта

designlang

designlang, 4 тыс. ★ репозитория, открывает сайт через Playwright и извлекает дизайн-систему: примитивные, семантические и составные токены в формате DTCG, конфигурацию Tailwind, переменные Figma и набор для shadcn/ui. Есть режим анализа всего сайта с оценкой консистентности, аудит доступности и подсказки по контрасту. Результат можно выгрузить в код для SwiftUI, Compose, Flutter и WordPress. Работает как CLI, скилл для агентов и MCP-сервер. Нужен Node.js 20 или новее. Риск средний: инструмент запускает браузер и ходит на внешние сайты.

• запуск без установки npx designlang https://example.com
• для Claude Code npx skillfoxx add cli/designlang-design-extract --agent claude-code
• для Codex npx skillfoxx add cli/designlang-design-extract --agent codex

Dembrandt

Dembrandt, 4 тыс. ★ репозитория, читает вычисленные стили страницы и собирает токены: цвета с оценкой уверенности, типографику, отступы, радиусы, тени, анимации и компоненты вроде кнопок. Экспорт идет в тему shadcn/ui, конфиг Tailwind, токены DTCG, DESIGN.md для агента или HTML-отчет. Режим сравнения с сохраненным baseline завершается ошибкой, если токены разошлись, поэтому годится как проверка в CI. Нужны Node.js 18 или новее и отдельная установка браузера командой dembrandt install-browser. Флаг --stealth обходит часть защит от автоматизации, используйте его только на своих или разрешенных сайтах. Риск средний.

• для Claude Code npx skillfoxx add cli/dembrandt --agent claude-code
• для Codex npx skillfoxx add cli/dembrandt --agent codex

extract-design-system

extract-design-system, 232 ★ репозитория, дает агенту процесс: проверить, что сайт публичный, запустить встроенный CLI через Playwright, нормализовать результат и создать стартовые токены. На выходе сырые данные в папке .extract-design-system/, файл design-system/tokens.json в формате W3C и tokens.css с CSS-переменными. Перед правкой существующих стилей агент спрашивает разрешения. Скилл берет только публичные сайты и одну страницу за запуск, а на динамических сайтах данные бывают неполными. Риск средний.

• для Claude Code npx skillfoxx add skills/extract-design-system --agent claude-code
• для Codex npx skillfoxx add skills/extract-design-system --agent codex

Страница целиком

AI Website Cloner Template

AI Website Cloner Template, 36 тыс. ★ репозитория, пошагово разбирает целевой сайт: делает скриншоты, снимает шрифты, цвета и отступы, проходит по интерактивным состояниям и скачивает ассеты. По каждой секции агент пишет файл спецификации с точными значениями CSS, затем параллельные агенты в отдельных git worktree собирают компоненты на Next.js, shadcn/ui и Tailwind. В конце страница собирается целиком и сверяется с оригиналом визуальным диффом. Работает в Claude Code, Codex, OpenCode и Cursor. Клонируется только то, что видно на странице: бэкенд, база данных и аутентификация в объем не входят.

• для Claude Code npx skillfoxx add skills/ai-website-cloner-template --agent claude-code
• для Codex npx skillfoxx add skills/ai-website-cloner-template --agent codex

Где проходит граница

README AI Website Cloner Template прямо запрещает использовать шаблон для фишинга, для выдачи чужого дизайна за свой и для обхода запрета на скрапинг в условиях сайта. В карточке designlang сказано, что копировать чужую дизайн-систему в продукт стоит с учетом прав на бренд и товарные знаки. Исходя из этого:

1. Токены цвета, шрифтов и отступов берите как отправную точку, а не как готовый бренд.
2. Тексты, изображения, логотипы и фирменные шрифты чужого сайта в свой продукт не переносите.
3. Перед запуском на чужом сайте прочитайте его условия: запрет автоматического сбора встречается часто.
4. Свои сайты, сайты клиентов с разрешения и собственные прототипы снимайте без ограничений.

Риск у всех четырех средний. Они запускают браузер, ходят на внешние сайты и пишут файлы в проект, а клонер скачивает чужие ассеты и шрифты.