8 лучших навыков для Claude для дизайна сайтов в 2026 году

Лучший стартовый навык для большинства новых сайтов — официальный frontend-design от Anthropic. Для сложного продуктового интерфейса полезнее добавить UI/UX Pro Max, для реализации макета — Figma design-to-code, а для проверки готовой страницы — webapp-testing и отдельный accessibility-аудит. Устанавливать все восемь одновременно не стоит: устойчивый набор состоит из одного навыка визуального направления, одного источника дизайн-истины и отдельного слоя проверки.

Материал актуален на 5 сентября 2026 года. В список вошли решения, у которых удалось проверить реальный SKILL.md, связанные инструкции и скрипты, лицензию или её отсутствие, структуру установки, последние изменения и опасные возможности. Звёзды GitHub и рекламные обещания на места не влияли.

Что здесь называется навыком Claude

В экосистеме Claude несколько разных механизмов часто называют «скиллами». Для безопасной установки различия важны.

• Agent Skill — каталог с обязательным SKILL.md. В нём находятся инструкции, условия запуска и, при необходимости, ссылки на references/, scripts/ и assets/. Claude загружает описание при обнаружении навыка, а полное содержимое — при активации.
• Plugin — пакет, который может объединять skills, subagents, hooks, MCP-серверы, исполняемые файлы и настройки. Проверки одного SKILL.md для такого пакета недостаточно.
• MCP-сервер даёт Claude инструменты и внешние данные: например, читает узел Figma или управляет браузером. Локальный или удалённый процесс имеет собственные разрешения и канал передачи данных.
• Prompt — разовая инструкция в чате. Для одноразовой художественной задачи он часто проще отдельного skill.
• Subagent — отдельный исполнитель с собственным контекстом. Он полезен для независимой проверки, но не хранит процедурную экспертизу сам по себе.
• Claude.ai Artifact — интерактивный HTML-результат внутри Claude. Это подходящий формат для демонстрации или прототипа, но не автоматическая замена кода production-сайта.
• Расширение редактора, браузерный плагин и библиотека компонентов тоже остаются отдельными слоями.

Текущий Claude Code следует открытому стандарту Agent Skills: каталог должен содержать SKILL.md, а обязательные поля name и description имеют формальные ограничения. Claude Code добавляет управление вызовом, разрешённые tools, динамический контекст и запуск в subagent. Актуальные расположения personal, project и plugin skills описаны в документации Claude Code. Читать полный обзор сервиса Claude Code

Сравнение лучших навыков

Навык или пакет	Происхождение	Главная роль	Что исполняется	Лицензия	Кому подходит	Главное ограничение
Anthropic frontend-design	Официальный Anthropic	Визуальное направление, типографика, anti-generic UI	Только инструкции	Apache-2.0	Новый лендинг, страница, компонент, мягкий редизайн	Не запускает тесты и не даёт библиотеку компонентов
Impeccable	Third-party	Полный процесс от брифа до аудита и полировки	Локальный engine, optional hooks и browser flow	Apache-2.0	Редизайн и сложная работа с существующим продуктом	Слишком широк для совместного запуска с другим taste skill; launcher может скачать binary
UI/UX Pro Max	Third-party	UX, токены, палитры, типографика и stack-specific подсказки	Локальные Python-скрипты и CSV	MIT	Dashboard, SaaS, дизайн-система, несколько frontend-стеков	База кураторская, а некоторые defaults противоречат собственным правилам
Vercel Web Design Guidelines	Third-party, Vercel Labs	Code-review интерфейса	При каждом запуске загружает свежий удалённый checklist	У репозитория skills неясна; исходный checklist MIT	Быстрая проверка accessibility, forms, motion, images, i18n	Это статический review кода, не браузерный аудит
Figma design-to-code	Официальный vendor plugin Figma	Перенос реального макета в код	Remote MCP по OAuth	В manifest и repo не заявлена	Команды с Figma, Code Connect и живой дизайн-системой	Figma context требует адаптации; временные asset URL истекают
Anthropic webapp-testing	Официальный пример Anthropic	Скриншоты, DOM, console и функциональная проверка	Python Playwright и локальные процессы	Apache-2.0	Проверка уже запущенного сайта	Helper использует shell=True; скриншот не доказывает WCAG
AccessLint Skills	Third-party plugin с MCP	Accessibility scan, inspect, audit, fix и diff	Chrome, MCP, npm CLI, иногда Git	Manifest заявляет MIT, LICENSE в корне отсутствует	WCAG 2.2, keyboard/focus, регрессии	@latest, широкие tools и destructive diff-flow требуют локального форка
Vercel React Best Practices	Third-party, Vercel Engineering	Производительность React и Next.js	Только инструкции и reference files	SKILL.md заявляет MIT, LICENSE в корне отсутствует	React/Next.js-сайты после выбора дизайна	Не решает art direction, accessibility и визуальную проверку

