Transcription
Итак, Gemini 3 от Google действительно превзошел все ожидания. Его возможности кодирования фронтенда намного лучше всего, что мы когда-либо видели. Но одна вещь, которую люди не совсем осознали, — это насколько важен и отличается промптинг для моделей рассуждений, таких как Gemini 3. В официальной документации Google также упоминается, что Gemini 3 — это модель рассуждений, что полностью меняет подход к промптингу.
Одним из критически важных компонентов таких моделей рассуждений, как Gemini, являются сгенерированные токены рассуждений. Это сильно отличается от других моделей, где нам нужен полностью упакованный промпт, чтобы предоставить весь возможный контекст и логику для хорошей работы. Фактически, довольно часто вы обнаружите, что чем больше промптов вы даете Gemini, тем хуже результаты. И это потому, что он разработан для ответа на прямые и четкие инструкции. Если вы дадите ему чрезмерно сложный промпт, он может чрезмерно анализировать переменные и иногда ограничиваться процессом, который вы включаете в эти промпты. Поэтому ему действительно нужен лаконичный промпт.
Но с другой стороны, это также чрезвычайно чувствительная и управляемая модель. Gemini 3 может работать совершенно по-разному в зависимости от простых инструкций, которые вы ему даете. Например, если я просто попрошу "помоги мне создать страницу hello world", даже несмотря на его отличные возможности фронтенда, он все равно сгенерирует что-то вроде этого. Но всего с одним простым ключевым словом, таким как "линейный стиль", он немедленно создает что-то совершенно другое. Вы прикрепляете изображение-ссылку на качество ко многим деталям пользовательского интерфейса, просто чтобы сделать его хроматически лучше. Таким образом, как модель, она чрезвычайно управляема, и ваш промпт может иметь огромное значение.
Вопрос в том, как мы на самом деле приходим к правильному количеству промпта, которое позволит максимально использовать Gemini 3? Ну, Entropic недавно выпустил этот пост в блоге под названием "Улучшение Sonic для фронтенд-дизайна с помощью навыков". Он в основном представляет навыки фронтенд-дизайна, которые вы можете установить в Cloud Code, и это делает модели, такие как Sonic, генерирующими почти на уровне Gemini 3 в дизайне. И самая интересная для меня часть заключается в том, что это значительное улучшение полностью обусловлено хорошо продуманным промптом, который они составили, имеющим хороший баланс между лаконичностью и предоставлением полезных деталей. И они раскрывают свой примерный метод и процесс того, как они систематически получают максимум от облачной модели через промптинг и инжиниринг контекста. И я думаю, что этот метод просто применим и к другим моделям, включая Gemini 3. И сегодня я изложу и разобью это для вас на трехэтапный процесс и проведу вас через реальный пример того, как я составляю промпт, который может заставить даже небольшую модель выдавать высококачественные каркасы XcallyDraw.
Но прежде чем мы углубимся в этот пример от Entropic, мы уже знаем, что один хорошо составленный промпт может полностью трансформировать поведение модели. И это выходит далеко за рамки простого фронтенд-дизайна. HubSpot действительно продвинул эту идею дальше. Они создали библиотеку полностью протестированных навыков Cloud, промптов для продаж, маркетинга и бизнес-операций, основанных на их лучших практиках, полученных из сотен тысяч бизнесов. И это не общие промпты. Они точно отражают то, что я описывал, и вы можете подключаться напрямую через специальные коннекторы HubSpot. Затем эти промпты мгновенно персонализируются с использованием вашего реального CRM-контекста. Так что вместо написания общих исходящих электронных писем вы получаете информацию о реальных сегментах клиентов. Поэтому, если вы хотите более умные облачные результаты, я настоятельно рекомендую вам проверить это. Я оставил ссылку в описании ниже для вашего доступа. Это бесплатно, практично и, честно говоря, одна из лучших коллекций, которую я видел для реальных бизнес-процессов. И спасибо HubSpot за спонсорство этого видео.
Теперь вернемся к тому, как Entropic значительно улучшает выходные данные фронтенд-дизайна из моделей. Самая интересная концепция здесь — это "распределительная конвергенция", которая означает, что во время процесса выборки модели предсказывают токены на основе статистических закономерностей в обучающих данных и безопасных дизайнерских решений, которые работают универсально и никого не обижают. Доминируют в веб-обучающих данных. Поэтому по умолчанию эти модели почти всегда возвращаются к безопасным дизайнерским решениям, и это применимо гораздо больше, чем к фронтенд-дизайну. Это может использоваться для отладки запросов, Python, анализа данных или даже написания электронных писем. И метод составления этого набора промптов довольно последователен. Вы хотите определить, что такое "конвергентные дефолты", то есть вы хотите хорошо понять конкретную задачу, которую вы хотите, чтобы модель выполняла. Каковы "дефолтные поведения из коробки" и определите те "конвергентные дефолты", которые вам не нравятся. Затем предоставьте очень конкретные альтернативы и структурируйте руководство на правильной высоте.
В этом очень конкретном примере они начали выявлять некоторые ключевые области, которые влияют на конечный дизайн, где выходные данные по умолчанию не очень хороши, а именно: типографика, анимация, фоновые эффекты и темы. Затем четко переведите все это в код, который Cloud может написать. Ключ здесь — правильная высота промпта, который вы вводите. Часто мы будем писать слишком специфичные промпты, где вы просто перечисляете очень конкретные шаги 1, 2, 3, 4, 5 и получаете агента для выполнения. Но это часто приводит к переобучению вашей системы на нескольких очень специфических сценариях и делает ее уязвимой для реальных долгосрочных случаев использования. И ключ к достижению правильного уровня высоты для проблемы — это прохождение этого трехэтапного процесса тестирования и выявления тех "конвергентных дефолтов", которые вам действительно не нравятся, а затем поиск первопричины того, почему модель имеет такое поведение. Затем структурируйте руководство с конкретным альтернативным поведением, которому вы хотите, чтобы модель следовала, и просто повторяйте этот процесс снова и снова.
В итоге вы можете получить хорошо составленный промпт, который охватывает конкретно эти области и последовательно генерирует потрясающие результаты. И один из примеров здесь — типографика. Я просто начну с прямого промптинга модели без какого-либо системного промпта, чтобы увидеть, какие дефолтные результаты мы получим. И когда я попросил создать музыкальный плеер, результат по умолчанию, который он дал мне, имел этот классический фиолетово-синий цвет и шрифт, который выглядит немного скучно.
Итак, Entropic сделал следующее: они добавили раздел под названием "Используйте интересные шрифты", где они дадут общую инструкцию избегать использования скучных общих шрифтов, включая Inter, Roboto, Open Sans, Lato и системные шрифты по умолчанию. И вот несколько примеров, которые они приводят для разных сценариев, а также некоторые принципы сочетания, например, какие типы шрифтов хорошо сочетаются друг с другом.
Если я скопирую это и просто вставлю в системный промпт здесь как раздел для устранения этих дефолтных поведений и снова сгенерирую. Теперь вы можете видеть, что он начал использовать шрифты, которые не являются частью стандартного дизайна. И очень крутое наблюдение здесь заключается в том, что, как только модель улучшает один аспект дизайна, она, как правило, начинает улучшать все остальные поведения, такие как цвета, взаимодействия и пользовательский интерфейс. Вот почему этот процесс улучшения является итеративным циклом. Вы пытаетесь понять, что именно меняет поведение модели, и добавляете только это, потому что каждый новый раздел промпта, который вы добавляете, может уже влиять на некоторые другие поведения. Поэтому вам не нужно чрезмерно вводить токены.
И точно так же мы можем добавить больше разделов для таких вещей, как взаимодействия, анимация и использование высококачественных стоковых изображений, чтобы направить модель к определенному поведению. На основе этого сгенерированный результат будет немного более фантастическим и сумасшедшим. Если вы хотите узнать точно, что Entropic написал официально, вы можете просто ввести /plugin marketplace at entropic/cloud code, а затем ввести /plugin install frontend design at cloud code plugins. Это добавит навыки фронтенд-дизайна непосредственно в ваш компьютер. Если вы на Mac, вы можете открыть эту папку Cloud и внутри плагинов marketplace entropic cloud code plugins. Вы увидите эти навыки фронтенд-дизайна и сможете открыть файл skill.md, чтобы узнать точно, какой промпт они написали.
И я использовал тот же метод, чтобы составить UI-промпт, который, как я обнаружил, заставляет Gemini 3.0 быть чрезвычайно креативным в генерируемом UI. Между тем, я также хочу показать вам, как вы можете использовать аналогичную методологию для настройки модели для других типов задач. Например, я пытаюсь научить Super Design Agent создавать высококачественные каркасы XcallyDraw, чтобы его можно было использовать для согласования с пользователем конкретных макетов дизайна и исследования множества различных версий дизайна. По умолчанию модель не очень хорошо производит высококачественные результаты последовательно. Но с помощью яркого инженера промптов мне удалось добиться от нее гораздо более высококачественных результатов, и вот как я пришел к этому промпту.
Первое, что вы хотите сделать, это определить "конвергентные дефолты". По сути, вы хотите определить, каковы дефолтные поведения модели, где она терпит неудачу. Способ, которым мы это делаем, заключается в следующем: сначала попробуем самый базовый и минимальный промпт, который поможет вам понять дефолтное поведение модели. В нашем конкретном случае я просто дам минимальный промпт: "Вы профессиональный UX-инженер, который создает чистые каркасы XcallyDraw".
Здесь вы можете видеть, что он не вывел JSON, который мы хотим. Поэтому я могу включить этот JSON-режим и начать добавлять первый промпт: "Выводить только в формате JSON с этой конкретной структурой". И здесь вы можете видеть, что я использую формат XML. Поэтому формат XML доказал свою эффективность, особенно когда у вас есть большое количество документов или файлов для ввода контекста. В целом он работает лучше, чем структура JSON.
С этим мы можем попробовать снова. Однако ничего не произошло, когда я попытался вставить. Я предполагаю, что есть что-то не так с сгенерированным JSON. Поэтому я вставляю это в GBT и прошу помочь мне выявить любые проблемы в вышеуказанном JSON. Теперь я могу сказать: "Начните выявлять некоторые проблемы, такие как эта модель выдумывает типы, которые на самом деле не существуют для XcallyDraw, а также для линий, она не должна использовать x, y, ширину и высоту, вместо этого я должен использовать координатные точки".
Итак, если мы удалим эти два элемента строки, которые имеют неправильный формат данных, а также круг, то он выведет результат, который выглядит не очень правильно, и мы добавим больше правил к нему, когда эти текстовые элементы не будут выровнены, а также когда макет не будет точно правильным. Таким образом, всего за несколько быстрых тестов мы уже начали выявлять некоторые пробелы в дефолтном поведении модели, такие как использование неправильной схемы элементов, неправильные способы выравнивания текста и макета.
И в этот момент одна распространенная ошибка, которую люди часто совершают, заключается в том, что вы начинаете добавлять в промпт правила, которые слишком специфичны или недостаточно инструктивны, чтобы фактически изменить фундаментальное поведение модели. И одна вещь, которую я нахожу действительно полезной, — это на самом деле попытаться понять, почему дефолтное поведение модели именно такое. Одна вещь, которую я часто делаю, это когда модель выдает результат, который мне не очень нравится, я могу вставить следующее сообщение пользователя: "режим отладки. Не генерируйте снова. Просто помогите мне понять, почему вы установили ширину равной нулю для текстового типа и отключите JSON-режим, чтобы я мог перегенерировать его". И это действительно хороший способ выявить первопричину и дефекты в знаниях модели.
И здесь вы можете видеть, что она говорит, что установила ширину равной нулю, потому что увидела, что текст будет отображаться с внутренней шириной, что означает, что она ожидает, что ширина будет динамически автоматически изменяться в зависимости от содержимого текста, что на самом деле не так в XcallyDraw. Это критически важное понимание. Поэтому вместо того, чтобы просто говорить, что ширина и высота не должны быть равны нулю, я скажу вам, как правильно их определить. Лучший способ, который я нашел для выравнивания текста, — это убедиться, что фактическая ширина текстового элемента равна основному контейнеру, и просто использовать свойство выравнивания текста для управления конкретным положением текста. И это именно то, что я туда вставил. И здесь вступает в игру ваши знания в предметной области, потому что для предоставления этих альтернативных решений я должен начать развивать понимание фактической схемы JSON XcallyDraw. Какие свойства у нее есть и какие эффективные способы управления этими элементами.
Как только у меня появится этот новый промпт, я могу удалить предыдущую историю разговора и попробовать снова. Отлично. Вы можете видеть, что эта новая версия намного лучше предыдущей. Но в то же время, еще одна очень важная вещь при написании этого промпта заключается в том, что вы хотите убедиться, что руководство, которое вы даете, находится на правильной высоте.
Одна проблема, которая у меня была с JSON, который он генерировал в тот момент, заключалась в том, что он включал вещи, которые нам на самом деле не нужны или которые на самом деле не влияют на стиль, например, версии, удаленные вещи и тому подобное. И в таких сценариях очень часто или легко давать очень конкретные, четкие промпты, например, я могу определить для каждого типа, какие конкретные свойства они должны включать. Но то, что, вероятно, будет работать лучше, — это то, что вы начинаете формулировать, в чем заключается обоснование такого поведения. Поэтому вместо того, чтобы давать очень конкретные инструкции, такие как эти, я могу просто сказать: "Выводить только свойства, которые влияют на стиль. Никогда не выводить такие вещи, как версия, такие вещи, которые на самом деле не способствуют стилю".
Таким образом, мы в основном повторяем этот цикл несколько раз, пока не получим промпт, который охватывает все эти "дефолтные конвергенты". Затем у вас есть хорошо составленный промпт для вашего конкретного сценария и случая использования. И я использовал тот же метод, чтобы составить UI-промпт, который, как я обнаружил, заставляет Gemini 3.0 быть чрезвычайно креативным в генерируемом UI. Например, это один короткий пример для приложения-списка дел, целевой страницы модного обувного бренда и UI музыкальной записи. И мы просто упаковали все это в агент дизайна с Gemini 3 на superdesign.dev, который способен генерировать высококачественный UI. И мы также интегрировали возможность создания каркасов. Поэтому вы можете показать вам множество различных версий каркасов для быстрого согласования идей. И вы можете смешивать и сочетать различные каркасы UI вместе и просить ИИ ремикшировать что-то новое именно так, как вы хотите.
Мы действительно воодушевлены тем, что можем сделать со всеми этими новыми возможностями модели, которые появились для четырехэтапного агента продуктового дизайна. Поэтому, если вы заинтересованы, вы можете проверить superdesign.dev. Надеюсь, вам понравилось это видео. Спасибо, и до скорой встречи.