Как стать AI-дизайнером

Реалистичное руководство, как самостоятельно выкатывать свои дизайны.

Стилизованный терминал с надписью ‘ship it’.

Компания хочет, чтобы вы тратили больше токенов. Разработчики выкатывают быстрее, чем вы успеваете прототипировать. Вайбкоженный шлак заполонил вашу ленту LinkedIn. Агенты — это будущее. Figma — всё. Anthropic только что выпустила Claude Design. Всё решает вкус. Разработчики только что отправили ещё один PR! Дизайн мёртв. Хотя нет, токенов теперь надо меньше. Стоп, может Figma снова в деле — вы видели тот доклад на Config? Разработчики опять что-то выкатили! Вашим агентам нужны Design Skills. А что вообще такое Design Skill? А *вы* ещё помните как дизайнить???


Неважно, где вы сейчас живёте: роли по всему техсектору меняются радикально. Но здесь, в Сан-Франциско, в эпицентре так называемого ИИ-пузыря, нам выпали и привилегия, и бремя переживать эти перемены сильнее большинства. Каждая компания в городе несётся к одной цели: собрать неуловимую «AI-native» команду. Запрос прямой и срочный: оптимизировать рабочие процессы во всех дисциплинах, 10x продуктивность и выкатить будущее.

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

Как оптимизировать мастерство, или 10x дизайн-мышление?

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

Когда несколько месяцев назад я пришла в Amplitude дизайнить Agent Analytics, нашу новую платформу Observability and Evals, я ни разу в жизни не отправляла PR. Сегодня я, по сути, отвечаю за фронтенд команды.

До этого места я добиралась долго, и хотя поддержки было много, готового сценария, по которому можно было идти, тогда не существовало. Так что надеюсь, у вас будет чуть больше форы!

Прежде чем начать, я добавила короткий глоссарий ниже — на случай, если вы, как и я, не очень дружите с инженерными терминами.

С AI-дизайном приходит новая терминология.

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

Шаг 1 — Передышка от Figma

Главный совет любому дизайнеру, который хочет стать AI-native, простой: попробуй закрыть Figma на неделю и посмотри, что будет.

Попрощайся (пока!) с Figma.

Знаю, звучит резко. Я не говорю, что Figma надо бросить навсегда (хотя сама я ею для продуктового дизайна уже вообще не пользуюсь). Но если вы правда хотите принять этот новый способ работы, от старой рутины придётся отказаться целиком.

У меня это случилось само собой. Я пришла в команду 0–1 в Amplitude: продукт собирали с нуля, готовых файлов Figma, которые можно было использовать, не было. Плюс инженеры в моей команде неслись (то есть выкатывали совсем новые фичи по несколько раз в день), и я не хотела, чтобы дизайн стал узким местом.

Сначала я изо всех сил пыталась быстро собирать экраны в Figma. Считаю себя очень сильным пользователем Figma, но угнаться за всеми изменениями, если рисовать точные до пикселя и всегда актуальные прототипы, было невозможно. Попробовала вместо этого грубые вайрфреймы — но даже они казались медленными, когда нужно было разложить сложные, постоянно меняющиеся рабочие процессы продукта.

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

Шаг 2 — Вайбкодинг интерактивных прототипов

Так начался мой первый прорыв в AI-дизайне: скромный артефакт на Claude Code. Вместо экранов в Figma я вайбкодила быстрые кликабельные html-прототипы прямо в Claude.

Низкодетализированные вайрфреймы, сделанные в Claude.

Каждый день я кидала их команде, получала фидбек, сразу итерировала и снова рассылала до конца дня. Если нужно было покрутить мелкие UX-детали, я просила Claude проектировать 3–5 вариантов компонента вместо того, чтобы каждый раз собирать целый экран. В обоих случаях умение быстро проектировать взаимодействия полностью изменило то, насколько подробно можно разбирать пользовательские сценарии.

Мелкие варианты UI-компонентов исследуем в чате.

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

Важная оговорка, почему ранние вайрфреймы сработали: нужно делать их a) максимально простыми и b) визуально не связанными с настоящей дизайн-системой. Искушение идеально воссоздать интерфейс продукта огромное, но я быстро поняла: доводить визуал до блеска — не сильная сторона ИИ. Довести вайрфрейм на девяносто процентов экспоненциально проще, чем попасть в последние десять процентов. Хорошенько подумайте, правда ли стоит доводить детали ценой часов бессильной злости.

Более высокодетализированные HTML продакт-шоты.

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

Сейчас я работаю со смесью низко- и высокодетализированных прототипов — в зависимости от того, какой фидбек нужен, — всё через Claude Design. Плюс можно сопоставить несколько итераций каждого экрана на одном канвасе: именно этого визуала мне раньше не хватало. Я даже делаю HTML продакт-шоты и публикую их на нашем сайте.

