00:00:00Сегодня вы узнаете, как объединить возможности нового Clod design и Seed Dance 2.0,
00:00:06чтобы создавать анимированные веб-сайты, подобные этому. Я покажу вам весь мой рабочий процесс шаг
00:00:12за шагом, чтобы вы могли повторить это, даже если никогда раньше не делали ничего подобного. И по
00:00:17пути я покажу, как извлечь максимум из совершенно нового инструмента Anthropix с помощью нескольких советов и
00:00:22хитростей. Итак, когда дело доходит до создания такой веб-страницы, первое, с чего нам нужно начать, — это
00:00:28фоновое видео, а чтобы получить фоновое видео, нам сначала нужно исходное изображение. Сейчас мы собираемся
00:00:32создать это исходное изображение с помощью Nano Banana Pro, а затем возьмем его
00:00:37и превратим в видео с помощью Seed Dance 2.0, и все это произойдет здесь, на Higgsfield, который
00:00:44является моим универсальным магазином для любых инструментов для создания ИИ-контента. Итак, для начала мы просто перейдем
00:00:49к изображениям и направимся в Nano Banana Pro, и сразу же вы увидите некоторые изображения, над которыми я работал,
00:00:55и они должны выглядеть очень знакомо для нашей веб-страницы, особенно эти ребята. Точную подсказку,
00:01:01которую я использовал, можно найти в моей бесплатной школе, и ссылка на нее будет в описании,
00:01:05но на чем я хочу сосредоточиться здесь, когда мы говорим об изображении, так это не на самой конкретной
00:01:11подсказке, потому что изображение, которое вы захотите создать, будет отличаться от моего,
00:01:15а на композиции. Почему это изображение выстроено именно так? Ну, когда мы смотрим на
00:01:21конечный продукт здесь, это довольно очевидно, верно? У нас есть это большое главное изображение, занимающее правую часть
00:01:26экрана, но нам все равно нужно было немного свободного места слева для нашего текста, и когда я попросил Nano Banana
00:01:31Pro создать это изображение, я имел в виду именно такую композицию, я подумал: "Хорошо, у нас будет изображение,
00:01:38где оно как бы разрезано пополам: справа у нас будет, знаете, эффектное изображение, а слева
00:01:44мы разместим основной текст, так что это будет своего рода слоган".
00:01:51Здесь наверху у нас будет какой-то баннер с навигационной панелью, где люди смогут, знаете, нажать
00:01:55на "Главную" или перейти на разные страницы, у нас будут кнопки вроде "Зарегистрироваться"
00:02:00или "Узнать больше", а внизу, может быть, какой-то тикер. Я знал это заранее,
00:02:04и это то, что вам нужно знать, прежде чем просить Nano Banana Pro создать изображение
00:02:10для вас, потому что какой бы ни была композиция, именно она будет диктовать
00:02:17вашу подсказку. И теперь ваш вопрос, вероятно: "Ну, Чейз, я понятия не имею, какие у меня есть варианты, я
00:02:22не знаю, какой должна быть композиция в первую очередь, как мне это выяснить?" Что ж, самый
00:02:25простой способ сделать это — просто найти сайты, которые вам нравятся, и начать разбирать их композицию главного экрана и
00:02:30лендинга. И отличное место, чтобы увидеть примеры этого, — Dribbble. Итак, это Dribbble
00:02:35с тремя "B". Если я перейду туда и поищу "landing page sass", вы можете искать "landing page"
00:02:40как угодно, вы увидите, о чем я говорю. Итак, что мы видим здесь, верно? Ну, в этом примере
00:02:47они как бы разместили изображение внизу, а текст сверху. Мы могли бы сделать что-то похожее с
00:02:52этим, верно? Мы могли бы переместить его сюда, в центр, может быть, разместить облака по бокам
00:02:56вместо этого, а текст разместить здесь. Опять же, это полностью меняет композицию. Или мы хотим что-то
00:03:02вроде этого, где изображение в центре внимания, а текст идет вокруг, и мы добавляем другие элементы?
00:03:07Знаете, когда вы просматриваете и прокручиваете вниз, вы видите, что есть миллион разных способов
00:03:11сделать это, но вам нужно знать заранее, или, по крайней мере, у вас должно быть две или три идеи в
00:03:16запасе, а затем, когда вы перейдете в Nano Banana Pro, вы сможете дать ему подсказки, отражающие этот
00:03:22стиль. Итак, резюмируя, когда мы создаем наше изображение, первое, что нам нужно выяснить, — это
00:03:26композиция. И под композицией я имею в виду: где будет свободное пространство, где будет текст,
00:03:32он будет слева, в центре, справа, вверху — неважно, вам просто нужно выбрать и сделать так, чтобы
00:03:37ваша подсказка отражала это. А также, когда дело доходит до подсказки, полагайтесь на такие инструменты, как Claude, чтобы помочь
00:03:42написать ее за вас. Теперь, для нашей сегодняшней демонстрации мы будем использовать это изображение, и у меня также будет копия
00:03:47этого файла в сообществе, если вы хотите просто повторить за мной шаг за шагом. И с нашим статичным изображением в
00:03:51руках, теперь мы направляемся в Claud design, и общий поток будет таким: изображение, созданное в
00:03:56Nano Banana Pro, мы будем использовать для создания макета нашего сайта здесь, в Design, и как только мы получим сайт, который нам нравится,
00:04:01знаете, дизайн, который нам нравится, лендинг и все такое, тогда мы возьмем это изображение и превратим его в
00:04:05видео, потому что это очень просто сделать в качестве финального шага. Так что, если вы новичок в Claud design,
00:04:10не волнуйтесь, в этом видео мы затронем основные моменты, о которых вам нужно беспокоиться, но у меня также есть подробный
00:04:14разбор, который немного углубляется в детали, который вам тоже стоит посмотреть, и я прикреплю его выше, но для
00:04:18наших целей мы хотим перейти сюда, влево, выбрать "prototype", и мы просто дадим ему какое-нибудь
00:04:24имя проекта, я назову свой "sd2" для системы дизайна. У вас, вероятно, не будет
00:04:30системы дизайна, в данном случае она вам не нужна. Опять же, если вы хотите узнать больше о системах дизайна,
00:04:35посмотрите то видео с подробным разбором. Мы выберем "high fidelity", а затем мы создадим
00:04:40это, что приведет вас на эту страницу, и первое, что мы хотим сделать, — это добавить контекст,
00:04:45а контекст, который мы добавим, — это изображение, которое мы скачали, так что вы можете видеть здесь, слева,
00:04:49я загрузил свой скриншот. Далее мы хотим дать ему подсказку. Теперь вы можете продолжать добавлять больше
00:04:55скриншотов сюда, и я очень советую вам сделать это, если у вас есть хорошие примеры от кого-то вроде Dribbble. Так что
00:04:59если вы нашли что-то на Dribbble, что вам нравится с точки зрения общей композиции, добавьте это тоже.
00:05:04Теперь, что касается самой подсказки, я настоятельно советую вам полагаться на что-то вроде Claude
00:05:09Code, чтобы написать ее за вас, и вот взгляд на подсказку, которую придумал Claude Code, которую я собираюсь
00:05:13вставить в Claud design. Это для нашей фальшивой SaaS-компании Olympus, которая является платформой рыночной аналитики,
00:05:19так что она описывает, о чем компания, становится довольно подробной с основным текстом, рассказывает,
00:05:25какие разделы она хочет видеть на лендинге, а затем добавляет немного элементов движения. Теперь,
00:05:30очень важно, у нас есть эта строка в конце, которая гласит: "Задай мне любые вопросы перед началом". Крутая
00:05:36вещь в Claud design — это то, что он может действовать как Claude Code в том, что он создаст режим планирования,
00:05:42так что я дам ему подсказку, именно эту, которую вы видите здесь, а затем он задаст мне кучу
00:05:46вопросов, чтобы лучше детализировать то, что я пытаюсь построить. И замечательная вещь в
00:05:50функции режима планирования, где он задает нам вопросы, заключается в том, что если вы приходите с плохой подсказкой,
00:05:54которая даже наполовину не такая подробная, как эта, вы можете зайти в Claud design и получить довольно надежный первый
00:06:01вариант, потому что вы прошли через все эти вопросы и ответы с Claude. Итак, я вставил это туда, и мы
00:06:06просто собираемся нажать "отправить". Теперь краткое замечание об использовании Claud design: Claud design работает на
00:06:11своих собственных лимитах использования, это отдельно от ваших лимитов Pro или ваших лимитов Max 5 или Max 20 с
00:06:18Claude. Это отдельная вещь, и он может быть довольно ресурсоемким, поэтому всегда следите за ним. В моем случае
00:06:23я уже исчерпал его, потому что использовал очень много, так что я на своем дополнительном лимите.
00:06:28Для справки: когда я прошел через все это, что вы видите сегодня, самостоятельно, с точки зрения дополнительного
00:06:33использования, это стоило мне около пяти долларов, чтобы создать лендинг, и я мог бы получить это еще даже
00:06:38дешевле, но просто чтобы у вас было представление о том, где мы находимся. И вот вопросы, которые он возвращает
00:06:43нам: вопросы по типографике, разделу — что мы хотим сделать? Давайте сделаем "современную мифическую" цветовую палитру,
00:06:52давайте сделаем "инвертированную", и в конечном итоге у нас будет больше вариантов, как только он создаст это с помощью настроек (tweaks),
00:06:58как вы увидите позже. Голос копирайтинга: давайте сделаем "мифический", вкрапленный, потому что, в случае, если вы не поняли,
00:07:06мы делаем что-то вроде... название компании – Olympus, это типа приложение для аналитики, так что вся эта картинка,
00:07:11с которой мы имеем дело, должна быть как аналогия с прометеевым огнем. Итак, композиция героя: полноэкранное
00:07:17изображение, давайте сделаем полноэкранное изображение, порядок разделов: бум, бум, бум, бум. И вы
00:07:26всегда можете решить за меня, если вы просто даже не знаете... Социальное доказательство: "реши за меня", "реши за меня".
00:07:32И вот здесь есть крутая вещь — "tweaks" (настройки). Tweaks будут иметь больше смысла здесь через секунду, но я всегда
00:07:39предлагаю использовать как можно больше настроек, и мы всегда можем добавить больше позже. Так что мы нажмем "продолжить",
00:07:45и теперь он собирается создать эту вещь для нас. Теперь краткий обзор
00:07:50для Claud design: пока он строится, здесь, в правом верхнем углу, где написано "share" (поделиться), если я нажму на это,
00:07:56мы не застряли внутри Claud design навсегда. Что действительно круто в этом и что я покажу вам позже,
00:08:01это то, что мы можем экспортировать это в Claude Code, и тогда, как только у нас будет решение на 89 процентов, мы закончили
00:08:07разрушать лимиты использования, мы можем принести это в Claude Code и работать над ним до нашего, знаете,
00:08:12полного удовлетворения. Мы также можем экспортировать это как HTML, отправить в Canva, экспортировать как PowerPoint или PDF для
00:08:17скачивания. Мы также можем пригласить товарищей по команде, так что это может быть совместной работой. Так что
00:08:22вариантов много, и Claud design в целом очень универсален. И вот что Claud design выдал,
00:08:27и я буду перемещать это по всему экрану во время этого видео. Теперь, первое, на что стоит
00:08:33обратить ваше внимание: "tweaks" справа. Итак, tweaks — это меню на этой странице, которое позволяет нам
00:08:40очень быстро изменять различные микроэлементы нашей страницы. Так что я могу изменить акценты, я могу изменить
00:08:48тему со светлой на темную, что более очевидно здесь внизу, вы можете изменить заголовок, логотип,
00:08:54названия цен, любой вид движения, так что это делает очень и очень легким итерацию между разными версиями
00:09:03нашего сайта. Помимо этого, у меня есть возможность редактировать вещи на детальном уровне, если я приду сюда, в
00:09:07правый верхний угол и нажму "edit", я могу нажать на разные вещи, как эта кнопка здесь, и я могу изменить
00:09:13цвет напрямую, я могу изменить шрифт, знаете, отступы, прозрачность, все. И у меня также
00:09:19есть возможность комментировать, так что я могу нажать на ту же кнопку и вместо того, чтобы фактически менять
00:09:25конкретные значения, я мог бы оставить комментарий вроде: "сделай больше, сделай меньше", или я могу рисовать на нем, так что я
00:09:30могу рисовать на этой штуке, знаете, выбрать все это и сказать, типа: "эй, перемести влево", а затем отправить это
00:09:39Claude здесь внизу, и он фактически сделает скриншот, по сути, того, что я только что написал,
00:09:44и скажет: "о, хорошо, давай переместим это немного влево". И мы видим, что теперь он переместил это влево,
00:09:49и у него есть эта ужасная вещь, которую мы также можем удалить. Но что вам следует сделать в этот
00:09:55момент, так это, во-первых, знаете, получить быстрый взгляд на то, типа, хорошо, что я думаю о sort of общем
00:10:02дизайне? Первый проход кажется нормальным. Самое важное, с точки зрения нашего изображения, нужно ли нам вернуться внутрь
00:10:09Nano Banana Pro и отредактировать это изображение, нужно ли нам сделать его меньше, больше, что угодно? Если это выглядит
00:10:14хорошо, мое предложение, когда мы в Claud design, заключается в том, чтобы мы использовали sort of двухэтапный процесс. Первый: я хочу
00:10:21увидеть разные варианты моей веб-страницы, и я говорю не о маленьких настройках,
00:10:26я хочу увидеть как минимум еще два полностью разных макета, чтобы получить представление о том, по какому пути я
00:10:32хочу пойти. И как только мы найдем вариант, который нам нравится на макроуровне, что ж, тогда мы сосредоточимся на нем, и мы
00:10:37получим больше настроек, показанных нам, не только пять настроек, я говорю, типа, 15 настроек, так что мы действительно можем получить
00:10:43что-то, что нам нравится, потому что цель — дойти до 90-процентного решения, прежде чем мы привнесем видео, а затем
00:10:48прежде чем мы привнесем его в Claude Code, чтобы сделать его нашим собственным. И сделать это действительно легко: все, что нам нужно
00:10:53сделать, это попросить Claud design. Так что я скажу: "Можешь ли ты создать два дополнительных варианта макета для нашей
00:10:58веб-страницы, которые я могу просмотреть в дополнение к этой текущей?" Просто какие-то новые дизайны, которые мы могли бы
00:11:03включить. И эта идея создания макро-вариантов, а затем, как только мы решимся на вариант, создания кучи
00:11:09настроек — это то, что действительно отделяет Claud design от Claude Code. Теперь, прямо скажем, подсказка
00:11:16за подсказкой, в вакууме, я думаю, Design немного лучше, чем Claude Code в фронтенде, но этот
00:11:20вид вариативности и визуальной итерации, который мы можем делать очень и очень быстро, я думаю, это большой
00:11:27прорыв с Claud design, и именно в этом заключается ценность, потому что если мы попытаемся сделать то же самое внутри
00:11:32Claude Code, это немного трудоемко. И вот о чем я говорю: наверху у нас есть "кинематографическая"
00:11:37версия, которая была оригиналом, а теперь он дал нам "архивную", а также "терминальную" версию, и вы
00:11:45можете видеть, что они все довольно уникальны. И это также относится ко всей остальной части страницы, а не только к герою-разделу,
00:11:53но ко всей ней. И, честно говоря, глядя на это, я думаю, что терминал на самом деле выглядит довольно круто. Мы бы
00:12:01должны были изменить изображение здесь, и мы бы определенно должны были отойти от видео, но прямо
00:12:09сейчас вы видите это, и я... я думаю, это выглядит действительно круто и определенно выглядит иначе, чем ваш
00:12:13стандартный, повседневный ИИ-созданный веб-сайт. Так что это то, о чем я говорю, когда речь идет о том, чтобы
00:12:20фактически использовать силу Claud design — видеть эти вариации, потому что я бы
00:12:24никогда не подумал сделать что-то подобное или даже не знал бы, как попросить его дать мне это. Мне действительно
00:12:29нравится это. Но чтобы фактически удержать это видео в рамках темы, что мы собираемся сделать, так это остаться с
00:12:35кинематографической, но я хотел показать вам это, потому что идея в том, что вы делаете это, выбираете ту, которая вам нравится, а затем
00:12:40вы переходите к шагу два процесса Claud design, который заключается в настройках, настройках, настройках. И у нас есть все
00:12:46эти настройки здесь, но точно так же, как я просил Claud design ранее дать мне еще вариаций, теперь
00:12:51я собираюсь попросить его быть очень агрессивным с настройками, которые он дает мне. Я не должен знать, какие настройки
00:12:56я хочу, я не должен знать, типа "о, я хочу иметь возможность изменить тему, или заголовок, или логотип". Я
00:13:00не знаю, просто дай мне кучу, и мы разберемся. Так что я написал здесь: "давай останемся с
00:13:04кинематографической, ты можешь удалить остальные две, а также агрессивно увеличить количество доступных настроек".
00:13:11И мы увидим, что из этого выйдет. Теперь мы можем видеть все дополнительные настройки, которые он добавил, так что мы
00:13:15перешли от примерно пяти настроек к примерно 15 или около того, что отлично, так что у нас есть эти оригинальные
00:13:22с акцентами, тема, логотип, этот выглядит хорошо, шрифты, основной шрифт, моно-шрифт, тип масштаба...
00:13:36Суть в том, что я теперь могу просматривать все это снова и снова и снова. Я могу даже
00:13:42изменить темноту наложения CTA, свечение углей — типа, это не останавливается, это не останавливается. Так что я просмотрел
00:13:51все настройки со своей стороны, избавился от углей, и вот что мы в конечном итоге получили. Теперь у меня есть
00:13:56способность посмотреть на это в полноэкранном режиме, если я перейду в "present" наверху, в полноэкранный режим, чтобы мы могли получить лучшее представление о
00:14:02том, как это будет выглядеть. И сейчас, для меня, это выглядит довольно хорошо. Помните, нам не нужно 100-процентное
00:14:08решение внутри Claud design. Мы хотим подойти как можно ближе, мы хотим принять все дизайнерские
00:14:14решения, которые мы можем, а затем, что мы хотим в конечном итоге сделать, так это вернуть это в Claude Code и сделать мелкие
00:14:18настройки, потому что помните, Claud design — это ресурсоемкий инструмент, вы получаете только определенное использование, поэтому мы хотим сделать
00:14:23это важным. Так что теперь мы можем перейти в видеораздел, где мы берем этот фон и фактически
00:14:29анимируем его. Теперь, побочная заметка: важно, что мы сделали все это со статичным фоном, потому что
00:14:35когда мы говорим о мобильных пользователях, мы не хотим, чтобы наши мобильные пользователи столкнулись с каким-то гигантским видео, которое
00:14:39может их замедлить. Так что если кто-то на мобильном телефоне и они заходят на наш сайт, который мы настроили здесь, они
00:14:43просто увидят статичное изображение. Так что мы собираемся использовать cdance для этого. Так что опять же, я вернулся сюда, внутрь
00:14:47Higgsfield, собираюсь перейти в cdance 2.0. Вам не обязательно использовать cdance, cdance просто лучший из имеющихся
00:14:52сейчас. Другие варианты включают Kling 3.0, вы также можете использовать что-то вроде Vo 3.1. И видео-настройка
00:14:58очень проста, буквально вы просто берете свое изображение и собираетесь бросить его сюда
00:15:04Так что вы буквально просто перетаскиваете его сюда как начальный кадр, а затем мы просто даем ему
00:15:08подсказку. Теперь подсказка очень простая, все, что я написал, было: "сохраняй движение очень медленным, облака едва
00:15:15двигаются, угли от огня в его руках медленно дрейфуют". И мы получаем что-то вроде этого, мы хотим
00:15:21тонкого, мы не хотим сумасшедшего, вы не хотите, чтобы это выглядело как дикая видеоигра, вы хотите, чтобы это почти
00:15:26просто казалось анимированной, типа, низкоключевой гифкой, и это потому, что изображение героя просто дает нам немного
00:15:32изюминки нашему сайту, вы не хотите, чтобы это взяло на себя управление всем. И во-вторых, как вы увидите здесь, это
00:15:37собирается перевернуться, потому что в лучшем случае вы получите 15 секунд из этой штуки. В идеале вы можете создать
00:15:43идеальную петлю, но это может быть довольно сложно. Так что лучший вариант — сделать то, что мы сделали здесь, и просто иметь
00:15:4815-секундное видео, что звучит как много в начале, но это действительно не слишком тяжело. И
00:15:54другая вещь, когда мы идем на 15 секунд, шансы на то, что кто-то зайдет на ваш сайт и они
00:15:59просто сидят там на вашей странице героя, читая 15 секунд, а затем они пугаются
00:16:04среза, когда он возвращается обратно в петлю, маловероятны. Что скорее всего случится, так это они перейдут на
00:16:10вашу страницу героя, "вау, выглядит круто", 10 секунд спустя они уже прокрутили остальную часть страницы, чтобы увидеть, о чем вы
00:16:15все это. Так что держите подсказку простой, держите ее тонкой. Если вы хотите сходить с ума, вперед, сделайте это
00:16:20настолько долго, насколько возможно. На 15 секунд вы хотите, чтобы это было 16 на 9 и вы хотите, чтобы это было по крайней мере
00:16:261080p. Некоторые модели дадут вам возможность улучшить подсказку, где это, типа, почти
00:16:30говоря: "эй, ты ввел свою плохую подсказку, а мы сделаем ее лучше". Не делайте этого, вы всегда хотите полного контроля
00:16:34над своей подсказкой, и ожидайте, что вам придется сделать несколько вариаций этого, пока вы не получите это
00:16:40правильно. Так что, вероятно, чтобы получить то, что действительно работает, вам придется сделать это четыре или пять раз,
00:16:45пока вы наконец не получите тот результат, который ищете. Но как только мы получим этот результат, все, что нам нужно сделать, это
00:16:50скачать его, а затем мы прыгаем обратно в Claud design, и мы просто собираемся бросить этот MP4-файл в
00:16:57окно подсказки. Так что я просто загрузил его сюда, внизу, слева, а затем я написал: "можем ли мы поменять статичное
00:17:01изображение на видео, которое я только что загрузил, для фона героя?" И тогда мы дадим вам что-то вроде
00:17:05этого, и это буквально так просто. И в этот момент мы практически закончили внутри
00:17:12Claud design. Я имею в виду, если вы хотите внести больше изменений, сделайте больше настроек, полностью на ваше усмотрение, но если
00:17:17вы на этом этапе, я бы сказал, что вы готовы фактически выйти из Claud design и теперь принести
00:17:22это в нечто вроде Claude Code, как мы говорили ранее. Очень легко сделать: мы перейдем к
00:17:26share (поделиться), и мы собираемся перейти к "hand off to Claude Code". Теперь, поскольку это включает видео в MP4,
00:17:34если вы попробуете просто использовать команду копирования, у нее могут возникнуть проблемы с его фактической загрузкой. Так что
00:17:38то, что вы захотите сделать вместо этого, так это просто скачать ZIP, так что он собирается взять
00:17:44все файлы, все то живое видео, все кодинговые вещи под капотом и просто поместить это в ZIP-
00:17:49файл. И так вы можете сделать "download zip", вы затем хотите распаковать все это, а затем вы просто собираетесь
00:17:56взять эту извлеченную папку, бросить ее в Claude Code и сказать: "скачай все, мы теперь собираемся
00:18:03создать веб-сайт, используя весь этот код". И вы практически закончили в этот момент. Так что я бросил это внутрь
00:18:10и сказал: "извлеки все эти файлы для веб-страницы, которую мы строим", а затем запусти сервер разработки. И
00:18:14вот веб-страница на сервере разработки, она запущена. И с этим передача в Claude Code завершена,
00:18:19вы настроили анимированный раздел героя, у него есть видео, у него есть статичное, все готово к работе
00:18:25для вас, чтобы внести мелкие изменения, а затем отправить его в GitHub, прежде чем вы отправите его в Vercel и фактически
00:18:29разместите онлайн. Так что на этом я оставлю вас, ребята, на сегодня. Я надеюсь, это смогло пролить
00:18:33немного света на то, как объединить силу Claud design и Seed Dance 2.0 для создания таких sort of
00:18:39анимированных веб-сайтов. Как всегда, дайте мне знать, что вы думаете, убедитесь, что проверили Chase AI, если
00:18:44вы хотите получить в свои руки все эти ресурсы, и я увижу вас позже.