Скилл web-design-guidelines: проверка вёрстки в Claude Code

Скилл web-design-guidelines от Vercel проверяет вёрстку по списку из 104 правил. Главные ошибки на нашей странице Claude нашёл и без него, а скилл добавил мелочи, которые без списка проскакивают, и привязал каждое замечание к строке файла. Допустим, вы собрали страницу с помощью нейросети и хотите понять, что в ней сломано, прежде чем показывать заказчику. Мы проверили одну и ту же страницу трижды: дважды со скиллом и один раз без него.

Что делает этот скилл?

Сам файл скилла короткий: он говорит Claude скачать свежие правила, прочитать ваши файлы и выдать замечания в виде «файл:строка, что не так». Правила лежат в отдельном репозитории Vercel и делятся на 17 групп, среди них доступность, формы, анимация, типографика, касания на телефоне, тёмная тема и даты.

Каждый пункт можно проверить. Например, у кнопки должна быть видимая рамка при переходе с клавиатуры, анимация должна отключаться, если человек попросил систему уменьшить движение, а между числом и единицей нужен неразрывный пробел. Набор лежит в vercel-labs/agent-skills рядом с другими скиллами Vercel.

Как его поставить?

Каталоги скиллов предлагают такую команду:

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Утилите skills нужен Node.js 22.20 или новее, на старом Node она падает сразу. Без неё скилл ставится руками:

mkdir -p ~/.claude/skills/web-design-guidelines
curl -o ~/.claude/skills/web-design-guidelines/SKILL.md \
  https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/web-design-guidelines/SKILL.md

Учтите, что при каждой проверке Claude пойдёт за правилами на GitHub через инструмент WebFetch. В обычном режиме Claude Code спросит у вас разрешение на это, соглашайтесь. Если доступа к GitHub нет, скилл останется без правил. Что такое скиллы и где они лежат, мы объясняли в статье «Скиллы Claude Code: что это и как написать свой».

Что показала наша проверка?

Мы взяли страницу, которую Claude Code сделал без всяких скиллов в обзоре «Скилл frontend-design для Claude Code»: сайт выдуманной веломастерской «Спица» в Казани. Запускали чистый Claude Code 2.1.303 с моделью Sonnet, без наших инструкций и памяти. Запрос был обычный, по-русски: проверь вёрстку, найди проблемы с доступностью и удобством, файл пока не меняй.

Скилл включился сам оба раза. Это важно: frontend-design на русский запрос не откликнулся. А в описании web-design-guidelines есть слова «review», «audit» и «check accessibility», и модель сама связала с ними «проверь вёрстку».

Цифры почти одинаковые, и главное совпало во всех трёх отчётах. Представьте: до встречи с заказчиком час, а у вас отчёт на 27 пунктов. Начните с четырёх ошибок, которые нашли все проверки:

• на телефоне меню просто пропадает, замены нет;
• белый текст на оранжевой кнопке плохо читается: контраст около 3,7 к 1, а нужно от 4,5 к 1;
• после перехода по ссылке из меню заголовок раздела прячется под прилипшей шапкой;
• кнопка «Записаться» на самом деле звонит, а на компьютере без телефонии часто не делает ничего.

Так что если вам нужен только быстрый взгляд на грубые ошибки, Claude справится и без скилла.

Что скилл нашёл сверх обычной проверки?

Оба запуска со скиллом заметили, что в «2 500 ₽» и в номере телефона стоят обычные пробелы. На узком экране цена может разорваться: «2» останется в одной строке, а «500 ₽» уедет в следующую. Без скилла Claude этого не увидел. Ещё скилл советовал ровнее разбивать длинные заголовки на строки и не поднимать кнопку при наведении на телефоне, где наведения нет.

Зато проверка без скилла дала несколько советов, которых в списке Vercel нет. Она предложила разметку LocalBusiness, чтобы поисковик понял адрес и часы работы. Ещё она заметила, что пункт меню называется «Контакты», а раздел «Как нас найти», и что на странице мастерской нет карты и не расписан состав «полного ТО». Выходит, ум у Claude тот же, а скилл добавляет дисциплину: проверка идёт по одному списку, и мелочи реже проскакивают.

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

Можно, тем же Claude Code. Мы попросили исправить серьёзные замечания и пункты по доступности, а мессенджеры не добавлять. За 49 секунд Claude перенёс меню на телефоне второй строкой шапки, затемнил кнопки, переименовал их в «Позвонить и записаться», добавил ссылку «Перейти к содержимому» и рамки фокуса.

После правки страницу всё равно стоит открыть самому. Claude в отчётах сам предупреждает, что в браузере её не открывал, а контраст считал по коду, поэтому цифры приблизительные.

Где скилл подводит?

Первое: правила написаны для английских интерфейсов. Там есть пункты про прямые и «фигурные» английские кавычки и про заглавные буквы в каждом слове заголовка, как принято в американских текстах. На нашей русской странице Claude их не применил, но если в отчёте мелькнёт совет написать «Записаться На Ремонт», просто пропустите его.

И второе: скилл смотрит только на код, ваш бизнес он не знает. Чего не хватает странице для клиентов, спросите у Claude отдельной фразой в том же запросе.

Как он работает с русским текстом?

Неплохо. Запрос по-русски скилл понял и включился, отчёт Claude написал по-русски, а замечание про неразрывные пробелы в ценах для русского сайта особенно полезно. Один запуск ещё и заметил разнобой в записи часов работы: где-то короткое тире без пробелов, где-то дефис с пробелами. Русских правил вроде кавычек-ёлочек в списке Vercel нет, их придётся проверять отдельно.

Стоит ли его ставить?

Если вы регулярно собираете страницы через Claude Code, да. Вернёмся к странице, которую надо показать заказчику: со скиллом вы примерно за минуту получите список по строкам файла, где грубые ошибки и мелочи стоят рядом, и сразу попросите их исправить. Только не считайте отчёт полным, добавьте в запрос «и посмотри, чего не хватает для живого бизнеса» и откройте результат на телефоне.

Если страницы у вас ещё нет, начните со скилла frontend-design, он помогает уйти от шаблонного вида. Как получить доступ к Claude Code из России, рассказываем в статье «Как оплатить Claude и ChatGPT из России».

Прогон 19 октября 2026 года: Claude Code 2.1.303, модель Sonnet, правила Vercel на ту же дату. Счётчик каталога skill-issue.in показывал у скилла 613 тысяч установок, у репозитория на GitHub было 32,6 тысячи звёзд. Список правил Vercel обновляет, поэтому число замечаний у вас может отличаться.