pimenov.ai

База знаний

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

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

Опубликовано
FrontendИИ-агентыМетодология
СейчасСпособ 1. Использовать дизайн‑скилл
  1. Способ 1. Использовать дизайн‑скилл
  2. Способ 2. Спроектировать самому вместе с ИИ
  3. Начните со смысла
  4. Собирайте референсы
  5. Продумайте структуру
  6. Стройте по компонентам
  7. Генерируйте собственные ассеты
  8. Рабочий процесс
  9. Способ 3. Доска вдохновения
  10. Три подхода
  11. Дополнительные инструменты
  12. Напоследок
ℹ️
Об источнике. Это перевод текста Лекса (@lexnlin) — автора дизайн-скилла TasteSkill. У нас есть подробный разбор его набора скиллов: Taste Skill — anti-slop набор скиллов для ИИ-агентов.

Оригинал в X (Twitter): x.com/lexnlin/status/2076422557180608888.

Дизайн всегда был одной из областей, где ИИ с трудом дотягивает до уровня человека. Но большинство до сих пор неправильно понимают, что вообще значит «проектировать с ИИ». Это не значит поручить ему всё за вас. Идея, направление, ощущение и творчество по‑прежнему должны исходить от вас.

ИИ нужен, чтобы помочь вам с исполнением.

Если совсем коротко, процесс такой:

  • Вы придумываете идею.
  • Вы собираете референсы.
  • Вы превращаете свои мысли в промпты и с помощью ИИ воплощаете их.

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

Но он не понимает вкуса. Он не знает, что выглядит оригинально, осмысленно и по‑настоящему хорошо.

Вот в чём разрыв.

Настоящий вкус ИИ пока не передать, но это ограничение можно обойти.

Способ 1. Использовать дизайн‑скилл

Самый быстрый путь. Если времени мало или задача небольшая, положитесь на готовые дизайн‑скиллы.

Например:

Скоро выйдет и TasteSkill второй версии — сначала отдельная под GPT 5.6. :)

Процесс простой:

  • Подключаете дизайн‑скилл.
  • Даёте ИИ контекст.
  • Несколько раз промптите, чтобы получить сайт, приложение или постер.
  • Правите очевидные огрехи.
  • Публикуете.

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

Способ 2. Спроектировать самому вместе с ИИ

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

Вы можете делать:

  • Мобильное приложение
  • Десктопное приложение
  • Сайт
  • Лендинг
  • Дашборд
  • Постер

Что бы это ни было, сначала нужно чёткое направление. Если вы сами не знаете, что строите, ИИ за вас этого не поймёт.

Начните со смысла

Прежде всего задайте фундамент.

Спросите себя:

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

Интерфейс должен отражать смысл продукта. Запишите это. Здесь тоже можно подключить ИИ — но не для дизайна. Пусть он задаёт вам вопросы.

Например:

  • О чём продукт?
  • Кто аудитория?
  • Какое ощущение он должен передавать?
  • Каким должен быть характер бренда?
  • Какие цвета и шрифты подходят?
  • Каким он должен быть: минималистичным, игривым, премиальным, техничным или экспериментальным?

Собирайте референсы

Когда направление есть, начинайте собирать примеры. Сильный источник — Mobbin.

Там реальные экраны продуктов из множества категорий. Не смотрите на дизайн просто с мыслью «выглядит хорошо».

Спросите себя — почему.

  • Дело в раскладке?
  • В отступах?
  • В типографике?
  • В структуре?
  • Во взаимодействии?

Сохраняйте всё полезное.

Раскладывайте по папкам, например:

  • Навигация
  • Первые экраны
  • Тарифы
  • Карточки
  • Мобильные экраны
  • Дашборды
  • Анимации
  • Типографика

Со временем соберёте собственную библиотеку референсов. Так и вырабатывается «вкус».

Другие полезные источники:

И ещё: не копируйте дизайн целиком. Соединяйте идеи в то, что подходит именно вашему продукту.

Продумайте структуру

Теперь определите, что именно нужно построить.

Для сайта:

  • Навигация
  • Первый экран
  • Возможности
  • Тарифы
  • Отзывы
  • Призыв к действию
  • Футер

Для приложений:

  • Онбординг
  • Главная
  • Поиск
  • Профиль
  • Настройки
  • Основные сценарии
  • Пустые состояния

У каждого блока должно быть понятное наполнение. Например, первому экрану нужны:

  • Заголовок
  • Описание
  • Призыв к действию
  • Визуал

ИИ поможет с текстами, но ясность по‑прежнему за вами.

Стройте по компонентам

Теперь начинается сборка. Берите отдельные идеи из своих референсов и адаптируйте их.

Вместо «Сделай мне сайт целиком» говорите: «Сделай первый экран в этом стиле, адаптированный под мой бренд».

Работайте пошагово:

  • Навигация
  • Первый экран
  • Карточки
  • Кнопки
  • Типографика
  • Детали

С небольшими задачами ИИ справляется гораздо лучше. И вы сохраняете контроль.

Генерируйте собственные ассеты

Когда нужно, используйте генерацию изображений. Инструменты вроде GPT Images 2.0 или Seedream 5.0 уже достаточно сильны.

Давайте чёткий контекст:

  • Цвета
  • Стиль
  • Композицию
  • Сценарий использования

Избегайте безликих стоковых картинок. Собственные визуалы делают всё цельнее.

Рабочий процесс

Полная последовательность:

  • Определите идею
  • Проясните цель и аудиторию
  • Задайте направление бренда
  • Соберите референсы
  • Разложите их по порядку
  • Продумайте структуру
  • Соберите компоненты
  • Сгенерируйте ассеты
  • Добавьте взаимодействия
  • Всё отполируйте

Так результат получается куда лучше, чем от одного промпта.

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

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

Соберите скриншоты из:

  • Mobbin
  • Awwwards
  • Webflow
  • Craftwork
  • Rebrand Gallery
  • Component Gallery
  • Savee
  • Cosmos
  • Pinterest

Затем скажите ИИ:

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

Сначала всё равно дайте полный контекст. Пусть ИИ задаст вопросы. И только потом генерируйте.

Это быстрее, чем собирать всё вручную, но всё равно намного лучше безликого промпта.

Три подхода

  1. Дизайн‑скиллы — быстро, результат достойный.
  2. По компонентам — медленно, но качество максимальное.
  3. Доска вдохновения — сбалансированный вариант.

Дополнительные инструменты

Генерация SVG. Используйте Quiver для создания SVG. С ними проще делать анимации, потому что элементы разделены.

Видео. Используйте инструменты вроде Google Flow. Видео усиливает:

  • Первые экраны
  • Фоны
  • Демо продукта

Библиотеки изображений. При необходимости используйте площадки вроде Lummi. Только следите, чтобы картинки соответствовали вашему бренду.

Слои. Используйте удаление фона и наложение слоёв, чтобы добавить:

  • Глубину
  • Движение
  • Взаимодействие

Мелкие детали действительно многое меняют.

Напоследок

ИИ не должен заменять ваше мышление.

Вы по‑прежнему решаете:

  • Что строить
  • Почему это важно
  • Для кого это
  • Каким это должно ощущаться

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

По теме

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

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

Если хотите разобрать свою задачу — напишите мне

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

Напишите мне в Телеграм Мой Телеграм канал

Обычно хватает 2–3 сообщений, чтобы понять, могу ли я здесь реально помочь и в каком формате лучше двигаться дальше.