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

Лучший базовый навык для обычного frontend-проекта — Frontend Design от PaulRBerg: он связывает предметное арт-направление, реализацию, адаптивность, доступность и проверку реального рендера. Для многостраничного сайта перед ним полезен Site Architecture, для макета из Figma — Figma Implement Design, для React/Next.js после реализации — Vercel React Best Practices. Остальные участники закрывают дизайн-систему, графику, аудит, визуальную проверку и отдельный сценарий OpenAI Sites. Поэтому в итоговой подборке девять навыков: у каждого своя роль, число не раздуто похожими эстетическими промптами.

Материал актуален на 5 сентября 2026 года. Мы изучили не только README: у вошедших в подборку прочитаны реальные SKILL.md, прямо связанные инструкции и скрипты, лицензии, зависимости, сетевые обращения, файловые записи и условия доступности. Сторонние пакеты не устанавливались и не запускались, поэтому это аудит устройства и логики навыков, а не сравнительный тест качества на одном макете.

Что в Codex действительно считается Skill

В официальной документации OpenAI о Skills навык описан как каталог с обязательным файлом SKILL.md и необязательными папками scripts, references, assets и метаданными для интерфейса и зависимостей. Сначала Codex видит имя и описание. Если задача подходит, он загружает полный SKILL.md и следует процессу. Навык можно вызвать явно через $имя-навыка либо дать Codex выбрать его по description.

Эта механика отличает Skill от соседних сущностей:

Сущность	Что хранит или даёт	Когда использовать
Skill	Повторяемый процесс: входы, шаги, ресурсы, проверки, критерий готовности	Для устойчивого workflow: спроектировать, реализовать, проверить
Plugin	Устанавливаемый пакет распространения; может включать skills, MCP-сервер и UI	Когда навык или связку навыков нужно доставить пользователям вместе с интеграциями
MCP / connector	Доступ к внешним данным и действиям через структурированные функции	Получить узлы Figma, открыть данные сервиса, создать или изменить внешний объект
Tool	Одну функцию со схемой аргументов и результата	Сделать конкретное действие: снять скриншот, сгенерировать изображение, прочитать файл
AGENTS.md	Постоянные инструкции проекта, автоматически читаемые по иерархии каталогов	Зафиксировать правила репозитория: стек, команды тестов, ограничения, стиль кода
Prompt	Разовую задачу и контекст текущего запуска	Попросить локальную правку, которая не требует отдельного повторяемого процесса

Plugin и Skill часто встречаются вместе. Например, Computer Use поставляет навык с инструкциями и MCP-сервер с возможностью управлять интерфейсом. Figma Implement Design задаёт порядок работы, а данные получает через Figma MCP. Установка одного SKILL.md не создаёт отсутствующий коннектор.

Локальные skills Codex ищет на уровне репозитория, пользователя, администратора и системы. Для проектной команды удобна папка .agents/skills в репозитории: версия навыка меняется вместе с кодом. Пользовательский каталог подходит для личных повторяемых процессов. Два навыка с одинаковым name не объединяются, поэтому совпадения имён нужно устранять до установки.

Как выбирались лучшие навыки

Оценка построена вокруг результата, который нужен команде сайта:

• discovery и краткий бриф без лишнего интервью;
• информационная архитектура, маршруты и навигация;
• арт-направление, типографика, цвет и дизайн-система;
• адаптивная компонентная реализация в существующем стеке;
• создание подходящих изображений и сохранение векторной природы UI;
• доступность, производительность и устойчивость состояний;
• проверка отрендеренной страницы в браузере;
• чёткая граница между preview, сохранением версии и публикацией.

Дополнительно учитывались переносимость между desktop, CLI и cloud, качество триггера, размер контекста, лицензия, зависимости, файловые изменения, сеть, секреты и возможность закрепить версию. Звёзды GitHub и обещания в README на место в списке не влияли.

Сравнение девяти навыков

