3 уровня проектирования ИИ... Лишь немногие достигают 2 уровня
AAI LABS
Computing/SoftwarePhotography/Art
Transcript
00:00:00Если вы уже некоторое время смотрите этот канал, то наверняка знаете, что мы рассмотрели множество
00:00:03дизайнерских рабочих процессов и инструментов. Мы тестировали их месяцами и наконец выяснили,
00:00:08почему одна и та же модель может выдать что-то абсолютно уникальное или нечто, что сразу же
00:00:13кричит о том, что это сгенерировано ИИ. Всё сводится к трем уровням. Первый уровень — это дизайн одной страницы, и
00:00:19здесь есть одна деталь, которую упускает большинство, и именно из-за нее их результат выглядит шаблонно. Уровень
00:00:23второй — это когда вы перестаете проектировать страницы и переходите к проектированию систем, и рабочий процесс здесь
00:00:28совершенно другой. А уровень третий — это то, как мы тестируем дизайн друг против друга, чтобы найти вариант,
00:00:34который действительно работает, и теперь мы используем этот подход в каждом реальном проекте. Итак, первый уровень посвящен
00:00:39созданию хорошего дизайна для отдельной страницы. Этому уровню учат большинство, поскольку он лежит в
00:00:44основе любого качественного дизайна. В прошлом видео мы рассказывали о том, насколько улучшились возможности
00:00:50модели Opus 4.7 в плане дизайна, и большая часть былого мусора от ИИ исчезла. Раньше, когда мы
00:00:55давали ей простой промпт вроде создания лендинга, она просто брала
00:00:59фиолетово-белую тему и выстраивала всё вокруг нее. Этот конкретный паттерн стал лучше. Но
00:01:04как и любая другая модель ИИ, эта тоже тяготеет к безопасным шаблонам. И на основе всех наших тестов и
00:01:09експериментов мы заметили, что она каждый раз возвращается к одному и тому же стилю. Так что теперь, когда"
00:01:15мы видим этот стиль, это верный признак того, что сайт сделан с помощью Opus 4.7, и это лишь вопрос времени,
00:01:21когда он превратится в очередной шаблонный ИИ-продукт. Поэтому нам нужны другие способы улучшить этот сайт.
00:01:25Теперь этот уровень в основном сводится к промпт-инжинирингу и тому, как мы описываем приложение,
00:01:30потому что при правильной структуре промпта можно создать приложение с первого раза. Промпт должен начинаться
00:01:35с назначения создаваемого сайта, затем перечислять жесткие требования — например,
00:01:39то, что обязательно должно быть в приложении и как должны выглядеть элементы интерфейса. После этого вы задаете
00:01:44цветовую систему. Здесь мы используем OKLCH, что по сути является мерой светлотности, цветности и тона.
00:01:49Использование OKLCH вместо привычных RGB или HSL лучше тем, что оно передает цвета так, как их
00:01:55реально воспринимает человеческий глаз, поэтому оно лучше справляется со светлотностью и балансом. Оно также создает
00:01:59более плавные градиенты, в отличие от HEX-кодов, которые могут выглядеть неравномерными. Установив
00:02:04цветовую схему, необходимо также указать потоки контрастности. Контрастность — важнейший
00:02:08фактор UI-дизайна, поскольку она создает иерархию, направляющую взгляд пользователя на то,
00:02:13что действительно важно. Без явной контрастности модель считает каждый элемент одинаково важным,
00:02:18из-за чего визуальную иерархию выстроить трудно. А чтобы сайт не выглядел как
00:02:22штамповка от ИИ, нужно также контролировать типографику через промпт: указать, какие шрифты запрещены
00:02:27из-за своей заезженности, а какие использовать в разных частях дизайна. Шрифты вроде Inter и Geist
00:02:33стали признаками банального ИИ-дизайна, потому что к ним по умолчанию тянется каждый агент, поэтому прямой запрет
00:02:38заставляет модель искать другие варианты. Затем вы определяете макет и ритм сайта,
00:02:42но сначала нужно разобраться с симметрией и асимметрией. Симметричные макеты имеют компоненты,
00:02:47ровно расположенные по сетке с сбалансированным видом, что лучше подходит для профессиональных и
00:02:51строгих дизайнов. Но для более художественного вида выбирайте асимметрию, так как она дает больше простора
00:02:56для экспериментов. Она особенно хороша, когда нужно задействовать негативное пространство, позволяя дизайну
00:03:01дышать. Тип создаваемого продукта подсказывает, что подойдет лучше. Затем определите все разделы,
00:03:06которые вам нужны, используемые материалы и то, как сайт должен адаптироваться под разные экраны. Самая важная
00:03:11часть — упоминание антипаттернов. Это признаки шаблонного ИИ: простой центрированный призыв к действию,
00:03:17иконки Lucid и градиенты в стиле стекломорфизма. Передав этот промпт в Claude Code или
00:03:22любой другой используемый агент, вы получите анализ приложения и проработку деталей реализации. Затем он
00:03:27создаст приложение точно по описанию в промпте: с асимметрией для художественного замысла и правильным использованием негативного пространства.
00:03:34Итак, уровень 2 посвящен сохранению единого дизайна на каждой странице сайта, ведь большинство созданных агентами приложений
00:03:40рассыпаются в тот момент, когда вы покидаете лендинг. Создавая целые приложения с помощью агентов, вы наверняка
00:03:45сталкивались именно с этим. Главная страница выглядит неплохо, но при переходе на другие страницы
00:03:50они не следуют единому стилю интерфейса так последовательно, как следовало бы. Дашборд в итоге пестрит другими
00:03:55стилями кнопок, другими отступами, иной типографикой — создается ощущение, будто агент забыл, что строит
00:04:00то же самое приложение. Остальные страницы выглядят так, будто они вообще не относятся к этому сайту, и это выдает
00:04:05генерацию сайта агентом. Иногда дизайн сохраняется на страницах авторизации, но на
00:04:10дашборде стиль полностью ломается. Для решения этой проблемы нужно создать два важнейших
00:04:15файла: Claude.md и Design.md. Именно эти два файла поддерживают единый стиль на протяжении всего сайта.
00:04:21В Claude.md, как мы уже много раз говорили, вы помещаете только информацию о проекте, но не дизайн.
00:04:27Это объясняется тем, что файл постоянно загружен в сессию, и описание дизайна в нем будет лишь
00:04:32отвлекать агента во время работы над чем-то другим. Тем не менее, это ключевой файл, поскольку он хранит
00:04:37контекст проекта, который определяет хороший дизайн. Для самого же дизайна нам необходим отдельный файл,
00:04:42где прописано всё, что связано с визуальной системой, макетом, цветами, типографикой и всеми
00:04:47деталями из первого уровня. Design.md должен быть таким файлом, который любой агент сможет открыть и
00:04:52сразу понять суть визуальной системы. И как на предыдущем уровне, здесь тоже нужно
00:04:57описать цветовую систему в формате OKLCH. Чтобы создать эти два файла, мы дали Claude Code подробный
00:05:03промпт о требованиях к каждому файлу, и он сгенерировал оба файла. Файл Claude.md получился коротким,
00:05:09содержащим только детали проекта. Design.md длиннее, в нем учтена каждая мелочь: коды цветов,
00:05:15выбор шрифтов и многое другое. Но работа над Design.md на этом не заканчивается. Его нужно постоянно
00:05:20совершенствовать. Поэтому в начале мы добавляем строку с указанием агенту добавлять в этот файл
00:05:25любые новые найденные дизайнерские решения. Таким образом, каждая сессия начинается с более проработанной версии системы
00:05:30дизайна, чем предыдущая. Но просто позволить Claude создать Design.md недостаточно,
00:05:35поскольку сгенерированный результат не всегда полностью следует лучшим практикам. Компания Google открыла доступ к своему
00:05:40шаблону для файла Design.md. Этот шаблон также содержит команды для перекрестной проверки вашего Design.md
00:05:46и выявления ошибок. Вы можете просто попросить агента выполнять итерации с помощью этих команд,
00:05:51чтобы довести Design.md до совершенства. И это еще не конец второго уровня. Чтобы создавать достаточно качественный дизайн на
00:05:56этом уровне, его необходимо проверять на соответствие существующим принципам дизайна. Для этого существует
00:06:00множество открытых навыков (skills), которые делают ровно это. Вы можете использовать любой из них, но мы применяем навык от VersaLab,
00:06:06поскольку вместо жесткого зашивания всех принципов внутрь кода навыка, он ссылается на внешний источник,
00:06:11который активно поддерживается актуальным. Благодаря этому принципы соответствуют современным стандартам, а не
00:06:16остаются замороженными на уровне технологий, актуальных на момент написания навыка. Вы устанавливаете этот навык
00:06:21в проект, запускаете его, и дизайн начинает выглядеть гораздо лучше, чем раньше. Но прежде чем мы
00:06:25пойдем дальше, пара слов от нашего спонсора. Недавно я начал использовать ZillysCloud, и позвольте мне рассказать,
00:06:30почему. Большинство RAG-приложений отлично работают с горсткой документов, но как только вы загружаете реальные данные,
00:06:35они начинают сбоить, потому что конфигурация просто не была рассчитана на такую нагрузку.
00:06:40Milvus — это самая популярная векторная база данных с открытым исходным кодом на GitHub, набравшая более 44 000 звезд,
00:06:46и она создана для работы с такими нагрузками, однако самостоятельный хостинг означает необходимость администрирования инфраструктуры.
00:06:51Здесь на помощь приходит ZillysCloud — полностью управляемая версия с тем же API, которая работает до
00:06:5610 раз быстрее, и ее можно настроить за считанные минуты, не меняя ни единой строки кода.
00:07:00Мы запустили запрос семантического поиска в ZillysCloud, и результаты действительно релевантны, поскольку база
00:07:05понимает смысл, а не просто ключевые слова, а время отклика почти мгновенное даже на большом
00:07:11наборе данных. Мы также выполнили запрос рекомендаций по одной статье. Она нашла пять наиболее похожих
00:07:16по всему набору данных, отсортированных по степени сходства менее чем за секунду. А дашборд отслеживает производительность кластера,
00:07:21использование хранилища и метрики данных, включая количество коллекций и объектов, в реальном времени. Кредитная карта
00:07:27не нужна: просто нажмите на ссылку в закрепленном комментарии и попробуйте ZillysCloud бесплатно.
00:07:31Третий уровень посвящен программному тестированию дизайна — точно так же, как инженеры проверяют
00:07:36код с помощью TDD. Мы знаем, что для дизайна нельзя визуально написать тесты так же, как для кода. В коде
00:07:41есть четкие входные и выходные данные для всего. С дизайном это так не работает, поскольку он более субъективен
00:07:46и не поддается количественной оценке в отличие от кода, но его субъективность не означает, что мы не можем писать
00:07:51тесты для него. Причина, по которой TDD работает для кода, заключается в том, что тест фиксирует ожидаемое поведение,
00:07:57а реализация должна этому соответствовать. Тот же принцип применим и к дизайну, просто с другими
00:08:01критериями фиксации. В создаваемом приложении первый шаг был прежним: создать файлы
00:08:05Claude.md и Design.md еще до того, как приступать к реализации. Тесты всегда должны
00:08:12создаваться до написания кода, чтобы реализацию можно было по ним проверить. Если писать тесты
00:08:17после реализации, агент начинает халтурить. Он пишет тестовые кейсы, которые подстраиваются под
00:08:22уже имеющийся код, потому что этот код уже находится в его контексте. Создание тестов в первую очередь заставляет
00:08:27реализацию соответствовать тесту, а не тест подгоняться под реализацию. Поэтому мы используем файлы дизайна
00:08:32в качестве источника правды для тестов, поскольку в этих файлах описаны все антипаттерны, которые мы можем
00:08:37проверить программно. Каждый антипаттерн из Design.md становится тестовым кейсом. Каждое правило цвета,
00:08:44каждое ограничение отступов и каждый выбор шрифта подвергаются программной проверке. Мы дали Claude Code
00:08:49подробный промпт на написание тестовых случаев с указанием каждого раздела, на котором нужно сосредоточиться. Кстати, если вам
00:08:54нравится наш контент, поставьте лайк, ведь это помогает нам создавать больше подобных материалов
00:08:59и охватывать больше людей. С вашей подсказкой он напишет все тесты для дизайна
00:09:04приложения. Он создает тесты нескольких типов. Во-первых, это статичные тесты, которые напрямую проверяют
00:09:09упомянутые в промпте антипаттерны. Во-вторых, существует визуальное тестирование, которое использует
00:09:14Playwright «под капотом» и выполняет регрессионное тестирование для постепенного улучшения сайта. Он также
00:09:19пишет тестовые сценарии для других компонентов и вспомогательных функций вроде сканирования и отчетов. Эти тесты
00:09:24проверяют статичные антипаттерны, но для тестирования дизайна требуется нечто большее.
00:09:28Для этого есть еще один инструмент под названием Visly Test — по сути, это CLI-утилита для TDD в UI-дизайне.
00:09:34Она работает на основе локального TDD, позволяя проверять дизайн по мере изменения кода.
00:09:39Так вы можете сами отслеживать различия (diff), а не полагаться на самоконтроль агента. Вы также получаете более наглядный diff
00:09:44с метаданными и прочими деталями, что ускоряет проверку. Без этих метаданных вы просто сравниваете два
00:09:49скриншота бок о бок, надеясь заметить разницу. С ними же Visly показывает точно, какие
00:09:54пиксели изменились и насколько. Чтобы начать работу, установите CLI, выполнив команду установки из
00:10:00документации. После настройки и инициализации инструмент готов к работе. Теперь откройте Claude Code и попросите его
00:10:05использовать TDD для реализации нужной части пользовательского интерфейса, используя Visly CLI в качестве среды тестирования.
00:10:10При запуске команды Visly TDD запускается локальный сервер, отслеживающий изменения скриншотов.
00:10:16Для отправки скриншотов Claude просто пишет отдельные тесты с именем Visly. Эти тесты используют
00:10:21механизмы создания скриншотов Playwright для передачи изображений в просмотрщик на сервере. Оттуда вы можете одобрить или отклонить
00:10:27дизайн и посмотреть различия по сравнению с предыдущей версией. Каждый отклоненный diff становится обратной связью,
00:10:32которую агент использует для корректировки следующей попытки. За несколько итераций дизайн приближается к тому,
00:10:37что вам действительно нужно, а не к тому, что агент считает нужным. Использованные здесь промпты можно найти в AI Labs Pro
00:10:43к этому видео и ко всем нашим предыдущим видео, откуда их можно скачать и использовать в собственных
00:10:47проектах. Если вам полезно то, что мы делаем, и вы хотите поддержать канал, это лучший способ сделать это. Ссылки
00:10:52в описании. Подошло к концу это видео. Если вы хотите поддержать канал
00:10:57и помочь нам продолжать создавать такие видео, вы можете сделать это с помощью кнопки суперспасибо под видео. Как
00:11:02всегда, спасибо за просмотр, и до встречи в следующем выпуске.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video