ℹ️
Об источнике. Это перевод и редакционная адаптация текста Лекса (@lexnlin), автора дизайн-скилла TasteSkill. Подробный разбор набора: Taste Skill — anti-slop набор скиллов для ИИ-агентов. Оригинал: x.com/lexnlin/status/2076422557180608888.

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

Оглавление

  1. Как устроен процесс
  2. Чеклист быстрой проверки
  3. Три подхода к работе
  4. Как задать направление
  5. Как собирать референсы
  6. Как спроектировать структуру
  7. Как собирать дизайн по компонентам
  8. Как создавать собственные визуалы
  9. Шаблон задания для ИИ
  10. Итоговый процесс

Как устроен процесс

Целевой рабочий процесс выглядит так:

  1. Определить задачу продукта и аудиторию.
  2. Сформулировать желаемое ощущение и характер бренда.
  3. Собрать и разобрать референсы.
  4. Спроектировать экраны, разделы и пользовательские сценарии.
  5. Передавать ИИ небольшие, проверяемые задачи.
  6. Создать недостающие изображения и другие ассеты.
  7. Проверить состояния, взаимодействия и адаптивность.
  8. Собрать целостный вариант и отполировать детали.

ИИ может учитывать распространённые правила композиции, отступов, типографики, цвета и визуальной иерархии. Выбор уместного направления и оценка оригинальности остаются за человеком. Чем точнее исходное решение, тем легче оценить результат и направить следующие итерации.

Чеклист быстрой проверки

Перед сборкой макета проверьте:

Понятно, для кого создаётся продукт.
Сформулирована основная задача пользователя.
Определено желаемое ощущение от интерфейса.
Выбран характер бренда.
Собраны референсы для ключевых экранов и компонентов.
Для каждого референса понятно, чем именно он полезен.
Определены структура продукта и основные сценарии.
У каждого экрана или раздела есть конкретная цель.
Работа разбита на небольшие компоненты.
ИИ получает контекст продукта, а не только описание стиля.
Результат проверяется на разных размерах экрана.
Финальный дизайн не копирует один референс целиком.

Если на несколько пунктов нельзя ответить уверенно, генерацию лучше отложить и сначала уточнить постановку задачи.

Три подхода к работе

1. Готовый дизайн-скилл

Подходит для небольшой задачи или быстрого прототипа. Можно использовать:

Рабочая последовательность:

  1. Подключите скилл.
  2. Передайте контекст продукта и ограничения.
  3. Попросите собрать первый вариант.
  4. Проверьте структуру, типографику и состояния.
  5. Исправьте заметные огрехи и повторите проверку.

Такой подход ускоряет старт и помогает избежать распространённых ошибок, хотя результат может сохранять узнаваемые шаблоны генеративного дизайна.

2. Проектирование по компонентам

Этот вариант даёт больше контроля над отдельными решениями. Сначала вы определяете структуру и направление, затем отдельно собираете навигацию, первый экран, карточки, формы, таблицы и остальные элементы.

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

3. Доска вдохновения

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

Перед генерацией укажите:

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

Как задать направление

Сначала зафиксируйте фундамент проекта:

  • Для кого он создаётся?
  • Какую задачу решает?
  • Что пользователь должен сделать в первую очередь?
  • Каким должен ощущаться продукт?
  • Что должен выражать бренд?

ИИ можно использовать как интервьюера. Попросите его последовательно уточнить аудиторию, характер бренда, ограничения, контент и основные сценарии. Ответы сохраните в одном коротком брифе.

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

Как собирать референсы

Для интерфейсных референсов можно начать с Mobbin. Для сайтов и визуального направления пригодятся Pinterest, Cosmos, Awwwards, шаблоны Webflow, Craftwork, Rebrand Gallery, Component Gallery, Savee и Lummi.

На странице Craftwork, проверенной 6 сентября 2026 года, представлены UI-наборы, шаблоны для Figma, Webflow и Framer, иллюстрации, шрифты, макеты устройств и другие визуальные ресурсы. В официальной инструкции Webflow, обновлённой 18 марта 2025 года, указано, что шаблон можно предварительно открыть в Designer и изучить через панели Pages и Navigator. Шаблоны добавляются как отдельный сайт и могут требовать адаптации под проект. Платный шаблон распространяется по лицензии на один сайт, поэтому перед применением проверьте условия конкретного продукта.