Навык	Главная роль	Где полезнее всего	Доступность и переносимость	Главный риск
Frontend Design	Арт-направление, код и rendered QA	Новый интерфейс или существенный редизайн	Переносимый third-party Agent Skill; Codex desktop/CLI/cloud при наличии нужных tools	Широкий триггер и субъективные эстетические правила
Site Architecture	IA, навигация, URL и внутренние связи	Многостраничные сайты, каталоги, docs, e-commerce	Переносимый instruction-only skill, MIT	Шаблонные эвристики могут заменить исследование пользователей
UI UX Pro Max	Локальная база дизайн-знаний и черновик системы	Greenfield UI, выбор направления, точечные UX-вопросы	Third-party; нужен Python, после установки поиск работает локально	Противоречия между правилами и генерируемыми CSS-примерами
Figma Implement Design	Перенос макета в production code	Figma является источником истины	Curated skill; нужен Figma MCP и доступ к файлу	Beta/seat/rate limits и зависимость от внешнего MCP
Imagegen	Растровые ассеты	Hero, фон, иллюстрация, product visual	System skill при наличии image generation; доступ и лимиты зависят от аккаунта	Генерация не заменяет иконки, SVG и дизайн интерфейса
Web Design Guidelines	Статический аудит UI-кода	Проверка после реализации	Переносимый third-party skill, MIT у источника правил	Загружает изменяемые инструкции из main при каждом запуске
Vercel React Best Practices	Производительность React/Next.js	React/Next-приложения после UI-реализации	Переносимый third-party skill	Узкий стек; советы о зависимостях требуют проектного решения
Computer Use	Визуальная проверка в GUI	Реальный браузер и desktop-only потоки	Bundled plugin для поддерживаемого Codex desktop; не CLI/cloud renderer	Доступ за пределы workspace и отдельные разрешения приложений
Sites Building	Полный цикл сайта в OpenAI Sites	Когда нужен именно хостинг Sites	Plugin-provided, public beta, web/desktop management	Низкая переносимость и production-граница при deploy

Подробный разбор навыков

Frontend Design: лучший общий выбор

Frontend Design — компактный MIT-навык без исполняемых скриптов и внешних references. Его главное преимущество — единый контракт от чтения продукта до визуальной проверки результата.

Перед кодом навык просит изучить изменяемый маршрут, соседние экраны, токены, типографику, ассеты, зависимости и команды проверки. Затем он формулирует одну визуальную тезу, систему ролей цвета и текста, предметный «фирменный» элемент и осмысленный риск. Subject-swap test выявляет шаблонность: если композиция без изменений подходит продукту из другой отрасли, решение нужно обосновать или переделать.

Реализация сохраняет текущий framework, design system и поведение. Навык не предлагает менять стек, добавлять зависимости или придумывать функции ради визуального эффекта. Для рабочего приложения он ставит основную задачу пользователя в первый экран, а маркетинговому или редакционному сайту разрешает более выразительную подачу. Отдельно проверяются семантика, клавиатура, видимый фокус, контраст, reduced motion, переполнение и узкие экраны.

Сильнее всего его completion contract. После formatter, lint, types, tests и build требуется открыть реальный интерфейс на узком и широком viewport, пройти изменённые состояния и исправить визуальные дефекты. Если рендер недоступен, итог должен прямо назвать ограничение. Этот пункт защищает от распространённой ошибки: зелёная сборка доказывает компиляцию, но не доказывает качество страницы.

Навык стоит вызывать явно для крупного редизайна. Его description достаточно широк, чтобы перехватывать соседние UI-задачи. Если в проекте уже есть строгий дизайн-процесс, сузьте описание или оставьте явный вызов. Формат финального отчёта с эмодзи — предпочтение автора, его можно адаптировать, не меняя сам workflow.

Site Architecture: отдельный слой IA

Site Architecture нужен до экранов, когда сайт состоит из нескольких типов страниц. Skill собирает цели бизнеса, аудитории, текущее состояние, инвентарь контента и URL, которые нельзя потерять. На выходе появляются дерево страниц, визуальный sitemap, URL map, спецификация header/footer/sidebar/breadcrumbs и план внутренних связей.

Пакет instruction-only: в нём нет скриптов и сетевых вызовов, лицензия MIT. Это делает переносимость в Codex высокой. References содержат шаблоны для SaaS, контентного проекта, e-commerce, документации, гибридного и локального сайта, варианты навигации и Mermaid-заготовки.

Шаблоны нужно воспринимать как черновик. Правило трёх кликов, лимит 4–7 пунктов меню и плотность внутренних ссылок не являются универсальными стандартами. Для сложного каталога, профессионального ПО или мобильного web app важнее реальные задачи, частота действий и исследование поиска. Skill также соединяет IA и SEO, поэтому дизайнер должен отдельно проверить пользовательские сценарии, а SEO-специалист — спрос и индексируемость.

