Transcription
Привет, я Лео, и в этом видео я покажу вам, как использовать новую предварительную модель Gemini 3.0 Pro вместе с Firecrawl для клонирования дизайна любого веб-сайта. Мы будем использовать новый формат брендинга из конечной точки сканирования Firecrawl для извлечения всего этого брендинга. А затем с этим брендингом мы будем использовать модель Gemini 3.0 Pro, чтобы сделать нечто похожее на то, что я сделал здесь с Convex. Итак, после извлечения его брендинга, была сгенерирована довольно общая целевая страница, но она сильно напоминает брендинг Convex. Я также сделал это для Firecrawl. Итак, это оригинальный веб-сайт Firecrawl. Вы можете заметить этот конкретный оранжевый цвет, а также шрифт, отступы, всё. Все эти стили были добавлены на наш собственный веб-сайт, как вы можете видеть здесь. Прежде чем двигаться дальше, позвольте мне объяснить, что именно Firecrawl извлекает с этих веб-сайтов. Если он замечает, что это основной цвет, он его подхватит. Он также находит радиус скругления для любых заданных карточек. Также определяются межстрочные интервалы, а также различные размеры текста и конкретные шрифты. Итак, на этом этапе у нас будет каждый отдельный элемент, точно так же, как вы можете видеть в игровой площадке far. У нас есть логотип, фавикон. Он показывает предварительный просмотр кнопок и то, насколько они будут скругленными, вместе с цветами, шрифтами, типографикой, отступами, индивидуальностью, всем, что нам нужно, чтобы попытаться воспроизвести этот брендинг. Теперь, если у вас уже есть свой веб-сайт, и вы хотите попробовать клонировать дизайн другого веб-сайта, вы можете использовать это как контекст внутри Cloud Code, внутри Cursor, или нового антигравитационного инструмента от Google, и просто попросить его адаптировать этот новый стиль. Но учитывая, что мы стремимся построить полный проект с абсолютного нуля, нам все еще нужно добавить контекст того, что мы хотим внутри этого веб-сайта. И именно здесь проект с открытым исходным кодом extend your brand, разработанный Джонатаном из Developers Digest, действительно пригодится. Итак, давайте попробуем скопировать дизайн kit.com, потому что, я имею в виду, это фантастика. Позвольте мне ввести URL-адрес сюда, нажать "отправить" и подождать, пока он все извлечет. Кстати, вы сможете получить доступ к этому проекту через несколько дней. Итак, брендинг успешно извлечен. Вот логотип. Вот цветовая палитра. Довольно аккуратно. Все уже здесь для нас. А теперь с этой левой стороны мы выберем все компоненты. Позвольте мне просто выбрать целевую страницу, страницу с ценами. И давайте также добавим эту страницу аутентификации. Нажмите "продолжить". Эти инструкции с компонентами будут сгенерированы вместе с брендингом с правой стороны. Если вы нажмете "скопировать markdown", вы заметите, что как инструкции по сборке, так и система идентичности бренда находятся внутри этого уникального запроса. Вы также можете просто спуститься сюда, нажать "cursor", подождать, пока он откроется, снова нажать "открыть приложение cursor", создать чат, и все будет вставлено уже готовым для вас. Теперь, чтобы убедиться, что это не будет один HTML-файл, давайте попросим его создать приложение next.js в этой папке. И давайте также добавим компоненты use shad cien. Теперь позвольте мне проверить, что я использую Gemini 3 Pro, и нажать Enter. Похоже, эта новая модель генерирует довольно хороший список дел и фактически выполняет его. В отличие от некоторых других моделей, которые пытались это сделать и как бы потерпели неудачу. Хорошо, он только что закончил. Это заняло некоторое время. Это заняло пару минут, но давайте посмотрим на окончательный результат. Позвольте мне просто запустить npm rundev. Это окончательный результат. Как вы можете видеть, он не скопировал веб-сайт, но он проделал довольно хорошую работу по извлечению всего и вставке всех этих компонентов с этим брендингом. Страница входа кажется довольно минималистичной. Как будто напоминает vaultkit.com. Так что, да, Gemini 3 Pro потрясающий в дизайне веб-сайтов. Он не генерирует тот же общий фиолетовый градиентный веб-сайт, как некоторые другие модели, но нам все еще нужно предоставить ему достаточно контекста, чтобы строить точно в том направлении, в котором мы хотим. Итак, обязательно ознакомьтесь с функцией брендинга от Firecrol. Нажмите кнопку "лайк", если это видео было хоть сколько-нибудь познавательным, и рассмотрите возможность подписки на Firecrawl для получения большего количества подобных видео. Спасибо за просмотр, и увидимся в следующем видео. Два осталось.