Все восемь решений совместимы с текущим Claude Code, но подключаются по-разному. frontend-design и Figma поставляются как namespaced plugins; UI/UX Pro Max и Impeccable имеют собственные plugin manifests; Vercel skills и одиночные инструкции можно хранить как project skills. webapp-testing находится в широком example bundle, а AccessLint добавляет MCP вместе со skills. Совместимость формата не означает одинаковую переносимость: Claude-specific поля, tool names и plugin namespaces могут не работать в другом агенте без адаптации.

Как формировался список

Универсального «самого лучшего» навыка нет: разные этапы требуют противоположной экспертизы. Лендинг должен убедить и запомниться, dashboard — помогать быстро выполнить повторяемую задачу, а перенос макета из Figma — сохранять уже принятые решения.

Кандидаты оценивались по четырём группам признаков:

• Проектирование: discovery, аудитория, задача страницы, информационная архитектура, реальные данные и состояния.
• Визуальная система: композиция, типографика, цвет, сетка, адаптивность, изображения, motion и способность уходить от шаблонного AI-вида.
• Реализация: компоненты, повторное использование design tokens, семантический HTML, accessibility и соответствие выбранному стеку.
• Проверка: живой render, разные ширины, keyboard flow, contrast, reduced motion, console, Core Web Vitals и сохранность существующих URL, аналитики и форм.

Вторая половина оценки — безопасность. Навык с shell-командами, hooks, MCP или удалённым backend получает больше возможностей, но одновременно расширяет доверенную поверхность. Внешний сервис не становится безопасным только потому, что его plugin доступен в каталоге.

Anthropic frontend-design — лучший базовый навык

Официальный frontend-design — самый понятный default: один SKILL.md, отдельная Apache-лицензия, без scripts, hooks, MCP и дополнительных разрешений. Основной файл обновили 1 сентября 2026 года.

Навык начинает не с CSS, а с предмета, аудитории и задачи страницы. Затем Claude формирует короткую систему из палитры, типографики, layout и принципов, проверяет её на шаблонность и только после этого пишет код. В текущей версии перечислены узнаваемые AI-штампы: одинаковые карточки, декоративные номера, служебные uppercase-ярлыки над каждым заголовком, случайные градиенты, один radius на все элементы и универсальные «модные» палитры.

Сильная сторона подхода — осознанная художественная идея без большого install surface. Он также требует mobile responsiveness, видимый keyboard focus, поддержку prefers-reduced-motion и самокритику по скриншотам. Это хороший minimum viable art director.

Ограничение столь же ясное: frontend-design не измеряет contrast, не открывает браузер, не прогоняет пользовательский сценарий и не знает компоненты вашей компании, пока вы не передадите их через проектный контекст. Формулировка «production-grade» в описании означает планку намерений, а не сертификат готовности.

Выбирайте его для нового marketing site, отдельной страницы или компонента, если нужен локальный и предсказуемый слой визуального направления. Для Figma-to-code, сложного dashboard и формального аудита добавляйте специализированный следующий слой.