Для одностраничного лендинга полный workflow чаще избыточен. Достаточно кратко определить порядок секций и якорную навигацию. Явно вызывайте Site Architecture для page graph, URL и миграции структуры; не давайте ему автоматически проектировать каждый сайт.

UI UX Pro Max: поисковая дизайн-разведка

UI UX Pro Max хранит локальные наборы стилей, продуктовых палитр, пар шрифтов, UX-правил, иконок, motion patterns, типов графиков и рекомендаций по стекам. Python-скрипт применяет BM25-поиск по CSV и собирает design-system proposal. Основной runtime использует стандартную библиотеку Python и не обращается в сеть.

Для нового продукта предусмотрен режим --design-system, для узкого вопроса — явный domain, для реализации — stack. Хорошая часть контракта: один запрос должен выражать один доминирующий intent, результат проверяется на соответствие продукту и платформе, а при нулевой или слабой выдаче разрешён один уточнённый повтор. Skill запрещает выдавать отсутствие совпадения за найденную рекомендацию.

Режим сохранения создаёт design-system/<project>/MASTER.md и page overrides только с отдельным флагом. Имена превращаются в безопасные сегменты пути, запись атомарна, существующий master по умолчанию не перезаписывается. Это полезно для команды: результат retrieval превращается в проверяемый артефакт, а не растворяется в истории чата.

В пакете есть несогласованность. Quick reference запрещает transition: all, но генератор master-файла сам вставляет это свойство в примеры кнопки и карточки. В шаблонах также встречаются жёсткие белые поверхности и универсальные карточки, способные спорить с выбранной темой. Поэтому применяйте UI UX Pro Max как базу вариантов и ограничений, затем проверяйте каждое решение основным frontend-навыком и существующей системой продукта.

Python-часть работает локально, но установка через сторонний CLI остаётся исполняемым supply-chain шагом. Для воспроизводимости лучше закрепить commit, проверить дерево пакета и хранить рассмотренную версию в репозитории.

Figma Implement Design: когда макет уже утверждён

Figma Implement Design — curated-навык с узким назначением: перевести конкретный Figma frame или component в код текущего репозитория. Пакет поставляется на условиях Figma Developer Terms и обозначен как beta. Для выбора инструментов вокруг Figma пригодится обзор ИИ-плагинов для Figma.

Workflow сначала извлекает fileKey и nodeId, затем получает структурированный design context и screenshot. Если узел слишком большой, skill сначала запрашивает карту metadata и разбивает работу на дочерние узлы. Ассеты из Figma MCP нужно сохранить и использовать, не заменяя заглушками и случайным icon package. Читать полный обзор сервиса Figma

Полученный React/Tailwind-контекст рассматривается как представление дизайна. Финальный код должен следовать conventions текущего проекта: переиспользовать компоненты, сопоставить Figma tokens локальным ролям, сохранить routing и state patterns. Перед завершением сравниваются layout, typography, colors, states, responsive behavior, assets и accessibility.

Этот навык требует подключённого Figma MCP. Наличие SKILL.md без коннектора не даёт доступа к файлу. Возможность также зависит от разрешений Figma, тарифа, seat, rate limits и состояния beta. Не обещайте одинаковую доступность всем пользователям Codex.

При совместном использовании с творческим frontend-навыком заранее задайте приоритет: утверждённые компоненты, токены, annotations и fidelity из Figma должны победить свободную смену композиции. Творческий слой полезен для отсутствующих состояний и адаптивного поведения, которые макет не определяет.

Imagegen: графика после арт-направления

Imagegen полезен для растровых hero-изображений, фонов, иллюстраций, product visuals, textures и редактирования исходных картинок. Он также умеет создавать mockup, но такой bitmap остаётся референсом; production-интерфейс должен быть собран доступными HTML-компонентами.

System skill разводит два режима. Встроенный image-generation tool используется по умолчанию и не требует API key. CLI fallback разрешён после явного выбора пользователя, требует OPENAI_API_KEY, сетевого доступа, Python package и файловых операций. Выходы сохраняются без перезаписи существующего ассета, а проектная картинка должна оказаться внутри workspace.

