Taste Skill для дизайна сайтов в Codex и Claude Code

Как Taste Skill помогает собрать сайт

Taste Skill добавляет в агент инструкции, файлы для вёрстки и скрипты проверки. В текущем репозитории один скилл, `design-taste-frontend`. Он рассчитан на сайты компаний и продуктов. В пустой папке агент может начать со статического шаблона. В существующем проекте README описывает работу на текущем стеке, в том числе React, Vue, Svelte и Astro. Для Next.js описан статический экспорт.

Агент начинает с задания и определяет, для кого нужен сайт, например для кафе, игры или сервиса. Скрипт `start.mjs` подбирает палитру и пару шрифтов, а отдельный скрипт предлагает компоновку первого экрана. Например, для сайта кафе предусмотрены фотографии и выразительная типографика. Шейдеры и сложные эффекты прокрутки скилл оставляет для сайтов софта, игр и технических продуктов. README версии 2.5.1

Фотографии можно взять из каталога скилла. В версии 2.5.1 `photos.mjs search` умеет искать дополнительные снимки на Wikimedia Commons. Если у клиента нет своих кадров, инструкции требуют указывать в отчёте, какие снимки взяли на замену и указать авторов снимков в подвале сайта. Лицензия MIT относится к коду и документации проекта. Условия использования фотографий зависят от лицензии конкретного снимка. Лицензия проекта

Установка и первый запрос

Для установки через Skills CLI запустите в терминале `npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend` и выберите своего агента. Для работы скриптов нужны Node.js 22 или новее и установленный Chrome, Edge или Chromium. Если браузер установлен в другой папке, укажите путь к нему через `CHROME_PATH`. Для загрузки дополнительных фотографий, шрифтов и иконок нужен интернет. Скрипты работают без собственных API-ключей.

После установки откройте новую сессию Codex и укажите в запросе `$design-taste-frontend`. В Claude Code скилл можно вызвать через `/design-taste-frontend` после установки через Skills CLI. README также описывает установку через плагины. Для Claude Code имя команды тогда будет `/taste-skill:design-taste-frontend`. Инструкция по вызову скилла

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

По теме: Impeccable для дизайна интерфейсов в Codex и Claude Code

Что проверяет браузерный скрипт

Скрипт `consistency.mjs` открывает собранную страницу в браузере без видимого окна и проверяет её на нескольких ширинах. В версии 2.5.1 скрипт ищет блоки, которые перекрывают друг друга на телефоне, и слишком мелкие зоны нажатия. Он также проверяет подписи полей и порядок заголовков. Для проекта на фреймворке проверке нужна отрисованная страница, например по локальному HTTP-адресу.

В релизе 2.5.1 от 7 ноября 2026 года появился `gate.mjs`. Он объединяет браузерную проверку, проверку компоновки и поиск шаблонных оборотов в тексте. В Claude Code скрипт может срабатывать при завершении ответа агента. На исправления отводится до трёх раундов. Для ложных срабатываний предусмотрено до пяти исключений с обоснованием. Если замечания остались к концу раундов, проверка завершится со статусом `GATE: OPEN`. Журнал изменений 2.5.1

Ограничения и версия документации

Проверка полей и кнопок покрывает отдельные правила. Весь путь от клика до получения заявки и соответствие макета фирменному стилю проверяют отдельно. Шаблон 2.5.1 рассчитан на секции высотой в экран на десктопе. Если у продукта уже есть своя сетка, зафиксируйте её в задании.

В документации на сайте по состоянию на 7 ноября 2026 года описана версия 2.1.5 со скриптами того выпуска. Команды и возможности версии 2.5.1 приведены по файлам репозитория. Документация на сайте Taste Skill