Проверка дизайна в настоящем браузере
Этот инструмент позволяет проверять дизайн веб-страниц в реальном браузере, выявляя проблемы с отображением и соответствием стандартам. Он полезен для создания интерфейсов, редизайна и улучшения визуального восприятия страниц.
Экосистема: Универсальный
Инструкция
--- name: tastegate description: "Build or fix a frontend so it looks designed, not AI-generated, then prove it in a real browser: renders at phone and desktop width and fails on overlap, low contrast and AI-slop defaults." category: frontend risk: safe source: community source_repo: stas4000/tastegate source_type: community date_added: "2026-10-08" author: stas4000 tags: [frontend, design, ui, browser-testing, quality-gate] tools: [claude, cursor, gemini] license: "MIT" license_source: "https://github.com/stas4000/tastegate/blob/main/LICENSE" --- # Tastegate ## Обзор Два навыка в одном, плюс часть, которую оба оставляют модели: доказательство. 1. **Вкус** определяет, какой должна быть страница, до написания кода. 2. **Механика** содержит требования, которым должна соответствовать каждая страница. 3. **Ворота** отображают страницу в реальном браузере на ширине телефона и настольного компьютера и отказываются считать работу завершенной, пока открыты какие-либо серьезные проблемы. Модель, написавшая CSS, не может увидеть, что ее герой перекрывает навигацию при 390px. Браузер может. Пройдите через четыре шага по порядку и применяйте контрольные списки, а не просто объявляйте их. ## Когда использовать - Используйте для любого создания пользовательского интерфейса: целевая страница, маркетинговый сайт, панель управления, экран приложения, компонент. - Используйте для редизайна, финальной доработки или запроса "сделать лучше". - Используйте, когда страница должна перестать выглядеть как сгенерированная ИИ. - Используйте перед тем, как считать любую работу на фронтенде завершенной, как этап доказательства. ## Как это работает ### Шаг 1: Оцените ситуацию (2 минуты, до кода) Напишите одну строку перед началом сборки: > Оцениваю это как: `<тип страницы>` для `<аудитории>`, на языке `<атмосфера>`, построенной на `<тип сочетания>` + `<семейство палитры>` + `<один характерный элемент>`. - Аудитория выбирает внешний вид, а не ваши привычки. Покупатель B2B, потребитель, разбирающийся в дизайне, и посетитель государственного сектора нуждаются в трех разных страницах. - Установите три параметра из этого анализа (от 1 до 10): **вариативность** (симметрия к искусству), **движение** (статичное к кинематографическому), **плотность** (галерея к кокпиту). По умолчанию для целевой страницы: 7 / 6 / 4. Для доверительных или регулируемых: 3 / 2 / 5. - Назовите один **характерный элемент**, по которому страницу будут помнить: обработка шрифта, материал, взаимодействие, способ показа продукта. Один, сделанный хорошо. - Если бриф указывает шрифты, цвета или эпоху, бриф имеет приоритет над каждым правилом здесь. ### Шаг 2: Стройте на механике - **Шрифт:** реальный шрифт с характером, в паре с читаемым текстовым шрифтом. Не используйте Inter, Roboto, Arial или системный стек в качестве отображаемого шрифта, если бриф не требует нейтрального. Размер тела 16px или больше, 60-75 символов в строке, четкие размеры и веса. - **Цвет:** одна нейтральная палитра, один акцент, зафиксированные по всей странице. Никаких градиентов "AI glow" от фиолетового к синему, никакого градиентного текста, никаких цветных ореолов. Вторичный текст с оттенком от его поверхности, никогда не просто серый на цвете. Контраст тела 4.5:1 или лучше. - **Макет:** герой помещается на первый экран с видимой кнопкой призыва к действию. Никаких маленьких заглавных меток над каждым заголовком. Никакой строки из трех карточек одинакового размера в структуре страницы. Каждый раздел использует другую семью макетов. Пробелы внутри группы меньше, чем между группами. - **Иконки и текст:** реальные SVG-иконки с одним весом линии, никогда не эмодзи. Слова самого продукта: никаких lorem ipsum, никаких "Acme", никаких "John Doe", никаких "Разблокируйте силу". - **Состояния:** состояния наведения, видимого фокуса, активного, отключенного, загрузки, пустого и ошибки существуют для каждого элемента управления, который их имеет. Стилизация частей браузера тоже: цвет выделения, кольцо фокуса, полоса прокрутки, курсор. - **Движение:** один авторский момент, плавно выходящий из уже видимого по умолчанию. Уважайте `prefers-reduced-motion`. - **Сначала телефон:** каждый многоколонный блок объявляет, во что он превращается при ширине менее 768px. Целевые области не менее 44px. Ничего не прокручивается вбок. ### Шаг 3: Запустите ворота ```bash python3 skills/tastegate/scripts/gate.py <path/to/index.html or http://localhost:3000> --out .tastegate ``` (Запустите его из корня репозитория или используйте путь к тому месту, где установлен этот навык.) Он отображает страницу в безголовом Chromium при 390x844 и 1440x900, печатает каждую находку с ее правилом, областью просмотра и элементом, сохраняет скриншоты всей страницы и завершает работу с кодом 1, пока открыта любая **ошибка**. Первый запуск только: `pip install playwright && python3 -m playwright install chromium`. Исправьте каждую ошибку в одной партии, затем запустите ворота снова. Предупреждения — это оценочные решения: исправьте их, если бриф не просил об этом. ### Шаг 4: Посмотрите на это сами Откройте оба скриншота, которые сохранили ворота (`.tastegate/desktop.png`, `.tastegate/mobile.png`). Ворота фиксируют механику; они не могут сказать вам, что страница скучная. Спросите: отправил бы дизайнер из хорошей студии это? Признается ли характерный элемент в первом окне просмотра? Есть ли что-то еще, что остается по умолчанию, что вы не выбрали? Исправьте то, что видите, повторно запустите ворота, затем остановитесь. ## Примеры ### Пример 1: Целевая страница, которая проходит проверку, но не проходит ворота Текст и разделы правильные, поэтому работа выглядит завершенной. Ворота при 390px сообщают, что заголовок героя перекрывает навигацию, коэффициент контраста 3.1:1 на вторичном тексте и боковая прокрутка из неразмеченной строки функций. Три реальные дефекта, ни один из которых не виден в разметке. ### Пример 2: "Сделайте так, чтобы это выглядело менее как ИИ" Ворота указывают, что "AI slop" на этой странице на самом деле представляет собой: градиент героя от фиолетового к синему, градиентный текст заголовка, эмодзи иконки функций, заглавная метка над каждым разделом, системный шрифт в качестве отображаемого голоса и три одинаковые карточки, несущие структуру. Каждое из них — это пункт для исправления, а не вопрос мнения. ## Лучшие практики - ✅ Напишите строку направления перед первой строкой CSS - ✅ Исправьте все ошибки в одной партии, затем повторно запустите ворота - ✅ Откройте оба скриншота сами после последнего изменения - ✅ Сообщите последнюю строку ворот и пути к скриншотам с результатом - ❌ Не считайте страницу завершенной на основе проходящей сборки или взгляда на разметку - ❌ Не позволяйте шрифту по умолчанию, палитре или сетке карточек определять страницу ## Ограничения - Ворота проверяют механику. Они не могут сказать вам, что страница скучная, не соответствует бренду или неправильна для аудитории: шаг 4 не является необязательным. - Необходимы установленные Playwright и безголовый Chromium, а также страница, к которой можно получить доступ (путь к файлу или локальный сервер). - Бриф, который указывает шрифты, цвета или эпоху, переопределяет механику. - Не заменяет аудит доступности человеком или реальное тестирование пользователями. ## Примечания по безопасности и защите - `scripts/gate.py` запускает безголовый Chromium и загружает URL или файл, который вы ему предоставляете. Укажите его на свою страницу или локальный сервер, в локальной или авторизованной тестовой среде; он будет загружать все, что загружает эта страница. - Он является только для чтения в отношении вашего проекта: он отображает, измеряет и записывает скриншоты и находки в директорию `--out`. Он не редактирует исходные файлы. ## Файлы - `scripts/gate.py` - ворота браузера (нужен `playwright` и безголовый Chromium) - `references/direction.md` - полные правила направления для шага 1 - `references/craft-floor.md` - полные правила механики для шага 2, прочитайте их перед первым редактированием пользовательского интерфейса ## Кредиты Адаптировано из [stas4000/tastegate](https://github.com/stas4000/tastegate) (MIT). Правила направления происходят из taste-skill (MIT), а механика из impeccable (Apache-2.0); оба уведомления включены здесь в [references/THIRD_PARTY_NOTICES.md](references/THIRD_PARTY_NOTICES.md) с их полными лицензиями в директории `references/`.Источник на GitHub