Навык правильно ограничивает область: editable SVG, существующая иконная система, логотипы и простая интерфейсная геометрия сохраняются в родном векторном или кодовом формате. Не стоит генерировать целый экран с мелким текстом и затем ставить его на сайт картинкой. Такой экран недоступен, неадаптивен и плохо поддерживается.

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

Web Design Guidelines: короткий аудит исходников

Web Design Guidelines проверяет UI-файлы по правилам семантики, focus states, форм, анимации, typography, переполнения, изображений, производительности, navigation, touch, dark mode, locale и hydration. Результат выдаётся короткими замечаниями file:line, поэтому skill удобно ставить после реализации и до browser QA.

Сам SKILL.md очень мал: перед каждым аудитом он загружает актуальный command.md из другого репозитория Vercel. Источник правил лицензирован по MIT, однако обращение к изменяемой ветке main создаёт три проблемы: нужен egress, результаты не воспроизводятся, удалённый текст становится поверхностью prompt injection и supply-chain drift. В Codex cloud agent phase сеть по умолчанию выключена, поэтому workflow может просто не сработать.

Безопасная адаптация — взять рассмотренный commit, сохранить command.md в references/, убрать live fetch и записать источник с хешем. Имя WebFetch из исходного skill тоже не нужно переносить буквально: Codex должен использовать реально доступный способ чтения, либо работать с локально закреплённым файлом.

Часть правил нельзя применять механически. Native button уже имеет клавиатурное поведение; обработчик клавиши нужен не каждому интерактивному элементу. Title Case не подходит русскому интерфейсу. autocomplete="off" может ухудшить формы, а перенос любого состояния в URL создаёт лишнюю сложность. Это качественный первый фильтр, но не сертификат соответствия WCAG.

Vercel React Best Practices: скорость после визуальной реализации

Vercel React Best Practices содержит 70 правил в восьми группах: waterfalls, bundle size, server performance, client data fetching, rerenders, rendering, JavaScript hot paths и advanced React patterns. SKILL.md ссылается на развёрнутый compiled guide и отдельные rule-файлы с примерами.

Навык полезен после того, как структура и внешний вид уже решены. Он помогает параллелить независимые запросы, уменьшать RSC serialization, откладывать тяжёлые компоненты, предотвращать layout thrashing, управлять expensive renders и не блокировать интерфейс второстепенной работой. Это напрямую влияет на воспринимаемое качество: быстрая страница ощущается аккуратнее, чем визуально похожая страница с задержками и скачками.

Область ограничена React и Next.js. Для Vue, Svelte, Astro или обычного HTML этот skill не является универсальным performance review. Некоторые примеры предлагают новые библиотеки, кэш или архитектурное изменение. Такие советы нужно сопоставлять с текущей версией framework, runtime и требованиями проекта; навык не даёт автоматического разрешения менять зависимости.

В SKILL.md указана MIT-лицензия, но в корне umbrella-репозитория отдельный файл лицензии не найден. Перед vendoring стоит сохранить сам skill, rule files и зафиксировать лицензионную информацию конкретного пакета.

Computer Use: визуальная проверка в Codex desktop

Computer Use соединяет plugin-provided skill и MCP-сервер для управления приложениями Windows и macOS. В поддерживаемом Codex desktop он может открыть разрешённый браузер, пройти UI flow, увидеть screenshot и accessibility tree, воспроизвести визуальный баг, а после исправления повторить тот же сценарий.

Для web design это слой rendered QA, когда чтение кода и build недостаточны. Полезные сценарии: проверить checkout, открыть меню на реальном viewport, увидеть обрезанный текст, воспроизвести диалог и сравнить поведение до и после правки.

Computer Use не является renderer для Codex CLI или cloud. Нужны установленный и включённый plugin, разрешение на конкретное приложение и доступная активная desktop-сессия. На Windows приложение должно быть видимо на активном рабочем столе. Действия в GUI могут менять состояние за пределами workspace, поэтому формы, публикация, загрузки и другие внешние эффекты имеют отдельные подтверждения.

Для браузера предпочтителен структурированный browser control, если он доступен: он стабильнее координат. Computer Use нужен для визуального суждения или интерфейса, который не покрывает специализированная интеграция. В локальном plugin package отдельный файл публичной лицензии не обнаружен; рассматривайте его как bundled-возможность продукта, а не переносимый open-source skill.

Sites Building: лучший вертикальный workflow для OpenAI Sites

