Transcript
00:00:00Только что вышла Kimi K3, и это невероятно мощная модель, стоящая на одном уровне с Claude Fable 5 и GPT 5.6.
00:00:06Главная ее фишка в том, что она реально хороша во фронтенде,
00:00:09настолько, что люди называют ее дизайнером лучше любой другой модели на рынке.
00:00:14И она действительно хороша, но есть один подвох, и это проблема не только Kimi.
00:00:17У каждой ИИ-модели есть свой стиль дизайна, который не замечаешь, пока не поработаешь с ней достаточно долго.
00:00:22Когда анонсируют новую модель, все говорят, что она лучшая во фронтенде, и для первых нескольких сайтов так и есть.
00:00:28Но правда в том, что у всех них есть свои шаблоны, которые они используют в каждом дизайне.
00:00:32Неважно, Sonnet 4.5 это или GPT 5.6 — эти паттерны постоянно всплывают в их работах.
00:00:38Поэтому, какими бы моделями вы ни пользовались, вам нужно что-то, чтобы сбить их со стандартного шаблона, как и делает хороший дизайнер.
00:00:43И один из лучших способов сделать это — навык под названием Hallmark.
00:00:46Если вы у нас впервые: мы IT-компания, а это наш канал AI Labs,
00:00:50где мы показываем, как оптимизировать ваш бизнес с помощью ИИ. А если у вас нет своего бизнеса,
00:00:54вы можете использовать эти навыки, чтобы зарабатывать, оптимизируя его для других.
00:00:58И в этом видео мы разберем модель Kimi, ее возможности во фронтенд-дизайне и навык, который очищает дизайн от шаблонов.
00:01:05Возможно, вы уже знаете Kimi K3 как одну из лучших моделей Moonshot, но вот краткое резюме для тех, кто не в курсе.
00:01:11Moonshot AI выпустили ее как флагманскую модель, и она быстро стала популярной.
00:01:15Главное новшество — теперь она пополнила ряды моделей с контекстным окном в миллион токенов.
00:01:20По производительности она соперничает с Fable 5 и GPT 5.6 во многих областях, а это две сильнейшие модели на данный момент.
00:01:26Для сравнения мы используем бенчмарки от Artificial Analysis, которые оценивают модели в разных категориях.
00:01:32По интеллекту она далеко опережает Opus 4.8 и новую Gemini 3.6, но слегка уступает Fable 5 и GPT 5.6.
00:01:40Причем разрыв в цифрах настолько мал, что она находится практически на одном уровне с ними.
00:01:44Что касается фронтенд-дизайна, она на самом деле обходит даже этих двоих по данным LM Arena,
00:01:48где модели сравниваются на одних и тех же промптах и ранжируются на основе реальных отзывов пользователей.
00:01:54Одна из причин такого успеха Kimi — встроенный визуальный контроль (vision in the loop), основанный на ее мощных компьютерных зрениях.
00:02:00Грубо говоря, модель не просто пишет код, она проверяет то, что создает.
00:02:04Большинство моделей смотрят только на код, чтобы угадать, как будет выглядеть сайт,
00:02:07но Kimi делает скриншоты созданного, оценивает результат и вносит правки.
00:02:11И в этом кроется одна из главных причин, почему ее считают лучшей во фронтенде.
00:02:15Ее отступы и макеты получаются куда более сбалансированными и продуманными, чем у других моделей.
00:02:19Остается стоимость.
00:02:20И именно здесь Kimi получает реальное преимущество.
00:02:22Ее цена составляет $3 за миллион входных токенов и $15 за миллион выходных.
00:02:27GPT 5.6 стоит чуть дороже: $5 за вход и $30 за выход.
00:02:32А Fable сейчас самая дорогая — $10 за вход и $50 за выход.
00:02:36Так что Kimi дает вам тот же уровень производительности, что и топовые модели, но по самой низкой цене среди трех.
00:02:41Kimi поставляется с собственной оболочкой Kimi Code, которая была запущена вместе с моделью K2.5.
00:02:47Это терминальный агент для написания кода, позволяющий запускать Kimi без прямого обращения к API.
00:02:52Но когда мы попробовали Kimi Code, мы обнаружили, что она работает очень медленно.
00:02:55Задача, которая у Claude Code или Codex занимает около 3 минут, у Kimi Code берет около 10.
00:03:00И на это есть две причины.
00:03:01Во-первых, веса Kimi еще не выложены в открытый доступ, то есть модель хостится только у Kimi и ни на каких других серверах.
00:03:08Из-за этого каждый запрос должен отправляться прямо на собственные сервера Kimi.
00:03:12Эти сервера перегружаются, поэтому любой ваш запрос обрабатывается дольше.
00:03:16Вторая причина — сама оболочка.
00:03:17С ней было тяжело работать даже на старых моделях, да и сами Kimi признают в документации, что она не раскроет весь потенциал K3.
00:03:25Помимо скорости, есть еще две проблемы.
00:03:27Первая — это контекст.
00:03:28Работая с Codex и Claude Code, мы часто меняем модели в зависимости от задачи, и обе они отлично удерживают контекст.
00:03:36Но в Kimi Code так сделать не получится, потому что механизм удержания контекста беседы ломается при смене моделей.
00:03:43Вторая — субагенты.
00:03:44При запуске казалось, что система разворачивает огромное их количество.
00:03:47Но когда мы спросили после, она ответила, что запустила всего 5 субагентов для выполнения задачи.
00:03:51Поэтому, чтобы протестировать модель как следует, мы запустили ее внутри Claude Code, где она работает невероятно хорошо.
00:03:57И Kimi предоставляет инструмент именно для этого.
00:03:59Один из способов запустить Kimi внутри Claude Code — напрямую через API.
00:04:03Но это сильно ударит по кошельку, ведь вы платите за каждое прочитанное и написанное слово, и при активном использовании суммы быстро растут.
00:04:10Так что лучший вариант — запускать ее через уже оплаченный план Kimi.
00:04:14Таким образом вам не придется думать о счетах за API — вы просто платите обычную ежемесячную подписку.
00:04:18Для этого есть инструмент под названием CLI Proxy API.
00:04:21Он берет среды разработки, в которых вы уже авторизованы, и превращает их в отдельный API, работающий локально на вашей машине.
00:04:28То есть вы фактически превращаете свою существующую подписку в локальный сервер.
00:04:33Вы устанавливаете его с помощью команды brew install.
00:04:35После этого вы логинитесь в Kimi через команду Kimi login, которая открывает страницу входа.
00:04:41Как только данные подтверждены, авторизация завершена.
00:04:43Затем вы запускаете сервер, чтобы соединение с Kimi оставалось активным.
00:04:47После этого останется еще один шаг — сгенерировать API-ключ для локального сетапа, так как этот ключ передается в Claude Code для доступа.
00:04:54Но вместо того чтобы делать это вручную, можно просто попросить Claude Code (или любого другого агента) настроить API-ключ за вас.
00:05:02Когда все готово, вы просто копируете ключ и используете его.
00:05:04Затем запускаете Claude Code.
00:05:06Для этого нужно изменить URL, на который Claude отправляет запросы.
00:05:09По умолчанию он указывает на собственный URL Claude, поэтому вы меняете его на localhost, ведь сервер теперь работает локально.
00:05:16Вы вставляете сгенерированный ключ в качестве токена авторизации Anthropic и выбираете модель Kimi K3.
00:05:22После этого запускаете команду Claude, и Claude Code открывается с моделью K3 через вашу подписку Kimi.
00:05:28Стоит учесть, что эти настройки действуют только в рамках одной терминальной сессии.
00:05:32Так что ничего из этого не ломает систему навсегда.
00:05:33Когда вы закроете сессию и откроете Claude в новом терминале, вы сможете работать с Claude Code через привычную подписку.
00:05:39Но перед тем как перейти к деталям скилла, подпишитесь на канал и поставьте лайк.
00:05:44Эта небольшая поддержка очень важна для нас.
00:05:47Лендинг — это лицо вашей компании.
00:05:49И если он выглядит как шаблонный шлак, вы теряете доверие, и клиенты к вам просто не придут.
00:05:54Чтобы сделать нормальный сайт, вам нужно выбить модель из привычных и безопасных паттернов, к которым она стремится.
00:06:00Для этого создано множество скиллов.
00:06:02И один из самых популярных — Hallmark, скилл очистки дизайна от ИИ-штампов для агентов.
00:06:07Он работает через четыре глагола-команды.
00:06:08Первый — базовый: вы просто говорите агенту, что сделать, и он создает новые интерфейсы по заданному процессом алгоритму.
00:06:15Второй — audit: он проверяет ваш код на известные анти-паттерны, гарантируя отсутствие клише на сайте.
00:06:21Третий — redesign: он выбрасывает текущий дизайн и делает свежую итерацию в совершенно ином стиле.
00:06:27И последний — study: вы даете ему понравившийся сайт, он вытягивает из него стиль и работает в этом направлении.
00:06:33И вот что здесь самое важное.
00:06:34Если бы вы попросили обычного агента изучить сайт без Hallmark, он бы просто внаглую скопировал стиль.
00:06:40Но Hallmark предотвращает это и использует сайт именно как референс, а не как исходник для клонирования.
00:06:45Благодаря этому итоговый результат остается оригинальным.
00:06:47Также он поставляется с богатой библиотекой стилей, откуда можно брать идеи для проектов.
00:06:51Если хотите посмотреть на эти стили, на их сайте есть примеры лендингов для каждого из них.
00:06:56Так что вы можете оценить их наглядно.
00:06:57А в их документации файл recipe.md содержит лучшие практики составления промптов.
00:07:02Чтобы начать использовать Hallmark, его нужно сначала установить.
00:07:04Для этого скопируйте команду установки из репозитория GitHub, вставьте в терминал, и процесс запустится.
00:07:11Утилита спросит, для какого агента вы хотите его установить.
00:07:13Если вы используете Kimi code или запускаете Codex, вы продолжаете без изменений.
00:07:17Скилл установится в папку .agents, которую многие агенты (включая этих двоих) используют для хранения конфигов.
00:07:23Но так как вы используете Kimi через Claude Code, вам нужно также выбрать Claude Code из списка агентов.
00:07:28И это установит его в папку .claude, где находятся все конфигурации Claude.
00:07:32После установки перейдите в проект — там вы обнаружите папки .agents и .claude со встроенным скиллом.
00:07:38Файл skill.md содержит описания того, как его использовать, как вызывать и что требуется для работы.
00:07:44И именно это делает его лучше альтернатив.
00:07:46Потому что он содержит более сотни референсов, покрывающих разные аспекты, включая шаблоны ИИ-мусора.
00:07:52Перед выдачей результата он прогоняет 58 проверок, которые гарантируют очистку сайта от штампов.
00:07:58В нем также есть справочники для компонентов и для команд-глаголов, о которых шла речь ранее.
00:08:02Но прежде чем оценить дизайн от этого скилла, пара слов от нашего спонсора.
00:08:05Ваш ИИ-ассистент прекрасно работает в моменте, но забывает абсолютно все, стоит вам закрыть его или сменить инструмент.
00:08:12Приходится начинать заново, не зная, что делалось вчера или что выяснил другой агент, тратя время и деньги на повторные объяснения.
00:08:19Jolly Memory — бесплатное опенсорсное расширение для IDE, наделяющее вашего ассистента долговременной памятью.
00:08:24Оно автоматически фиксирует логику вашего проекта из тикетов, ссылок и диалогов, сохраняет на вашей машине и превращает их в структурированную документацию к каждому комиту, сохраняя ход мыслей за каждым инженерным решением.
00:08:39Оно не привязано к одному инструменту или модели: переходите от Claude к Gemini или Qwen — и ваша память переходит вместе с вами, без файлов state.md и лишней синхронизации.
00:08:48Оно работает в VS Code, IntelliJ, Cursor, Claude и Windsurf: один раз установили — и оно помнит всё везде.
00:08:56Если что-то ломается, вы можете отследить причину любого изменения, ведь оно наглядно раскладывает проект как понятную карту.
00:09:03Скачивайте Jolly Memory по ссылке в закрепленном комментарии.
00:09:06Хотя Kimi действительно хороша во фронтенде, она успела перенять собственные привычки, складывающиеся в ее фирменный стиль.
00:09:13Она еще совсем новая, поэтому эти паттерны пока не бросаются в глаза, но со временем они станут очевиднее.
00:09:18А поскольку китайские модели часто обучают методом дистилляции моделей Claude (то есть обучают одну модель на ответах другой), стиль Opus 4.8 очень заметен в генерациях Kimi.
00:09:29То, как Opus ставит фоновые картинки в шапке, сдвигает крупный заголовок вбок и тяготеет к теплой оранжево-коричневой палитре — всё это есть и в дизайнах Kimi.
00:09:40Но что нам нравится в Kimi — ее тексты не напичканы пафосными маркетинговыми слоганами, которыми грешит Opus.
00:09:46Каждая деталь выглядит осмысленной, а текст воспринимается куда более продуманным, чем у других моделей.
00:09:51Чтобы протестировать скилл, мы запустили его в Claude Code с моделью Kimi и дали простой промпт для создания лендинга.
00:09:56При запуске он начинается с предварительного шага под названием pre-flight.
00:09:59Pre-flight сканирует существующие файлы с информацией о стиле дизайна и решает, что можно оставить, а что нужно переделать.
00:10:06Так как мы только что развернули шаблон Next.js, он зафиксировал Next.js как фреймворк, а остальное отбросил.
00:10:11Перед продолжением он уточняет три вещи: кто целевая аудитория, для чего нужен сайт и какой у него тональность.
00:10:18Указывать это сразу в промпте — лучшая практика, но если вы пропустите, скилл сам задаст эти вопросы, так что это не строго обязательно.
00:10:25Как только вы ответите, он подтягивает тему и всё остальное из референсов и собирает сайт.
00:10:30А закончив, он проверяет, прошел ли проект все 58 проверок на ИИ-клише.
00:10:34Так как Hallmark завязан на эти глаголы-команды, запрос на полный реддизайн меняет всё.
00:10:39Он распознает команду, загружает протокол redesign, снова задает вопросы, запускает тот же процесс и пересобирает всё в совершенно ином направлении.
00:10:49Затем идет режим audit, проверяющий дизайн на соответствие ИИ-шаблонам.
00:10:53Запуская Hallmark audit, вы повторно подгружаете скилл, он генерирует отчет на основе этих паттернов и подсвечивает все находки.
00:11:00И уже на основе этого отчета вы решаете, какие правки внести.
00:11:02Но при работе с Kimi в Claude Code нужно учитывать управление контекстом, потому что авто-сжатие (auto-compaction) не сработает.
00:11:09То есть, когда контекстное окно переполняется, работа не прекращается,
00:11:12но при полном окне вы заметите, что ответы начинают отклоняться от инструкций или становятся странными и банальными.
00:11:18После аудита Kimi внесла исправления по замечаниям, и их было немало.
00:11:22Она убрала шрифт, из-за которого дизайн выглядел дешевым ИИ-шаблоном.
00:11:25Она заменила картинки с Unsplash на фото с Pixum, так как Unsplash использует почти каждая модель.
00:11:32И исправила мобильную адаптивность, что сильно подтянуло сайт в целом.
00:11:36Далее вы можете просить новые версии, пока результат вас полностью не устроит.
00:11:39Вот один совет, если вы собираетесь использовать скиллы с Kimi и Claude Code.
00:11:42Автоматический вызов работает нестабильно, так как Kimi не является дефолтной моделью для Claude Code,
00:11:47а этот авто-триггер заточен именно под собственные модели Claude.
00:11:51Так что лучше вызывать скилл вручную через слэш-команду — это гарантирует его подгрузку перед началом сборки.
00:11:57Мы также провели аналогичный тест в Claude Code на модели Opus 4.8 — со скиллом и без него.
00:12:03Мы начали без скилла, и модель собрала приложение стандартным образом.
00:12:06Это заняло около 6 минут, а выдаваемый сайт оказался жуткой ИИ-штамповкой.
00:12:10В нем всё выдавало классический Opus: от выбранных цветов и градиентного фона до закругленных карточек.
00:12:16Если помните, в нашей дизайн-системе есть скилл детектора ИИ-клише,
00:12:20обученный находить штампы во всех известных паттернах, включая характерные для Opus.
00:12:24Мы натравили его на проект, и он задетекпил кучу всего, отчитавшись о множестве явных и скрытых паттернов,
00:12:30отдельно раскритиковав градиентный текст.
00:12:32Затем мы запустили Hallmark.
00:12:33Он подгрузил скилл, провел preflight, зафиксировал паттерны, задал те же вопросы и заново запустил весь процесс.
00:12:39Это заняло намного больше времени, чем прогон без скилла, но результат того стоил,
00:12:43потому что итоговый дизайн получился куда более креативным и продуманным.
00:12:46У кнопок была отличная интерактивность, и всё благодаря тому, что модель лучше поняла суть продукта.
00:12:51По умолчанию скилл не вставляет фейковые картинки-заглушки, так как использование стоков Unsplash считается у него нарушением.
00:12:58Он создан для разработчиков продуктов, поэтому просит загрузить свои материалы вместо использования ИИ-картинок или стоков.
00:13:04В целом он выдал ощутимо лучший дизайн, чем Kimi, так что пока этот скилл работает с Claude эффективнее.
00:13:10У него еще нет глубокого понимания дизайна Kimi, и он просто находит ошибки на основе чужих известных паттернов.
00:13:15Но по результатам всех наших тестов скилл показал себя очень хорошо.
00:13:18Упомянутую дизайн-систему, а также всё остальное, что мы создаем и показываем в роликах,
00:13:23можно найти в нашем сообществе AI Labs Pro.
00:13:26Так что если наша работа вам полезна и вы хотите поддержать канал, это лучший способ.
00:13:31Ссылка в описании.
00:13:33Теперь, если вы работали с Codex или знаете принципы его работы, вы в курсе, что его дефолтная палитра — смесь зеленого и белого,
00:13:38подобно тому как Opus по умолчанию выдает оранжевый, кремовый и коричневый.
00:13:42Это базовые цвета его стандартного стиля.
00:13:45Также его макеты опираются на кучу SVG, а размеры шрифтов он выбирает достаточно мелкие относительно экрана.
00:13:51Дизайны получаются неплохими на фоне остальных, но эти стандартные паттерны будут вылазить в любом случае.
00:13:56Поэтому мы протестировали Codex со скиллом, установленным в папку .agents, и дали ему простой промпт с описанием задачи.
00:14:03Для этого мы использовали приложение Codex, так как в нем есть встроенные браузерные инструменты и другие полезные фичи.
00:14:09Он прошел этап preflight и спросил нас про аудиторию, юзкейс и тональность.
00:14:14После нашего ответа он прогнал весь воркфлоу: отредактировал файлы, выполнил стандартные тесты и интерактивную проверку в браузере.
00:14:21У него под рукой есть функции браузера, и он действительно хорош в подобных вещах, поэтому пускает их в ход.
00:14:26Когда всё завершилось, итоговый сайт выглядел гораздо лучше.
00:14:29Единственное — сине-белое сочетание всё еще может отдавать ИИ-сборкой, но здесь оно выглядит осмысленным, а не дешевым штампом, ведь такие цвета органичны для технических сайтов.
00:14:39Все элементы отличались от того, как Codex генерирует дизайн по умолчанию.
00:14:43Хотя в изображении для главного экрана были проблемы (например, стили активной вкладки отобразились криво), это можно было легко поправить позже.
00:14:52Затем мы запустили Hallmark audit, и он сформировал отчет.
00:14:54В отчете говорилось, что общая структура получилась отличной, с единичными недочетами вроде адаптивности, которую первая версия часто упускает.
00:15:02На этом мы подходим к концу видео.
00:15:03Если вы хотите поддержать канал и помочь нам выпускать подобные ролики дальше, воспользуйтесь кнопкой «Суперспасибо» ниже.
00:15:10Как всегда, спасибо за просмотр, и увидимся в следующем видео!