Как заставить AI создавать красивый UI: Tastemaker

Вы замечали, что сайты, созданные AI-инструментами, выглядят одинаково? Тот же индиго-градиент, те же скруглённые карточки с мягкой тенью. Это не случайность: модель усредняет дизайн из обучающих данных. Но есть способ это исправить — зафиксировать дизайн-систему до того, как AI напишет хоть строчку UI-кода. Знакомьтесь: Tastemaker.

Проблема: однообразный UI от AI

Когда вы просите AI создать интерфейс, он по умолчанию выдаёт то, что встречается чаще всего в интернете: Tailwind-шаблон с индиго-градиентом и шрифтом Inter. Это не вина модели — она просто выполняет свою работу. Но если не задать направление дизайна, результат будет усреднённым и скучным.

Решение: Tastemaker — скилл для Claude Code

Tastemaker — это скилл для Claude Code, который также работает с Cursor, Windsurf и Codex. Его идея проста: заблокировать дизайн-систему до того, как AI напишет первую строку UI. Скилл бесплатный и открытый (MIT-лицензия).

Как это работает

Скилл — это папка с инструкциями, которые AI читает перед началом работы. Tastemaker заставляет модель сначала принять дизайн-решения, а не импровизировать на ходу. Вот что фиксируется до написания кода:

• Палитра: 5 пресетов, каждый под настроение. Не случайные hex-коды, а проверенные сочетания.
• Шрифты: 24 подобранные пары Google Fonts (дисплейный + основной).
• Иллюстрации: готовые векторные изображения, перекрашенные под вашу палитру.
• Логотип: геометрическая метка + полный набор фавиконов.
• Анимация: GSAP и ScrollTrigger по умолчанию.

Моя ошибка: как я провалил контрастность

Я выбрал 5 пресетов палитры на глаз. Они выглядели хорошо. Но затем я написал небольшой Python-скрипт, чтобы проверить каждую комбинацию текста на фоне на соответствие WCAG-контрастности. Первый запуск провалил 2 из 5 пресетов. Мои глаза ошиблись в 40% случаев. Математика оказалась права. Я исправил цвета и перезапустил проверку — теперь все 5 пресетов проходят тест.

Этот случай — ключевой аргумент проекта: вкус субъективен, пока вы не запишете его и не протестируете. Записанный вкус можно проверить, исправить и использовать снова.

Установка Tastemaker

Одна команда, затем перезапустите Claude Code:

git clone https://github.com/codeswithroh/tastemaker ~/.claude/skills/tastemaker

Никаких API-ключей, конфигов или аккаунтов. После перезапуска начинайте UI-проект, и дизайн-система будет зафиксирована до того, как AI начнёт гадать.

Что я узнал

1. Ограничения улучшают AI-вывод. Фиксация палитры и шрифтов не ограничивает, а освобождает модель от дизайнерских колебаний.
2. Умолчание — это выбор. Каждый раз, пропуская обсуждение дизайна, вы выбираете усреднённый результат.
3. Скрипты побеждают глазомер. Мой вкус подвёл в 40% случаев. Теперь я сначала пишу проверку, а потом выбираю цвета.
4. Дизайн-долг начинается с первой строки. Решение на старте дешевле, чем исправление в конце.

Практический вывод

Попробуйте Tastemaker прямо сейчас: установите скилл, создайте новый UI-проект и сравните результат с тем, что AI генерирует без дизайн-системы. Вы увидите разницу. Если что-то сломается — оставьте обратную связь на GitHub. А если проект сэкономит вам время, поставьте звезду репозиторию.