Sites Building выбирают, когда результат должен стать проектом OpenAI Sites. Это plugin-provided skill с собственным starter, .openai/hosting.json, окружением Cloudflare Workers, D1/R2 и native tools. Вне этого сценария его ограничения и lifecycle плохо переносятся в обычный frontend-репозиторий.

Внутри своей экосистемы skill силён. Он определяет аудиторию и главную задачу, отличает рабочую поверхность от narrative surface, ограничивает scope, выбирает одну визуальную тезу, применяет shared tokens, переиспользует семантические shadcn-примитивы и создаёт first meaningful preview до полной реализации. Для изображений устанавливается небольшой бюджет и приоритет: реальные фактические изображения ищутся, оригинальная графика генерируется, функциональная геометрия остаётся кодовой.

Доступность зависит от плана, аккаунта, workspace и состояния public beta. Создание, сохранение, deploy и управление выполняются в web/desktop; Codex CLI может редактировать и тестировать локальный проект, но отдельного management view Sites в CLI нет.

Важно не путать preview с проверкой. Текущий skill не выполняет screenshots, DOM inspection и клики без явного запроса browser testing. Успешный build также не подтверждает визуальное качество. Любой deployment URL Sites является production deployment; безопасный режим до утверждения — локальный preview или сохранённая версия без deploy. Связанный Sites Hosting не входит в рейтинг, потому что отвечает за публикацию, доступ и version deployment, а не за дизайн.

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

Новый многостраничный SaaS-сайт

1. Site Architecture строит дерево страниц, URL и навигацию.
2. UI UX Pro Max помогает выбрать product pattern, typography, palette и responsive constraints.
3. Frontend Design становится единственным владельцем art direction и реализации.
4. Imagegen подключается только для утверждённых растровых ассетов.
5. Web Design Guidelines проверяет исходники, после чего браузерный инструмент проверяет реальные viewports.

Не переносите типовой SaaS template из Site Architecture напрямую в код. Сначала сопоставьте страницы с реальным спросом, задачами пользователей и содержанием продукта.

Редизайн существующего React/Next.js-продукта

1. Frontend Design читает текущие tokens, components, routes и поведение, затем задаёт одно направление редизайна.
2. Vercel React Best Practices проверяет waterfalls, bundle и rendering costs без смены визуальной системы.
3. Web Design Guidelines выдаёт source findings.
4. Computer Use в desktop либо уже настроенный browser/Playwright flow проверяет narrow/wide, состояния и регрессии.

Site Architecture здесь нужен только при изменении маршрутов или навигационной модели. UI UX Pro Max можно вызвать явно для одного вопроса, например палитры или chart pattern, не передавая ему весь процесс.

Реализация утверждённого Figma-макета

1. Figma Implement Design получает structured context, screenshot и assets.
2. Существующая design system и Figma tokens определяют fidelity.
3. Frontend Design дополняет неописанные responsive и error states, не меняя утверждённое направление.
4. Vercel React Best Practices применяется, если проект на React/Next.js.
5. Финальная проверка сравнивает рендер с исходным frame на нужных ширинах.

Если Figma MCP недоступен, попросите экспорт или screenshots и честно смените режим работы. Не изображайте точный design-to-code по одной ссылке, которую агент не смог прочитать.

Быстрый сайт внутри OpenAI Sites

1. Sites Building владеет scaffold, preview, кодом и build.
2. Imagegen добавляет только нужные оригинальные изображения.
3. Browser QA заказывается явно и проходит до публикации.
4. Версия сохраняется для проверки.
5. Deploy через Sites Hosting выполняется отдельным действием после решения о доступе.

Generic frontend skills не должны менять starter, preview lifecycle или hosting manifest в обход Sites Building.

Codex CLI или cloud без desktop GUI

Используйте Frontend Design для кода и completion contract, но замените Computer Use на уже настроенный browser test или безопасно адаптированный Playwright workflow. В cloud заранее решите, нужны ли сеть и browser dependencies. Не включайте общий интернет только ради одного mutable файла правил: лучше положить закреплённые references в репозиторий.

Конфликты триггеров и порядок приоритетов

Широкие skills легко активируются одновременно. Устойчивый стек назначает одного владельца этапа:

