Taste Lab

Taste: Как извлечь ДНК дизайна и передать «вкус» вашему ИИ-агенту

В современной разработке интерфейсов простого копирования стилей недостаточно. Каждый качественный продукт — это результат глубоких размышлений. Проект taste, созданный разработчиком Sen Lin, предлагает революционный подход к пониманию эстетики веб-сайтов. Вместо того чтобы просто собирать технические характеристики, taste анализирует фундаментальную логику, стоящую за каждым пикселем.

Что такое Taste?

Согласно философии проекта, taste (вкус) = решения × компромиссы.

Многие инструменты экстракции данных предоставляют вам просто набор токенов: фоновый цвет #08090A, шрифт Inter, радиус скругления 6px. Но это всего лишь спецификация, а не вкус. Настоящий вкус проявляется в ответах на вопросы «почему»:

• Решение — это обоснование выбора. Почему был выбран именно этот оттенок почти черного, а не чистый черный?
• Компромисс — это понимание обеих сторон выбора. Что было выбрано и от чего намеренно отказались.

Когда обычный ИИ-агент получает только токены, он копирует цифры, не понимая их сути. Taste позволяет агенту понять значение каждого решения. Благодаря этому ИИ может принимать правильные стилистические решения даже на тех страницах, которые он никогда раньше не видел.

Основные возможности Taste

Инструмент taste выполняет абдуктивный вывод для определения дизайнерского вкуса любого веб-сайта. Основная задача сервиса — превратить любой URL в полный контекст дизайна для вашего ИИ-агента.

Основные компоненты системы:

• Design Map: Полный набор токенов страницы.
• Taste DNA: Глубинное обоснование каждого выбора.
• Интеграция: Поддержка популярных инструментов разработки.

Как работает Pipeline: Четыре шага к пониманию дизайна

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

1. Извлечение измерений (Extract Measurements)

На этом этапе работает Senior Design AI. Его задача — извлечь точные, объективные измерения дизайна с веб-страницы. Это фундамент, на котором строится дальнейший анализ.

2. Обнаружение паттернов (Detect Patterns)

Principal Design Engineer анализирует полученные измерения для выявления систематических правил. Здесь хаос цифр превращается в структуру.

3. Вывод вкуса (Infer Taste)

Ultimate Design Critic (Ультимативный дизайн-критик) выводит «Вкус». Он анализирует осознанные и иногда «болезненные» компромиссы, которые пришлось пойти дизайнеру.

4. Наблюдение и фильтрация (Observer)

Lead Critic & Final Editor (Ведущий критик и главный редактор) выполняет роль цензора. Его работа — безжалостно фильтровать анализ, удаляя лишнюю информацию («bullshit»). Только чистая эссенция дизайна попадает в финальный вывод.

Структура выходных данных: Design Map и Taste DNA

Результатом работы taste являются два файла: .md и .json. Они содержат краткую, но исчерпывающую информацию.

Часть 1: Design Map (Карта дизайна)

Это полная спецификация элементов страницы:

• Цветовая система: Основной фон (например, #08090A), поверхности (Surface-1, Surface-2), основной и вторичный текст (например, #F7F8F8 и #D0D6E0), границы панелей.
• Типографика: Заголовки (H1, H2, H3), основной текст, используемые шрифты (например, Inter Variable) с указанием веса, трекинга и высоты строк.
• Отступы (Spacing): Базовые единицы, паддинги секций, межсекционные разрывы.
• Радиус скругления (Border Radius): От микро-элементов (2px) до кнопок-пилюль (9999px).
• Глубина и тени: Внутренние границы карточек, тени для плавающих элементов, виньетки.

Часть 2: Taste DNA (ДНК вкуса)

Это 4 ключевых принципа, каждый из которых объясняет логику конкретного решения. Каждый принцип в Taste DNA включает:

• Trigger (Триггер): Какое дизайнерское решение вызвало этот выбор.
• Decision (Решение): Что именно было выбрано.
• Reason (Причина): Логика дизайна, стоящая за этим.
• Evidence (Доказательство): Конкретные данные со страницы (px, hex, значения DOM).
• Trade-off (Компромисс): От чего пришлось отказаться ради этого выбора. Важно: как минимум один принцип должен описывать ограничение (Restraint).

Кейсы использования (Use Case)

Инструмент taste незаменим в следующих сценариях:

1. Реверс-инжиниринг дизайна: Быстрое понимание того, как устроены топовые продукты (например, Linear, Stripe, Anthropic).
2. Обучение ИИ-агентов: Предоставление ИИ-помощнику точного контекста для написания кода, соответствующего стилистике проекта.
3. Поддержание консистентности: Использование извлеченных правил для создания новых страниц в едином стиле.
4. Анализ конкурентов: Глубокое понимание визуальной стратегии других продуктов.

Совместимость с инструментами

Taste работает с вашим стеком технологий без сложной настройки. После запуска файл автоматически подхватывается вашим ИИ-инструментом:

• Cursor: .cursor/rules/{domain}-taste.mdc
• Windsurf: .windsurf/rules/{domain}-taste.md
• Claude Code: Добавляет раздел Design Taste в CLAUDE.md
• GitHub Copilot: .github/copilot-instructions.md
• Bolt: .bolt/prompt
• v0 by Vercel: Создает taste-tokens.css и инструкции.
• Lovable: Генерирует текст для вставки в Project Knowledge.

Как использовать Taste

Процесс запуска включает три простых шага:

1. Клонирование репозитория: git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

2. Установка Playwright MCP (загрузка Chromium): claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

3. Запуск анализа для любого URL: Введите команду в Claude Code или Gemini CLI: /taste https://linear.app

FAQ

В: Чем taste отличается от обычного инспектора элементов? О: Обычный инспектор дает только голые цифры. Taste использует ИИ для интерпретации этих цифр, выявляя систему правил и логические обоснования (компромиссы), которые делают дизайн уникальным.

В: Какие файлы я получу на выходе? О: Вы получите два файла: {domain}.md для чтения человеком и ИИ и {domain}.json для программной обработки.

В: Нужно ли мне вручную копировать данные в Cursor? О: Нет, taste форматирует вывод таким образом, что Cursor и другие инструменты подхватывают правила автоматически при следующем запуске.

В: Кто является создателем проекта? О: Проект разработан Sen Lin как инструмент для глубокого анализа дизайн-систем.

В: Какие именно измерения фиксирует инструмент? О: Инструмент анализирует более 20 категорий измерений, включая цвета, веса шрифтов, значения отступов, радиусы и параметры теней без аппроксимаций.