Сохраняйте референсы по назначению:

  • навигация;
  • первые экраны;
  • тарифы;
  • карточки;
  • мобильные экраны;
  • панели управления;
  • анимации;
  • типографика.

Каждый пример разбирайте на решения: сетку, интервалы, типографику, структуру контента и взаимодействия. Полезный референс отвечает на конкретный вопрос проекта. Несколько идей можно соединить, но копировать один дизайн целиком не следует.

Как спроектировать структуру

Для сайта заранее определите состав разделов. Например:

  • навигация;
  • первый экран;
  • возможности;
  • тарифы;
  • отзывы;
  • призыв к действию;
  • подвал сайта.

Для приложения могут понадобиться:

  • вход и онбординг;
  • главный экран;
  • поиск;
  • профиль;
  • настройки;
  • основные пользовательские сценарии;
  • пустые состояния;
  • ошибки и подтверждения.

У каждого блока должна быть своя задача. Первому экрану обычно нужны заголовок, краткое объяснение пользы, главное действие и визуальный акцент. ИИ поможет предложить варианты текста, но смысл и приоритеты необходимо задать заранее.

Как собирать дизайн по компонентам

Широкая задача вроде «сделай сайт целиком» оставляет модели слишком много решений. Разделите работу на этапы:

  1. Навигация и общая сетка.
  2. Первый экран.
  3. Основные контентные блоки.
  4. Карточки, таблицы и формы.
  5. Кнопки и состояния элементов.
  6. Типографика и цветовые роли.
  7. Адаптивные версии.
  8. Анимации и микровзаимодействия.

После каждого этапа проверяйте результат и только затем переходите дальше. Так проще сохранять выбранное направление и исправлять локальные проблемы.

Как создавать собственные визуалы

Генераторы изображений помогают создавать иллюстрации, фоны и элементы композиции под конкретный бренд. В запросе задавайте стиль, палитру, композицию, формат и место использования.

В публикации команды ByteDance Seed от 8 июля 2026 года сообщается о запуске Seedream 5.0 Pro. Производитель заявляет, что модель умеет работать со сложной визуализацией информации, локальным редактированием, несколькими изображениями и разделением изображения на независимые слои. В той же публикации отмечено, что более детальная отрисовка текста и стабильность редактирования на уровне пикселей ещё требуют улучшения. Эти ограничения учитывайте при подготовке интерфейсной графики и материалов с надписями. Анонс Seedream 5.0 Pro.

Если нужны SVG, выбирайте инструмент, который сохраняет элементы раздельно. Это упрощает последующую анимацию. Видео уместно в первом экране, фоне или демонстрации продукта, когда движение помогает объяснить сценарий. Удаление фона и раздельные слои могут помочь управлять глубиной и композицией.

Любой сгенерированный ассет проверяйте на соответствие бренду, читаемость, артефакты и права использования. У изображения должна быть конкретная интерфейсная задача.

Шаблон задания для ИИ

Используйте этот шаблон для отдельного экрана или компонента:

Продукт: [что это и какую задачу решает]
Аудитория: [кто будет пользоваться]
Сценарий: [что пользователь должен сделать]
Компонент: [что нужно спроектировать]
Содержание: [обязательные тексты, данные и действия]
Характер: [каким должен ощущаться интерфейс]
Референсы: [ссылки или изображения и полезные элементы каждого]
Ограничения: [платформа, сетка, цвета, шрифты, адаптивность]
Состояния: [обычное, наведение, загрузка, ошибка, пустой результат]
Критерии проверки: [по каким признакам результат можно принять]

Сначала задайте уточняющие вопросы по недостающим данным. Затем предложите структуру и объясните ключевые решения. Не копируйте референсы буквально.

Этот шаблон можно сохранить как постоянный бриф команды и дополнять правилами дизайн-системы.

Итоговый процесс

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

ИИ ускоряет исполнение, а направление и критерии качества задаёт человек. Развитая библиотека референсов и регулярный разбор чужих решений со временем дают больше пользы, чем поиск одного универсального промпта.

Следующий шаг

Taste Skill — anti-slop набор скиллов для ИИ-агентов

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

Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov