Fable 5 и GPT 5.6: создание сайта за $10 000 с помощью одного этого навыка
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00Весь этот веб-сайт был создан одним заходом в Claude Fable 5 за один раз.
00:00:05Это не просто одна анимация прокрутки, это несколько анимаций, склеенных вместе,
00:00:10чтобы создать плавный, качественный и целостный пользовательский опыт.
00:00:15Это просто невероятно.
00:00:16Это продукт премиум-класса, и я покажу вам навык, который позволяет сделать всё это.
00:00:22Кроме того, я покажу, как я сделал это не только в Claude Code,
00:00:25но и продемонстрирую то же самое в совершенно новом GPT 5.6 Sol,
00:00:31ведь зачем ограничиваться только одним ИИ-инструментом в наши дни?
00:00:35И эта штука действительно крутая.
00:00:37Как я уже сказал, если вы попытаетесь сделать это вручную без того навыка прокрутки, который я нашел и улучшил,
00:00:42вы знаете, как это сложно.
00:00:43Вам нужно создавать несколько видео, находить начальные кадры, пытаться сопоставить их,
00:00:47вытаскивать все кадры по одному, это настоящая головная боль,
00:00:50а это делает весь процесс чрезвычайно простым в исполнении.
00:00:53Настоящая заслуга за этот навык принадлежит Питеру Вану.
00:00:55Это он создал оригинальную версию.
00:00:57Я нашел её в Twitter, и он был достаточно любезен, чтобы открыть исходный код.
00:01:00Так что ссылка на его “Scroll World” будет ниже, чтобы вы могли взглянуть.
00:01:03Я же форкнул этот проект и внес несколько улучшений,
00:01:07а именно ввел бюджетные уровни, чтобы вы могли делать это с меньшими затратами.
00:01:10Нам не обязательно нужно шесть разных сцен для нашего веб-сайта,
00:01:14и я добавил много улучшений для мобильной версии и кое-что связанное с SEO.
00:01:19В целом, то, как работают эти анимации прокрутки: мы начинаем с одного изображения.
00:01:23Это то, что вы видите прямо здесь.
00:01:24Затем мы берем это изображение и превращаем его в видео.
00:01:27Эта анимация прокрутки в какой-то момент была видео, но мы извлекаем все отдельные кадры из видео с помощью FFmpeg,
00:01:34а затем связываем их с позицией, на которой вы, пользователь, находитесь на веб-сайте.
00:01:40За кулисами происходит много всего, чтобы сделать опыт плавным и избежать рывков.
00:01:46Кроме того, мы следим за тем, чтобы все наши сцены ссылались друг на друга при создании.
00:01:50Таким образом, они все выглядят связно.
00:01:52Как будто всё это — часть единой истории.
00:01:55Что касается генерации изображений и видео, мы делаем это через MCP Higgs Field.
00:02:00И мы можем делать это как с Claude Code, так и с Codex.
00:02:02Нам никогда не нужно покидать терминал.
00:02:04Он вызывает все эти модели изображений, а именно GPT Image 2, и все модели видео, а именно Seed Dance, через этот MCP или CLI.
00:02:12Чтобы подключить эти инструменты к выбранному вами ИИ-агенту, просто перейдите на Higgs Field, в раздел MCP и CLI, и выполните эти шаги.
00:02:20Вам просто нужно скопировать URL-адрес для MCP, а затем пройти процесс аутентификации.
00:02:25Единственное, что нужно после этого — сам навык.
00:02:27И ссылка на мою версию тоже будет ниже.
00:02:30Вы можете просто скопировать URL, передать его Claude Code или Codex, либо использовать как плагин.
00:02:35Работает любой вариант.
00:02:36Как я сказал во вступлении, я буду демонстрировать это в Codex с новым Sol 5.6, но вот как это выглядело в Claude Code.
00:02:44Процесс абсолютно тот же.
00:02:46Вы проходите интервью, рассказываете ему, какой веб-сайт хотите построить, что хотите видеть в каждой сцене, и он ведет вас шаг за шагом.
00:02:53Он обязательно уточнит: “Эй, вам нравится это изображение?” прежде чем создавать все видео.
00:02:57Вы не просто запускаете навык, и всё видео появляется без вашего участия.
00:03:01Так что он действительно ведет вас за руку на протяжении всего процесса.
00:03:04Итак, внутри Codex я вызвал навык “Scroll World”.
00:03:07Я просто ввел косую черту и “scroll world”.
00:03:08И сказал, что пытаюсь создать сайт для бутикового туристического бренда в Японии.
00:03:14И в качестве общего художественного направления я выбрал стиль оригами.
00:03:18Если вы не знаете, какой стиль хотите, можете пообщаться с ИИ, и он задаст вам несколько вопросов.
00:03:25Я уже заранее знал, чего хочу.
00:03:27Так что не беспокойтесь, если у вас нет точной идеи сразу. После того как вы зададите творческое направление, он спросит о бюджете.
00:03:36И о том, что вы хотите сделать с мобильным бюджетом.
00:03:38Он спрашивает: “Сколько сцен вы хотите?”
00:03:41Здесь было шесть сцен.
00:03:43Это значительный объем видео, и это довольно долгое путешествие от начала до конца.
00:03:48Для большинства людей это, вероятно, перебор.
00:03:50К тому же, это будет стоить вам много кредитов Higgs Field, в итоге мне обошлось примерно в 800.
00:03:56Так что, если вы не на одном из дорогих планов, я думаю, четыре сцены — это золотая середина.
00:04:03Далее — что вы хотите делать с мобильной версией.
00:04:04Вы можете сделать всё: от простой безопасной обрезки до полной портретной версии, где будут созданы дополнительные видео специально для мобильных.
00:04:12У вас есть пространство для выбора того, насколько глубоко вы хотите погрузиться.
00:04:15Но для этого видео мы выберем “эконом” и “безопасную обрезку”.
00:04:20Это самые дешевые варианты, и знайте, что можно сделать меньше сцен.
00:04:24Можно сократить до трех, это просто то, что предлагается по умолчанию.
00:04:28Затем он проведет вас через предложение по путешествию и скажет: “Эй, вот как будет выглядеть каждая сцена”.
00:04:32И скажет, сколько генераций потребуется.
00:04:35Всего потребуется четыре генерации изображений, четыре видео погружения в сцену.
00:04:40Нужен коннектор между некоторыми видео и перекрестными затуханиями.
00:04:43Всего получается девять генераций, и он дает ожидаемое время, которое обычно довольно консервативно.
00:04:49Обычно это не занимает так много времени, даже если мы говорим об ИИ-видео.
00:04:52И как только вы одобрите это, следующее, что он сделает, — сгенерирует якорь.
00:04:56Якорь — это будет начальный кадр.
00:05:00И мы говорим об этом начальном кадре.
00:05:01Речь идет о чем-то похожем на это на заднем плане.
00:05:03Это будет просто статичное изображение.
00:05:04Теперь ваша очередь сказать: “Окей, мне это нравится”.
00:05:06Это художественное направление, которое будет доминировать.
00:05:09Или “Нет, давайте изменим кое-какие детали”.
00:05:11Это та часть, которую вы действительно должны довести до идеала, потому что если вам не нравится и вы скажете “да”, всё будет основано на этом.
00:05:17Вот взгляд на созданное изображение.
00:05:19И оно мне нравится.
00:05:20Вы, наверное, уже понимаете.
00:05:21Если вы делаете всё это через Codex и Sol, у них есть генерация изображений.
00:05:26Нам не нужно отправлять запросы в Higgs Field для создания изображений с GPT Image 2,
00:05:31когда у нас есть эта возможность внутри Codex.
00:05:34Так что вы заставите Codex сделать это нативно, но всё равно придется отправлять запросы в Higgs Field для генерации видео.
00:05:41С другой стороны, если вы делаете это в Claude Code, очевидно, там нет генерации изображений.
00:05:44Так что Higgs Field должен выполнять всю работу от начала до конца.
00:05:48Но вот изображение.
00:05:50Оно мне нравится.
00:05:51Так что же мы сделаем?
00:05:52Мы скажем: “Эй, это великолепно”.
00:05:55Не могу напечатать.
00:05:57Идем дальше.
00:05:59Через 32 минуты он завершил наш сайт.
00:06:01У нас четыре разные сцены.
00:06:02Это заняло 10 генераций.
00:06:04И теперь он запущен на нашем локальном хосте и готов к работе.
00:06:06Давайте взглянем.
00:06:07Вот наш сайт о путешествиях в Японию.
00:06:08Мы просто прокрутим его, чтобы получить общее представление.
00:06:12Итак, люди путешествуют, вот метро.
00:06:15Переходим к дому.
00:06:17Он открывается.
00:06:19Затем они идут в отель.
00:06:20Он разворачивается.
00:06:22Довольно круто.
00:06:23А еще у нас есть птица, которая начинает лететь.
00:06:28В целом, что мне нравится?
00:06:30А что не нравится?
00:06:31Мне нравятся визуальные эффекты.
00:06:32Думаю, это выглядит супер круто.
00:06:34Знаете, я считаю, что каждая отдельная сцена развивалась хорошо.
00:06:38Как этот момент, когда прибывает поезд метро.
00:06:41Потрясающе.
00:06:41Моя проблема здесь — переход от первой сцены ко второй.
00:06:46Довольно резкая склейка.
00:06:47Может быть, вы и хотите резкую склейку.
00:06:48Думаю, это отчасти творческое решение.
00:06:51Но это то, что мы можем изменить.
00:06:52То же самое здесь.
00:06:53Когда мы переходим от второй сцены — невероятная детализация, если честно,
00:06:57к третьей — снова резкая склейка.
00:07:01А вот переход с третьей на четвертую — думаю, это отличный переход.
00:07:04Вот он открывается.
00:07:06Бум.
00:07:06Они в отеле.
00:07:07Но если вы посмотрите на задний план, заметьте, как сцена номер четыре входит в кадр.
00:07:12Сначала она размыта, потом появляется, создает эффект 3D.
00:07:17И добавляет глубины сайту.
00:07:19А затем плавно переходит в четвертую сцену.
00:07:22Вот это отлично.
00:07:23Если бы такие переходы были с первой на вторую и со второй на третью, я был бы очень счастлив.
00:07:28Это моя главная претензия.
00:07:31Но всё остальное выглядит хорошо.
00:07:32И я не думаю, что добавить такие переходы и сгладить всё
00:07:35было бы слишком сложно.
00:07:36Потому что, если сравнить ту генерацию, которая, опять же, была на Sol GPT 5.6, с тем, что мы создали
00:07:41в Claude Code, переходы между сценами здесь определенно более гладкие.
00:07:45Итак, это сцена один, верно?
00:07:46Эти объекты выталкиваются сверху, и это почти бесшовный переход
00:07:52к тому, чтобы они выглядели здесь максимально естественно.
00:07:56То же самое прямо здесь.
00:07:57Мы заходим.
00:07:58О, бум.
00:07:58Он открывается.
00:07:59А затем мы просто переходим поверх к следующей сцене.
00:08:01Так что с переходами Fable 5, думаю, мы справляемся лучше.
00:08:06То же самое здесь.
00:08:06Бум.
00:08:07Мы здесь.
00:08:07Уменьшаем масштаб.
00:08:08Следующая сцена.
00:08:09Так что это моя главная претензия.
00:08:11Я бы определенно отдал предпочтение Fable 5 перед Sol 5.6.
00:08:15Но это ведь всё сделано одним заходом, верно?
00:08:18С помощью одного навыка.
00:08:19Я очень впечатлен тем, насколько хорошо был создан этот навык.
00:08:25Это потрясающе.
00:08:26Следующий вопрос: окей, это визуальное зрелище.
00:08:29Можно ли превратить это в веб-сайт, который будет функциональным?
00:08:33Я не думаю, что это проблема.
00:08:33Думаю, технические сложности создания такого анимированного сайта,
00:08:34который выглядит связно, без рывков и низкого качества, довольно велики.
00:08:38Если бы я попросил вас сделать это самостоятельно, у вас возникло бы много трудностей.
00:08:43Это заняло бы кучу времени.
00:08:46С этой базой всё гораздо проще.
00:08:47Окей, что мы делаем с текстом?
00:08:51Что с CTA (призывом к действию)?
00:08:52Как мы ведем пользователя от начала до конца?
00:08:53Например, заставляя заполнить какую-то форму.
00:08:56Не думаю, что это слишком сложно.
00:08:57Нам не нужно изобретать велосипед.
00:08:58Это то, что делает каждый веб-сайт.
00:09:01И добавить это поверх того, что мы имеем с Fable 5 и 5.6,
00:09:02вовсе не проблема.
00:09:06Тот факт, что это делается с помощью одного навыка за один раз, просто поражает.
00:09:09Опять же, если вы хотели сделать это самостоятельно три, шесть, девять месяцев назад,
00:09:13это было настоящей головной болью.
00:09:16Так что, спасибо Питеру Вану за оригинальную версию навыка.
00:09:18Ссылки на обе версии, мою и его, будут внизу в описании.
00:09:21Как вы видели, всё супер просто.
00:09:24Вам вообще ничего не нужно делать.
00:09:26Вам просто нужно прийти.
00:09:27Вызвать навык.
00:09:28Дать творческое направление, и он начнет работу.
00:09:29На этом я вас сегодня покину.
00:09:32Дайте знать в комментариях, что вы об этом думаете.
00:09:37Обязательно ознакомьтесь с Chase AI Plus, если хотите получить доступ к моему мастер-классу по Claude Code
00:09:40и другим урокам по ИИ, подобным этому.
00:09:43Помимо этого, увидимся.
00:09:46До скорого.