Разборы · Статья: · Видео: · 1:19:06
Как дизайнер проектирует вместе с ИИ-агентами: живой рабочий процесс Ridd
Дизайнер Ridd (Dive Club) в прямом эфире показывает реальный процесс работы с ИИ-агентами: параллельные ветки кода, исследования в Paper, плейграунды и пинг-понг моделей вместо макетов в Figma.
Смотреть на YouTube I'm (finally) showing how I design with AI
Dive Club (Ridd + Kyle Zantos) · 1:19:06
Главы видео — нажми, чтобы перейти к моменту 9
- 0:00 Расклад по инструментам Conductor как harness и work trees, Paper как визуальное расширение Claude Code, продукт Inflight для петли обратной связи.
- 3:51 Первая задача: грид-карточка голосом Скриншот → новый work tree → голосовой бриф через Super Whisper → просьба сделать 10 концептов в Paper.
- 10:00 Dialkit: слайдеры для любого параметра Tool Джоша Пакетта: генерирует ползунки для отступов, easing, шейдеров — крутишь, copy, paste.
- 22:41 Плейграунд и «one-two punch» /playground/grid с собственной версионной историей; Paper и сборка в коде идут параллельно.
- 27:45 Agentation и каскад Claude MD Рефайнинг UI описанием на естественном языке; design-system.md, подгружаемый лениво из claude.md/agents.md.
- 37:25 Философия: нет лояльности инструментам Инструменты протухают за ~5 месяцев; долговечен навык работы с ИИ. Superpowers, compound engineering, skill distillery.
- 47:40 «Скажи ИИ, что ты не инженер» и HTML вместо MD Кейс «Ver»: не дай выглядеть идиотом перед инженером; человекочитаемые доки и аудиты как HTML-файлы.
- 50:24 Цикл ревью плана с confidence score Opus пишет план → Codex ревьюит и оценивает 1–100 → пинг-понг до 80–90.
- 1:07:45 Inflight: замкнуть петлю обратной связи Поделиться плейграундом с командой, собрать пространственный фидбэк, превратить в next steps; Paper Chrome-снапшот без MCP.
Коротко
Дизайнер Ridd в прямом эфире показывает свой реальный (и хаотичный) процесс с ИИ-агентами: десятки параллельных веток кода, исследования в Paper, плейграунды и пинг-понг моделей вместо аккуратных макетов в Figma. Главный вывод — не про инструменты (они протухают каждые ~5 месяцев), а про то, КАК работать с ИИ: давать контекст, общаться как с человеком и идти вширь, прежде чем нырять в код.
Выжимка голосом
Самое ценное из разбора — за пару минут
Показать текст выжимки Скрыть текст выжимки
Озвучено синтезом речи · голос alena
Объясни проще
Суть без жаргона
Простыми словами
Вместо рисования макетов в Figma дизайнер запускает сразу несколько ИИ-агентов в отдельных копиях проекта: один генерит 10 вариантов карточки в редакторе Paper, другой собирает рабочую версию в коде, третий обдумывает план фичи. Задания он наговаривает голосом (так даёт больше контекста), тонкую настройку делает словами, а не руками в CSS. Самое важное: конкретные инструменты через полгода будут другими — долговечен только навык работы с ИИ.
Как ребёнку
У тебя не один помощник, а сразу пять, и каждый делает свою часть рисунка. Ты не ждёшь — говоришь каждому, что хочешь, своими словами, потом смотришь, у кого что вышло, и выбираешь лучшее. И не учишь, как их зовут, потому что завтра придут новые.
Аналогия — «это как…»
Это как шеф-повар на большой кухне: он не стоит у одной плиты и не ждёт, пока сварится суп. Он раздаёт задания нескольким поварам сразу, обходит станции, пробует, говорит «здесь поострее, тут поменьше соли» — и так несколько блюд готовятся параллельно. Кастрюли и ножи могут поменяться, но умение управлять кухней остаётся.
Зачем это мне
ИИ-инструменты для дизайна и кода меняются буквально каждый месяц, и легко утонуть, гоняясь за каждым новым. Это видео показывает, на что реально стоит тратить внимание: не на конкретное приложение, а на устойчивый навык работы с агентами. Для любого, кто делает продукты — дизайнер, фронтендер или основатель — это карта того, как выглядит работа уже сейчас.
Для тех, кто в теме
Рабочий поток построен на git work trees (Conductor как harness поверх своих подписок Claude/Codex) как «mental lanes» — никакого ожидания loading states, всё параллельно. Ключевые паттерны: «one-two punch» (визуальные исследования в Paper + сборка плейграунда в коде одновременно); /playground/<фича> с собственной версионной историей как переиспользуемый источник правды; рефайнинг через agentation естественным языком вместо ручного CSS; цикл ревью плана Opus→markdown→Codex (GPT 5.5) с confidence score 1–100 до выхода на 80–90; каскад Claude MD с lazy-load design-system.md ради экономии контекста; Paper как визуальное расширение Claude Code, где canvas = DOM и Chrome-снапшот любого элемента обратно в Paper работает без MCP. Разделение моделей: Opus — план-мод и креативный thought partner, GPT 5.5 — исполнение и технический разбор. Мета-тезис: zero tool loyalty, инвестируй в процесс, а не в стек.
Оценка видео
Чем выше — тем больше пользы на минуту
средняя из 5
Снято 15.06.2026: Opus 4.8 (вышел накануне), GPT 5.5, свежие фичи Conductor. Авторы сами говорят, что детали протухнут за ~5 месяцев.
Очень плотно по приёмам, реальный процесс без причёсывания. Минус балла — формат лайва: технические заминки и скачки внимания местами размывают сигнал.
Целостная картина «дизайнер владеет фронтендом через агентов» + нестандартные приёмы (плейграунд как версионная история, confidence-score пинг-понг моделей).
Почти каждый приём повторим сегодня. Часть требует платных подписок и комфорта с терминалом, но философия и большинство тактик переносимы.
Не теория, а демонстрация собственной работы вживую, с провалами и оговорками «это не золотой стандарт». Честно помечают, что не спонсированы.
Кому будет полезно
Чем выше оценка — тем больше пользы для профессии. Разверни — почему.
Для продуктовых дизайнеров 5 /5
Прямое попадание: весь воркшоп — реальный процесс продуктового дизайнера с ИИ, от визуальных исследований в Paper до сборки интерактивных плейграундов, рефайнинга UI словами и Dialkit-ползунков.
Для UX/UI-дизайнеров 5 /5
Показано, как доводить интерфейс до ума прямо в коде без Figma: «one-two punch» (Paper + плейграунд), Paper Chrome-снапшот живого DOM, отказ от синхронизации дизайн-файлов с продакшеном.
Для дизайн-инженеров 5 /5
Это и есть тема разбора — дизайнер «владеет фронтендом»: параллельные git work trees (Conductor), цикл ревью плана Opus↔Codex с confidence score, design-system.md по требованию.
Для фронтенд-разработчиков 4 /5
Полезны конкретные приёмы оркестрации агентов: work trees вместо веток, чтобы агенты не мешали друг другу, run-script, плагины упрощения PR, петля ревью между двумя моделями.
Для продакт-менеджеров 3 /5
Ценна петля обратной связи Inflight (deploy-превью → сбор фидбэка → next steps) и идея «идти вширь» плейграундами вместо одного варианта, но технические детали избыточны.
Для фаундеров 3 /5
Показано, как соло- или малой командой быстро прототипировать и шипить продукт силами ИИ-агентов; философия «no tool loyalty» полезна стратегически.
Для моушн-дизайнеров 3 /5
Точечно полезны приёмы для анимаций: SVG-анимации через Quiver в Paper, Dialkit для подстройки easing, скриншоты кадров видео для отладки interaction.
Инсайты
Нажми, чтобы раскрыть — то, что меняет взгляд на тему
01 «Я не думаю, пока не на что смотреть» 19:43
Раньше дизайнер начинал с чистого холста и набросков. Теперь он сначала просит ИИ сгенерировать 10 вариантов и только потом думает — потому что почти всегда замечает решение, которое сам бы не запланировал. Генерация стала не финалом, а топливом для мышления.
02 Рефайнинг переехал из дизайн-файлов в код 26:17
Тонкую доводку (отступы, блюр, тайминги анимаций) Ridd делает уже не в макетах, а прямо в коде — описывая изменения словами через agentation. Код стал средой исследования, а не только реализации.
03 Дизайн-файлы отстают от прода — и это нормально 1:15:41
Он перестал держать дизайн в синхроне с продакшеном, хотя раньше это сводило его с ума. Теперь источник истины — код; нужно поисследовать — делает Paper-снапшот текущего прод-элемента и риффит поверх него.
04 Главная ловушка кода — слишком ранний execution mode 1:07:45
Прыгая сразу в код, легко получить единственный превью на реальной поверхности продукта, где трудно показать альтернативы — и из-за давления «показать что-то в коде» команда пропускает фазу «идём вширь». Плейграунд с десятком версий по одной ссылке возвращает этот пропущенный этап.
05 Никакой лояльности инструментам — инвестируй в процесс 37:25
В январе у этих же людей был совсем другой стек, и почти ничего не осталось. Конкретные инструменты протухают каждые ~5 месяцев; долговечен только навык «как работать с ИИ»: дать контекст, общаться как с человеком, идти вширь до кода. «Stay water, be adaptable.»
Ключевые цитаты
Сильные фразы из видео — нажми тайм-код, чтобы услышать в оригинале
«Я больше не думаю, пока у меня нет на что посмотреть. Смущает ли меня это? Да, немного. Но это чертовски эффективно — я всегда замечаю то, чего сам бы не запланировал.»
«Ни у кого из нас сейчас нет лояльности к инструментам. У кого лучший инструмент прямо сейчас — тем и пользуемся.»
«Stay water, be adaptable — но начни выстраивать свой собственный процесс и свои флоу.»
«Твоя задача номер один — построить мою штуку, а задача номер два — не дать мне выглядеть идиотом перед тобой.»
«Вся эта информация, скорее всего, станет неактуальной примерно через 5 месяцев.»
«Ловушка прыжка в код в том, что мы слишком быстро уходим в режим исполнения.»
«Говори с ИИ как с человеком, с которым ты пытаешься работать: скажи зачем, скажи, чего хочешь добиться.»
«Можно попасть в безумные места, вообще не понимая, что происходит под капотом.»
Логика повествования
Как устроена аргументация видео — пройди по шагам
-
Предпосылка Инструменты вторичны 0:00
Почти всё применимо к любому harness; новый Cursor во многом копирует Conductor. Важен не инструмент, а как ты с ним работаешь.
-
Аргумент Не ждать loading states — работать параллельно 1:32
Каждая задача — отдельный work tree (клон кода). Несколько «mental lanes» идут одновременно, агент закончил — звучит «choo choo».
-
Аргумент Сначала смотреть, потом думать 22:41
10 концептов карточки в Paper + плейграунд в коде параллельно («one-two punch»). Решения находятся в вариантах, которые сам бы не придумал.
-
Пример Пример: грид-карточка 41:07
Из 10 вариантов выбраны два, собраны в /playground/grid, доведены agentation'ом и через Dialkit, проверены в контексте (анимация, которая статично красива, в движении не работает).
-
Аргумент Ревью плана пинг-понгом моделей 50:24
Opus пишет план → markdown → Codex (GPT 5.5) ревьюит и даёт confidence score 1–100 → итерации, пока не дойдёт до 80–90 (старт ~60).
-
Аргумент Замкнуть петлю обратной связи 1:10:14
Inflight-ссылка на плейграунд с видеоконтекстом и вопросами уходит команде; фидбэк превращается в next steps и возвращается в тот же work tree.
-
Вывод Долговечно только КАК ты работаешь с ИИ 37:25
Инструменты сменятся за полгода; устойчивый актив — навык контекстного общения с агентом и привычка идти вширь прежде кода. «No tool loyalty.»
Подробный разбор
Полный разбор — разверни, если нужно глубже
Развернуть подробный разбор Свернуть подробный разбор
О чём это
Это запись живого воркшопа Dive Club, где дизайнер Ridd (вместе с Kyle Zantos) впервые показывает свой реальный рабочий процесс дизайна с ИИ-агентами — без репетиций, со всеми заминками и оговорками «это не золотой стандарт».
Вместо аккуратных макетов в Figma — десятки параллельных веток кода, визуальные исследования в редакторе Paper, плейграунды с историей версий и пинг-понг моделей (Opus пишет план, Codex его ревьюит). Дизайнер «владеет фронтендом»: наговаривает задания голосом, доводит детали словами, делится кликабельными прототипами и собирает обратную связь — всё это пачками и параллельно.
Главный посыл авторы повторяют сами: конкретные инструменты неважны и сменятся за полгода. Долговечен лишь навык — как ты работаешь с ИИ.
План внедрения
С чего начать — отмечай шаги, прогресс сохранится
Выполнено 0 из 9
Проверь себя
Ответь на вопросы, чтобы материал закрепился
-
1. Что Ridd называет своим главным долговечным выводом, а не сменяемой деталью?
-
2. Зачем Ridd использует git work trees вместо нескольких веток на одной кодовой базе?
-
3. Что такое «one-two punch» в его процессе?
-
4. Как устроен цикл ревью плана у Ridd?
-
5. Зачем добавлять в правила «я не инженер» и имя ревьюера (кейс «Ver»)?
-
6. Что делает Dialkit?
-
7. Почему Paper Chrome-расширение работает без MCP?
-
8. Что такое agentation в его рабочем потоке?
-
9. Почему design-system.md выносят в отдельный файл и грузят лениво?
-
10. Зачем Ridd просит ИИ отметить пункты «review theater»?
-
11. Почему дизайн-файлы у Ridd отстают от прода — и его это устраивает?
-
12. Зачем использовать голосовую диктовку вместо печати при работе с агентом?
Словарь терминов
Понять незнакомое простым языком
Показать 17 терминов Свернуть словарь
- Harness (обвязка)
- Программа-оболочка, через которую ты запускаешь ИИ-агентов и управляешь ими. Conductor и Cursor — примеры; они работают поверх твоих подписок Claude/Codex.
- Conductor
- Harness, который автоматически создаёт параллельные git work trees, держит вкладки-агенты, запускает localhost одной командой (run script), даёт кнопки PR/merge/Vercel preview. Звук готового агента — «choo choo».
- Work tree (рабочее дерево)
- Отдельный клон твоего кода в git. Несколько work trees позволяют агентам работать параллельно, не мешая друг другу, в отличие от веток на одной базе. Ridd зовёт их «mental lanes».
- Paper (paper.design)
- Редактор в духе Figma, где холст — это сам DOM (HTML/CSS). Альфа. Ridd использует его как визуальное расширение Claude Code; Chrome-расширение снимает снапшот любого элемента живой страницы обратно в Paper без MCP.
- Inflight
- Продукт Ridd для петли обратной связи: шаринг ссылок-прототипов, вопросы с привязкой к элементам DOM, фидбэк превращается в next steps прямо в коде.
- Dialkit
- Инструмент Джоша Пакетта: генерирует ползунки-параметры для любого элемента (отступы, easing-кривые, контролы шейдеров). Крутишь, пока не станет красиво, нажимаешь copy и вставляешь значения.
- Agentation
- Доводка интерфейса описанием изменений на естественном языке («сделай ховер 300 мс») вместо ручного редактирования CSS.
- Playground (плейграунд)
- Маршрут /playground/<фича> в коде с собственной историей версий — личная песочница для концептов, к которой можно возвращаться и переиспользовать идеи. Прячется за приватным маршрутом.
- Confidence score (оценка уверенности)
- Число 1–100, которым модель-ревьюер (Codex/GPT 5.5) оценивает, насколько план сработает. Гоняют план туда-обратно, пока счёт не дойдёт до 80–90.
- design-system.md
- Отдельный файл с дизайн-системой (токены, правила), на который ссылаются из claude.md/agents.md. Грузится лениво — только в UI-задачах, чтобы не съедать контекст.
- Claude MD каскад
- Набор файлов claude.md/agents.md на разных уровнях кодовой базы (например, на уровне UI-кита), которые автоматически подгружают правила и контекст в зависимости от того, где работает агент.
- MCP (Model Context Protocol)
- Протокол, через который ИИ-инструменты обмениваются контекстом и подключают внешние источники. Paper-снапшот обходится без него, потому что его холст и так является DOM.
- SVG
- Векторный формат графики (Scalable Vector Graphics), описывающий изображение кодом. Его легко генерировать (Quiver в Paper) и анимировать через ИИ.
- Quiver AI
- Генератор SVG прямо внутри Paper. Позволяет получать и затем анимировать векторную графику, не разбираясь в её устройстве.
- Voice dictation (голосовая диктовка)
- Ввод заданий голосом (Whisper Flow, Super Whisper, Monologue, Aqua). Наговаривая, человек даёт агенту больше контекста, чем печатая.
- Choo choos
- Звук паровозика, которым Conductor сигналит, что агент закончил задачу. При многих параллельных агентах их слышно постоянно.
- Review theater
- Правки в код-ревью ради галочки, без реальной пользы. Ridd просит ИИ отметить такие пункты, чтобы делать только значимое.
Критический взгляд
Объективно: с какими тезисами можно поспорить и что преувеличено
Демонстрируемый процесс подаётся как универсальный, хотя завязан на узкий стек: Conductor, Paper (alpha), Dialkit, Agentation, Superpowers, Whisper Flow
Сам Conductor бесплатен, но весь поток упирается в платные подписки моделей (Claude Max/Pro, GPT), Paper Pro — ~$20/мес, а часть инструментов в альфе. Для человека без этих подписок и без комфорта в терминале «применить к чему угодно» не выйдет — порог входа выше, чем заявлено.
Цикл ревью плана Opus↔Codex с «confidence score 1–100», который догоняют до «высоких 80-х или 90»
Автор тут же сам признаёт, что оценка «maybe complete nonsense». Число от языковой модели не калибровано: 90 не означает 90% вероятности успеха, а сам факт «довести до 90» провоцирует подгонять диалог под красивую цифру, а не под реальную надёжность плана.
«Дизайн-файлы отстают от прода, и это ок»; рефайнинг деталей делается прямо в коде, а не в дизайн-файле
Для соло-дизайнера на своём продукте это работает, но как общий принцип спорно: без источника правды в дизайне теряется онбординг новых людей, консистентность между фичами и возможность спорить о макете до реализации. Подход переносит «дизайн-документацию» в git-историю, которую дизайнеры обычно не читают.
«Designer owns the frontend» — дизайнер сам мерджит PR, а агент должен «не позорить меня перед инженером Ver»
Промпт «не дай мне выглядеть идиотом перед ревьюером» оптимизирует видимость кода, а не его качество. Риск в том, что технический долг (производительность, доступность, граничные случаи) маскируется так, чтобы пройти ревью, а не чтобы исчезнуть — нагрузка перекладывается на инженера позже.
«Am I burning the Amazon? Maybe. But it works for me» — массовый параллельный запуск агентов и правка CSS через Agentation вместо ручного изменения строки
Автор честно признаёт расточительность, и это плюс. Но как транслируемая практика «не жди loading states, запускай всё параллельно» нормализует расход токенов и вычислений на тривиальные правки (отступ в 80px), что при масштабировании на команду превращается в ощутимые деньги и энергопотребление.
Ридд весь воркшоп проектирует в Inflight — собственном продукте, который в конце прямо предлагают «go sign up»
Авторы честно оговаривают «not sponsored», и это засчитывается. Но конфликт интересов остаётся: бесшовность потока во многом обеспечена тем, что демонстрируется свой инструмент в своей кодовой базе с уже настроенными MCP/share — у зрителя со сторонним стеком «гладкость» будет ниже.
Взгляни иначе
Новый угол, смежные области и потенциал на стыке — пища для размышлений
Хаос — это не баг процесса, а его себестоимость
Воркшоп показывает шесть параллельных «поездов» и постоянное «я не знаю, где это, Claude мне сделал». Стоит перевернуть рамку: скорость куплена ценой того, что автор больше не понимает собственную систему. Вопрос не «как успеть больше параллельно», а «сколько непонимания своего продукта я готов накопить».
Не «дизайн в коде», а смерть промежуточного артефакта
Главный сдвиг здесь не инструмент, а исчезновение макета как отдельной сущности: единственная правда — работающий прототип. Это та же траектория, что прошли спецификации в разработке (от ТЗ к тестам как документации). Дизайн повторяет путь, где «описание» и «реализация» схлопываются в один объект.
Плейграунд-паттерн — это A/B-тест, перенесённый в стадию идеи
Ридд шлёт ссылку с 3 живыми версиями и собирает голоса до релиза. По сути это продуктовая аналитика, сдвинутая на этап эскиза: вместо «выкатили — измерили» получается «показали кликабельное — измерили намерение». Тот же приём применим в копирайтинге, онбординге, ценообразовании — везде, где раньше спорили на словах.
No tool loyalty как навык, а не как лозунг
Тезис «инструменты протухают за 5 месяцев» обычно звучит как оправдание. Но из него следует конкретный мета-навык: учиться не инструменту, а скорости его замены — строить свой процесс из переносимых кусков (промпт-паттерны, skills, ревью-циклы), которые переживут смену харнесса. Ценность смещается с владения инструментом на скорость перепрошивки.
На стыке: дизайнер как «постановщик задач для роя», а не автор пикселей
Если соединить параллельных агентов, голосовой ввод и плейграунды, профессия дрейфует к оркестровке: ценится не рука, а умение формулировать намерение и быстро отбраковывать варианты. Это сближает дизайн с режиссурой и с ролью продюсера — навыки вкуса и редактуры становятся дороже навыков производства.
Похожие разборы
ИИ во фронтенде: что реально работает — панель Frontend Nation 2026
Написание кода схлопнулось до 5–10% времени, а ценность сместилась в дизайн, QA, постановку задач и контроль над агентами. Главный сдвиг — из «ремесленника отдельных строк кода» в «оператора фабрики», где код производят агенты, а человек строит вокруг них ограничения и контроль качества.
Читать → РазборХорошие части Claude Code: что Theo хочет «украсть» у Anthropic для всех CLI-агентов
Theo (t3.gg), который открыто недолюбливает Anthropic, разбирает фичи Claude Code, делающие его лучшим агентным CLI прямо сейчас. Поворот в том, что он показывает это не ради рекламы, а чтобы остальные harness'ы (Codex, pi, opencode, Cursor) скопировали эти паттерны.
Читать → РазборВайбкодинг против реальности: как инженер собрал микро-бизнес на ИИ и почему «навык» теперь легко подделать
Внешне простая задача «кропнуть фотку» под капотом оборачивается десятком нейронок, ручным контролем рефандов и войной за токены, а сам сервис может в одночасье потерять выручку из-за апдейта Google. Главный вывод: ИИ обесценил внешние атрибуты навыка — код, тесты, красивые PR теперь генерируются за минуту, а ценным остаётся понимание, которое нельзя сымитировать.
Читать → РазборПочему Claude считают лучшим: характер вместо правил, философия как стратегия
Anthropic сделала ставку не на параметры и бенчмарки, а на философию: Claude обучают не списку запретов, а «характеру», который сам решает, как вести себя. Эта же принципиальность стала бизнес-преимуществом — от лидерства в кодинге до отказа прогнуться перед Пентагоном.
Читать →