← Все статьи Lenny’s Newsletter
Anshu Chimala · 1 сентября 2026 · Lenny’s Newsletter
Оригинал статьи · Полный перевод.
Полный процесс работы, который поможет раскрыть скрытый творческий потенциал ИИ
Все 25 иллюстраций — из оригинальной статьи, включая 12 анимаций.
👋 Привет, это Lenny. Каждую неделю я делюсь советами о продуктах, росте и карьере, основанными на тщательном изучении темы. Больше материалов: вакансии Lenny | подкаст Lenny | Lennybot | How I AI | Become an AI-Native Builder и другие мои любимые курсы по ИИ и продакт-менеджменту.
P.S. Получи целый бесплатный год Cursor, Notion, Replit, Lovable, Wispr Flow, Linear, ElevenLabs, Factory, PostHog, Granola, Brain.fm, Waking Up и других сервисов, став подписчиком Insider (пока бонусы доступны). Узнать больше.
Я всегда считал, что ИИ плохо справляется с дизайном. Но, прочитав этот потрясающий пост Anshu Chimala, понял, что просто делал всё неправильно. Anshu 12 лет руководил командами разработки ПО и дизайна в Apple, сосредоточившись на исследованиях и прототипировании будущих ИИ-продуктов. Он регулярно публикует в X уроки и демо по дизайну (это один из моих любимых авторов, за которыми я слежу). Чтобы глубже погрузиться в создание самобытных интерфейсов с ИИ, загляни в его Substack и свяжись с ним в LinkedIn.
Приступим.
Диалоговый трекер калорий, созданный за три промпта с помощью Claude Fable 5:
Игра об исследовании космоса, созданная за два промпта с помощью Claude Opus 5:
Динамический лендинг, созданный за три промпта с помощью Claude Opus 5 + GPT-5.6 Sol:
Я часто публикую в X подобные демо дизайна с ИИ. Каждый раз кто-нибудь неизбежно спрашивает: «Почему модель создаёт для тебя всю эту невероятную красоту, а когда я пробую, получается один сплошной шаблонный слоп? Как будто ты используешь совершенно другую модель».
Я не использую другую модель, но умею получать больше от тех моделей, с которыми работаю. Большинство людей видят лишь 1% творческого потенциала ИИ. Я хочу показать, как добраться до остальных 99%.
ИИ-модели способны на невероятную креативность, но то, как они обучены, эту креативность подавляет. Большие языковые модели — это предсказатели следующего токена: на каждом шаге они смотрят на последовательность текста и предсказывают, что будет дальше, опираясь на миллионы примеров. Затем люди могут оценить результаты, а эти оценки передаются обратно в модель. Так модель учится принимать последовательные, безопасные решения, которые соответствуют предпочтениям всех.
Это делает типичные LLM отличными для большинства задач, но плохими дизайнерами. Чтобы создать дизайн, LLM приходится собирать его токен за токеном. Каждый раз, когда нужно принять дизайнерское решение — какие цвета выбрать или как расположить элементы, — модель подставляет токены, которые, по её мнению, с наибольшей вероятностью понравятся всем. В результате дизайн обычно получается повторяющимся и пресным. Будто дизайн разрабатывал комитет.
Хороший дизайн, напротив, начинается с чувства и стремится вызвать эмоциональный отклик. Он нарушает правила и радует пользователей запоминающимися, неожиданными решениями. Хороший дизайн — ровно противоположность тому, что LLM делает естественным образом: на каждом шаге выбирает самый предсказуемый вариант.
Однако если удастся заставить модель выйти за пределы самых предсказуемых решений, перед нами откроется огромный ландшафт творческих идей, который большинство упускает.
«Beyond the Frame» — «За пределами рамки»; «A visual exploration of color and form» — «Визуальное исследование цвета и формы»; «DESIGN IS THINKING MADE VISUAL» — «ДИЗАЙН — ЭТО МЫШЛЕНИЕ, СТАВШЕЕ ВИЗУАЛЬНЫМ»; «/audio escape» — «/аудио-эскапизм»; «Curated experiences that move you and inspire.» — «Подобранные впечатления, которые трогают и вдохновляют»; «Re. imagine every thing.» — «Переосмысли всё»; «Type that moves» — «Типографика, которая движется»; «A kinetic typography experience.» — «Опыт кинетической типографики»; «NEW PROJECT →» — «НОВЫЙ ПРОЕКТ →»; «Form meets function.» — «Форма встречается с функцией»; «SHOP COLLECTION →» — «СМОТРЕТЬ КОЛЛЕКЦИЮ →»; «Stories worth telling.» — «Истории, которые стоит рассказать»; «Photography that speaks without words.» — «Фотография, которая говорит без слов»; «EXPLORE SERIES →» — «ИССЛЕДОВАТЬ СЕРИЮ →»; «Analog in a digital world.» — «Аналоговое в цифровом мире»; «ISSUE NO. 29 →» — «ВЫПУСК № 29 →»; в центральной панели: «Name» — «Имя», «Status» — «Статус», «Date» — «Дата», «Active» — «Активен», «Pending» — «Ожидание»; внизу: «AI slop» — «ИИ-слоп».
Это урок, который я усвоил, руководя дизайнерами-людьми, ещё до того, как начал руководить ИИ-дизайнерами. Большую часть своей карьеры в Apple я возглавлял команду R&D, которая проектировала исследовательские ИИ-продукты будущего. Поначалу наши предвзятые представления о том, как должны работать пользовательские интерфейсы, ограничивали нашу креативность и снова и снова возвращали нас к одним и тем же старым идеям. Благодаря дисциплине и новым процессам мы научились не воссоздавать привычное, а смотреть на окраины возможного, чтобы создавать новое. Мы стали экспертами в том, как доводить мелкие детали до уровня качества Apple.
С тех пор я применяю тот же процесс к работе с ИИ. За последние пару лет ИИ-агенты стали чрезвычайно способными. Они могут за часы сделать то, на что раньше моей команде требовались недели. А при правильном руководстве создают дизайны, совершенно не похожие ни на что другое.
Вдохновившись процессом Double Diamond лишь в общих чертах, я переосмыслил дизайн-процесс для команды ИИ-агентов вместо дизайнеров-людей:
Поиск: выходи за пределы заурядного слопа, исследуя разные направления и создавая смелые, амбициозные дизайн-брифы.
Выбор: придай дизайну индивидуальность, выводя ИИ за пределы привычных паттернов и объединяя модели в цепочку, чтобы полностью раскрыть потенциал дизайна.
Доводка: получи впечатляющий результат, убрав небрежности и сосредоточившись на ключевых элементах.
Следуя этим этапам и применяя описанные в каждом из них техники, ты сможешь создавать невероятный дизайн удивительно быстро — и заставлять людей спрашивать: «Почему ИИ создаёт для тебя магию, а для меня — нет?»
Самая трудная часть дизайн-процесса — смотреть на пустой экран с бесконечным числом возможностей. Лучший способ справиться с этим моментом — сначала охватить широкий круг идей, а уже потом идти вглубь. ИИ отлично подходит для исследования множества возможных направлений.
Но мы знаем, что модели склонны слишком полагаться на знакомые паттерны и делать консервативный выбор. Чтобы исследовать всё пространство возможных дизайн-решений, нужно подтолкнуть модель сделать противоположное: быть смелой, разнообразной и рисковать. Ниже — два способа вывести её из зоны комфорта.
Идея в том, чтобы заставить модель найти новый источник вдохновения для дизайна, а не полагаться на привычные шаблоны, усвоенные во время обучения. Если ты уже пробовал просить модель спроектировать сайт или приложение, то, вероятно, видел, как выглядит этот вариант по умолчанию.
Для простого примера я дал четырём запускам Claude Code один и тот же промпт:
Промпт:
Создай лендинг для моего приложения для продуктивности.
Claude Opus 5:
Почти каждый раз мы получаем фиолетоватый градиент, текст слева, графику справа и ровно ту же структуру. Так выглядит любой сайт, спроектированный ИИ.
Мы не просили модель сделать что-то уникальное или разнообразное, поэтому логично, что она снова и снова скатывается к знакомым паттернам. Но простая просьба о разнообразии не помогает:
Промпт:
Создай лендинг для моего приложения для продуктивности. Сделай его совершенно уникальным. Принимай каждое дизайнерское решение полностью случайным образом.
Claude Opus 5:
Результаты отличаются от предыдущих, но всё ещё не разнообразны. Модель всегда использует одну и ту же цветовую схему, структуру и даже те же неловкие метафоры с керамикой. Она предсказывает токены, которые звучат случайно, но на самом деле случайными не являются.
Проблема в том, что модель не умеет действовать случайным образом сама по себе. Она может лишь предсказывать наиболее вероятный токен. Если нам нужно разнообразие, его приходится приносить извне. Один из способов — метод String Seed of Thought, опубликованный Sakana AI. Мы просим ИИ сгенерировать случайную строку и используем её как источник вдохновения для дизайна. Так модель действительно принимает разные решения при каждом запуске.
Промпт:
Я хочу, чтобы ты создал для меня лендинг приложения для продуктивности.
Следуй этой процедуре:
Сгенерируй длинную случайную буквенно-цифровую строку с помощью shell-скрипта.
Определи креативное направление (цветовую схему, макет, типографику и т. д.) на основе этой строки. Ищи скрытые паттерны, особые числа — всё, что тебя вдохновляет.
По своему усмотрению воплоти это направление в жизнь и сделай результат красивым.
Не показывай строку в дизайне. Она нужна только для вдохновения.
Claude Opus 5:
Внезапно результаты стали намного разнообразнее! Мы видим разные цветовые схемы, шрифты и новые идеи. Предыдущие дизайны мог получить любой пользователь Claude. Эти дизайны уникальны: ни один запуск не даёт тот же результат.
Ещё один способ сильно подтолкнуть модель — сделать промпты конкретнее и смелее. Так у модели появляется ясное видение, на которое она может опереться, вместо того чтобы придумывать решения на ходу. Лучший способ найти уникальную идею — привнести в уравнение собственный вкус. Сначала представь источник вдохновения — видеоигру, тренд в дизайне интерьеров, арт-инсталляцию, — а затем опиши, как именно этот источник должен повлиять на результат ИИ. Вот несколько примеров:
Создай лендинг для моего приложения для продуктивности в смелой стилистике пиксель-арта с потрясающей графикой. Каждый раздел должен ощущаться как кадр из видеоигры, но при этом каким-то образом оставаться полноценным лендингом.
Создай лендинг для моего приложения для продуктивности, действие которого происходит в изометрическом живом 3D-городе, где разные функции каким-то образом представлены районами или зданиями.
Создай лендинг для моего приложения для продуктивности с радикально асимметричной компоновкой, диссонирующими цветами и типографикой и неуютным негативным пространством. Нарушь все правила, но всё равно сделай его красивым.
Конечно, самое трудное — придумать оригинальные идеи для промптов. Здесь тоже может помочь ИИ, но если просто попросить его предложить идеи, ты получишь тот же набор средних идей, что и все остальные. Вот система, которой я пользуюсь, чтобы находить с помощью ИИ уникальные идеи для промптов:
Я хочу придумать смелый, уникальный язык дизайна для своего продукта. Можешь перечислить как можно больше идей, дав короткие, общие описания? Действуй широко, не углубляйся.
Перевод текста на иллюстрации: ИИ: «Brutalist Utility» — «Брутальная утилитарность» — огромный шрифт, жёсткие границы, сырые сетки, почти никакого декора; «Industrial Control Panel» — «Промышленная панель управления» — переключатели, ярлыки, предупреждающие полосы, винты, машинная типографика; «Gel Interface» — «Гелевый интерфейс» — полупрозрачные пузыри деформируются и сливаются вокруг контента; «Cardboard Prototype» — «Картонный прототип» — намеренно сделанные вручную цифровые объекты, склеенные лентой; «Comic Book UI» — «Интерфейс комикса» — панели, выноски, линии движения, звуковые эффекты; «…».
Промышленная панель управления:
Я представляю себе что-то тактильное. Щёлкающие, приятные кнопки, хорошие звуки.
Сначала я представлял себе что-то мультяшное или скевоморфное, но это кажется мне безвкусным. Избегай этого.
Вместо этого хочу единые компоненты и небольшие штрихи, которые создают этот образ, не перегибая палку.
Серые градиенты выглядели бы скучно. Нужно больше текстуры. Может, добавим немного цвета, сохранив ощущение панели управления?
Можешь точнее проработать этот вариант с учётом моих вкусов?
Перевод текста на иллюстрации: ИИ: «Да — тактильный, инженерно спроектированный интерфейс, вдохновлённый профессиональным оборудованием высокого класса, без чрезмерного скевоморфизма и ретро-стилистики». «Материалы: сдержанные поверхности с порошковым покрытием, анодированием, формованием или мелкой зернистой фактурой — не безликие серые градиенты». «…».
Можешь написать короткий промпт, который ИИ-агент сможет использовать для создания первой POC-страницы в этом направлении?
Перевод текста на иллюстрации: ИИ: «Создай одностраничный POC, демонстрирующий язык дизайна панели управления “Precision Industrial”. Страница должна восприниматься как управление прекрасно спроектированным профессиональным оборудованием, а не как ретро-, мультяшная или чрезмерно скевоморфная панель управления». «Используй:» «Тонко текстурированные, тактильные поверхности, вдохновлённые металлом с порошковым покрытием и формованными деталями». «…».
Если просто вставлять сгенерированные ИИ идеи обратно в ИИ, трудно получить что-то уникальное. В конце концов, любой другой мог бы сделать то же самое. Однако когда ты активно направляешь дизайн, получаешь результат, который мог создать только ты.
Не бойся пробовать идеи, которые звучат ужасно. Если ловишь себя на мысли: «Это ни за что не сработает», — значит, ты на правильном пути. Часто твой агент удивит тебя, и ты поймёшь, что недооценивал его. Если нет, просто выбрось эти результаты и попробуй что-нибудь другое. Но сохраняй промпты, которые не сработали, и тестируй их снова, когда выйдут новые модели. Так ты будешь знать, что используешь все возможности новейших моделей.
До этого мы разбирались, как исследовать широкий набор идей и в итоге найти многообещающий первый дизайн. Но как бы мы ни формулировали промпт, наши первые дизайны, созданные ИИ, обычно всё равно выглядят шаблонно.
Например, посмотри на дизайны, которые мы получили с помощью строк-затравок:
У них есть потенциал, но они по-прежнему сильно опираются на одни и те же затёртые паттерны: текст слева, под ним кнопка CTA, сверху навигационная панель, справа графика.
Теперь наша цель — придать каждому дизайну индивидуальность с помощью отличающихся друг от друга дизайнерских решений. Ниже — мои любимые приёмы для этого.
Чтобы улучшать дизайн, нам нужно дорабатывать его шаг за шагом. Но просто попросить агента посмотреть на дизайн и улучшить его не сработает: агент необъективен. Он смотрит на собственный код, прежние решения и свои же аргументы в их пользу. ИИ трудно отстраниться, увидеть общую картину и «думать иначе».
Чтобы решить эту проблему, не позволяй агенту, который пишет код, самому решать, когда дизайн уже достаточно хорош. Пусть он попросит другого агента — «критика дизайна». Задача критика — посмотреть на скриншоты текущего дизайна и дать обратную связь. Ему неважно, как реализован текущий дизайн и сколько усилий в него вложено; важно только, достигает ли он нужного уровня качества.
У этого подхода есть дополнительное преимущество: для критика можно использовать большую дорогую модель, не разоряясь, потому что мы будем обращаться к ней только для принятия ключевых решений. Дешёвая быстрая модель выполнит основную механическую работу, а сильная модель-критик обеспечит чувство вкуса.
Давай опробуем это на наших предыдущих дизайнах, используя Claude Fable 5 в роли критика дизайна:
Промпт:
Я хочу, чтобы ты улучшил этот дизайн. Чтобы понять, на чём сосредоточиться, используй субагента Fable 5 в качестве критика дизайна.
На каждой итерации следуй этой процедуре:
Сделай скриншот текущего дизайна
Вызови критика в новом контексте, передав только скриншот — без кода, деталей реализации, предыдущих итераций и предыдущих отзывов критика
Попроси его оценить эстетику, к которой стремится дизайн, представить, как ведущая дизайн-студия воплотила бы эту эстетику, а затем перечислить самые существенные пробелы
В конце он должен выставить оценку по 10-балльной шкале, показывающую, насколько текущий дизайн приблизился к планке качества уровня такой студии
Включи в промпт для критика следующие указания:
Он должен оценивать общую структуру и композицию, а также обращать внимание на мелкие детали
Он должен отслеживать паттерны, которые кажутся избитыми, чрезмерными или иным образом явно выглядят как сгенерированные ИИ, и снижать за них оценку
Он должен давать ёмкие и конкретные замечания, а не расплывчатую прозу
Он должен смело высказывать своё мнение, не выбирая безопасные или простые решения
Работа завершена только тогда, когда критик независимо оценит её в 9/10 или выше. Не указывай этот критерий в промпте критика; пусть его оценка остаётся объективной. Каждый раз используй один и тот же промпт критика.
Claude Opus 5:
Вместо одного и того же шаблонного макета, который повторяется снова и снова, у каждого дизайна теперь есть собственная идентичность — при этом сохраняется его исходная общая эстетика.
Примечательно, что в каждом случае на Fable пришлось менее 10% выходных токенов. Если бы мы попросили Fable переработать страницу напрямую, это стоило бы вдвое дороже и заняло бы намного больше времени.
То, как ты настраиваешь эти циклы, очень важно. Вот несколько советов:
Убедись, что критерии для критика сформулированы как можно яснее и объективнее.
Плохо: «Оцени, выглядит ли наш дизайн красиво и не похож ли он на сгенерированный ИИ». Это слишком субъективно, поэтому результаты будут сильно различаться от запуска к запуску.
ОК: «Оцени эстетику, к которой мы стремимся, представь, как ведущая дизайн-студия воплотила бы её, а затем сравни качество нашего дизайна с этой планкой». Промпт всё ещё расплывчат, но задаёт единый фреймворк и планку качества.
Отлично: «Вот 5 дизайнов: 4 профессиональных примера и 1 скриншот нашего продукта. Расставь их по уровню проработки и вкуса». Эта инструкция конкретна и объективна и даёт визуальную точку отсчёта для оценки.
Приводи примеры изображений, чтобы продемонстрировать целевую планку качества. Можно использовать сопоставимые скриншоты или понравившиеся дизайны, а можно даже концепт-арт, сгенерированный ИИ. Попроси критика воспринимать их как ориентир или мудборд, а не как цель. Тебе не нужно, чтобы он напрямую копировал другие дизайны.
Тщательно продумывай критерии остановки. Иначе критик может так и не признать дизайн достаточно хорошим, а твой агент будет беспомощно сжигать токены, пытаясь ему угодить. Сначала попроси его провести одну-две итерации и проверь, сходится ли результат, прежде чем просить о большем.
Подбирай правильную модель для каждой задачи. Для роли критика разумно рассмотреть модели покрупнее: большее число параметров обычно означает лучшее чувство дизайна и более широкий спектр идей. Небольшие модели могут хорошо справляться с ролью исполнителя, но не стоит выбирать слишком маленькую. Тебе всё равно нужна модель, способная качественно воплотить выбранное направление.
Агенты для написания кода обожают писать код, но обычно не добавляют изображения. Вместо этого они выбирают простые альтернативы, которые легко выразить кодом: градиенты, геометрические фигуры и базовые паттерны. Всё это безошибочно выдаёт дизайн, созданный ИИ.
У некоторых агентов инструменты работы с изображениями встроены, но они используют их недостаточно. У других таких инструментов из коробки нет, однако они легко могут обращаться к API OpenAI или Gemini и генерировать изображения с помощью API-ключа.
Давай попробуем это на дизайнах из прошлого шага:
Промпт:
Дизайн довольно простой. Добавь ему индивидуальности с помощью генерации изображений. Рассмотри шейдеры или 3D-эффекты в сочетании с изображениями, чтобы создать более интересные визуальные решения.
Для генерации изображений используй этот API-ключ OpenAI (используй его только локально, не сохраняй в коде или продукте): sk-a1b2c3d4…
Проверяй в браузере покадрово, что результат выглядит правильно.
Claude Opus 5 (до и после):
Такие изображения и эффекты могут быстро добавить дизайну индивидуальности и сделать его менее очевидно сгенерированным ИИ, поскольку показывают, что в него вложено нечто большее, чем поверхностные усилия.
В зависимости от того, чем ты пользуешься, есть несколько способов подключить агента к инструментам генерации изображений:
Если ты используешь Codex, Antigravity или Grok Build:
Если ты используешь Claude Code или другого агента, но при этом у тебя есть подписка ChatGPT:
Если ты используешь только Claude или любой другой инструмент:
Самый простой путь — дать агенту API-ключ OpenAI или Gemini для генерации изображений. Я рекомендую создать отдельный API-ключ с жёстким лимитом расходов специально для агента. Так ты контролируешь затраты, даже если ключ утечёт или агент использует его неправильно, и сможешь легко отозвать ключ, не нарушая остальную работу.
Если ты часто вставляешь ключи в чаты, вместо этого положи их в файл и укажи агенту путь к нему в проекте. Скажи агенту: «Создай файл, игнорируемый Git, с именем .env.agents, сохрани в нём этот API-ключ и сделай для себя пометку в AGENTS.md/CLAUDE.md, что эти ключи предназначены для использования во время разработки, но не должны попасть в продукт».
Сегодня модели генерации видео невероятно мощные, но большинство воспринимает их как инструменты для создания UGC-рекламы или роликов, где Уилл Смит ест спагетти. Однако они отлично подходят и для повседневной работы над дизайном.
Сейчас доступно множество видеомоделей, и лучшие из них часто меняются, поэтому я предпочитаю использовать платформу-агрегатор вроде fal.ai. Так мы можем дать нашему агенту один API-ключ и позволить ему оценивать разные варианты и выбирать лучший, не добавляя несколько интеграций.
Вот два способа, которыми я люблю использовать видеомодели в своих дизайнах:
Секрет в том, чтобы сгенерировать зацикленный ролик на однотонном фоне, а затем либо убрать фон хромакеем (как на зелёном экране), либо в более сложных случаях воспользоваться моделью видеоматтинга для удаления фона. Так ты получишь анимацию, которую можно разместить где угодно в интерфейсе, и она не будет выглядеть как видео.
Например, я взял один из наших прошлых дизайнов и запустил такой промпт:
Промпт:
Можешь заменить изображение на этой странице зацикленным видеороликом, в котором происходит что-нибудь поинтереснее? Пусть кристалл раскалывается на части и медленно вращается. Добавь впечатляющие стеклянные эффекты, которые преломляют фон страницы и отбрасывают вокруг кристалла тени и световые блики.
Чтобы добиться убедительных эффектов преломления в стекле, сначала отрендери видео со стеклом поверх цветов фона страницы (так эффекты преломления запекутся в ролике), а затем удали фон с помощью модели видеоматтинга.
Используй этот API-ключ fal.ai: sk-a1b2c3d4…
Найди подходящие актуальные модели для генерации видео и удаления фона.
GPT-5.6 Sol (до и после):
Слева показан неподвижный кристалл на странице, справа — тот же кристалл, раскалывающийся на осколки с эффектами преломления.
Этот эффект гораздо богаче того, чего можно добиться кодом: интересные каустические отражения, стеклянные эффекты преломления и сложное физическое движение.
Это действительно недооценённый вариант использования видеомоделей. Помимо генерации видео по тексту, многие видеомодели умеют интерполировать переходы между изображениями ключевых кадров. Это позволяет взять два статичных изображения продукта и создать переходный ролик между ними. Ролик можно воспроизводить, когда пользователь выполняет действие (например, переходит на другой экран приложения), или прокручивать покадрово в ответ на жест (например, прокрутку или свайп).
Вот демонстрационная страница, показывающая эффект при прокрутке. Я собрал её с помощью одного промпта в GPT-5.6 Sol в Codex:
Промпт:
Создай демонстрационную страницу для чемодана, где видеомодель используется для интерактивных переходов между несколькими экранами. На каждом экране чемодан должен быть в другом состоянии, с вертикальным движением, естественным для прокрутки:
Сначала пусть чемодан высоко парит в воздухе
Затем пусть приземлится на пол и раскроется
Наконец, пусть его содержимое аккуратно упадёт в него сверху
Сгенерируй начальный кадр с помощью своего навыка генерации изображений. Затем сгенерируй видеоролик, который начинается с этого кадра и анимирует переход к следующему состоянию. Используй последний кадр этого видео как основу для следующего перехода, чтобы он продолжался бесшовно. Пока пользователь прокручивает страницу, последовательно прокручивай переходы кадр за кадром.
Используй этот API-ключ fal.ai: sk-a1b2c3d4…
Используй видеомодель с реалистичной физикой и хорошей согласованностью между кадрами, например Seedance 2.5.
GPT-5.6 Sol:
Демонстрация страницы товара Waymark: открытый чемодан и индикатор прокрутки показывают состояние интерактивного перехода.
Переходы между страницами плавно следуют за прокруткой пользователя, и с ними интересно играть. Такой дизайн побуждает пользователя продолжать прокрутку и читать о продукте дальше. И всё это заняло всего один промпт!
Когда мы получили уникальный, выделяющийся дизайн, последний шаг — привести детали в порядок и подготовить его к использованию в продакшене. ИИ может создавать потрясающие, выразительные визуальные решения, но именно твоё суждение поможет убедиться, что дизайн логичен, последователен и выполняет практическую задачу для пользователей.
ИИ любит добавлять, но почти никогда не убирает. Один из главных признаков дизайна, созданного ИИ, — он перегружен объяснениями или содержит элементы, не имеющие практического смысла. И наоборот, сдержанный дизайн сразу выглядит премиальным и сделанным со вкусом.
При доводке дизайнов от ИИ большая часть моих усилий уходит на удаление лишнего. Например, когда я создавал приложение для отслеживания калорий, таким был мой первоначальный дизайн от Claude:
На экране приложения Morsel показаны дневная цель по калориям, текстовый чат и список продуктов с подписями.
Я описал функциональность приложения и отдельно попросил «чистый, минималистичный дизайн». Результат был неплохим и, конечно, впечатлял с учётом того, что его полностью сгенерировал ИИ. Однако, несмотря на мою просьбу о минимализме, многое в дизайне не добавляло ценности:
Розовые светящиеся эффекты на фоне и на индикаторе прогресса
Случайные цвета и выделения в тексте
Лишние подписи и пустое пространство при отображении всей еды за день, хотя изображения уже всё это показывают
Кастомные кнопки и текстовые поля, которые выглядят хуже встроенных компонентов iOS
Я попросил Claude сделать дизайн сдержаннее:
Упростить компоновку до сетки с упором на изображения
Убрать градиенты, свечение и ненужные контейнеры
Стремиться к действительно минималистичной эстетике, близкой к нативному стилю Apple
Вот что получилось:
В обновлённом варианте продукты представлены сеткой изображений, а интерфейс стал проще и ближе к нативному iOS.
На мой натренированный глаз результат гораздо лучше. У него есть характер, и он позволяет визуальным элементам говорить самим за себя. В нём используются нативные компоненты iOS, а лишние цвета и градиенты исчезли. Текст стал меньше, проще и плотнее. Вот это хороший дизайн.
Сегодняшние модели ИИ сами никогда бы не додумались до таких решений. Помни: ИИ не любит рисковать, а упростить дизайн и удалить код — рискованно. Модели нужен толчок с твоей стороны. Посмотри на свой дизайн и спроси себя, что действительно должно в нём остаться. Часто меньшее количество элементов на экране передаёт больше: так ты удерживаешь внимание пользователей, не перегружая их визуальным шумом.
У каждой модели ИИ есть паттерны, которые она любит использовать слишком часто. Сами по себе они не плохи, но когда пользователи начинают видеть их в каждом дизайне, эти паттерны становятся признаками ИИ-слопа.
Простой способ сделать дизайн более выверенным и премиальным — научиться распознавать эти паттерны и знать альтернативы. Не нужно механически избегать каждого из них, но применять их стоит осознанно.
Вот распространённые признаки ИИ-слопа:
Перевод текста на иллюстрации
Чрезмерно используемый паттерн: маленькие избыточные подписи, которые сообщают очевидное.
Лучшая альтернатива: в 9 случаях из 10 подпись можно просто убрать, ничего ценного не потеряв.
На примере слева над заголовком «Контролируйте расходы компании до того, как они возникнут» стоит надзаголовок «УПРАВЛЕНИЕ РАСХОДАМИ»; справа он убран.
Чрезмерно используемый паттерн: универсальные фоновые градиенты.
Лучшая альтернатива: фоновые изображения, паттерны или даже однотонные цвета.
На примере слева яркий синий градиент заменён справа фотографией лесного домика с затемнением для текста.
Чрезмерно используемый паттерн: чрезмерное количество карточек и контейнеров.
Лучшая альтернатива: более плоские компоновки, например сетки или плитки.
На примере слева три блока оформлены отдельными карточками, а справа тот же контент собран в более плоскую сетку.
Чрезмерно используемый паттерн: слишком много шрифтов, текстовых стилей и типографических уровней.
Лучшая альтернатива: начни с 1–2 шрифтов и 2–4 стилей и добавляй новые только при необходимости; используй акцентные цвета и курсив умеренно.
В нижнем примере более сдержанная типографика сохраняет один основной шрифт, ограниченное число стилей и редкие акценты курсивом.
Можно с самого начала велеть ИИ избегать этих паттернов, но я не советую. Не каждый градиент, карточка или подпись сами по себе плохи, а принуждение ИИ избегать их может заставить его переусложнить решение и добавить ещё более странные паттерны. Вместо этого во время доводки дизайна открой этот список и проверь каждый паттерн. Затем попроси ИИ попробовать альтернативы и посмотри, не понравится ли тебе результат больше.
Текст, который модель помещает в твой дизайн, не влияет на визуальную часть, но может сильнее всего повлиять на то, сочтут ли пользователи дизайн сделанным со вкусом или слопом. Каждый день нас бомбардируют текстами, сгенерированными ИИ. Их утомительно читать, и они просто звучат неестественно.
Думай о тексте, сгенерированном ИИ, так же, как дизайнеры думают о тексте «Lorem ipsum»: он помогает представить структуру, но служит заполнителем и нуждается в переписывании. Проследи, чтобы человек прочитал каждую строку и переформулировал её в едином тоне.
Вот какую разницу может дать этот процесс:
Перевод текста на иллюстрации
Lantern
Перестаньте гадать, почему ваша база данных работает медленно.
Абзац 1: В логах указано 1,4 секунды. Но не сказано почему. Где-то между вашим ORM и диском исчезает время — и обычно его поиск означает, что в четверг после обеда вы щуритесь на вывод EXPLAIN ANALYZE, похожий на записку заложника. Lantern возвращает вам время после обеда.
Абзац 2: Подключите одну строку подключения с доступом только для чтения, и Lantern начнёт ранжировать каждый запрос по времени, которое он действительно у вас отнимает, — так запрос на 4 мс, выполняющийся 200 000 раз в день, наконец получит заслуженное внимание. Каждый запрос ведёт прямо к строке кода, которая его запустила. Никаких агентов, сайдкаров и YAML. Мы фиксируем формы запросов, но никогда не сохраняем параметры, поэтому данные ваших клиентов остаются в вашей базе данных, где им и место.
Абзац 3: Большинство команд находят первое значимое исправление в течение часа. Обычно причина — отсутствующий индекс. Почти всегда это отсутствующий индекс.
Призыв к действию: Начните бесплатно — одна база данных навсегда.
Lantern
Перестаньте гадать, почему ваша база данных работает медленно.
Абзац 1: Больше не тратьте полдня на чтение профилей EXPLAIN ANALYZE. Lantern — анализатор запросов на базе ИИ, который работает с любой базой данных, находит проблемы с производительностью сразу после их появления и указывает точную строку кода, которая их вызвала. Он полностью конфиденциален и никогда не читает ваши данные.
Абзац 2: Большинство команд находят первую критическую проблему в течение часа после регистрации. Подключите первую базу данных бесплатно.
Человеческая версия почти всегда короче, проще и вызывает куда меньше желания закатить глаза. Увидев стену текста от ИИ, пользователи сразу хотят пролистать её. Потрать время на ясный, осмысленный текст — и пользователи действительно прочитают то, что ты хочешь сказать.
Большинство созданных ИИ дизайнов сегодня — слоп, но при правильном управлении ИИ может быть очень хорошим дизайнером. По мере развития ИИ новые модели будут открывать возможности дизайна, о которых дизайнеры-люди могут только мечтать, если мы сумеем ими управлять. Когда ИИ станет частью каждого процесса дизайна, преимущество будет у тех, кто умеет получать от него больше.
С сегодняшними моделями ИИ и моделями будущего этот процесс из трёх этапов поможет тебе направить своих ИИ-агентов от чистого листа к самобытному дизайну, раскрывающему весь потенциал ИИ:
Поиск: открывай новые идеи за пределами стандартных решений ИИ-слопа.
Выбор: сформируй дизайн-идентичность, характерную именно для тебя и твоего продукта.
Доводка: добейся восхитительного результата, сглаживая шероховатости дизайна, созданного ИИ.
В конечном счёте «вкус» и «слоп» — в глазах смотрящего. Хороший дизайн объединяет шрифты, цвета и компоновку, чтобы вызывать чувство, а не просто создавать визуальную композицию. Если твоим продуктом приятно пользоваться, пользователям будет всё равно, спроектировал ли его Claude за день или команда людей за несколько месяцев. Сосредоточься на ощущении — и твои дизайны всегда будут выделяться, независимо от того, созданы они ИИ или нет.
Спасибо, Anshu!
Желаю тебе насыщенной и продуктивной недели 🙏
Если эта рассылка приносит тебе пользу, поделись ею с другом и подумай о подписке, если ты ещё не подписан. Доступны скидки для групп и варианты подарочной подписки.
С уважением,
Lenny 👋