Impeccable — самый полный процесс для редизайна

Impeccable 4.2.0 — не набор кратких советов, а большой workflow. Он различает четыре режима поверхности: Persuade для маркетинга, Operate для продуктовой работы, Read для документов и статей, Experience для портфолио и галерей. Команды охватывают discovery, brief, новую визуальную систему, audit, critique, responsive adaptation, typography, motion, performance, hardening и финальную полировку.

Особенно полезны три свойства:

• shape задаёт вопросы о задаче, аудитории, состояниях и ограничениях до кода;
• new-work отделяет локальное расширение, развитие существующей системы и полный redesign;
• craft-floor требует проверять реальный контент, browser surfaces, states, responsive и keyboard focus, а не только красивый hero.

Навык старается сохранять product truth, утверждённый контент, аналитику, маршруты и существующие компоненты. Для редизайна это важнее ещё одной палитры: случайное изменение slug, name у поля формы или tracking event способно повредить сайту сильнее, чем неидеальный отступ.

Цена полноты — большой объём и исполняемая часть. Skill разрешает локальный launcher. Если engine не найден, shell- и Windows-launcher скачивают versioned binary из GitHub Releases и сверяют его с .sha256. Хеш защищает от повреждения, но binary и checksum приходят из одного release-канала. Дополнительные hooks способны запускать detector после изменения UI-файлов, а live mode — поднимать сервер и браузер, создавать .impeccable/**, PRODUCT.md и DESIGN.md.

Безопасный режим — установить проверенную версию без hooks, заранее получить и независимо зафиксировать digest binary либо не использовать engine-команды, а изменения разрешать по одному. Impeccable стоит выбирать вместо другого широкого taste skill. Одновременный запуск с frontend-design или Taste Skill создаёт конкурирующие правила композиции, типографики и процесса согласования.

UI/UX Pro Max — база решений для продукта и dashboard

UI/UX Pro Max соединяет SKILL.md с локальной поисковой базой: styles, product profiles, palettes, font pairings, UX guidance, charts, motion presets и правила для 22 стеков. Python-скрипты используют стандартную библиотеку и читают локальные CSV; в рабочем поиске сетевых вызовов не обнаружено.

В отличие от общего taste prompt, skill умеет отвечать на узкий вопрос: подобрать guidance для error summary, keyboard focus, long labels, chart type или Next.js performance. Для новой страницы он собирает MASTER.md дизайн-системы; page override можно сохранить отдельно. Запись происходит только с --persist, а перезапись существующего master — с --force.

Это сильный вариант для product UI, где важны повторяемые tokens, формы, навигация, графики, density и framework details. Provenance-файл ссылается на W3C, официальные framework docs, Google Fonts и Phosphor, а snapshot каталога датирован августом 2026 года.

Данные всё равно остаются сторонней кураторской базой. Они помогают искать решение, но не заменяют WCAG и документацию фреймворка. В генераторе есть готовые CSS-шаблоны с transition: all, универсальными shadows и radii, хотя checklist самого skill запрещает часть таких решений. Результат нужно воспринимать как черновик, а не как стандарт.

Перед установкой сверяйте содержимое фактической версии: manifest, repository main и опубликованные каналы могут расходиться. Для новых маркетинговых страниц UI/UX Pro Max хорошо работает после короткого art-direction brief. Для dashboard он способен быть основным skill, если существующая дизайн-система получает приоритет над его палитрой.

Vercel Web Design Guidelines — быстрый статический quality gate

Этот skill очень короткий: он получает файлы или glob, загружает свежий command.md из отдельного репозитория Vercel Labs и возвращает замечания в формате file:line. Текущий checklist покрывает семантический HTML, focus, формы, анимацию, responsive images, performance, URL state, touch, safe areas, dark mode, i18n, hydration и UX-copy.

Он особенно полезен после генерации компонента: быстро ловит div onClick, отсутствие label, transition: all, изображение без размеров, отключённый zoom или hardcoded date format. При этом skill читает код и не видит фактический tab order, наложение sticky header, реальный contrast поверх фотографии или layout после загрузки данных.

Есть два важных ограничения безопасности и воспроизводимости.

Первое: правила скачиваются перед каждым review. Владелец удалённого файла может изменить инструкции без обновления установленного skill. Для командной работы лучше сохранить проверенный snapshot checklist в локальном skill и обновлять его через diff.

Второе: в корне vercel-labs/agent-skills на дату проверки нет LICENSE, хотя репозиторий самих Web Interface Guidelines имеет MIT. Поле metadata.author: vercel не оформляет лицензию на скопированный SKILL.md. В корпоративном проекте этот пробел нужно закрыть до распространения локальной копии.

Figma design-to-code — когда макет уже является источником истины

Plugin Figma объединяет Agent Skill и удалённый MCP-сервер. Это официальный пакет поставщика Figma, размещённый в каталоге Claude Code; разработчиком skill не является Anthropic. Если работа начинается с макета, отдельно пригодится обзор ИИ-плагинов для Figma.

figma-design-to-code требует сначала вызвать get_design_context. Ответ содержит reference React + Tailwind, screenshot и подсказки. Затем Claude обязан перевести их на реальный framework, component library, styling conventions и структуру проекта. Источники применяются в строгом порядке: Code Connect, component documentation, annotations, design tokens, затем raw hex и absolute positioning. Читать полный обзор сервиса Figma

Такой приоритет снижает типичную ошибку «похожая картинка, чужая кодовая база». Если Figma-компонент связан с production-компонентом через Code Connect, нужно переиспользовать этот компонент. Если связи нет, screenshot помогает восстановить намерение, но не даёт право игнорировать существующие tokens и API.

Изображения и иконки приходят по временным URL примерно на семь дней. В коммит нельзя оставлять такой адрес: asset надо сохранить в утверждённое хранилище проекта или подключить к реальному content source. Нарисованный агентом «похожий SVG» ухудшает fidelity и может нарушить права на бренд.

MCP работает по HTTPS и OAuth, поэтому до подключения определите доступные Figma-файлы, допустимые данные и права seat. Design-to-code — чтение из Figma; запись на canvas относится к другим tools и требует отдельного разрешения. В manifest и репозитории не обнаружена стандартная open-source лицензия, поэтому plugin нельзя представлять как open source.

Anthropic webapp-testing — глаза Claude на локальном сайте

webapp-testing — официальный example skill из публичного репозитория Anthropic. Он предлагает писать небольшие Python Playwright scripts, при необходимости поднимать локальный frontend через with_server.py, ждать rendered state, находить selectors, делать screenshots и читать console.

Для дизайна это финальный слой обратной связи. Один screenshot на desktop часто скрывает overflow на 375 px, пустой state, неработающую кнопку и ошибку гидратации. Browser loop позволяет увидеть страницу в нескольких размерах, пройти ключевой flow и сравнить результат после исправления.

В helper есть чувствительная деталь: --server передаётся в subprocess.Popen с shell=True. Команда нужна для cd и составного запуска, но недоверенный текст в ней превращается в shell injection. Используйте только уже известную команду из package.json или собственную явную строку. Helper также завершает поднятые процессы; перед запуском убедитесь, что порт не занят важным сервером.

Установка официального marketplace добавляет широкий bundle example-skills. Если нужен только browser workflow, безопаснее взять проверенную копию одного каталога и его лицензии. Сам Playwright и Playwright MCP остаются отдельными инструментами.

Скриншот подтверждает внешний вид в конкретном состоянии. Accessibility требует дополнительных DOM-, keyboard- и assistive-technology проверок, а performance — измерений. Для приложений с WebSocket или long polling ожидание networkidle может не наступить; выбирайте явный wait-for по готовому элементу.

AccessLint Skills — специализированный accessibility-процесс

AccessLint разделяет работу на пять навыков: автоматический scan одной страницы, ручной inspect, WCAG-EM audit выборки, remediation и regression diff. Общая методология отделяет severity от основания доказательства:

• verified — воспроизводимый DOM, selector или interaction fact;
• flagged — есть измерение или screenshot, но решение должен подтвердить человек;
• human-required — нужен пользователь assistive technology или проверка живого опыта.

Такой подход лучше обещания «WCAG пройден»: автоматический rule engine не способен подтвердить понятность текста, качество screen-reader announcement и удобство сложного widget. Inspect-процедура отдельно проверяет keyboard, focus order, reflow, zoom, reduced motion, form errors и target size. Audit выбирает representative pages и states, поэтому один чистый homepage не маскирует проблему checkout.

Однако текущий пакет нельзя ставить вслепую. .mcp.json запускает @accesslint/mcp@latest; scan и diff используют @accesslint/chrome@latest и @accesslint/cli@latest. allowed-tools включают Bash, Task, Edit/Write и browser MCP. Regression diff временно делает git stash, git checkout и git stash pop. Сбой или конфликт на грязном рабочем дереве может повредить незавершённую работу.

Практичный вариант — сделать локальный fork, закрепить npm-версии и начать с report-only scan/inspect. Diff допустим после чистого status, резервной копии и проверки возврата исходной ветки и stash. В корне репозитория отсутствует LICENSE-файл, хотя README и plugin manifest заявляют MIT; эту неоднозначность стоит прояснить у автора до корпоративного распространения.

Vercel React Best Practices — производительность реализации

Красивый интерфейс, который долго загружается или тормозит при вводе, остаётся плохим интерфейсом. Vercel React Best Practices закрывает эту часть для React и Next.js: параллельный data fetching, bundle size, server rendering, client state, rerenders, hydration, large lists, resource hints и JavaScript hot paths.

Skill состоит из SKILL.md, подробного compiled AGENTS.md и отдельных rule files. Рабочих scripts внутри него нет. Правила приоритизированы: сначала waterfalls и bundle, затем server/client data, render и микрооптимизации. Это помогает не тратить время на useMemo, когда главная задержка вызвана последовательными запросами или тяжёлой библиотекой в initial bundle.

Навык относится только к React/Next.js. Для Astro, Vue, Svelte или обычного HTML он не нужен. Он также не выбирает палитру, не проектирует IA и не проверяет keyboard flow. Подключайте его после утверждения дизайна и component boundaries.

В SKILL.md указана MIT, но в корне общего vercel-labs/agent-skills LICENSE отсутствует. Для использования инструкций внутри компании сохраните точную версию файла и проверьте юридический статус. Технические советы тоже нужно сверять с фактическими версиями React, Next.js и используемого bundler.

Готовые сочетания под разные задачи

Сценарий	Рабочий набор	Порядок	Что не добавлять
Новый локальный лендинг	frontend-design + Web Design Guidelines + webapp-testing	brief и art direction → реализация → статический review → 4 viewport screenshots	Второй broad taste skill
Dashboard или SaaS-продукт	UI/UX Pro Max + существующие tokens/components + React Best Practices + webapp-testing	задачи и states → design system → компоненты → performance → browser QA	Маркетинговый layout поверх рабочей IA
Редизайн существующего сайта	Impeccable + webapp-testing	inventory → preservation contract → новая система → batched screenshots → review	frontend-design и Taste Skill одновременно
Figma-to-code	Figma plugin + React Best Practices + webapp-testing + AccessLint inspect	design context → reuse Code Connect/tokens → implementation → fidelity → keyboard/a11y	Новую палитру поверх утверждённого макета
Accessibility-critical сервис	Existing government/company design system + AccessLint report-only + webapp-testing	semantic implementation → scan → keyboard/reflow → human AT handoff	Автоматический «100% WCAG» вывод
Сильная конфиденциальность	frontend-design или UI/UX Pro Max в read-only режиме + локальный браузер	локальные инструкции → код → локальные screenshots	Figma/Superdesign/remote MCP без policy review

Минимальный стек для большинства проектов

Начните с трёх ролей:

1. Направление: frontend-design для новой страницы или Impeccable для сложного редизайна.
2. Источник истины: существующий DESIGN.md, tokens/components или Figma. Generated palette не должна перезаписывать утверждённую систему.
3. Проверка: живой браузер, screenshots и функциональные assertions. Для высокого риска добавьте AccessLint и ручное тестирование.

UI/UX Pro Max и React Best Practices подключаются как специалисты. Первый помогает с продуктовым UX и токенами, второй — с React/Next performance.

Как избежать конфликтов между навыками

У frontend-design, Impeccable, UI/UX Pro Max, Taste Skill и других design skills широкие описания: «build page», «redesign UI», «improve frontend». Claude может активировать несколько сразу. Их правила часто несовместимы: один требует минимальной анимации, другой — высокий motion dial; один сохраняет текущую визуальную систему, другой предлагает новую; один спрашивает утверждение, другой начинает реализацию.

Порядок разрешения конфликтов должен быть зафиксирован до работы:

1. Явный запрос пользователя и утверждённый brief.
2. Product truth, legal copy, brand assets и существующие маршруты.
3. Figma/Code Connect или действующие design tokens и components.
4. Один выбранный direction skill.
5. Узкие quality skills: accessibility, performance, browser testing.

Для опасного или дорогого skill включайте disable-model-invocation: true, если формат установки позволяет, и запускайте его вручную. В plugin-режиме используйте namespaced command. В командном CLAUDE.md прямо запишите: «визуальное направление задаёт X; Y применяется только для performance review; Z не меняет tokens».

Web Design Guidelines лучше вызывать после генерации конкретного diff, а не держать как второй art director. AccessLint fix не должен менять contextual labels и alt text без человека. React Best Practices не должен переписывать UI-архитектуру, если выигрыш не измерен.

Безопасная установка и аудит без запуска чужих скриптов

Команда npx ...@latest одновременно скачивает и исполняет код. Для первой проверки она не подходит. Marketplace install также может добавить hooks, MCP, binary и dependencies сверх видимого SKILL.md.

Безопасный порядок выглядит так:

1. Зафиксируйте источник. Выберите tag или commit SHA. Не проверяйте main, а устанавливайте затем «примерно ту же» версию.

2. Скачайте исходники как архив без запуска. Сохраните SHA-256 архива и дату. Для официального plugin проверьте, к какому commit привязана marketplace entry.

3. Проверьте дерево. Нужны SKILL.md, LICENSE, все упомянутые references, scripts/, assets/, .claude-plugin/plugin.json, .mcp.json, hooks/, agents/, bin/, settings.json, package.json и lockfile.

4. Прочитайте маршрут целиком. Skill может начинаться безобидно, а затем ссылаться на файл, который требует curl, browser login, secret или destructive Git flow.

5. Найдите исполняемые поверхности. В локальной распакованной копии полезен read-only поиск:

   rg -n "allowed-tools|!`|curl|wget|Invoke-WebRequest|npx|npm|pnpm|bun|python|subprocess|child_process|shell=True|rm -rf|Remove-Item|git stash|git checkout|\.env|TOKEN|API_KEY" path/to/audited-skill
   

6. Проверьте записи и egress. Какие project files создаются или перезаписываются? Какие prompts, screenshots, code files и assets уходят наружу? Есть ли login, платные credits или remote MCP?

7. Начните с минимального состава. Для instructions-only решения скопируйте только проверенный skill-каталог и лицензию в .claude/skills/<name> проекта. Не переносите hooks, MCP и binary «на всякий случай».

8. Ограничьте разрешения. Первый запуск — Manual permissions, без blanket Bash/Write. Network и browser разрешайте для конкретного домена и задачи. Side-effect skill сделайте user-invocable-only.

9. Проверьте обнаружение. Убедитесь, что skill появился в /skills, его имя не конфликтует с другим command и он не активировался сам. Это ещё не запуск рабочего сценария.

10. Обновляйте через diff. Сравните новый SKILL.md, manifests, scripts, dependency lock и remote URLs со своей проверенной версией. Не включайте auto-update для production-sensitive workflow.

Особое внимание требуется трём паттернам:

• удалённая инструкция, которую skill скачивает при каждом вызове;
• installer или launcher, загружающий executable и checksum из одного канала;
• @latest, который меняет исполняемый код без изменения локального SKILL.md.

Если полезна только методика, безопаснее написать короткий локальный skill своими словами, чем устанавливать весь plugin с MCP, hooks и binary.

Как оценить результат сайта

Хороший ответ Claude — не тот, где сборка зелёная и hero красиво выглядит на одном скриншоте. Проверка должна закрывать форму, поведение и техническое качество.

Скриншоты и адаптивность

Снимите один и тот же реальный state как минимум на 375, 768, 1024 и 1440 px. Для mobile проверьте portrait и landscape. Добавьте ширину реального устройства пользователя, если она известна.

На каждом размере проверьте:

• отсутствие horizontal scroll и обрезанного текста;
• перенос длинного русского заголовка, фамилии, цены, URL и button label;
• положение sticky header, modal, tooltip и fixed CTA;
• размеры touch targets и расстояние между ними;
• responsive image crop и отсутствие layout shift;
• читаемую длину строки и сохранение визуальной иерархии;
• loading, empty, error, disabled и success states.

Скриншот должен быть сделан после завершения font loading и entrance animation. Откройте каждый файл: пустой, чёрный или снятый в неверном state кадр не является доказательством.

Keyboard и accessibility

Пройдите страницу без мыши:

• Tab order соответствует чтению;
• focus видим и не скрыт sticky-элементом;
• Enter и Space активируют controls, Escape закрывает dialog;
• modal не создаёт trap и возвращает focus;
• skip link, landmarks и heading hierarchy работают;
• поля имеют label, error связан с полем и понятен;
• icon-only button имеет доступное имя;
• drag, hover и gesture получают keyboard/click alternative.

Отдельно включите reduced motion, увеличьте zoom до 200% и 400%, примените увеличенный text spacing. Измерьте contrast обычного текста, крупного текста, focus indicator и meaningful icons. Автоматический scanner помогает найти часть ошибок; фактическое поведение NVDA, JAWS, VoiceOver и людей с разными потребностями должен проверять человек.

Производительность

Снимите baseline и повторите измерение после изменений. В лаборатории полезны Lighthouse, Performance panel, Network и bundle analyzer. На живом сайте важнее field Core Web Vitals:

• Largest Contentful Paint показывает скорость главного контента;
• Interaction to Next Paint — отзывчивость действий;
• Cumulative Layout Shift — визуальную стабильность.

Проверьте вес hero image, количество font files и weights, initial JavaScript, third-party scripts, waterfalls, hydration и long tasks. Оценка 100 в Lighthouse на быстром ноутбуке не заменяет проверку бюджетного телефона и медленной сети.

Соответствие дизайну и продукту

Для Figma-to-code сравнивайте не только full-page thumbnail, но и отдельные регионы: typography, spacing, component states, asset crops и responsive transformations. Для редизайна проверьте сохранность slug, anchors, navigation labels, analytics events, form names, consent/legal copy, metadata и structured data.

Anti-generic review задаёт три вопроса:

• Можно ли перенести композицию и текст на чужой SaaS без заметных изменений?
• Есть ли одна запоминающаяся идея, связанная с предметом сайта?
• Несут ли cards, labels, numbers, gradients и motion информацию, либо только заполняют пространство?

Когда лучше prompt, MCP или browser tool

Обычный prompt подходит для разовой задачи с коротким контекстом: предложить три направления hero, улучшить один component или сформулировать design brief. Skill оправдан, когда процедура повторяется, нужна одинаковая структура результата или командное правило.

MCP нужен, когда источником истины служит внешняя система: Figma, браузер, design-token registry, issue tracker. Он даёт факты и actions, которых нет в тексте skill. Перед подключением ограничьте scopes и определите, какие данные покидают проект.

Browser tool или Playwright нужен после реализации. Только живой render показывает computed styles, overflow, focus, loading, console errors и поведение на разных viewport. Skill может описать проверку, но не увидеть страницу без browser capability.

Subagent полезен для независимого review большого изменения. Ему передают brief, diff и screenshots, а не делают отдельным источником дизайн-правил.

Claude.ai Artifact удобен для изолированного интерактивного прототипа. Если результат должен жить в существующем repository, использовать production components и проходить CI, собирайте его в проекте.

Внешний canvas вроде Superdesign оправдан, когда команда хочет сравнить независимые визуальные ветки и согласна передавать выбранный код, prompts и assets стороннему сервису. Это SaaS-workflow с login и credits, а не локальный instructions-only skill.

Почему другие популярные кандидаты не вошли

Taste Skill design-taste-frontend — большой MIT-файл без scripts, но версия v2 обозначена как experimental. Он содержит полезные anti-slop проверки для landing и portfolio, одновременно навязывает субъективные абсолютные запреты: конкретные палитры, обязательные изображения, ограничения hero, punctuation и layout. Используйте его как явный art-direction lint, если согласны с эстетикой, и не смешивайте с другим broad skill.

Superdesign предлагает сильный canvas, branches, resume state и visual comparison. Skill требует @superdesign/cli@latest, login и передачу выбранных context files/ассетов hosted backend; prompts хранятся server-side, генерации расходуют credits. Он остался внешней альтернативой из-за egress и неприкреплённого runtime.

Anthropic Playground помогает интерактивно подобрать параметры и получить prompt. Результат — self-contained HTML explorer и инструкция, не реализованный сайт.

Emil Design Engineering даёт качественную motion-философию и component polish без scripts. Это сильный узкий reference, но его работа уже перекрывается Impeccable и отдельным animation review.

Vercel Composition Patterns полезен для API React-компонентов, compound components и борьбы с boolean-prop proliferation. Он решает архитектуру component library, а не дизайн сайта целиком.

extract-design-system извлекает токены публичной страницы через Playwright и npm CLI. Навык узкий, а CLI без подтверждения перезаписывает свои token outputs; npx без версии добавляет supply-chain risk. Копирование чужой палитры также не даёт права на шрифты, логотипы и визуальную идентичность.

Bencium Controlled UX Designer подробно описывает цвета, typography, responsive и motion, но остаётся на WCAG 2.1, жёстко привязан к Tailwind, shadcn и Phosphor и останавливается за подтверждением почти каждого решения. Для текущего Claude Code есть более свежие и гибкие варианты.

Web Artifacts Builder из anthropics/skills предназначен для сборки сложного Claude.ai Artifact в один bundle.html. Его initialization ставит зависимости и меняет configs, а bundler работает со своим dist. Для поддержки production-сайта с существующей сборкой это неверный contract.

Вывод

Практичный выбор в 2026 году начинается не с количества установленных skills, а с ясного процесса. Для большинства сайтов достаточно frontend-design, реального источника tokens/components и webapp-testing. UI/UX Pro Max усиливает product UI, Figma design-to-code сохраняет утверждённый макет, React Best Practices отвечает за скорость, а AccessLint — за системную accessibility-проверку.

Impeccable подходит команде, которой нужен один большой workflow от брифа до финального review и которая готова контролировать его engine, hooks и записи. Web Design Guidelines остаётся удобным статическим фильтром, если закрепить проверенную версию правил.

Главный критерий успеха — воспроизводимый результат: четыре viewport, реальные states, keyboard, contrast, reduced motion, performance и сохранённая продуктовая логика. Ни один SKILL.md не заменяет этот цикл.