Честно: вот реальность AI-дизайна — новые инструменты выходят каждый день, и процесс приходится постоянно перестраивать. Несколько сильных материалов вроде AI Design Field Guide очень помогли мне понять, как работают другие дизайнеры в этой среде.

Шаг 3 — Найти новый источник правды

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

Я застряла на одной большой дилемме: у меня не было дизайн-«источника правды». Если кто-то спрашивал «где актуальные дизайны Agent Analytics?», показать было некуда.

Я перепробовала кучу способов: от кустарных гибридов «скриншот из Figma» до кривых HTML-экспортов. Все они были либо слишком низкодетализированными, чтобы зваться финальным дизайном, либо слишком высокодетализированными, чтобы успевать их обновлять. Даже если бы я как-то быстро прототипировала суперполированные экраны, живой продукт всё равно эволюционировал и расходился слишком быстро.

Примерно тогда я слушала, как Jenny Wen рассказывает, как её дизайн-команда в Anthropic полностью переосмысливает дизайн-процесс. Она говорила, что традиционный рабочий процесс исследование → макет → итерации заточен под мир, где собирать продукт было медленно и дорого. Теперь её процесс крутится не вокруг прототипирования в Figma, а вокруг того, как через разные инструменты формировать реализацию и направлять продукт. По её словам, дизайн-источник правды всё чаще становится сам продукт.

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

Сделай сам продукт источником правды для дизайнов.

Шаг 4 — Доступ к кодовой базе

Для меня суть AI-native дизайна — умение самостоятельно выкатывать свои дизайны и делать их сильными. До этого момента казалось, что я ускоряю рабочий процесс дизайна, но не обязательно улучшаю его. Этот шаг — настоящая разница между ИИ, чтобы выдавать дизайн быстрее, и ИИ, чтобы дизайн стал лучше.

По-настоящему сильный интерфейс живёт в деталях, но мы все знаем: даже идеально аннотированный прототип в Figma после передачи в разработку слишком часто оскверняют. Доступ к правкам в настоящей кодовой базе позволил мне доводить мельчайшие взаимодействия и чинить крошечные визуальные мелочи. По отдельности такие правки поймает только глаз дизайнера, а вместе они складываются в продуманный, качественный софт, который заметит кто угодно. Помимо того, что статичный дизайн оживает, выкатка кода дала мне возможность добавлять совсем новые дизайн-детали: интерактивность, адаптивность и приятность.

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

И как дизайнеру начать кодить?

В эпоху ИИ кодить легко. Я правда верю: любой дизайнер с практикой может научиться делать заметные правки во фронтенде и отправлять PR. Сложность — получить нужную поддержку и доступ, чтобы выкатывать код.

Мне повезло работать в очень дальновидной EPD-организации — Engineering, Product, Design, — которая вложилась в ресурсы и процессы, чтобы не-инженеры тоже могли выкатывать код. Я понимаю: такой доступ к токенам, учебным материалам и технической поддержке есть не у всех.

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

Как только первый PR вмержили, пути назад нет!

Вот что можно сделать, чтобы продавить дизайнерам доступ к коду…

Покажите  примеры компаний, где дизайнеры выкатывают код.

Первый барьер здесь — просто нехватка примеров перед глазами. Идея, что не-инженеры пушат код, ещё довольно новая, так что команда могла даже не подумать, что дизайнеры могут отправлять PR. Собери встречу и покажи живые примеры компаний и дизайн-команд, которые каждый день пишут код, чтобы оптимизировать рабочие процессы (можешь спокойно сослаться на этот текст 😊).

Объясните, чем полезен дизайнер, который кодит.

Реальное (и, честно, справедливое) опасение со стороны инженерии: дизайнеры просто нагенерят бэклог кривых PR на ревью инженерам, и без того загруженным. Здесь важно изложить свою позицию: объясните, что вы как раз снимете кучу фронтенд-работы, которой раньше занимались инженеры. Никаких пингов «поменять цвет» или «сжать гэп с 24px до 16px»! И подчеркни, что хочешь учиться лучшим практикам и начинать с мелких правок.

Найдите своего чемпиона среди инженеров.

Поддержка всей инженерной команды — отлично, но часто хватает одного партнёра из разработчиков, который готов потратить пару часов и помочь вам всё настроить. Мне везло работать со множеством прекрасных, талантливых инженеров, которые щедро помогли выучить технические навыки, которые у меня есть сейчас. Короче: дружите с разрабами!

Начните с бота.

