4 безумных способа создания потрясающих сайтов с помощью Claude Fable 5
AAI LABS
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00У всех есть доступ к одним и тем же ИИ-моделям, но никто не выстроил вокруг них нужные процессы.
00:00:05Возможно, вы слышали фразу о том, что сама модель больше не имеет значения, важна «обвязка».
00:00:09Обвязка — это, по сути, процессы, которые вы выстраиваете для своей ИИ-модели.
00:00:13Но вот что вам нужно понять.
00:00:14Модели постоянно развиваются, поэтому обвязка, которую вы создали три месяца назад, уже устарела.
00:00:19На момент записи видео лучшей моделью считается Fable 5 — флагманская модель Anthropic,
00:00:24но не волнуйтесь, мы покажем вам разные способы, которые гарантируют,
00:00:27что ваша обвязка будет развиваться вместе с любой моделью.
00:00:30Кстати, у Anthropic есть официальный навык для фронтенд-дизайна,
00:00:34и причина его появления — проблема, которую они сами же и обозначили.
00:00:37Происходит следующее: модель стремится к самому безопасному и усредненному варианту дизайна,
00:00:42о котором вы просили.
00:00:43Они называют это «сходимостью к распределению», что, по сути, означает, что она строит то,
00:00:47что видела уже тысячу раз.
00:00:49Учитывая, насколько мощными рекламируются последние модели, можно подумать, что это
00:00:53больше не проблема, но это не так.
00:00:56Например, в этом промпте мы просто попросили ее создать лендинг для сайта плантации.
00:01:01Чтобы подтолкнуть ее в нужном направлении, мы сказали ей быть максимально креативной
00:01:06и не слишком концентрироваться на самом контенте.
00:01:07Мы также явно сказали ей не загружать никаких навыков, потому что в нашей системе есть
00:01:13несколько навыков, и мы хотели убедиться, что она ими не пользуется.
00:01:16Вот что в итоге получилось.
00:01:18Это не плохой дизайн, но, безусловно, не самый лучший.
00:01:22Например, есть проблемы с контрастом, и некоторые изображения загружаются некорректно.
00:01:26Но когда мы использовали навык здесь, все изменилось.
00:01:29В этом навыке нет ничего особенного.
00:01:31Там нет никаких ссылок или внешних ресурсов.
00:01:34Это буквально просто промпт.
00:01:35Используя только его, она создала гораздо лучший дизайн.
00:01:37Дизайн стал значительно более проработанным и эстетичным.
00:01:41Он включал тонкие анимации и гораздо больше внимания к деталям.
00:01:45В целом результат был заметно лучше того, что модель обычно выдает сама по себе.
00:01:49С каждой новой моделью эти ИИ-компании выпускают руководства по промптингу для тех, кто использует API моделей.
00:01:55И, используя руководство Fable 5, мы изменили навык дизайна.
00:01:58Вы можете просто скопировать промпт общего дизайна и руководство по промптингу.
00:02:02Вставьте оба в Claude, скажите ей, что у вас есть руководство для этой модели,
00:02:06и попросите создать обновленную версию на основе этого.
00:02:09Она анализирует промпт и выдает вам переписанную версию для новой модели.
00:02:12И вы действительно можете увидеть, что новый сайт выглядит гораздо лучше.
00:02:15Он структурирован намного лучше, и все элементы превратились в карточки.
00:02:19Мы считаем, что он выглядит намного креативнее того, что обычно выдает Claude, из-за мелких деталей,
00:02:24например, секция CTA превратилась в почтовую открытку с маркой сверху.
00:02:29Именно такие мелкие детали делают дизайн намного креативнее.
00:02:32Теперь есть еще одна причина, почему компании выпускают руководства по промптингу.
00:02:35Часто у моделей бывают поведенческие проблемы, и руководства подсказывают, как их исправить.
00:02:39Когда вышла Opus 4.8, Anthropic отметила, что модель склонна по умолчанию выбирать определенный стиль дизайна.
00:02:45Их решением было просить модель сначала предложить несколько вариантов дизайна, а затем позволить вам выбрать направление.
00:02:51Но когда вышла Fable 5, эта проблема больше не упоминалась в руководствах.
00:02:56И, судя по нашим наблюдениям, модель все равно возвращается к тому же стилю.
00:02:59Это происходит не каждый раз.
00:03:01Но, по нашим тестам, примерно два из трех сгенерированных сайтов все равно имеют очень похожий стиль.
00:03:07Так что это так и не было исправлено.
00:03:08Поэтому стоит заглядывать и в документацию к предыдущим моделям.
00:03:11Вы часто найдете полезные вещи, которые просто не попали в последнее руководство.
00:03:15Так что, используя руководство от Opus 4.8, мы переключились на другой навык дизайна,
00:03:20который действительно спрашивал нас, какое направление дизайна мы хотим.
00:03:23Основываясь на этом, он создал вот такой дизайн.
00:03:25Это тоже выглядит неплохо.
00:03:26Но, честно говоря, лучший подход — использовать здесь файлы design.md.
00:03:30Эти файлы содержат язык бренда, который вы просто используете на своей странице.
00:03:33Get design.md — отличный источник, где можно взять файлы многих брендов.
00:03:38Но даже тогда используйте их после того, как модель уже создала лендинг.
00:03:42И это касается именно лендингов, потому что если вы посмотрите внутрь файлов design.md,
00:03:47они блокируют всё, вплоть до шрифта.
00:03:50И, как вы видели в примерах, шрифт — большая часть того, что делает эти сайты такими креативными.
00:03:55Есть два уровня, когда речь идет о добавлении анимаций.
00:03:58Маркетинговый UI и функциональный UI.
00:04:00Использование навыка дизайна на функциональном UI, например, дашбордах, сделает его красивым,
00:04:05но люди не смогут им пользоваться.
00:04:07Поэтому для добавления анимаций мы используем две вещи.
00:04:10Для маркетинговых страниц этот навык уже говорит модели добавить CSS-анимации,
00:04:15но GSAP-анимации гораздо лучше.
00:04:17Здесь вступает в силу еще один шаг из руководства по промптингу.
00:04:20Усилия (effort) — это главный рычаг, который сейчас контролирует модель.
00:04:22Для простых задач можно держать уровень от низкого до среднего,
00:04:25но для таких задач, как добавление анимаций, использование “X-High” — лучший вариант,
00:04:30который даст вам меньше перезапусков.
00:04:32В нашем навыке маркетингового UI есть правило, указывающее, когда следует использовать GSAP.
00:04:36Как только это условие срабатывает, он автоматически загружает и навык GSAP.
00:04:41Мы использовали эту настройку на том же лендинге, что показан здесь.
00:04:44Даже при таком ограниченном планировании с нашей стороны, он справился удивительно хорошо.
00:04:48Он отлично справился с размещением экрана анимации внутри открытки,
00:04:52и времена года сменяют друг друга одно за другим.
00:04:55Это хороший пример того, как такие специализированные навыки могут автоматически обрабатывать
00:04:59многие детали реализации.
00:05:00Мы создали эту систему навыков путем проб и ошибок.
00:05:03И под этим я имею в виду постоянное достижение 5-часовых лимитов использования.
00:05:07Если хотите пропустить все это, можете получить это в нашем Community AI Labs Pro.
00:05:11Ссылка будет в описании.
00:05:12Итак, как мы уже упоминали, есть два вида UI.
00:05:15Весь рабочий процесс функционального UI полностью отличается от маркетингового.
00:05:20Например, планирование — это первый шаг, и он очень важен.
00:05:23Мы не будем глубоко погружаться в это в видео, но как только план готов,
00:05:27вы можете отдать его Claude.
00:05:27После этого, вместо того чтобы строить приложение, попросите ее создать макеты с использованием HTML.
00:05:33Наш процесс начинается с design.md.
00:05:36Если вы уже решили, какой design.md хотите использовать, это отлично.
00:05:40Если у вас его нет, тоже ничего страшного.
00:05:42Можно двигаться дальше и без него.
00:05:43Например, если вы посмотрите на наше специально созданное сообщество,
00:05:45вы сразу заметите, что дизайн снаружи и дизайн внутри полностью
00:05:50отличаются.
00:05:51В нашем случае всё планировалось с использованием HTML-макетов.
00:05:54Мы начали с создания design.md, частично вдохновленного Notion.
00:05:58Используя эту систему дизайна, мы создали все экраны как макеты перед написанием реального приложения.
00:06:04После завершения и проверки макетов мы преобразовали их в полноценное функциональное приложение.
00:06:09Теперь, прежде чем мы перейдем к самой важной части дизайна функциональных UI, давайте
00:06:13послушаем спонсора.
00:06:14Многие, кто использует Claude Code, недавно заметили, что расходы резко выросли.
00:06:18Честно говоря, именно поэтому мое внимание привлекла Kimi.
00:06:20Они создали open-source модель, которая отлично пишет код, примерно в 8 раз дешевле Opus.
00:06:26Их последняя модель, Kimi K2.6, только что заняла первое место в Sweebench Pro,
00:06:30по сути, самом сложном реальном кодинговом бенчмарке сейчас.
00:06:33Они не просто выпустили модель, они создали продукты поверх K2.6, которые действительно полезны.
00:06:38Вы можете генерировать готовые к использованию сайты с хорошим дизайном,
00:06:41создавать полноценные слайды из одного промпта и даже обрабатывать базы данных и аутентификацию из коробки.
00:06:47Но самая крутая фишка — это, вероятно, Agent Swarm.
00:06:49Вы можете запустить 300 ИИ-агентов параллельно для одной задачи.
00:06:53Вместо одного агента, который медленно все делает, вы получаете целую команду ИИ, работающую одновременно.
00:06:58И все это работает на open-source модели, которая стоит гораздо меньше закрытых
00:07:03альтернатив, за которые люди платили.
00:07:05Так что если вы каждый день используете Claude Code или Cursor и ваш счет за API становится болезненным,
00:07:09Kimi стоит попробовать.
00:07:11Если подпишетесь по нашей ссылке, получите бонус 10% к квоте при первой покупке
00:07:16до 30 июня. Переходите по ссылке в описании и начинайте строить.
00:07:19Теперь есть еще одна очень важная часть дизайна функциональных UI — экспериментирование.
00:07:24Со временем мы перепробовали много разных подходов для решения этой проблемы.
00:07:28Изначально мы использовали списки задач с несколькими агентами, работающими параллельно,
00:07:32где каждый агент генерировал разную вариацию UI.
00:07:35Целью было экспериментировать с несколькими дизайнами и понять, какой подход работает лучше всего.
00:07:40Позже мы начали использовать под-агентов для этого процесса, но это уже не имеет значения.
00:07:45С миллионом токенов контекста вы можете делать это и с основным агентом.
00:07:48Мы также построили внутренний инструмент под названием Gallery Viewer.
00:07:51Цель Gallery Viewer проста.
00:07:53Когда вы генерируете несколько HTML-макетов, они не должны теряться среди десятков файлов.
00:07:58Вместо этого они автоматически открываются вместе в одном представлении, чтобы их было легко сравнивать
00:08:03бок о бок. Например, когда мы строили платформу сообщества, мы изначально не знали,
00:08:08как должно выглядеть пространство взаимодействия сообщества. Мы знали, что хотим опыт сообщества,
00:08:12но было много способов взаимодействия пользователей друг с другом. Поэтому вместо того, чтобы
00:08:17привязываться к одному дизайну, мы экспериментировали с HTML-макетами. Мы поставили задачу агенту создать несколько
00:08:22вариантов UI каналов сообщества в виде HTML-макетов, чтобы мы могли сравнить их. Агент создавал несколько
00:08:28версий автоматически и открывал их внутри Gallery Viewer. Оттуда мы могли сравнивать каждый
00:08:33вариант и решить, какое направление самое сильное. Одно, что вы заметите в этом примере,
00:08:37это то, что дизайны визуально не выглядят一致. В идеале они должны разделять общий язык дизайна,
00:08:42исследуя при этом разные UX-паттерны. Причина, по которой этого не произошло, заключается в том,
00:08:46что не был предоставлен design.md. Когда design.md существует, модель использует его как источник истины для
00:08:53цветов, отступов, типографики, компонентов и общего стиля. Таким образом, все сгенерированные макеты остаются
00:08:59визуально一致, исследуя при этом разные подходы к UX. Есть также несколько более мелких деталей,
00:09:04которые могут иметь большое значение, например добавление анимаций к функциональным UI. Мы задокументировали набор
00:09:10рекомендаций по анимации в нашем собственном навыке, и вы можете скопировать их, если хотите. Они отлично сработали для нас до сих пор,
00:09:15и мы постоянно их совершенствуем. Однако я настоятельно рекомендую не перебарщивать с
00:09:20анимациями в функциональной части приложения. Чрезмерные анимации могут выглядеть впечатляюще поначалу,
00:09:25но они часто делают интерфейсы, ориентированные на продуктивность, более отвлекающими. Как только вы
00:09:29завершили дизайн, следующий шаг — использовать навык ShadCN. Я уже подключил навык функционального UI
00:09:35к навыку ShadCN, поэтому он обрабатывает большую часть процесса автоматически. Ранее у нас были гораздо более
00:09:40сложные рабочие процессы. Мы бы генерировали подробный план реализации специально для ShadCN
00:09:45MCP и использовали бы этот план для построения всего интерфейса. Хотя этот подход работал, он также
00:09:50добавлял много сложности. Сегодня рабочий процесс значительно проще. Все, что вам нужно, — это финальный
00:09:55HTML-макет и навык ShadCN. Причина, по которой это работает так хорошо, заключается в том, что навык ShadCN уже содержит
00:10:01огромное количество контекста и знаний по реализации, упакованных самими создателями ShadCN.
00:10:06Благодаря этому он может взять завершенный HTML-макет и воспроизвести его почти один-в-один, используя
00:10:11реальные компоненты ShadCN. Так что на этом этапе вам не нужно беспокоиться о создании сложных
00:10:16планов реализации или рабочих процессов преобразования. Если вам нравятся эти процессы дизайна, подпишитесь на
00:10:21канал и нажмите кнопку “hype”. Мы публикуем контент, который помогает вам узнавать новые способы оптимизации
00:10:26разных процессов в разных бизнесах с помощью ИИ. Ваша поддержка здесь будет для нас много значить.
00:10:31Руководство также просит сделать самопроверку явной для этих моделей. Вы можете добавить промпт в
00:10:36Claude.md, который просит агента проверить свой вывод. Теперь вместо использования основного агента,
00:10:41вам следует использовать под-агента, который может проверить вывод. А чтобы проверить его, вам нужно что-то,
00:10:46с чем можно сравнить. Для этого всегда направляйте под-агента к вашему design.md.
00:10:50Еще одна вещь, упомянутая в руководстве, заключается в том, что модели работают лучше, когда у них есть контекст о
00:10:55вашей задаче. Для дизайна это означает знание того, что на самом деле представляет собой продукт.
00:10:59Многие фреймворки настроили отдельный product.md, но, на наш взгляд,
00:11:03когда вы настраиваете Claude.md, в нем достаточно контекста для модели, чтобы понять, о чем ваш
00:11:09проект. Так что навык функционального UI делает следующее: всякий раз, когда он получает новую задачу,
00:11:13это заставляет модель читать также файл Claude.md. Кроме того, там есть папка mox,
00:11:18в которой есть все HTML-файлы, чтобы вы могли обращаться к ним всякий раз, когда добавляете новые элементы в свое
00:11:24приложение. Кроме того, было бы здорово, если бы у вас также был design.md. Это файлы,
00:11:28которые должны быть в вашем проекте. В наши дни многие SaaS-приложения можно легко клонировать.
00:11:32Мы сами используем специально созданное программное обеспечение для управления командой. Мы создали свою версию, потому что
00:11:37нам не нужно размещать много людей. В этом случае не обязательно делать все с нуля.
00:11:42Вам просто нужно убедиться, что вы клонируете их UI как можно идеально. С новыми моделями,
00:11:46их способность понимать изображения стала намного лучше, поэтому рабочий процесс здесь становится очень простым.
00:11:51В клонировании есть два разных режима. Режим B — для маркетингового UI. Для этого
00:11:56есть очень полезный CLI-инструмент под названием single-file CLI. Используя его, вы можете захватить все на странице,
00:12:01включая HTML, CSS и даже изображения, используемые на этом сайте. Если сайт содержит несколько страниц,
00:12:07вы также можете получить его файл sitemap.xml, который, по сути, является картой сайта. Используя эту карту,
00:12:13модель может обнаружить и получить доступ и к другим страницам. Проблема возникает, когда вы сталкиваетесь со страницами, которые
00:12:19находятся за аутентификацией. Например, если бы вы хотели клонировать интерфейс Notion, вы не могли бы просто навести
00:12:23инструмент на веб-сайт Notion. Когда вы предоставляете URL Notion, вы получите только лендинг.
00:12:28Что вам на самом деле нужно, так это интерфейс приложения за экраном входа. К счастью, модели
00:12:34стали очень хорошо понимать интерфейсы по изображениям, поэтому в таких ситуациях скриншоты — это
00:12:40лучший вариант. Вы должны очень внимательно захватывать разные состояния интерфейса. Допустим, у вас есть
00:12:45открытая страница, вам понадобятся скриншоты, показывающие, что происходит при наведении и как разные взаимодействия влияют на макет.
00:12:50Давайте возьмем другой пример. Предположим, вы открываете страницу, где две страницы находятся в одной колонке. Если вы предоставите только это,
00:12:56модель не будет знать, что вы можете сделать две колонки. Вы должны быть очень дотошными и предоставить весь контекст,
00:13:01который нужен модели. Как только вы сделали скриншоты, не вставляйте изображения напрямую в промпт. Вместо этого,
00:13:07перетащите их в Claude. Это дает системе доступ к путям изображений, которые может использовать режим A. Режим A
00:13:13затем соберет все эти скриншоты, поместит их в папку “clone” и будет использовать их как справочный материал.
00:13:19Эти скриншоты эффективно становятся основой для процесса клонирования. Оттуда вы можете сгенерировать
00:13:25первоначальную HTML-версию интерфейса, а затем перейти к созданию финального приложения.
00:13:29На этом мы заканчиваем видео. Если хотите поддержать канал и помочь нам продолжать создавать видео
00:13:35вроде этого, вы можете сделать это с помощью кнопки “super thanks” ниже. Как всегда, спасибо за
00:13:39просмотр, увидимся в следующем.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video