Конфликт	Безопасное правило
Frontend Design и другой skill с name: frontend-design	Оставить один; второй переименовать и сузить description до отдельной роли
Site Architecture и Frontend Design	IA вызывается для page graph/nav/URLs, frontend — для экрана и кода
Figma и творческий art direction	Figma, design system и accessibility constraints имеют приоритет при fidelity-задаче
UI UX Pro Max, Frontend Design и Impeccable	Retrieval поручить UI UX Pro Max; реализацию — одному frontend-owner; не включать три broad implicit trigger одновременно
Sites Building и generic frontend skill	Sites владеет scaffold/preview/hosting lifecycle; другой skill даёт лишь локальные эвристики
Imagegen и UI implementation	Растр генерируется после asset brief; controls, icons и layout остаются кодом или вектором
Web Design Guidelines и React Best Practices	Они проверяют соответствующую область после реализации и не разрешают несвязанные рефакторы
Browser QA и публикация	Проверка может читать и взаимодействовать локально; deploy и внешние отправки остаются отдельными действиями

В AGENTS.md стоит записать постоянный приоритет проекта: утверждённая система и пользовательский brief выше общих рекомендаций навыка; Figma выше свободного art direction; публикация только по явному запросу. Это снимает конфликт до запуска.

Как безопасно проверить и установить сторонний Skill

Папка SKILL.md является исполняемой инструкцией для агента, а scripts могут запускать обычный код. Применяйте такой порядок:

1. Закрепите источник. Выберите commit или release, сохраните repository URL и хеш. Не устанавливайте плавающий main для командной среды.
2. Просмотрите всё дерево. Прочитайте SKILL.md, каждый прямо связанный reference, scripts, assets, agents/openai.yaml, manifest и лицензию. Найдите вложенные загрузчики и generated binaries.
3. Проверьте триггер. name не должен совпадать с установленным навыком, а description не должен захватывать все frontend-задачи без необходимости.
4. Постройте карту действий. Отметьте чтение и запись файлов, subprocess, shell=True, package managers, curl/wget, API keys, telemetry, uploads, MCP, browser control и deploy.
5. Отделите установку от запуска. Копирование файлов, выполнение installer и первый вызов — три разные операции. Сначала прочитайте install script; затем проверьте diff установленных файлов; только потом разрешайте skill.
6. Начните в изоляции. Используйте тестовый репозиторий без секретов, read-only или минимальную запись в workspace и выключенную сеть. Не подключайте production credentials.
7. Откройте только нужный egress. Разрешите точные домены и HTTP methods. Mutable remote instructions лучше сохранить локально после проверки.
8. Проверьте права каждой поверхности. Локальный sandbox не управляет автоматически MCP, connector, browser, desktop app и cloud. Их permissions изучаются отдельно.
9. Сделайте read-back. После установки перечитайте фактический файл из .agents/skills, сравните с закреплённым источником и перезапустите Codex только при необходимости.
10. Зафиксируйте обновление как change review. Новая версия навыка проходит тот же аудит, что dependency update.

Модель безопасности Codex разделяет sandbox, approval policy и network controls. В локальном workspace-write запись обычно ограничена рабочей областью, а сеть по умолчанию выключена. В cloud setup может иметь интернет для зависимостей, после чего agent phase работает offline, если сеть отдельно не включили. Web content остаётся недоверенным даже при разрешённом чтении.

Особое внимание нужно трём участникам. Web Design Guidelines читает изменяемый raw-файл на каждом запуске. UI UX Pro Max во время поиска локален, но его installer — внешний код. Impeccable не вошёл в рейтинг: его launcher при отсутствии engine скачивает release binary, проверяет sidecar SHA-256 и затем запускает файл из user cache. Проверка хеша полезна, но не заменяет доверие к каналу публикации и аудит бинарника.

Чек-лист визуальной проверки сайта

Build и source audit должны завершаться проверкой настоящего рендера. Минимальный acceptance set:

Размеры и компоновка

• узкий mobile viewport и широкий desktop;
• tablet и landscape, если они важны продукту;
• отсутствие горизонтального scroll, overlap и clipping;
• нормальное поведение sticky header, dialogs, drawers и virtual keyboard;
• длинный русский текст, короткие значения, пустые поля, URL и идентификаторы;
• 200% text zoom или увеличение текста без потери функций.

Состояния и взаимодействие