Если запросы научить кодить дизайн-команду вы встречаете много сопротивления, начните с бота-агента для правок в коде в корпоративном мессенджере. Как только разрабы настроит бота, для дизайнеров сетапа ноль: ни GitHub, ни репозиториев, ни дев-окружений — просто пингуешь ботов, и они правят настоящий код. Для дизайнеров это хороший низкий порог входа — и он подталкивает к мелким правкам вроде текста или цвета, пока все осваиваются с вайбкодингом.

Свой первый PR я отправила через Cursor Bot в Slack.

Если компания всё равно не готова — сделайте сами!

Не обязательно ждать AI-native компанию, чтобы стать AI-native дизайнером. Если на работе поддержки нет — вложитесь в себя. Возьмите вайбкодинг-инструмент по вкусу и выкатывайте свои проекты. Можно начать с простых стартовых инструментов вроде V0 и Lovable, а потом дорасти до Cursor и Claude Code. Бесплатных гайдов в сети полно! А когда появится портфолио собственных пет-проектов, могу гарантировать: многие AI-native компании будут рады вас взять.

Шаг 5 — Отвечать за фронтенд продукта

Уточню: когда я говорю «отвечать» за фронтенд, я не имею в виду, что вы должны собирать весь интерфейс продукта. Я точно этого не делаю (и не смогла бы).

Но вы должны стать тем, кто ведёт фронтенд-решения. В моей команде я ревьюю все фронтенд-PR, напрямую работаю с разработчиками над UX-перестройками и сама закрываю большую часть полировки UI.

Мои GitHub Contributions с момента прихода в Amplitude.

Добраться сюда непросто: многое придётся выучить и от многого отвыкнуть. Главное — начинать с малого, задавать вопросы и учиться! Начните с крошечных UI-правок, чтобы набраться уверенности, потом масштабируйте. Разберитесь, где проходит граница между фронтенд- и бэкенд-правками. Поймите, когда задача стоит вашего времени, а когда лучше отдать настоящим разработчикам.

Когда освоите базу, прокачивайте вайбкодинг:

  • Собирайте Design Skills, от которых код становится лучше у всех — очень советую статью John Phamous Teaching agents product design at Vercel.

  • Объясняйте логику дизайн-правок, даже если кажется, что она очевидна. В Details That Make Interfaces Feel Better Jakub Krehel из Interfere красиво показывает тонкие нюансы, которые могут полностью изменить UI.

  • Точечно добавляйте в дизайны более сложные взаимодействия. Для старта советую 7 Practical Animation Tips Emil Kowalski.

Прошло время, прежде чем появились настоящее доверие и навык, чтобы делать значимые правки. Нужно было доказать, что я готова работать и учиться сама. Нужно было плотно работать с разработчиками и продактами, чтобы пересмотреть процессы передачи в разработку. Со временем я всё спокойнее отправляла PR. Начала собирать более отточенные интерфейсы, вести несколько дизайнов параллельно и в итоге стала тем человеком, к которому ходят за UI/UX-решениями.

Шаг 6 — Принять хаос?

Не потеряй мастерство посреди вайба.

Когда я наконец почувствовала, что добралась до заветного статуса «AI-дизайнер», мне не терпелось показать новый рабочий процесс другим дизайнерам. Столько взлётов и падений, столько новых навыков — казалось, я наконец вышла на приемлемую, устойчивую точку. Вот она я: кручу сразу несколько агентов, эффективно вайбкодю целые страницы за несколько промптов и спокойно отправляю по несколько PR в день. Честно, думала, что всё наконец поняла.

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

И после месяцев принятия хаоса, пересборки привычек и освоения новых инструментов я оказалась в смятении. В прошлом году я прочитала совершенно потрясающую статью Amelia Wattenberger — Our Interfaces Have Lost Their Senses. Это вдумчивое и изобретательное исследование того, как потеря сопротивления в нашем опыте ведёт к тому, что людям в целом меньше от него радости. Пока ИИ продолжает захватывать мир, эта статья отзывается во мне всё сильнее.

Новый рабочий процесс с ИИ позволил мне собирать красивые, сложные дизайны с совершенно небывалыми скоростью и масштабом. Я добавила приятность, отточенность и последовательность в интерфейсы, которыми пользователи реально пользуются, — и этот эффект ощущается очень осязаемо и правильно.

Но должна признать: вместе с этим пришла небывалая отстранённость от мастерства. Когда я сравниваю новый день — совещания с агентами, прыжки между промптами, нянченье с PR — со старыми днями, когда я доводила фреймы в Figma, полностью погрузившись в состояние потока, я в тупике.

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

В заключение

Надеюсь, статья дала живое представление о том, как сейчас выглядит рабочий процесс одного AI-native дизайнера. Уверена: через месяц рутина, стек и мнения снова полностью изменятся — но это честная фиксация того, где я сейчас. Мы все в этом участвуем, так что кидайте в комментарии инструменты и процессы, которые у вас работают!

