Taste Skill: арт-дирекшн и браузерная проверка сайтов

Taste Skill — MIT-навык design-taste-frontend для создания и переработки корпоративных сайтов. Он сочетает авторский арт-дирекшн, готовую систему компоновки, локальные библиотеки медиа и обязательные проверки страницы в реальном браузере.

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

Как проходит сборка

Сначала навык классифицирует бизнес как software, gaming, tech, product, service или place. От категории зависят палитра, типографика, hero-компоновка, изображения и допустимые эффекты.

Далее агент:

Получает токены и один из протестированных вариантов hero-layout.
Начинает с общей системы starter.html, system.css и layout.css либо адаптирует её к существующему React, Vue, Svelte, Astro или Tailwind-проекту.
Для программных продуктов показывает переписанные HTML-фрагменты реального интерфейса и диаграммы, а для мест, магазинов и услуг — подобранные фотографии с указанием источников.
Ограничивает WebGL и сложные scroll-сцены категориями software, tech и gaming. Для телефонов и prefers-reduced-motion предусматривает статичные варианты.
Проверяет страницу по HTTP в Chrome на ширинах от 390 до 1440 px: пустые визуальные блоки, контраст, выравнивание, высоту секций, placeholder-текст и проблемы загрузки изображений.
Не завершает работу, пока finish gate не перестанет выдавать исправимые FAIL; предусмотрено не более трёх раундов исправлений.

Это не только библиотека правил: скрипты навыка участвуют в выборе направления, генерации и приёмке.

Установка

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Требуются Node.js 22+ и установленный Chrome, Edge или Chromium. Дополнительный ffmpeg нужен только для отдельных операций с WebP и мобильным кадрированием фотографии. API-ключи не требуются; сеть используется при загрузке дополнительных фотографий, шрифтов или значков. Часть фотографий Wikimedia Commons входит в комплект и доступна офлайн.

Для Claude Code и Codex также опубликованы plugin-варианты установки. После подключения достаточно попросить агента создать или переработать сайт и явно назвать навык, если он не активировался автоматически.

Медиа и права

Taste Skill различает реальные материалы клиента и временные stand-ins. Библиотечную фотографию нельзя выдавать за помещение, сотрудников или продукт заказчика. Навык сохраняет кредиты в раскрываемой строке footer, но команда всё равно обязана проверить конкретную лицензию, корректность атрибуции и допустимость использования в коммерческом проекте.

Для продуктового UI важно передать настоящие экраны и данные. Сам по себе запрет на выдумки не гарантирует, что агент правильно поймёт интерфейс по неполному материалу.

Ограничения

Навык намеренно категоричен. Правило «одна секция на desktop-экран», фиксированная навигация и закрывающий footer подходят не каждому медиа, магазину или сложному приложению. Эти принципы следует рассматривать как авторскую систему, а не универсальный стандарт веб-дизайна.

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

Чем отличается от Hallmark и Impeccable

Taste выбирает направление по типу бизнеса и опирается на собственную систему экранов и медиа. Hallmark использует каталог из 50 материалов-тем и трёхуровневые quality gates. Impeccable меньше навязывает законченную структуру и лучше подходит для точечных итераций существующего UI.