• default, hover, focus, active, disabled;
• loading, empty, error, success и partial data;
• keyboard traversal в визуальном порядке;
• видимый focus, Escape/close, возврат фокуса после modal;
• формы сохраняют введённые данные при ошибке и показывают путь исправления;
• жесты имеют click/keyboard alternative, если жест не является сущностью задачи.

Доступность

• semantic landmarks и последовательная иерархия headings;
• доступные имена controls и alt для содержательных изображений;
• декоративные иконки скрыты от accessibility tree;
• contrast проверен на фактических foreground/background парах;
• смысл не передаётся только цветом;
• live updates объявляются без принудительного переноса фокуса;
• prefers-reduced-motion убирает или упрощает движение;
• touch targets и расстояния соответствуют контексту устройства.

Автоматический checklist не доказывает полное соответствие. W3C рекомендует сочетать автоматические и ручные проверки на протяжении жизненного цикла продукта.

Визуальная система

• цвета берутся из семантических tokens, светлая и тёмная тема проверены отдельно;
• type scale, line-height и measure соответствуют роли текста;
• один icon family и согласованная толщина штриха;
• cards, pills, gradients, blur и motion объясняют структуру или действие;
• нет случайной замены брендовых assets и Figma components;
• страница сохраняет предметную специфику после subject-swap test.

Производительность и техническая устойчивость

• hero image имеет размеры и приоритет, below-fold media загружается отложенно;
• нет заметного layout shift при шрифтах, изображениях и async data;
• главный поток не блокируется тяжёлыми эффектами;
• console не содержит новых ошибок;
• navigation, back, deep links и обновление страницы сохраняют ожидаемое состояние;
• network failures и timeouts показывают понятный recovery path.

Доказательство проверки

Запишите viewport, тему, состояние и результат. Для Figma приложите сравнение с исходным frame. Если инструмент не мог открыть браузер, так и укажите: «build и source checks пройдены, визуальный рендер не проверен». Не заменяйте этот пробел уверенным описанием кода.

Когда Skill не нужен

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

• точечная правка отступа, подписи или CSS token с ясным acceptance criterion;
• разовый вопрос о существующем компоненте;
• одностраничный лендинг без отдельной задачи IA;
• постоянное правило репозитория, которое лучше записать в AGENTS.md;
• одно структурированное действие уже доступного MCP/tool без сложного workflow;
• проект с зрелой дизайн-системой, где внешняя база стилей только провоцирует drift;
• отсутствие browser runtime: screenshot-oriented skill не даст проверяемого результата сам по себе.

Начните с brief и ограничений проекта. Добавляйте skill, когда можете назвать его отдельный вход, артефакт и критерий готовности.

Почему Impeccable и Visualize не вошли в девятку

Impeccable — сильная система с режимами Persuade, Operate, Read и Experience, отдельными командами critique, audit, polish, harden, adapt, typeset и другими. Она перекрывает роли Frontend Design и UI UX Pro Max, имеет очень широкий trigger и зависит от engine binary для контекста, live mode и detectors. Для команды, готовой закрепить release, проверить launcher, binary provenance и все references, Impeccable может заменить несколько пунктов стека. В универсальной безопасной подборке instruction-only Frontend Design проще аудировать и переносить.

Visualize хорош для интерактивного mockup или объяснения прямо в чате. Его собственный SKILL.md исключает запрос на новый website, app page или component из области in-conversation visualization. Codex CLI и IDE extension не рендерят эту поверхность. Используйте Visualize для обсуждения вариантов до кода, затем переносите утверждённое решение в настоящий проект другим workflow.

Локальный Optimize Image SEO тоже не включён: он полезен после дизайна для прав, стабильного asset URL, ImageObject, image sitemap и crawler validation. Это специализированный post-design процесс, а его публичная доступность для других пользователей не подтверждена.

Итог

Надёжный стек Codex для web design строится слоями. Site Architecture отвечает за структуру, UI UX Pro Max — за поисковую дизайн-разведку, Frontend Design — за арт-направление и реализацию, Figma Implement Design — за fidelity, Imagegen — за растровые ассеты, два Vercel-навыка — за source и performance audits, Computer Use — за desktop visual QA, Sites Building — за вертикальный сценарий OpenAI Sites.

Не активируйте весь список одновременно. Выберите одного владельца реализации, добавьте только нужные специализированные слои, закрепите версии и завершайте работу проверкой реального рендера. Публикация остаётся отдельным решением после проверки.