taste-design
taste-design — это skill Google Stitch для подготовки семантической дизайн-системы в файле DESIGN.md. Его задача — перевести замысел интерфейса из общих слов в набор правил, который понятен агенту генерации экранов: атмосферу и плотность, палитру с функциональными ролями, типографическую иерархию, поведение компонентов, сетку, адаптивность, движение и список запрещённых приёмов. Такой файл должен выступать единым источником визуальных решений для новых экранов, а не набором случайных подсказок, которые приходится заново придумывать для каждого промпта. В исходном SKILL.md указано, что перед работой нужен доступ к Google Stitch; для программной интеграции можно дополнительно использовать Stitch MCP Server в Cursor, Antigravity или Gemini CLI. Допустимые инструменты самого skill ограничены StitchMCP, Read и Write. Входом остаётся описание проекта и его визуального намерения, поэтому skill не заменяет исследование продукта и не обещает автоматически получить хороший результат без содержательного контекста. Правила строятся вокруг нескольких самостоятельных слоёв. Для атмосферы предлагается оценивать плотность, вариативность композиции и интенсивность движения; базовый пример в источнике задаёт Creativity 9, Variance 8, Motion 6 и Density 5. Для цвета задаются название, hex-код и роль: разрешён максимум один акцент с насыщенностью ниже 80 процентов, запрещаются неоновые градиенты и фиолетово-синие свечения, а чистый чёрный заменяется оттенком charcoal или Zinc-950. Это не требование конкретной палитры Neira, а проверяемое ограничение, которое должно быть адаптировано к проекту. Типографический слой описывает отдельные правила для display, body и mono-текста. В премиальном или творческом контексте Inter предлагается не использовать; для интерфейсных панелей допускаются sans-serif-сочетания, а числа в плотных макетах переводятся в моноширинный стиль. Основной текст должен иметь расслабленный интерлиньяж и ограниченную длину строки. Для hero-блока skill требует одну ясную точку внимания, запрещает накладывать текст и изображения друг на друга, ограничивает основной CTA одним действием и отвергает декоративный filler-текст. Для компонентов описаны состояния кнопок, карточек, полей, загрузки, пустого результата и ошибки. Для layout рекомендуется CSS Grid, контейнер с max-width и отдельные пространственные зоны вместо абсолютного наложения. Ниже 768 пикселей многоколоночная композиция должна переходить в одну колонку, горизонтальный скролл на мобильном считается ошибкой, интерактивные цели должны иметь минимум 44 пикселя, а заголовки — масштабироваться через clamp(). Для движения приведены spring-параметры stiffness 100 и damping 20, каскадное появление списков и правило анимировать transform и opacity, а не top, left, width или height. Финальный DESIGN.md должен содержать тему, палитру, типографику, стили компонентов, layout, motion и явный список anti-patterns. В него входят запреты на эмодзи, неоновые тени, чрезмерную насыщенность, одинаковые трёхколоночные карточки, вымышленные метрики, клише AI-копирайтинга, broken image links и беспорядочное перекрытие элементов. Поэтому taste-design полезен как редакционный и исполнительный контракт для Stitch, но не является визуальным рендерером, тестом доступности или гарантией соответствия конкретного экрана: полученный DESIGN.md всё равно нужно сопоставить с задачей, а итоговый интерфейс — проверить отдельно.
Для чего подходит
- Создание DESIGN.md для Stitch
- Формирование правил цвета и типографики
- Описание responsive и motion-поведения интерфейса
Установка
Сначала прочитайте SKILL.md и scripts в исходном репозитории. Затем выполните команду в каталоге проекта:
npx skills add https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/taste-design