Дизайн-система своего сайта в файл перед редизайном: npxskillui

Сайту восемь лет, а бренд-бука нет

Заказчик хочет новый вид, но чтобы сайт остался узнаваемым: тот же синий, тот же шрифт, такие же кнопки. Спрашиваешь, какой именно синий, и в CSS находится несколько похожих оттенков.

Обычно опись делают руками: открывают инспектор и копируют значения в таблицу. Что делать с ней дальше, я показывал в разборе редизайна через токены, а сборку DESIGN.md через сервис Google разбирал в статье про Stitch Skills. Здесь угол другой: автоматически зафиксировать то, что уже есть.

Что это за проект и что я проверил

Проверял 23.10.2026 по GitHub, npm и исходному коду. Репозиторий amaancoderx/npxskillui принадлежит личному аккаунту Amaan, он же единственный контрибьютор и владелец пакета в npm. Создан 14 апреля 2026 года. Коммитов 7, последний от 7 мая (версия 1.3.4), то есть пять с половиной месяцев тишины. Открыты 3 issue и 4 pull request, один issue называется «Why no update??» и датирован 11 сентября. Звёзд около 2,4 тысячи, форков 253, в npm около 19 тысяч скачиваний за месяц до 18 октября.

Лицензия здесь главный вопрос. package.json, README и npm называют MIT, значок в README ведёт на файл LICENSE. Но файла в репозитории нет, запрос к нему даёт 404, GitHub лицензию не показывает. Текста с именем правообладателя нет. Запускать утилиту у себя можно, а переносить её код в свой продукт я бы не стал, пока файл не появится. Документация только на английском.

Режимы и что на выходе

По README: npm install -g skillui, нужен Node.js 18 или новее. Для ultra отдельно npm install playwright и npx playwright install chromium.

Источников четыре. --url тянет HTML и CSS по HTTP, а при установленном Playwright добавляет вычисленные стили страницы. --dir читает CSS, SCSS, TS, TSX, JS, JSX и конфиг Tailwind. --repo клонирует публичный репозиторий и работает как dir. --mode ultra только для адреса сайта: обход до 5 страниц (флаг --screens, максимум 20), снимки страниц целиком и по секциям, семь кадров прокрутки, наведение и фокус, @keyframes и библиотеки анимации вроде GSAP.

На выходе папка с суффиксом design: DESIGN.md (палитра, типографика, отступы, радиусы, тени, брейкпоинты), SKILL.md, CLAUDE.md, tokens/colors.json, spacing.json, typography.json и архив .skill. В ultra добавляются references и папка screens.

Тёмная тема: разбор ищет prefers-color-scheme, light-dark() и переменные, а найденные пары собирает в таблицу light и dark. Адаптив: брейкпоинты берутся из CSS и Tailwind. Все снимки идут в окне 1440 на 900, отдельного прохода для телефона или тёмной темы в коде я не нашёл.

Что уходит в сеть

Утилита не вызывает ИИ-модели и не просит ключей, телеметрии в исходниках я не нашёл. Сетевых обращений четыре: к анализируемому сайту, к сервису microlink.io (в режиме url для скриншота главной туда уходит адрес вашего сайта, в том числе адрес закрытого стенда), к Google Fonts API за шрифтами (общий ключ зашит в код) и к адресам шрифтов из CSS. В режиме repo добавляется git clone.

Побочный эффект: она копирует SKILL.md в папку навыков Claude Code в вашем профиле, и навык виден во всех проектах. Флаг --no-skill по коду этот шаг пропускает. В модель данные попадают позже, когда вы откроете папку в Claude Code: скриншоты и файлы агент читает по вашим настройкам. Для закрытого сайта заказчика оговорите это заранее.

Свой сайт и чужой: что говорит закон

README хвалится лендингом Notion, собранным по одной фразе, а сгенерированные файлы велят агенту повторять увиденное точно. На своём сайте это нужно. На чужом получится копия.

По ст. 1259 ГК РФ авторским правом охраняются произведения дизайна и графики, программы для ЭВМ охраняются как литературные произведения, а идеи, методы и системы нет. Мысль «синий цвет и скруглённые кнопки» свободна, конкретная вёрстка, иллюстрации, фотографии, тексты и код охраняются. По ст. 1270 воспроизведение и переработка входят в исключительное право правообладателя. Где проходит граница между похожей палитрой и переработкой, решает суд, поэтому правила я не дам: уточняйте у юриста.

Шрифты отдельный случай. По коду, если шрифта нет в Google Fonts, утилита скачивает файл по адресу из CSS сайта в папку fonts. Файл с чужого сайта лицензии вам не даёт, подробнее в статье про чужие шрифты. Слова robots в исходниках нет: robots.txt утилита не читает, условия чужого сайта проверяйте сами.

Это касается и своего сайта. Если дизайн делал подрядчик, права на него определяет договор, см. статью про договор со студией.

Что важно учесть

Утилита читает готовый код, а не замысел. Она покажет пять цветов, но не главный из них. Названия токенов и иерархию придумывает человек. Компоненты определяются по шаблонам в разметке, поэтому нестандартная вёрстка и текст на картинках разбору не поддаются. Вход в личный кабинет она не выполняет. Контраст, состояния кнопок и клавиатуру проверяйте отдельно.

Качество на реальных сайтах я не проверял: в README пример только видео, образцов выходных файлов в репозитории нет. Если проект замрёт, результат останется в обычных md и json. Но ошибки с новыми версиями Playwright чинить будет некому.

Что можно сделать уже сейчас

Снимите слепок своего сайта: skillui --url https://ваш-сайт --format design-md --out ./audit. Пакет навыка при этом не создаётся, на выходе DESIGN.md. Сравните цвета и шрифты с тем, что считали фирменным.

Если есть код, запустите skillui --dir ./site --no-skill и сопоставьте с результатом по сайту. Расхождение покажет мёртвые стили.

Для скриншотов возьмите ultra на 5 или 10 страницах, мобильную версию и тёмную тему снимите вручную. Затем составьте списки: что сохраняем, что меняем.

Инвентаризацию и перенос в новую версию я делаю в рамках веб-разработки под ключ, с письменным согласием владельца сайта.

Частые вопросы

Можно ли снять дизайн сайта конкурента?

Технически да. Но вёрстка, графика и тексты конкурента охраняются, переносить их нельзя. Границу уточняйте у юриста.

Нужен ли Playwright?

Для обычного режима нет, он работает по HTML и CSS. Для ultra нужен, без него скриншоты и анимации пропускаются.

Заменит ли это дизайнера?

Нет. Она даёт опись того, что есть в коде. Решения про иерархию, сетку и контраст остаются за человеком.

Коротко о главном

npxskillui превращает готовый сайт или код в набор файлов: токены, описание компонентов, скриншоты. Автор один, последнее обновление в мае, файла LICENSE нет, снимки только в окне 1440 на 900.

Если хотите зафиксировать дизайн вашего сайта перед редизайном и перенести его в новую версию, напишите мне в Telegram кодовое слово «ДИЗАЙН».