Дизайн со скоростью прилагательных — Пол Бакауус (Paul Bakaus, Renaissance Geek, Inc.)

AAI Engineer
컴퓨터/소프트웨어창업/스타트업사진/예술

스크립트

00:00:00Давайте начнем. Всем привет, спасибо, что пришли. Меня зовут Пол, и я постараюсь
00:00:21спасти вас от послеобеденной вялости. Давайте посмотрим, получится ли у нас. Итак, этот доклад, это вступление
00:00:29к этому докладу покажется куда более осмысленным, если вы знаете, что такое impeccable, но если
00:00:35вы не знаете, что это такое, то это инструмент дизайна, который делает из вашего помощника по коду
00:00:39лучшего дизайнера, и, надеемся, из вас — лучшего дизайнера, и вы можете попробовать его в деле. Он работает
00:00:43со всеми помощниками: Cloud Code, GitHub Copilot, Cursor, Codex и т. д. И этот доклад на самом деле
00:00:51посвящен моему подходу к созданию этого инструмента, а не самому инструменту. Но давайте начнем
00:00:59с типичного веб-сайта. Это намеренно очень простой сайт, и
00:01:05я хочу показать его вам для контекста того, что я продемонстрирую дальше. Ну, знаете, это
00:01:11нормальный сайт. Ничего особенного. Довольно блеклый, но на нем хотя бы есть какой-то цвет.
00:01:19А теперь вот команда: сделать его ярче, сделать раздел с рабочим процессом ярче с помощью impeccable. Так это выглядит с установленным impeccable. Здесь есть и недостатки, это несовершенно. Например, нумерация разделов, которую вы здесь видите, — это типичный признак ИИ-галлюцинаций,
00:01:41которые так любит выдавать GPT. Да и Claude, честно говоря, тоже очень любит это делать.
00:01:48И это иногда просачивается. Так что я бы не назвав это идеальным во всех отношениях, но я считаю, что это лучше, чем было.
00:01:54Многие устанавливают impeccable, пробуют его, а потом спрашивают меня: «Ну, знаешь, может, это просто плацебо? Может, модель и сама по себе достаточно хороша?» Не уверены, работает ли он на самом деле. Что ж, давайте сравним: это абсолютно тот же проект, GPT 5.5 на максимальном уровне настройки, ровно тот же промпт без impeccable.
00:02:16Так что небольшая разница все же есть, но судите сами. Результат до и после заметно отличается, и я собираюсь рассказать, почему так происходит и в чем заключается подход.
00:02:35Итак, проектирование со скоростью прилагательных, и, чтобы сразу снять все вопросы, это не только прилагательные, это еще и глаголы.
00:02:44Но некоторые из них — прилагательные.
00:02:49Прежде всего, роли инженера и дизайнера постепенно стираются. Я видел больше людей, ставших дизайнерами-инженерами, чем когда-либо прежде. Дизайнеры уходят в код, инженеры — в дизайн, и наоборот.
00:03:02Один из лучших отзывов, что я получаю от людей, которые подходят ко мне и говорят: «Знаешь, impeccable дает нам этот общий язык дизайна, на котором теперь может общаться каждый».
00:03:11Но на самом деле эти миры сталкиваются, по моему мнению, и привычный процесс передачи задач сломан. Этот каскадный подход: я начинаю с дизайна, возможно, начинаю с постановки задачи на стороне продакт-менеджера, затем все переходит в дизайн, после чего следует этап передачи и критики, и в конце концов инженер это реализует.
00:03:30Так больше дел не делается. Не знаю как вы, а мне кажется, что в малых и крупных компаниях это рушится очень быстро.
00:03:41И когда дело доходит до непосредственной работы над дизайном, мне кажется, сейчас существует два мира, в которых можно играть.
00:03:48Либо это прямое манипулирование, вроде работы с пикселями, когда вы сидите в Figma и настраиваете отступы, поля или что-то еще, либо вы находитесь в Webflow или другом инструменте, где напрямую правите финальный результат или дизайн.
00:04:04Это все хорошо, но возникает ощущение, что вы отстаете, потому что все остальные используют агентов и сходят с ума по циклам.
00:04:13И тогда вы ударяетесь в другую крайность: просто говорите своему агенту: «Пожалуйста, спроектируй это для меня» или «Построй это».
00:04:18Но мне кажется, по крайней мере, что здесь есть золотая середина, которую мы еще недостаточно исследовали.
00:04:24Каков должен быть точный уровень контроля? Как мы можем вовлечь человека в этот процесс в самый правильный момент?
00:04:32И тут мне вспомнился один очень популярный твит, опубликованный некоторое время назад.
00:04:38Центрирование блока с помощью Opus — да, не лучший способ применения Opus.
00:04:44Но он отражает эту проблему. Возникает вопрос: когда какой инструмент использовать?
00:04:51Какой инструмент для какой задачи подходит?
00:04:56По моему мнению, сейчас для большинства задач прямое манипулирование отступами, полями, интервалами и так далее
00:05:03находится на слишком низком уровне детализации.
00:05:08С другой стороны, если полагаться полностью на агентов, получаются вот такие веб-страницы.
00:05:15Такое можно было получить примерно в 2022 году, я бы сказал.
00:05:17Здесь каждый может указать на типичные паттерны ИИ-шаблонов.
00:05:21Хотя фиолетовые градиенты на самом деле уже в прошлом.
00:05:24Большинство современных передовых моделей больше их не используют.
00:05:28Теперь мы получаем это, и оно просто «носит другой костюм», как выразился бы Claude.
00:05:33Но по сути это все тот же мусор и шаблонщина.
00:05:37Просто движущаяся мишень.
00:05:39Теперь у нас есть то, что я называю бежевым цветом Claude, шрифты instrumental serif и курсив.
00:05:44И это не обязательно плохой дизайн.
00:05:46Просто всё, что выходит из-под пера Claude, выглядит именно так.
00:05:49И когда всё выглядит одинаково, получается нечто вроде алгоритмического Uniqlo, как я это называю.
00:05:55Тоже ничего хорошего.
00:05:57А вот и мое первое спорное мнение на сегодня.
00:06:01Нельзя сделать дизайн с первой попытки.
00:06:04Многие хотят этого и, возможно, со временем к этому придут.
00:06:08Просто я не думаю, что это возможно в данный момент.
00:06:11Может быть, и вообще никогда.
00:06:13Я думаю, чтобы создать что-то действительно великолепное на вид и на ощупь, эффективный дизайн,
00:06:19вам нужно иметь контекстно-богатый продукт, основанный на том, что вы пытаетесь сделать,
00:06:26какова ваша аудитория и что вы пытаетесь построить.
00:06:28Кроме того, это должно быть многошагово.
00:06:31Вам придется дорабатывать свой дизайн.
00:06:33И даже если вы соропренер, а если вы не соропренер,
00:06:38у разных людей могут быть разные мнения.
00:06:40У пользователей есть мнения.
00:06:41Дизайн — это сложно и грязно.
00:06:42Это процесс.
00:06:43И пытаться отмахнуться от этого, просто сказав: «Агент, реши эту проблему за меня»,
00:06:48к сожалению, не решит ваши задачи.
00:06:51Другая проблема заключается в том, что если вы не знаете язык дизайна
00:06:57или если ваши стейкхолдеры его не знают,
00:07:00это начинает сильно раздражать очень быстро.
00:07:02Если вы что-то проектировали, вам знаком такой опыт.
00:07:06И в какой-то момент внутри нарастает чувство: «ммм».
00:07:11А в какой-то момент вы думаете: «ааа».
00:07:16Поэтому на самом деле первый вопрос, который нужно задать: какова эмоциональная территория?
00:07:20Чем это точно не должно казаться?
00:07:22Каков ориентир?
00:07:23Какова аудитория?
00:07:24Все это очень важные вопросы, в которых нужно разобраться.
00:07:27Вы ведь не можете прийти в человеческую дизайн-студию, даже если это лучшая студия в мире,
00:07:33подойти к арт-директору и сказать: «Знаете что?
00:07:36Мне нужен дизайн для моего бренда».
00:07:38И арт-директор кивает.
00:07:39Мол, понял.
00:07:41И уходит.
00:07:42Это не имеет никакого смысла.
00:07:44Очевидно, им нужно выяснить, что именно вы пытаетесь создать
00:07:47и что вы хотите из этого извлечь.
00:07:50Что важно, на этом примере, даже в версии ИИ-мусора образца 2026 года,
00:07:55в быстро набросанном в стиле вайб-кодинга питче, здесь никто ничего не решал.
00:08:00Вы просто сделали это с первого раза.
00:08:02На этой странице никто ничего не определял.
00:08:05Это было просто... ну, может быть, компетентно, но совершенно пусто.
00:08:10Итак, мой тезис, который я здесь выдвигаю и который я пытался реализовать последние пару месяцев,
00:08:17— это инструмент, который дает вам ровно тот объем контроля, который нужен для направления вашего агента в правильное русло,
00:08:23используя прилагательные и глаголы.
00:08:26И я говорю о словах именно такого типа.
00:08:29Я говорю о таких словах, как «сделай это ярче», «сделай это спокойнее».
00:08:32«Дистиллируй это».
00:08:33То есть, по сути, упрощение.
00:08:35«Отполируй это».
00:08:36«Сделай плотнее» или «укрепи это».
00:08:39Укрепи, например, будет означать убедиться, что этот дизайн работает повсеместно.
00:08:44Возможно, производительность плоха на определенных устройствах.
00:08:46Возможно, он не адаптируется под экраны.
00:08:48И это слова, которые мы используем в мире дизайна.
00:08:54И я заметил, когда два человека пытаются выполнить абсолютно ту же задачу,
00:08:58причем один — инженер, который никогда по-настоящему не касался дизайна,
00:09:01а второй — дизайнер,
00:09:03существует разительная разница в получаемом результате на основе используемого языка, даже при применении одной и той же модели и того же инструментария.
00:09:08в полученном результате, основанном на используемом ими языке.
00:09:11Поэтому я пытался облечь этот язык в форму навыка,
00:09:18сжать его в систему, чтобы лучше выражать свои мысли.
00:09:22И так, например, у вас может быть некий базовый уровень здесь,
00:09:27но затем вы делаете его ярче,
00:09:28и агент действительно понимает, что значит «ярче» в вашем контексте.
00:09:32Вы делаете его спокойнее.
00:09:33Он понимает, что это значит.
00:09:34Вы дистиллируете, и он понимает значение.
00:09:36Но тогда — ярче как?
00:09:42Что значит «ярче» в контексте вашего проекта?
00:09:44Это действительно важный вопрос,
00:09:46потому что, как вы могли заметить в начале демонстрации,
00:09:49во вступлении,
00:09:51когда вы просто просите GPT, Claude или кого-то еще сделать это ярче,
00:09:55он совершенно не понимает, что вы имеете в виду.
00:09:57Конечно, у него есть собственное представление о том, что может означать «ярче»,
00:10:01но он сделает всё, что захочет, верно?
00:10:03Он придумает новые цвета.
00:10:05Он придумает новые цвета.
00:10:06Он изобретет новые градиенты.
00:10:07Он... в общем, неважно.
00:10:10Что это на самом деле означает в impeccable: никаких градиентов, никакого стекла, никакого неона,
00:10:17а вместо этого иерархия, масштаб, решительный шрифт,
00:10:20чтобы элементы не нарушали вашу дизайн-систему
00:10:24и должным образом привлекали внимание пользователя.
00:10:29И это реальная фраза из файла, который загружается, когда вы говорите «жирнее» и «безупречно».
00:10:38Покажите кому-нибудь свою работу и скажите: «Эй, я сделал это жирнее».
00:10:42Я сделал это жирнее.
00:10:43Если они вам поверили, вы потерпели неудачу.
00:10:45Так что это то, что мы действительно заставляем агента делать самостоятельно.
00:10:49И тогда агент часто задумывается и думает: «Хм, не знаю».
00:10:54«Кажется, здесь я справился не очень хорошо».
00:10:57Прилагательное — это легкое слово.
00:11:00Легкое слово — это такой немецкий термин, и Мэтт Покок недавно говорил об этом,
00:11:06он тоже создает отличные навыки.
00:11:08Так что эта идея взята из одного из его твитов.
00:11:11Но я действительно считаю, что в этом много смысла.
00:11:15Это слова, которые вы по сути наделяете смыслом, наполняете смыслом,
00:11:21и они что-то значат.
00:11:22Они уже что-то значили для модели,
00:11:24но затем вы переносите это в ту область, которая вам интересна.
00:11:29И правильный уровень абстракции действительно меняется.
00:11:34Пожалуй, на этом уровне невозможно решить ни одной проблемы.
00:11:39Это тоже чрезвычайно важно.
00:11:40Для самого начала все еще есть место.
00:11:43Например, если вам нужна лишь исследовательская работа и нужно просто вывести что-то на экран,
00:11:47или если вам требуется финальная полировка.
00:11:50Я не думаю, что сейчас ИИ достаточно хорош, чтобы заменить людей в последних 5%, 10% или даже 20% работы,
00:11:57чтобы превратить хорошее в великолепное.
00:12:00Но он действительно делает все лучше.
00:12:04Знаете, я создаю инструменты уже более 20 лет.
00:12:07Наверное, я выдаю свой возраст.
00:12:10Но когда бы я ни создавал инструмент, я сначала прорабатываю рабочий процесс.
00:12:13Я думаю о том, каков реальный рабочий процесс целевого пользователя, которому я пытаюсь помочь.
00:12:17А рабочий процесс дизайна нелинеен.
00:12:20Он хаотичен.
00:12:21В нем много разных этапов.
00:12:23В нем задействованы разные люди.
00:12:25И поэтому я разложил каждую часть процесса и подумал:
00:12:28«Каковы точки внедрения на этом пути?»
00:12:31«И как мы можем помочь на этом пути?»
00:12:34И вот вы начинаете с инициализации, с процесса формирования дизайна.
00:12:38Затем переходите к созданию, к итерациям, используя все эти глаголы и прилагательные,
00:12:44а затем к фазе доработки и полировки.
00:12:46И наконец, вы возвращаете это в свою дизайн-систему.
00:12:49Вы проводите техническую и дизайнерскую очистку.
00:12:53А вот пример одной команды, в выпуске которой я был не до конца уверен.
00:12:58Она называется overdrive (форсаж).
00:13:01Я создал эту команду в Impeccable, чтобы попытаться создать что-то совершенно запредельное.
00:13:08И это было отчасти шуткой, пожалуй?
00:13:11Но люди просто без ума от этой штуки.
00:13:15Они ее обожают.
00:13:16И это лишь пример того — то есть, это создано не за один проход.
00:13:20Это реалистичный шейдер горизонта событий, который я создал для своей библиотеки шейдеров Radiant Shaders.
00:13:28Но я действительно использовал для него команду overdrive, чтобы усилить эффект еще сильнее.
00:13:33И сделать его еще более безумным.
00:13:34Так что иногда я придумываю такие команды, в которых сам не уверен.
00:13:38И я тестирую их на сообществе.
00:13:39И когда они приживаются, я понимаю: о, ладно, это приносит радость многим людям.
00:13:44О, вот оно как.
00:13:49Вот так.
00:13:50Ладно.
00:13:51Прилагательное без уточнений — это просто красивый промпт.
00:13:54Так что вам действительно нужно объяснить агенту, что именно вы имеете в виду под используемым словом.
00:13:59В его обучающих материалах так много разных значений, что вам обязательно нужно это уточнить.
00:14:05А вот и еще один момент.
00:14:08Я получаю так много запросов на автоматический способ использования Impeccable.
00:14:14Просто невероятно много.
00:14:16Это так разочаровывает.
00:14:17Типа, по крайней мере раз в неделю кто-нибудь пишет мне в твиттере: «Знаешь, что было бы круто?»
00:14:21«Просто позволь Impeccable делать всю работу самостоятельно».
00:14:24«Чтобы мне больше не нужно было выбирать никакие команды».
00:14:26Но смысл совсем не в этом.
00:14:27Смысл в том, чтобы дать вам способ направлять то, к чему вы хотите прийти.
00:14:31Это никогда не будет инструментом для создания дизайна в один клик.
00:14:34Такой цели не ставилось.
00:14:36И я никогда не — то есть, сейчас висит пул-реквест, который я не собираюсь закрывать именно по этой причине.
00:14:41Никакого автоматического режима нет и не будет.
00:14:46По моему мнению — и это, пожа寻но, прозвучит несколько неловко для некоторых следующих спикеров — вкус нельзя усилить.
00:14:54Простите, я считаю, что вкус можно усилить.
00:14:56Я называю это усиленным мастерством.
00:14:58И я считаю, что вы можете работать с инструментами, чтобы отточить свой вкус и проявить его ярче.
00:15:04Я действительно не думаю, что его можно вырастить в лаборатории.
00:15:07Я думаю, что вкус по определению контекстуален.
00:15:12Он культурлен.
00:15:13Он уникален.
00:15:15И как только все начинают воспроизводить одно и то же, всё это становится очень размытым.
00:15:20И мы больше не считаем это вкусом.
00:15:23Таково мое мнение.
00:15:24Я знаю, что это очень бурно обсуждаемая тема, но я не пытаюсь продавать вкус с помощью своих инструментов.
00:15:32На этом у меня всё.
00:15:33Речь шла о поиске правильного уровня контроля для дизайна.
00:15:36Большое спасибо.
00:15:37И я думаю, у меня есть время на пару вопросов, если они у вас есть.
00:15:40Спасибо.
00:15:54До встречи в следующий раз.