FAQ

Вопросы, которые мне задают (или я задаю себе) про AI-дизайн —

В. Как выбрать, какие ИИ-инструменты лучше?

Ориентироваться в море ИИ-инструментов для кода и дизайна — это перегруз. Я, конечно, не скажу однозначно, какие инструменты лучшие, но могу показать свой стек.

Это ИИ-инструменты, которыми я пользуюсь каждый день:

Claude Chat: Для исследований, макетов схем, мелких UI-экспериментов, технического дебага и обычного брейншторма.

ChatGPT: Для текстов в продукте, названий фич и прочих языковых задач.

Claude Design: Для прототипирования многих итераций рядом на одном канвасе и экспортного html под маркетинговые продакт-визуалы. Cursor: Для вайбкодинга в проде и отправки PR.

Linear: Для дизайн-тикетов, командных целей и прочего списка задач. Не совсем ИИ, но их slackbot я использую часто.

Notion AI: Для саммари доков и расшифровок звонков с клиентами.

В. Как не сжигать часы на один PR?

Проще всего поставить лимит на «повторные» промпты. Если ловишь себя на том, что агент чинит одну и ту же проблему больше чем за 3 промпта — стоп. Либо переключись на другой PR и вернись позже (иногда кажется, что у модели просто плохой день), либо отдай нормальному разработчику. Если чините одно и то же в нескольких PR — пора обновить файл SKILL.md.

В. Как выкатывать дизайн целых фич, а не мелкие правки?

Честно: практика решает! Терпение, вопросы, маленькие шаги. Со временем само появится чутьё на возможности и пределы вайбкодинга. Ещё конкретный совет: сначала соберите прототип, которым вас устроит, в чём-то вроде Claude Design, и уже его отдайте как референс кодящему агенту. Это куда эффективнее, чем сразу долбить пачку инкрементальных правок по живому UI.

В. Почему кажется, что мои дизайн-решения стали чаще оспаривать?

ИИ размыл границы всех ролей в EPD: разработчики ходят на звонки с клиентами, продакты рисуют вайрфреймы, дизайнеры вайбкодят. Когда зоны ответственности и навыки начинают пересекаться, появляются небольшие трения. Когда я только начала выкатывать код, в PR сыпались комментарии с вопросами к UI/UX. Сначала бесило. Казалось: я лид по дизайну — и точка. Но в новой рабочей эпохе нужно заново определить роли, делиться знанием и вместе копить доверие. Я поняла: если жду от разработчиков, что они будут учить меня кодить, минимум, что могу, — потратить пару секунд и объяснить дизайн-логику. Сейчас почти все мои UI/UX-решения принимают на веру.

В. Почему всё время уходит на UI-мелочи?

ИИ не силён в UI, хотя с каждым днём становится лучше. Если ловите себя на том, что по несколько часов в день полируете UI, вот что может помочь.

Улучшите дизайн-систему: Поработайте с командой DS над фундаментом — вдолгую это ускорит вайб-дизайн.

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

Заведите неделю полировки: Побочный эффект доступа дизайнеров к живому UI: мы можем стать штатным «уборщиком» команды. Чтобы этого не случилось, я продавила ежемесячную неделю полировки: каждый день баг-баш, тикеты на UI-мелочи раздаём всем. Зашло отлично!

В. Как оптимизировать мастерство и 10x дизайн-мышление?

Короткий ответ: вряд ли возможно.

Вы можете оптимизировать рабочий процесс и десятикратно увеличить объём выполняемой работы. Можете собирать бесконечные итерации, полностью интерактивные прототипы и очень крутые анимации. Можете выкатывать самые детализированные, до пикселя отточенные интерфейсы в карьере. Но ускорить креативность нельзя. Симулировать вкус нельзя. Нельзя с помощью LLM заменить то, что дают время, опыт и искусство.

Очень надеялась, что к концу подготовки статьи ответ будет лучше, но как с любой переменой: есть рост и есть компромисс.

В. Как не потерять связь с дизайном при всех этих переменах?

Очевидно, как в шаге 6, у меня нет полной картины. Но одно реально помогает держать связь с дизайном: контакт с другими дизайнерами. Легко забыть, что этот хаос переживаем мы все, и делиться этим опытом правда помогает. Напишите коллегам-дизайнерам, дерните дизайн-друзей, ходите чаще на дизайн-ивенты!

Источники

О пересборке дизайн-процесса

О том, как учиться разрабатывать с ИИ

Перевод статьи "How to become an AI Designer". Статья написана Maya Brennan, лид-дизайнером в Amplitude + Statsig https://www.mayabrennan.io/

Комментарии

Индекс популярности

Как считается индекс