00:00:00В старом процессе разработки был этап, которого больше не существует.
00:00:03И большинство команд еще не придумали, чем его заменить, поэтому они продолжают
00:00:06действовать по старинке, на мышечной памяти.
00:00:08На этой неделе Дженни Вен опубликовала интервью в подкасте Ленни.
00:00:11Она возглавляет отдел дизайна Claude в Anthropic, а до этого была директором по дизайну
00:00:16в Figma.
00:00:17В этом выпуске она рассказала о том, что прежний процесс дизайна мертв и что пришло
00:00:21ему на смену.
00:00:22Мы разберем, что изменилось, почему, а затем подробно рассмотрим тот самый процесс,
00:00:26который стал новым стандартом.
00:00:27Чтобы понять, что пришло на смену, нужно понять, зачем старый процесс вообще существовал.
00:00:31Раньше сначала определялись требования, затем дизайнер брал их в Figma
00:00:35и создавал макет того, как должно выглядеть приложение.
00:00:38Файл Figma был связующим документом между тем, что хотелось получить, и тем, что строилось.
00:00:43Затем фронтенд-разработчик переводил этот файл в код.
00:00:46Тем временем бэкенд-разработчик строил свою часть параллельно, так как спецификация API
00:00:51определялась заранее, чтобы обе стороны могли двигаться одновременно и всё сошлось в конце.
00:00:55Дженни описывает это как процесс, к которому дизайнеры относились как к ритуалу.
00:00:58Это был стандарт для всей индустрии.
00:01:00Многие, объясняя причины перемен, упускают суть того, почему всё было именно так.
00:01:05Саймон Уиллисон, разработчик и автор одного из самых читаемых технических блогов,
00:01:09описал январское выступление Дженни в Берлине и добавил важную мысль, которую она подразумевала,
00:01:14но не высказала прямо.
00:01:16Использование ИИ при разработке значительно снижает цену создания «не того» продукта.
00:01:19До ИИ неверное направление означало месяцы потраченного впустую времени инженеров.
00:01:23Маленькая ошибка во фронтенде оборачивалась десятикратным объемом работ при реализации.
00:01:27Поэтому команды оправдывали каждый шаг.
00:01:28Исследования, портреты пользователей, CJM, вайрфреймы, спецификации.
00:01:33Всё это было защитой от масштабного строительства ошибочного решения.
00:01:36Так что же на самом деле изменилось в процессе?
00:01:38Первой изменилась скорость разработки.
00:01:40И она изменилась быстрее, чем большинство успело осознать.
00:01:42Дженни говорит, что несколько лет назад 60–70% времени дизайнера уходило на макеты и прототипы.
00:01:48Сейчас это 30–40%.
00:01:49Она не принимала волевого решения работать иначе.
00:01:51Просто инженеры вокруг нее начали запускать по несколько ИИ-агентов параллельно,
00:01:55и внезапно узким местом перестала быть разработка.
00:01:58Инженерия изменилась первой, и дизайну пришлось подстраиваться.
00:02:00Сроки планирования видения тоже изменились.
00:02:02Раньше дизайн создавал видение на 2–5 лет вперед.
00:02:04Сейчас технологии развиваются так быстро, что реальный горизонт планирования — 3–6 месяцев.
00:02:09И теперь это не обязательно презентация в слайдах.
00:02:11Это работающий прототип, который задает направление.
00:02:13То же самое произошло с этапом «перевода» дизайна в код.
00:02:15Когда агент может взять документ с требованиями и собрать рабочий интерфейс,
00:02:19слой перевода исчезает.
00:02:20Агент сам пишет код.
00:02:22Нет нужды переводить файл Figma, потому что файла Figma может вообще не быть.
00:02:25Кстати, если вам нравится наш контент, нажмите кнопку «хайп»,
00:02:29это помогает нам создавать больше таких видео и охватывать больше людей.
00:02:33Когда мы берем заказы клиентов, это именно тот сдвиг, который нам пришлось совершить.
00:02:36Процесс дизайна изменился, но то, что осталось неизменным — это требования.
00:02:40Плохие требования губят всю разработку.
00:02:42И большинство команд сразу перескакивают к спецификации.
00:02:44Это неверный порядок действий.
00:02:45При создании прототипа вам не нужен технологический стек или спецификация API.
00:02:48Вам нужно знать достаточно, чтобы создать нечто, что выглядит и ощущается как реальный продукт,
00:02:52чтобы показать его кому-то и получить четкое «да» или «нет».
00:02:56Поэтому, прежде чем браться за прототип, начните с действующих лиц (акторов).
00:02:58Актор — это человек, который взаимодействует с системой.
00:03:01Конкретный человек с конкретной целью.
00:03:03От того, кто пользуется системой, зависит то, что она должна делать.
00:03:06Если у вас есть тот, кто отправляет контент, и тот, кто его одобряет —
00:03:10это два разных интерфейса с двумя разными главными экранами.
00:03:12Затем посмотрите, где разделяются представления.
00:03:13В большинстве продуктов наступает момент, когда два актора заходят по одному URL,
00:03:18но видят совершенно разные вещи.
00:03:19Админ видит панель управления.
00:03:21Обычный пользователь видит свой личный кабинет.
00:03:22И последнее — ограничения.
00:03:24Не говорите агенту, какие инструменты использовать.
00:03:26Скажите ему, чего он не может делать и сколько это не может стоить.
00:03:28Это также значительно упростит технические решения в будущем.
00:03:32Мы внедрили все эти правила в промпт для создания PRD (документа требований),
00:03:37который, по сути, берет у вас интервью, выступая в роли интервьюера по правилам,
00:03:42задавая вам множество уточняющих вопросов.
00:03:44В итоге вы получаете Markdown-файл с PRD, который будет использоваться
00:03:48на последующих этапах процесса.
00:03:49Этот PRD-файл — фундамент для всего остального.
00:03:52Следующий шаг — превращение его в структуру для фронтенда.
00:03:55Для этого мы используем «слой-промпт», который велит агенту изучить PRD
00:04:00(который, напомню, не перегружен техническими деталями) и создать две вещи.
00:04:04Он просит составить список страниц и модальных окон для прототипа,
00:04:08а затем описать пользовательские сценарии (user flows).
00:04:09Очевидно, что страницы и окна важны для структуры, чтобы всё, что агенту
00:04:14нужно реализовать во фронтенде, было спланировано заранее.
00:04:17Мы постоянно говорим о том, как важно планировать до начала действий,
00:04:21особенно для контекстного окна агента, так что не будем углубляться.
00:04:24Но в пользовательских сценариях важно определить действия каждого актора.
00:04:28Поскольку мы фокусируемся на самих акторах, а не на фичах, важно прописать
00:04:32сценарии, чтобы агент мог реализовать правильные состояния взаимодействия
00:04:36и навигацию для полноценного UI-прототипа.
00:04:40В итоге у нас есть два файла, где в architecture.md описаны страницы,
00:04:45модальные окна и те самые сценарии.
00:04:46После этого мы просим его развернуть приложение на Next.js, так как это
00:04:50наш привычный стек — Next.js вместе с Supabase.
00:04:53И вот что у него получилось в итоге.
00:04:55В целом дизайн выглядит отлично, и на то есть конкретная причина.
00:04:58Кстати, ранее не упоминалось, но мы собирали платформу для сообщества
00:05:03с каналами, продуктами и курсами.
00:05:04Там два актора: участник и создатель, при этом у создателя
00:05:08есть все админ-функции, такие как создание канала, добавление продукта
00:05:12или загрузка курса, а также просмотр статистики.
00:05:15На наш взгляд, для первого созданного прототипа дизайн выглядит очень круто.
00:05:19Но UX (пользовательский опыт) не идеален, обычно такой дашборд нам не нужен.
00:05:23И в этом-то и вся суть.
00:05:24Раньше на исправление такого уходили дни, здесь же — минуты.
00:05:27Потому что ИИ может вносить такие изменения очень быстро.
00:05:30А так как бэкенда здесь пока нет, ему не нужно возиться с лишними вещами —
00:05:34это просто прототип фронтенда.
00:05:36Обычно ИИ не делает такие симпатичные сайты и интерфейсы сами по себе.
00:05:40Причина, по которой это выглядит хорошо — использование специального навыка
00:05:44фронтенд-разработки, которым Anthropic поделились в одном из своих блогов.
00:05:46Мы настоятельно рекомендуем использовать его перед реализацией UI.
00:05:50Просто сохраните его как слеш-команду или навык, чтобы ваш агент мог его применить.
00:05:53Теперь, если вы работаете с клиентом, вам достаточно показать этот прототип,
00:05:57который полностью функционален на мок-данных, так как базу данных
00:06:01мы на этом этапе не подключаем.
00:06:02Вы показываете это клиенту, получаете одобрение (или правки) и затем
00:06:06продолжаете разработку.
00:06:08Списки задач — одна из причин, почему мы теперь можем просить агентов
00:06:12создавать полностью рабочие прототипы.
00:06:14Это возможно благодаря спискам задач, их сохранению и четкой структуре.
00:06:17Всё упорядочено.
00:06:18Вот почему файл architecture.md так важен: он позволяет агенту
00:06:23составить идеально оптимизированный список задач, чтобы не галлюцинировать.
00:06:28После этого мы переходим к реализации бэкенда.
00:06:30Обычно есть два варианта пути.
00:06:32Можно оставить фронтенд на Next.js и реализовать бэкенд
00:06:36как отдельный сервис на Python.
00:06:39Но это зависит от типа приложения, над которым вы работаете.
00:06:42Для большинства ваших проектов Next.js будет вполне достаточно.
00:06:46Отдельный Python-бэкенд нужен, если требуются специфические библиотеки,
00:06:50которых нет в экосистеме Next.js, или если нужна серьезная оркестрация
00:06:55фоновых задач для оптимизации функций сайта.
00:06:57В таком случае может понадобиться отдельный бэкенд.
00:06:59В противном случае бэкенда на Next.js вам хватит за глаза.
00:07:03Прежде чем трогать бэкенд, нужно понять, что фронтенду от него нужно.
00:07:07Мы попросили агента изучить код фронтенда, PRD и файл архитектуры,
00:07:11чтобы написать спецификацию API.
00:07:12Затем мы поручили ему на основе этих документов создать полную схему Supabase,
00:07:17так как мы используем связку Supabase и Next.js.
00:07:20Ему нужно создать схемы, в которых будут храниться данные приложения.
00:07:25Обычно, если спросить агента, он предложит вам пойти, взять API-ключи
00:07:28от базы данных и вручную вставлять SQL-запросы для создания таблиц.
00:07:33Но вместо этого стоит использовать Supabase MCP.
00:07:36Всегда старайтесь использовать MCP для сервиса, с которым работаете,
00:07:40потому что это автоматизирует кучу рутины.
00:07:41Например, нам даже не пришлось заглядывать в панель управления проектом.
00:07:43Он сам создал проект, выполнил запросы для схемы и автоматически
00:07:48запустил миграции.
00:07:49Нам практически ничего не пришлось делать.
00:07:51После настройки базы данных вы подключаете к ней фронтенд.
00:07:55И тут есть важное различие.
00:07:57Вам не нужно отдельно соединять бэкенд с базой, так как он уже
00:08:00интегрирован во фронтенд.
00:08:01Фронтенд напрямую общается с базой данных, что упрощает интеграцию
00:08:06и общую сложность системы.
00:08:07Для этого видео мы запартнерились с Warp, они недавно выпустили OZ —
00:08:11платформу для оркестрации различных облачных агентов.
00:08:14Эти облачные агенты удобны для задач, которые вы хотите делегировать,
00:08:19зная, что агент справится самостоятельно.
00:08:21До этого момента агент подключил фронтенд к базе данных,
00:08:26и приложение уже в целом работало.
00:08:27Но чтобы добавить такие вещи, как оплата, уведомления, лимиты запросов или аналитика,
00:08:32нам нужен выделенный слой API на бэкенде.
00:08:37Для этого мы создали среду в OZ и запустили облачного агента, поручив ему
00:08:41создать этот выделенный слой бэкенда.
00:08:43Примерно через 15 минут задача была выполнена, и всё было готово.
00:08:47Чтобы сделать проект полностью функциональным и начать принимать пользователей,
00:08:51оставалось только добавить Google-авторизацию, Stripe и исправить мелочи.
00:08:56Теперь вы видели весь процесс, и промпты были прямо на экране.
00:09:00Но если вы хотите получить все эти промпты в виде пошагового воркфлоу,
00:09:04мы выкладываем их в AI Labs Pro.
00:09:06Для тех, кто не знает — это наше сообщество с готовыми шаблонами,
00:09:10которые можно сразу внедрять в свои проекты.
00:09:14Если вам ценно то, что мы делаем, и вы хотите поддержать канал,
00:09:18это лучший способ.
00:09:19Ссылка в описании.
00:09:20На этом видео подходит к концу.
00:09:22Если хотите поддержать канал и помочь нам выпускать такие ролики дальше,
00:09:26вы можете сделать это через кнопку «Суперспасибо» внизу.
00:09:28Как всегда, спасибо за просмотр, и увидимся в следующем видео!