Один дизайнер + ИИ. Сотни результатов. — Винсент Венди, Инженер по ИИ
AAI Engineer
컴퓨터/소프트웨어마케팅/광고경영/리더십
스크립트
00:00:00Всем привет, надеюсь, вы отлично проводите время на конференции. Прежде чем мы
00:00:19начнем, кто здесь дизайнеры, например, продуктовые дизайнеры? Поднимите
00:00:24руку, еще одна, отлично. А сколько, полагаю, остальные из вас — инженеры, верно?
00:00:32Да, в основном. Ладно, сегодняшнее выступление будет нетехническим, это скорее
00:00:40рассказ о реальном опыте: как я создал дизайн для AI Engineer — этой конференции
00:00:46и других наших прошлых мероприятий, и как мне помогал ИИ. Тема сегодняшнего доклада:
00:00:54один дизайнер плюс ИИ (то есть я как дизайнер) и сотни результатов работы. Давайте
00:01:00начнем. Меня зовут Винсент Венди, я старший креативный дизайнер в AI Engineer,
00:01:07а в AI Engineer команда очень маленькая, сейчас в ней всего около 12–15 человек,
00:01:15и каждый занимается своими задачами. Мне кажется, ИИ стал очень полезным инструментом,
00:01:24помогающим каждому делать всё подряд. И для мероприятия такого масштаба у нас,
00:01:33конечно же, есть проблема, верно? И эта проблема — масштаб, или, я бы сказал, вызовы.
00:01:40Как её преодолеть? По сути, с помощью автоматизации, к которой мы вернемся во второй части выступления. Когда я готовился к докладу, мы ожидали лишь 6 000 участников,
00:01:53а теперь их 7 000 — что ж, отлично для нас. При этом у нас более 140 спонсоров, свыше 300 спикеров, более 600 сессий и один дизайнер.
00:02:10И всем нужен каждый дизайн, понимаете? Буквально для всего нужен дизайн. Спонсорам нужны материалы, спикерам — графика,
00:02:19нужна навигация, чтобы вы не заблудились. В общем, это как раз то, что мы делаем, то, что делаю я. От наклеек — вам нравится ваш мерч, ваши наклейки?
00:02:31Что ж, надеюсь, да, потому что этот дизайн создал я тоже. До посадочных страниц, анонсов спикеров, талисманов треков — всё то, что вы видите,
00:02:41большую часть того, что вы здесь видите, от обычной навигации до цифровых экранов и лендингов — всё это является
00:02:51готовым результатом работы. А тысяча деталей означает тысячу способов совершить ошибку, верно? Ведь пропущенный логотип спонсора может стать огромной проблемой,
00:03:04а перепутанное расписание у спикеров — тоже серьезная неприятность, правда? И кажется, что справиться с таким количеством задач невозможно, но... знакомьтесь, моя команда дизайнеров.
00:03:16Это я, Девин, GPT и Figma. И сейчас мы находимся на этапе, когда инструменты больше не являются проблемой,
00:03:31а наличие реальной проблемы — наше преимущество. Например, когда кто-то спрашивает меня: “Что вдохновило вас при создании дизайна для AI Engineer?”
00:03:41Тогда я не знал ответа, но поразмыслив, понял: на самом деле меня вдохновила именно проблема
00:03:46проектирования для этой конференции, и мы еще вернемся к этому далее.
00:03:53Итак, видел ли кто-нибудь из вас доклад Саймона Уиллисона в 2025 году?
00:04:00Да.
00:04:01Да, и это довольно интересно, верно? Он просил каждую LLM создать векторный файл —
00:04:11по сути, пеликана, едущего на велосипеде. Это было сделано ради теста,
00:04:16и я проверил это снова: базовая модель до сих пор делает то же самое,
00:04:20и для меня как дизайнера это неприменимо. Но мы, дизайнеры, должны мыслить нестандартно,
00:04:26и мы можем просто попросить GPT создать обычное растровое изображение, например, PNG с пеликаном на велосипеде,
00:04:33а затем я могу векторизовать его в Figma и выпустить в работу.
00:04:37Так что здесь нам нужно мыслить шире, независимо от текущих возможностей LLM.
00:04:44Итак, как же решить эту проблему масштаба?
00:04:52По сути, с помощью пяти вещей: фундамент прежде всего, переиспользуемый дизайн,
00:04:56автоматизированные рабочие процессы, валидация результатов, а также устранение трений.
00:05:00Фундамент — это определенно та ключевая часть, которую нам нужно настроить правильно:
00:05:06дизайн-система, типографика, цвета, компоненты и прочее.
00:05:11И как только это настроено, например, когда мы создаем веб-сайт,
00:05:17всё строится на этой основе. И да, это просто пример.
00:05:22У нас есть цвета — основные, а также акцентные,
00:05:26типографика, тексты и все остальные элементы.
00:05:31Кстати, знакомы ли вы с концепцией атомарного дизайна?
00:05:37Поскольку мой прошлый бэкграунд — продуктовый дизайн,
00:05:41я хорошо знаком с подходом, где нам нужно создавать ориентированный на пользователя дизайн,
00:05:46а также применять атомарный дизайн, верно? Когда мы создаем мельчайшие возможные элементы
00:05:50и объединяем их подобно деталям Лего
00:05:53в итоговые материалы. Это очень пригодилось мне в нынешней работе.
00:06:02Итак, как только мы заложили весь этот фундамент, нам нужно —
00:06:09например, мы очень много используем Девина. В офисе мы — все используют Девина.
00:06:14Все подряд злоупотребляют Девином, например. Да.
00:06:18И поэтому в данном случае мне достаточно сказать: “Эй, мы используем эту десктопную типографику
00:06:25и эту мобильную типографику”, потому что мы знаем,
00:06:29что Claude или любые другие LLM обожают влепить какой-нибудь случайный размер шрифта, верно?
00:06:35И если мы его не зададим, модель выдаст нечто неряшливое, как те прошлые варианты.
00:06:41Да, типографика, цвета и всё прочее, а затем мы переходим к переиспользуемому дизайну.
00:06:50Итак, как только мы всё настроили правильно, так что сайт обладает узнаваемым брендингом,
00:06:57все остальные команды AI Engineer, например, команда маркетинга,
00:07:02могут создавать буквально всё. Они могут сделать дизайн письма на основе этого.
00:07:08Они могут создать флаер или документ на основе веб-сайта,
00:07:13потому что всё уже задано заранее.
00:07:18И да, получив дизайн, вы можете просто использовать его снова и снова.
00:07:24Например, у талисмана конференции практически тот же дизайн,
00:07:28и он просто тиражируется. Если вы уже определили эти стандарты,
00:07:34вы можете по сути создать один дизайн, который подходит для всех.
00:07:38И это та часть, о которой мне интереснее всего рассказать —
00:07:41а именно автоматизированные рабочие процессы.
00:07:43Раньше, например, если вы посмотрите за пределы этой комнаты,
00:07:48там есть расписание, верно? Расписание для каждого выступающего.
00:07:52Раньше мы делали это вручную в Figma, а теперь используем для этого Девина.
00:07:58И позвольте мне показать.
00:08:02Привет.
00:08:04Итак, сейчас мы просто подтягиваем самые свежие данные.
00:08:08Я просто прошу Девина: “Эй, мне нужно расписание для этого зала на этой основе”.
00:08:14А затем мы можем просто экспортировать его, скачать в PNG,
00:08:18и данные будут точными, после чего можно скинуть их на флешку
00:08:22и вывести на экран.
00:08:25Раньше это казалось невозможным,
00:08:28потому что было слишком много трений
00:08:31между дизайнерами и разработчиками.
00:08:33Мы не могли сделать всё пиксель в пиксель,
00:08:35потому что когда мы говорим дизайнеру...
00:08:38простите, инженерам, которые создавали дизайн, например:
00:08:40“Эй, мне нужно это реализовать” —
00:08:44они не делают это пиксель в пиксель.
00:08:46Приходится давать очень много правок, верно?
00:08:49Но с Девином мы просто говорим:
00:08:52“Эй, можешь сделать это точнее?”
00:08:54Мы можем просто подключить его к MCP,
00:08:58и если что-то идет не так,
00:09:00всегда можно предоставить спецификацию
00:09:02или документ, в котором четко прописаны отступы,
00:09:06размеры шрифтов и тому подобное.
00:09:11И именно так мы делаем анонсы спикеров.
00:09:14У нас больше 300 спикеров,
00:09:20и мне физически не справиться с ними поодиночке, верно?
00:09:22Поэтому мы создали эту штуку, которая называется...
00:09:26к которой вы тоже можете получить доступ для анонсов,
00:09:29и вы можете испытать её сами, например, вот эту.
00:09:32Вы можете выбрать её прямо здесь и изменить своё имя.
00:09:38Ну да.
00:09:40Например, здесь вы можете поменять имя на любое желаемое.
00:09:42У нас также есть ландшафтный режим,
00:09:44который тоже можно загрузить.
00:09:48Если у спикера есть портретное фото и все данные,
00:09:51всё экспортируется автоматически.
00:09:53А еще у нас есть коллекционные карточки,
00:09:56которые, к удивлению, пользуются большой популярностью.
00:09:59У нас есть разные темы оформления.
00:10:01И всё это выполнено пиксель в пиксель, верно?
00:10:05Например, вот эта.
00:10:07Она вдохновлена TBPN, так что да.
00:10:11И как же мне удается добиваться такого качества?
00:10:14Давайте перейдем к этому.
00:10:19Процесс устроен так: раньше, когда я начинал карьеру
00:10:23продуктового дизайнера, всё сводилось к тому,
00:10:25что нужно проводить исследования,
00:10:34создавать продукт — ну, применять дизайн-мышление в целом, да?
00:10:37Затем настраивать цикл обратной связи и всё в таком духе.
00:10:39Но сейчас для меня это уже устарело.
00:10:42В нашем случае мы просто заходим в Slack, в Figma,
00:10:45а потом отправляем задачу обратно в Slack, потому что наш Девин живет в Slack.
00:10:49И он генерирует всё, что необходимо.
00:10:54Например, мы можем подключить MCP или спецификацию,
00:10:58выглядящую примерно так — это плагин для Figma, если вам интересно.
00:11:01Он бесплатный.
00:11:07И он по сути добавляет аннотации к макету.
00:11:10Конечно, дизайнеры вечно не подписывают свои слои,
00:11:15поэтому там вечно какие-то случайные «Frame 3», «Frame 4».
00:11:15Но LLM с этим справится.
00:11:20Она определяет все отступы, все размеры шрифтов,
00:11:24а также все цвета и прочие детали.
00:11:29Это определенно поможет вам разработать продукт с идеальной точностью.
00:11:31А еще буквально сегодня у нас появились фотографии,
00:11:37для которых нужно было сделать превью для каждого спикера, верно?
00:11:40Это точно поможет вам создать идеальный продукт.
00:11:44И ещё у нас совсем недавно, буквально сегодня, появились фотографии,
00:11:51для которых нужно создать миниатюру спикера, верно?
00:11:55И мы спросили Девина: «Эй, кто это такой?»
00:11:58И да, он вроде как справился.
00:12:01Сделал что-то вроде поиска Tinder,
00:12:06чтобы определить, тот же это человек или нет.
00:12:09И думаю, получилось довольно точно.
00:12:11Это Джейсон Лю.
00:12:12Да.
00:12:13И потом мы можем использовать это для контекста.
00:12:18Раньше, когда мы создавали миниатюру,
00:12:19нам приходилось перебирать все коды от фотографа
00:12:23и искать их по одному, возможно, даже сверяя время.
00:12:27Но теперь мы можем просто: о, это Джейсон Лю.
00:12:30Скачать эту фото.
00:12:31И потом вставить её в миниатюру, верно?
00:12:34И это просто потрясающе.
00:12:36В общем, мир, в котором мы сейчас живем, на самом деле...
00:12:40для меня как дизайнера находится уже на пике.
00:12:43Потому что чего еще можно желать, верно?
00:12:48У нас уже есть инструменты для автоматизации.
00:12:50У нас уже есть всё, чтобы быстро создавать дизайн.
00:12:54По сути, всё, что вам нужно — это проблема.
00:12:56Потому что как только у вас появляется задача, стоящая решения,
00:12:59вы можете решить практически что угодно.
00:13:03И возвращаясь к моей теме.
00:13:04Я вот так отвлекся.
00:13:06Да.
00:13:07И затем... да.
00:13:09И это тоже удивительная вещь, которую мы тестировали.
00:13:11Как вы знаете, у нас сотни спонсоров, верно?
00:13:16Больше 140.
00:13:18И как вы можете видеть в фойе,
00:13:21у нас висит баннер со всеми спонсорами.
00:13:24И я в основном говорю Девину: «Привет, не мог бы ты сравнить...»
00:13:29«Не мог бы ты проверить, нет ли на этой графике пропущенных логотипов?»
00:13:33И точность составляет 100% по результатам моих тестов.
00:13:38Так что... это просто безумие.
00:13:40И мы используем то же самое для футболок, которые вы получили в качестве мерча.
00:13:48И, да, удивительно, но Девин умеет визуализировать вещи, верно?
00:13:54Например, как находить детали визуально.
00:13:56И это очень неожиданно.
00:13:58Потому что люди могут допускать ошибки.
00:14:02Ой, оказывается, тут не хватает одного маленького логотипа.
00:14:05Но с таким подходом мы можем всё перепроверить.
00:14:09Так что человек плюс ИИ в комбинации —
00:14:13получается собственная команда контроля качества.
00:14:15И это убирает трение.
00:14:17Так что это просто образ мышления.
00:14:21Как дизайнеры, мы должны думать как пользователи, а не как дизайнеры.
00:14:26Верно?
00:14:27Потому что у каждого пользователя есть свои потребности.
00:14:29Можно пройтись, например, по плану помещения здесь.
00:14:33По сути, я представляю себя участником, который идет на регистрацию,
00:14:39идет к...
00:14:41смотрит на указатели, QR-код и всё остальное.
00:14:46По сути, всё должно быть связано, чтобы вы не заблудились
00:14:50и знали, как найти свои комнаты и всё остальное.
00:14:55А настоящая работа заключается в обработке исключений.
00:15:00Например... о, у меня есть... да.
00:15:03Например, происходит обновление расписания, верно?
00:15:09И когда мы создавали эту штуку, в ней не было кнопки редактирования.
00:15:13И вот однажды утром выясняется: эй, это расписание нужно обновить.
00:15:19А этих кнопок редактирования у нас нет.
00:15:21Я мог просто попросить Девина: эй, можешь добавить мне кнопку правки?
00:15:25И он это сделал.
00:15:26Так что теперь мы можем всё изменить, выгрузить в PNG и заново вывести на экран,
00:15:32что довольно удобно, правда?
00:15:34И с этими исключениями... раньше это было невозможно, когда все приходилось делать вручную.
00:15:41Но теперь стало намного проще.
00:15:43Главный вывод здесь в том, что для решения проблемы масштаба нужно мыслить локально.
00:15:51Думать о самых мелких деталях.
00:15:53Предусмотреть всё, что может пойти не так, и попытаться решить это заранее.
00:15:59И еще, прямо сейчас вы можете автоматизировать практически всё.
00:16:04И в данный момент наличие проблемы будет вам только на руку,
00:16:11потому что это поможет выпустить лучший продукт и делать всё качественно.
00:16:18И, пожалуй, это всё, чем я хотел поделиться.
00:16:20Надеюсь, моё выступление было для вас полезным.
00:16:23Да, на этом всё.
00:16:26Спасибо, ребята.
00:16:29Большое спасибо.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기