핵심 요약

Инструмент impeccable заменяет слепую генерацию кода интерфейсов на итеративное управление с помощью специализированных глаголов и прилагательных, возвращая человеку точный контроль над процессом дизайна.

하이라이트

  • Инструмент impeccable работает с помощниками кодирования вроде Claude Code, GitHub Copilot и Cursor, чтобы превратить их в квалифицированных дизайнеров.

  • Процесс разработки интерфейсов требует многошагового подхода и контекстуальных уточнений, так как создание качественного дизайна с первой попытки невозможно.

  • Инструмент отказывается от автоматического режима в один клик, предоставляя пользователю точный контроль через глаголы и прилагательные для направления агента.

  • Разделение на прямое манипулирование пикселями в Figma и слепое доверие агентам создает крайности, между которыми существует неисследованная золотая середина.

  • Вкус невозможно синтезировать в лаборатории или автоматизировать, так как он глубоко контекстуален и уникален для каждого бренда.

타임라인

Презентация инструмента impeccable

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

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

Стирание границ между инженерией и дизайном

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

Разрушение старых процессов передачи задач приводит к появлению гибридных специалистов. Прямое манипулирование отступами отнимает слишком много времени, а полная передача контроля агентам порождает однотипные сайты с характерными фиолетовыми градиентами или бежевыми тонами.

Невозможность создания дизайна с первой попытки

  • Качественный эффективный дизайн требует многошаговости и учета контекста аудитории.
  • Агент без правильного руководства выдает пустой и шаблонный результат.
  • Эмоциональная территория бренда требует четкого определения перед началом работы.

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

Управление агентом с помощью прилагательных и глаголов

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

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

커뮤니티 글

아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!

이 영상에 대해 글쓰기