Skip to content
Start free
Get App

Верстаем в CLAUDE CODE: сложные анимации для промосайта уровня AWWWARDS. Полный гайд.

Евгений Кузьмин и Артём показывают, как с помощью Claude Code и Figma MCP сверстать промосайт со сложными масочными анимациями уровня AWWWARDS, подготовив макеты и покадровые сценарии.

Key Takeaways

  • Качество результата ИИ-вёрстки напрямую зависит от подготовки макета в Figma: функциональные имена слоёв и переменные
  • Figma MCP — ключевой мостик, позволяющий ИИ читать структуру макета как данные
  • Автолейаут и адаптивность: ИИ эффективно переносит логику перестроения элементов на мобильные экраны
  • Создание собственных анимаций и понимание принципов важнее копирования готовых решений

What the video covers

  • Ведущие подчёркивают, что важно создавать собственные решения, а не копировать; агенты и скилы — лишь исполнители
  • Для работы ИИ нужны макеты в Figma, подготовленные в двух аспектах: чистая слоевая структура и покадровая анимация секций
  • Figma MCP даёт ИИ доступ к данным макета (слои, размеры, переменные, свойства текста и цвета), а не к скриншоту
  • Слои должны иметь функциональные имена (например, choose-slider-title-wrap), а количество элементов должно соответствовать числу слайдов
  • Автолейаут в Figma соответствует flex-контейнеру в вёрстке, что помогает ИИ делать адаптив практически без ошибок
  • Для адаптивов достаточно статичных макетов: ИИ сам проводит аналогии и перестраивает анимацию
  • Результат разворачивается на локальном сервере, после чего проверяется и корректируется через диалог с ИИ
  • Ведущие обсуждают развитие скилов и постепенную донастройку их под задачи
  • Упоминается коммерческая выгода: продажа проектов под ключ, фриланс и продуктовый дизайн как направления
  • В эфире также звучат ответы на вопросы зрителей и обсуждение опыта дизайнеров, включая 3D-тренды

Chapters

  1. 00:00Вступление и представление спикеров
  2. 06:40Подготовка макетов в Figma и Figma MCP
  3. 20:00Автолейаут и адаптивность
  4. 38:20Работа с Claude Code и локальный сервер
  5. 63:20Скилы и точечная донастройка
  6. 85:00Мобильные анимации и обсуждение опыта
  7. 95:00Коммерческие возможности и ответы на вопросы

Answers

Questions about this video

Нужно ли готовить покадровую анимацию для адаптивных версий сайта?

Нет, для адаптивов достаточно подготовить статичные макеты. ИИ сам проводит аналогии с десктопной версией и перестраивает анимацию под мобильные экраны.

Зачем нужны функциональные названия слоёв в Figma?

Они позволяют ИИ однозначно понимать элементы макета и помогают при правках: можно точно указать нужный элемент, например, choose-slider-title-wrap, без длинных объяснений.

Что такое Figma MCP и зачем он нужен?

Figma MCP подключает ИИ к данным макета, позволяя читать слоевую структуру, размеры, переменные и свойства элементов, вместо анализа скриншота.

Full Transcript — Download SRT & Markdown

00:00
Speaker A
Что ж, сегодня мы верстаем и анимируем промосайт, само собой, завоёвываем Words. И, соответственно, важный нюанс, то, что мы учим не копировать, мы учим создавать. Это важный нюанс. Можно обмазаться агентами, но лучшее, что ты можешь сделать - это создавать что-то
00:16
Speaker A
своё. Агент - это только исполнитель, так же как и скилы. Вот. И сегодня мы с вами аа обсудим, как придумать свою как придуманную вами анимацию можно будет реализовать. Вот я предлагаю тебе дальше, чем кто-либо, и, соответственно, создавать своё и быть тем, кто ты есть.
00:33
Speaker A
Меня зовут Евгений Кузьмин. Кто меня первый раз видит, слышит, а сейчас слышит, то я занимаюсь 20 лет дизайном.
00:41
Speaker A
А сейчас мне 41 год, с 20 лет я начал заниматься. И не помню, как это произошло, но меня уже оттуда было не вытащить. Обучил уже под 15.000 студентов. Основатель студии из топт топ-30. сделал сайт для Аздека, Третиковской галереи, Ингастраха, ещё
00:57
Speaker A
множество других проектов. Ой, а большой опыт коммерческого коммерческих проектов. И, соответственно, Артём, а обаятельный, милый, замечательный. Не знаю, какие петиты ещё можно подобрать к этому человеку, который будет вести основную часть нашего эфира, как раз рассказывать вам системно, последовательно и логично. Он верстает
01:18
Speaker A
сайты без кода. Продуктовый дизайнер, дизайнер в Альфабанке уже схем лет. просить ещё не смог не не сформулировать, а нецензурная лексика - это моё второе имя и 9 лет дизайне. То есть мы а занимаемся [фыркает] дизайном, сколько мы себя помним. Так, десятки,
01:35
Speaker A
девятки, ну, всё слышно, это хорошо. Итак, ребят, в конце вебинара у нас будут бесплатные токены. Не забываем об этом. А, 500 токенов, если этот эфир наберёт 200 лайков, поэтому, а, уже можете начать проставлять. и 250. Если этот эфир наберёт меньше 200, то есть
01:50
Speaker A
всё равно вы получите лайки, но в два раза меньше. Что ж, я предлагаю передать слово артёму.
01:58
Speaker A
Вот я с вами в чате буду, ребята, иногда будут подключаться, задавать вопросики каверзные. А от вашего имени Тём, передаю тебе слово.
02:10
Speaker A
Да. Итак, ребят, всем привет. Э, добро пожаловать на очередной наш эфир. Если вдруг кто-то не смотрел первый и второй вебинар со мной, обязательно посмотрите, особенно первый вебинар, потому что я там прямо по шагам подробно рассказал полный процесс, как верстать сайты с
02:29
Speaker A
помощью ИИ. Ну а сегодня на лекции у нас такой план. А сегодня я покажу вам, а как сверстать вот такую сложную анимацию. Сейчас посмотрим.
02:41
Speaker A
А у нас здесь получается, во-первых, пошаговый блок с интересной масочной анимацией и очень прикольный переход.
02:50
Speaker A
Сейчас покажу. Вот такой переход от одной секции к другой. Вот сегодня на лекции я вам пошагово покажу, как это реализовать.
02:59
Speaker A
Во-первых, как подступиться к реализации этой анимации. И вторым шагом я отдам нейронке рабочий промт, чтобы она эту анимацию подхватила, и всё сделаю. То есть оговорился немножко не только анимацию, а сам сами эти блоки как сверстать и потом повесить на них вот такую сложную
03:22
Speaker A
анимацию. Так, погнали. А значит, смотрите, перейду пока что в Фигму. А что нам нужно? Для того, чтобы верстать сайты с помощью EИ, нам нужно несколько составляющих. Первая составляющая - это проработанные макеты.
03:43
Speaker A
Причём они проработаны должны быть в двух ипостасях. Первая ипостась - это то, что ваши макеты должны быть чистые с точки зрения слоёв и, а, правильно настроенные. Сейчас расскажу, как именно. И вторая ипостась - это подготовленная покадровая анимация этих секций для того, чтобы
04:07
Speaker A
нейронка увидела, а как должна анимация этой секции происходить, то есть пошагово. Потом она за счёт этого реализует, ну, рисует у себя условно в голове, как это мм должно быть реализовано, и потом уже составляет себе план. И по этому плану она реализовывает
04:29
Speaker A
код этой анимации. Вот. А давайте поподробнее, а поговорим про макеты. А значит, смотрите, а дело в том, что Ии он не видит макеты так, как мы их видим.
04:45
Speaker A
То есть у ИИ нету как таковых глаз. То есть она может по сути сделать скриншот, но по скриншоту она не очень правильно может понять, что, собственно, внутри этого блока есть.
04:59
Speaker A
Поэтому и а читает наши макеты с точки зрения набора данных. А, то есть просто кусок кода. Вот этот кусок кода заложен внутри Фигмы. И чтобы этот кусок кода передать Фигме, нам нужен мостик. Этим мостиком называется Фигма MCP. То есть это, грубо говоря,
05:23
Speaker A
когда Иишка, э, подключается к базе данных Фигмы конкретно вот в эти макеты, читает код этих макетов и понимает, из чего эти макеты состоят. То есть какие элементы есть, какая слоевая структура у этого макета, какие есть там переменные, размеры, свойства текстов,
05:48
Speaker A
цветов и так далее. Соответственно, чем точнее мы подготовим макет для иишки, тем, более правильно она эти данные заберёт и реализует в код.
06:00
Speaker A
Соответственно, а что нам необходимо сделать? Нам необходимо из макетов убрать всё лишнее. То есть не должно быть, во-первых, никаких фрейм 138, 234, 42. То есть такого быть не должно.
06:16
Speaker A
Каждый слой должен называться, а функциональным именем. Например, а если мы посмотрим на секцию чуз, что у нас тут есть? А у нас есть обёртка для заголовка.
06:33
Speaker A
есть какая-то декоративная часть, внутри которой крутится вот такой барабан, а остальные элементы, допустим, меняются.
06:41
Speaker A
То есть тут 0,1 уходит вверх, вместо него приезжает 0,2 и так далее. И это всё нужно в макете проработать для того, чтобы И взяла эти данные, посмотрела. Ага, вот таких элементов четыре штуки. То есть вот есть контейнер, есть четыре вот
07:00
Speaker A
таких элемента. Если посмотрите на слоевую структуру, тут их на самом деле четыре. Просто три из них скрыты под маской. Но ишка это увидит. Почему?
07:10
Speaker A
Потому что она не смотрит на макет как на скриншот, а она читает базу данных этого [откашливается] макета.
07:16
Speaker A
Соответственно, она увидит, а она прочитает этот элемент, увидит, что внутри четыре элемента внутри этой обёртки лежит и поймёт. Ага. То есть, видимо, внутри этого контейнера эти тексты будут меняться. Как она ещё может это понять? Потому что здесь есть
07:34
Speaker A
пометка current, то есть текущий. То есть этот элемент текущий на этом слайде, а остальные прячутся. И при переходе на следующий слайд один из следующих элементов становится current, а у другого элемента эта пометка current исчезает и он уезжает. Вот. То есть
07:52
Speaker A
таким вот образом, а, мы готовим для нашего Eиагента, а, вот таким образом макеты. То есть, во-первых, они каждый элемент должен быть назван каким-то, а, функциональным названием, а, должно быть соответствующее число элементов. То есть, если у вас четыре слайда, значит,
08:15
Speaker A
здесь в макете должно прятаться четыре слайда. Соответственно, для каждого слайда должен быть какой-то соответствующий элемент подготовлен.
08:24
Speaker A
А все элементы должны быть названы функциональным названием. Это имеется в виду вот, допустим, секция choзe.
08:32
Speaker A
Значит, допустим, элемент заголовка будет называться chose title, то есть заголовок секции chose, а если это обёртка, допустим, врап. А почему врап?
08:45
Speaker A
Потому что враппер - это просто жаргон из вёрстки, а, который неронка очень хорошо понимает и так далее. А, то есть это первый слой подготовки макетов. То есть должно быть соот количество элементов внутри макета и у них должны быть функциональные названия, которые
09:06
Speaker A
Иишка поймёт. И за счёт ещё вот этих функциональных названий, когда вы будете вносить правки в вёрстку, вы просто можете написать и, допустим, поправь размер элемента choose slider title wrap. Всё, Иишка сразу поймёт, про какой элемент вы говорите, потому что если бы
09:23
Speaker A
таких названий не было, а вам пришлось бы объяснять как-то по-другому. Вот есть секция, в которой четыре слайда. Вот внутри этого этой секции есть слайд номер два. Вот внутри этого слайда номер два поправь вот такой-то элемент и так далее. То есть, сами понимаете, Ишка,
09:38
Speaker A
во-первых, может запутаться, может не понять, что вы от неё хотите и так далее. Вот. А, соответственно, нужны вот такие функциональные названия. Дальше. А ещё очень классно, когда вы к макетам привязываете а variables. Ну, variables - это переменные, да. Я надеюсь, все их
09:59
Speaker A
знают, все умеют с ними работать. А что нам дают эти variables? Дело в том, что нейронка их тоже считает как параметры определённые. И вот эти переменные она к себе тоже переносит. И за счёт этого она делает максимально точные размеры
10:19
Speaker A
отступов, размеры элементов и так далее. Потому что, если, допустим, здесь вот эти отступы и размеры, они будут в каких-то в свободных величинах, неронка может ошибиться. Я не знаю, честно, с чем это связано, но просто, поверьте мне, на практике я проверял, что как
10:37
Speaker A
только я добавил переменные в размеры, а нейронка прямо с первого раза начала суперточно собирать макеты. То есть прямо ошибки исключились. Поэтому тоже запомните этот момент, он очень полезный.
10:54
Speaker A
Ещё один слой подготовки макетов. А, естественно, переменные цветов. Вот желательно, чтобы если у вас там какой-то цвет много раз повторяется на макетах, допустим, вот этот красный, сделайте его переменной и применяйте этот цвет к остальным элементам, где он должен использоваться. Соответственно,
11:15
Speaker A
нейронка тоже запишет себе это в определённую переменную и будет её использовать там, где это необходимо. То есть не возникнет такой ситуации, что где-то на другом блоке у вас э иной оттенок цвета получится. То есть опять же это очень сильно исключает ошибки
11:32
Speaker A
реализации в код. А что ещё? Что ещё? Ну, естественно, текстовые стили желательно подготовить, особенно если они повторяются у вас в течение проекта. Это тоже добавляет системности.
11:48
Speaker A
А, ну и примерно вот так. То есть первое а и ещё очень важно, чуть не забыл, автолейаут ребят это наверное самое вообще важное. Делайте свои макеты максимально на автолейаута, где это возможно. Сейчас постараюсь объяснить, с чем это связано.
12:07
Speaker A
Дело в том, что иишка, когда читает макет она читает координаты элементов, то есть координаты каждого элемента. И дело в том, что когда элемент лежит внутри фрейма, там какая-то своя система координат, которую ишка очень плохо считывает. А и, соответственно, она
12:27
Speaker A
может ошибиться в расположении элементов. Но когда элементы лежат внутри автолей-аутов и ещё у них какая-то закономерность между собой, там, допустим, л контейнеры либо хакконтент, а то она видит эти закономерности и проставляет аналогию. Почему? Потому что автоаут в макетах - это то же самое, что
12:51
Speaker A
Flexконтейнер в HTML и CSS языке. Аэ, флексконтейнер - это вот такой контейнер, где тоже можно выставлять фил контейнеer хакконтент, либо распределять элементы там по сторонам, а чтобы между ними одинаковое расстояние было. То есть либо выставлять элементы в поток, в
13:08
Speaker A
горизонтальный, вертикальный. То есть ха, ой, то есть автолейаут - это абсолютно то же самое, что и флекконтейнер в вёрстке. Просто в Фигме это так назвали.
13:20
Speaker A
Вот, соответственно, чем больше аналогий нейронка находит в ваших макетах в сравнении с вёрской, тем точнее эта вёрстка реализуется.
13:32
Speaker A
А по этой части я надеюсь вам понятно. Единственное то, что вот эта подготовка макетов - это, поверьте, самая нудная из частей, которые есть вот в и вёрске. Но это нужно, ребят, перетерпеть. Почему?
13:47
Speaker A
Потому что подготовить макеты быстрее, чем потом вносить правки, когда вы отдаёте грязные макеты. Вот, соответственно, просто отнеситесь это отнеситесь к этому как к процессу вёрстки. Почему? Потому что если бы вы верстали сайты, допустим, на Webflow, вам пришлось бы практически то же самое
14:07
Speaker A
делать, потому что в webflow вы эти, э, макеты собираете по кирпичикам точно так же. Просто там немножко другие настройки, соответственно. Когда вы у себя в Фигме, в своей родной среде это делаете это согласитесь гораздо быстрее, чем, э, делать это в webflow.
14:27
Speaker A
Вот. И, соответственно, это просто вот один из процессов э подготовки макетов к вёрстке. Вот это необходимо делать, а, чтобы вёрстка была точнее. Так. И следующий момент, а-а, естественно, подготовка, а макета мм точнее покадровая подготовка макета, потому что просто
14:53
Speaker A
словами нейронке объяснить, как должна реализована быть анимация секции, довольно сложно. То есть есть простые анимации секции, да, их можно объяснить словами, и это будет быстрее, чем делать раскадровку. Но, допустим, вот такой переход, когда мы видим одну секцию и
15:12
Speaker A
она превращается в фотографию и открывает под собой другую секцию, объяснить нейронки сложно. Почему? Потому что вам нужно же как-то передать размеры перехода этой секции. То есть от какого размера до какого размера эта секция должна уменьшиться, а как пропорции определённых элементов должны
15:31
Speaker A
измениться и так далее. Но раскадровка позволяет считать эту базу данных, как в одном состоянии этот элемент был, в каких размерах и в каких свойствах, и как в другом состоянии стал. И она проводит вот этот мостик между состояниями, как будто бы это Smart Animate Fig, и
15:51
Speaker A
понимает, ага, то есть эту секцию нужно от такого-то размера изменить к такому-то размеру в такую-то единицу времени. Вот, соответственно, она это довольно просто реализовывает.
16:04
Speaker A
И что ТМА Тём, можно это пару вопросов задам? А давай резюме небольшое. Не, если коротко, сначала надо всё сверстать в Фигме. Ты согласен с этим?
16:17
Speaker A
Да, абсолютно. А поясню, ребят, смотрите, верстать руками - это геморройно, а Фигми в автолей-аутах это просто, ну, нарабатывается достаточно быстро можно сделать. Вот. А у нас есть какой-нибудь скилл для того, чтобы автоматически это сделать? Тём есть.
16:35
Speaker A
Ага, хорошо. Мы об этом чуть позже скажем. Итак, о стиле текста и цветов тоже видят?
16:41
Speaker A
Да, абсолютно. Угу. Я так понимаю, переменно равно стили. А, ну как? М, не совсем. Ну, вообще, да.
16:54
Speaker A
Переменный - это значение, которое используется в стилях. Другой человек скорректировал. Всё верно. Думаю, так оно есть. Если если проложить аналогию от вёрстки к дизайна туда.
17:08
Speaker A
Так, а что насчёт глобальных классов, как, например, текст а Excel и текст MD или мы для каждого дио свой класс создаём?
17:17
Speaker A
А по сути, смотрите, вот когда вы называете элемент а внутри секции, это и есть класс. То есть у меня скилл передачи макета к нейронке настроен именно так, что, э, каждое название элемента она воспринимает как класс. Но внутри элементов, допустим, в тексте есть
17:39
Speaker A
стиль, текстовый стиль. Она его тоже воспринимает как класс. Э если кто-то в вёрске разбирается, то у элемента может быть много разных классов. Вот, соответственно, они она эти два класса и записывает. То есть один класс отвечает за то, где этот элемент стоит, находится
17:54
Speaker A
и в какой позиции и так далее, а другой класс отвечает за стиль этого текста, то есть какого он размера, какой интерлиньяж и так далее.
18:04
Speaker A
Ага. Всё хорошо, ребят, давайте договоримся, то что вы пишете вопросы, мы я буду их записывать, и мы, соответственно, в конце а или какую-нибольшую паузу пока будем генерить, а и пройдёмся вместе с Артёмом по вашим вопросам. А всё. Теперь Арюм, я
18:20
Speaker A
тебя не прерываю. Давай двигаться дальше. Угу. Да. И смотрите, я ещё забыл про адаптив сказать. А как мы готовим адаптив?
18:30
Speaker A
Я вам рекомендую не отдавать адаптив э на реализацию иишки, на самостоятельную реализацию иишки. А почему? Потому что у неё немножко не так устроен мозг. она м не так понимает дизайн-паттерны, а не так может реализовать и так далее.
18:49
Speaker A
Соответственно, я вам рекомендую не лениться и адаптив прорисовывать самим. Но очень важно, чтобы архитектура адаптивов была стопроцентно похожа на архитектуру десктопа. Что имеется в виду? Если в десктопе у нас вот такой набор элементов, то и на планшете, и на
19:12
Speaker A
мобилке точно такие же слои с точно такими же названиями и с точно таким же количеством элементов.
19:20
Speaker A
А за счёт чего Иишка понимает: "Ага, вот этот элемент переехал сюда. Угу. А этот контейнер из из горизонтального перестроился в вертикальный". Ага. И вот она вот эти аналогии проводит, и она супербыстро делает адаптив. То есть вообще прямо практически без ошибок. То
19:38
Speaker A
есть когда я начал применять этот подход то прям, ну, ты вот отдал, получается, ты выделяешь три секции на разных разрешениях, отдаёшь верстать, потом смотришь, бац, практически всё идеально.
19:53
Speaker A
То есть, ну, за исключением каких-то суперсложных секций. Вот, соответственно, рекомендую не делать так, что вот, допустим, десктопверсию вы с помощью и сверстали и говорите: "Сделай мне там планшет и мобилку", не отдавая ей макеты. Вот, соответственно, может получиться не очень. Если хотите,
20:12
Speaker A
протестируйте, то есть отдайте промт, когда у вас только десктоп, а потом, ну, посмотрите на результат, а потом попробуйте отдать в работу нейронке именно три макета, то есть три состояния: десктоп, tблет и mobile, и увидите, какая будет разница. То есть вы
20:30
Speaker A
наоборот меньше времени на правки потратите, э, нежели там будете что-то допиливать с ней неронкой.
20:37
Speaker A
А так что ещё про адаптив я сказал? Ну, я надеюсь, вы поняли, да? То есть одинаковое количество слоёв, одинаковое название этих слоёв. Просто визуально эти элементы там где-то перестроились, где-то поменяли размер и так далее. Но структурная архитектура этих секций
20:55
Speaker A
такая же. Так, а дальше по поводу раскадровок. Смотрите, ребят, как я делаю раскадровки. Это у меня не просто картинки, это именно те же самые слои, которые я подготовил. То есть вот можете посмотреть. выглядит точно так же, но просто я эти слои
21:15
Speaker A
модернизирую, допустим, то есть у нас в начальном состоянии вот этот заголовок должен стоять здесь и барабан здесь, но при переходе к следующей секции они должны уехать.
21:26
Speaker A
И название элемента остаётся таким же, но я его просто этот элемент смещаю в бок, чтобы иишка увидела, что Ага, заголовок начал уезжать в бок. Этот барабан тоже поехал куда-то. Дальше я показываю на следующем слайде, на следующем кадре, что секция взяла и
21:46
Speaker A
наклонилась на какой-то градус. У неё появились рамки. Ага. Хорошо. Дальше потом на следующем слайде я показываю, что эта секция начала уменьшаться, начала превращаться в фотографию, и под этой секцией начал виднеться контент следующей секции.
22:07
Speaker A
Ну и финальное состояние, что вот предыдущая секция превратилась вот в такую фотографию, а и под ней вот такие-то элементы видны.
22:17
Speaker A
И всё. И потом, когда я сверстал статичную версию этой секции, точнее вот этих двух секций, потому что нужно же реализовать переход, я уже отдаю потом анимацию. А одновременно рекомендую не делать так, что вот вы одним промтом говорите, что вот сверстай
22:35
Speaker A
мне секцию и прикрути вот такую анимацию. А с чем это связано? М всегда старайтесь в работе с и придерживаться такого принципа, что как можно как можно сильнее декомпозировать задачи для неё. Потому что если вы отдаёте ей какую-то сложную задачу, она может
22:56
Speaker A
тупить и ошибаться. Это связано с тем, что у иишки тоже есть оперативная память, которая может перегрузиться. То есть у неё есть определённый кластер для того, чтобы обработать какую-то информацию и за счёт этой обработки информации выполнить задачу.
23:12
Speaker A
Соответственно, если вы отдаёте ей большую задачу, ей нужно обработать больше данных, и она в этих данных может начать путаться и м производить галлюцинации. галлюцинации в, э, в работе с И это имеется в виду, когда Иишка либо сама какую-то фигню
23:29
Speaker A
додумывает, либо ошибается, то есть выполняет не то, что от неё требовалось. Вот, соответственно, а старайтесь сделать это м ну старайтесь декомпозировать эти задачи. То есть сначала попросите сверстать статичную версию в трёх разрешениях, посмотрите, как она это реализовала. Если есть
23:49
Speaker A
какие-то правки, сначала внесите правки визуальные, и потом, когда уже поймёте, что в целом-то готово, отдавайте э на реализацию анимации. То есть вы сначала должны построить фундамент для анимации и потом уже эту анимацию прикрутить к этому фундаменту, и в итоге получится
24:10
Speaker A
классный результат. Так, а, наверное, наверное, по этой части всё. Есть ли у вас, ребят, какие-то вопросы? Может, ребят, много вопросов, но я предлагаю ответить на эти вопросы чуть позже. Это первое. Второе.
24:25
Speaker A
Тём, ты мог бы показать свёрстный сайт для того, чтобы немножко ещё закинуть эту удочку?
24:30
Speaker A
На всякий случай уточню, ребят. Этот промосайт, а ты с самого начала покажи, пожалуйста. Да-да-да, сейчас докручу.
24:38
Speaker A
А ты просто перезагрузи и всё. В общем, смотрите, вот этот, а, смотрите, а, есть одна большая проблема на рынке дизайна и вообще всего мира, то, что многие у многих есть иллюзии, а, того, что нейросети сделают за вас вашу работу.
24:51
Speaker A
Если бы это было правда, вот это было бы очень плохой новостью. Это означает то, что вы были бы не нужны. Но есть факт, то, что нейросети действительно могут выполнить много рутинные работы, оставив на ваши плечи только само создание. Вот
25:04
Speaker A
этот проект сделан моим учеником на персональном обучении direди Direction. То есть мы придумали, а этот бренд сделан полностью с нуля. Напишите, кстати, по десятибалльной шкале, как вам этот проект и по анимации, по идентике, и по всему остальному. Могли бы вы
25:19
Speaker A
поверить, что это реальный бренд, а фотоаппарат, который существует? То есть мы придумали сам продукт, а сделали конкурентный анализ, проанализировали самые главные ключевые вещи, которые могут станут основой этого фотоаппарата.
25:32
Speaker A
Потом непосредственно придумали дизайн фотоаппарата с помощью Потом придумали айдентику логотип название потом визуальное позиционирование, потом позиционирование, потом сделали промо дизайн промосайта, потом сверстали этот промосайт силами. Артём он как раз как здесь техдё называется, а сделали весь визуальный контент, то
25:59
Speaker A
есть полностью с нуля создали бренд. То есть, а, это уровень артдиректоров, будущее за артдиректорами. Вот помните это, ребят, потому что, а, от идеи до реализации уже один шаг. Но вот то, что людям э дали возможность реализовать всё, что угодно, это далеко не факт, что
26:17
Speaker A
люди будут создавать гениальные вещи. Поверьте мне, а интернет скорее заполонится наверное слопом а чем качественными работами. И для вас это хорошая новость. Чем больше не расслопа, тем больше ценится вот такая вот качественная, уникальная работа эмоциональная. Вот на всякий случай вам
26:33
Speaker A
просто проговариваю, потому что есть такая средневековая какая-то, я немножко скажу, как я есть какое-то мракобесие в мире технологии, то, что люди как будто как на божество молятся, на нейросети.
26:45
Speaker A
Это сам Альтман ещё этот один создатель, он open Клод, я забыл же. В общем, это страхонно э Сэм Альтмана, в общем, они сами это ещё подогревают постоянно. А что типа вот всё, завтра мы все нас проботят и так далее. Но по факту вы
27:02
Speaker A
должны понимать, это просто инструмент. У меня как у артдиректора, а это неронг уже 10-15 лет назад. Кто это такие? Это мои сотрудники. Вот с ней неронки. А сотрудники - это точно такие же неронки, точно такие же агенты. Они идут,
27:15
Speaker A
выполняют задачу. То есть агенты имитируют работу реальных людей. Кто-то иллюстратор, кто-то тридшник, кто-то ещё что-нибудь. Ребят, никогда, изза меня никто не делал свою работу. уровень исполнения в итоге от того, кто ставит задачу. Поэтому можете быть уверены, то, что думать у вас никто не отнимет. Вот и
27:35
Speaker A
думайте. [смех] В общем, я на всякий случай просто это вот меня бесит. Вы знаете, что, ребят, в этом мире невежество. Вот у меня прямо руки трясутся почему-то от какого-то, знаете, глобального невежества. И вот то, что нам вот сегодня читал статью,
27:51
Speaker A
дети начали быстрее читать, но меньше осознавать, что как это работает. То есть у них проблемы с аналитикой. Не теряйте этот навык, ребят. Так, о'кей.
28:00
Speaker A
Open SMН, спасибо большое. Меня с именами очень плохо. Тёмыч, ты поддержишь то, что я вам сказал? И секунду. Спасибо большое за десятки, ребят. И на все ваши вопросы мы в конце а по всем пройдёмся. И ещё один важный
28:15
Speaker A
момент, напомню, что а если вы поставите 200 лайков, вам дадут 500 токенов в конце вебинара. Извините, что вынуждены постоянно уточнять. Ну, так устроена.
28:24
Speaker A
Это, а, классика всего. Так что не стесняйтесь, ставьте лайк и, соответственно, помогайте. Цель на самом деле продвигать хороший контент. А, Тём, что думаешь по поводу нервертей? Сделают ли они за тебя всю работу?
28:39
Speaker A
Нет, нет. Всегда нужен оркестратор, то есть человек, который будет этим всем управлять. Вот, соответственно, ребят, не переживайте насчёт этого. Вы просто подхватите тренд, научитесь давать чёткие задачи.
28:54
Speaker A
И всё будет отлично у вас, не переживайте. Да, ребят, лайки ставить под видео, а не в чате. Вот. Спасибо вам большое за сердечки. Вот. Но именно для продвижения помогает именно лайки под видео. Вот. А на всякий случай вот этого мы пояснили,
29:09
Speaker A
что иишка шикарный инструмент, но вот файлики надо правильно подготовить. Там, соответственно, Иишка можно сделать скилл, чтобы она вам подготовила файлик, но всё равно надо вручную перепроверить, и она никогда идеально не сделает, как любой человек. Вот за всем нужен
29:24
Speaker A
контроль. Вот. Аэ, переходим дальше. Да, кстати, э мы такие вот сайты как раз отправляем на EWords, и ребята получают награды и строят карьеру на основе вот этих проектов. В э всё, Тём, а продолжай следующую главу. А все ваши вопросы я
29:42
Speaker A
записываю отдельно, по ним пройдёмся. Так, ребят, да, смотрите, а первый шаг получается мы прошли. Мы подготовили макеты, подготовили раскадровку и, соответственно, теперь можно переходить к вёрстке. Что нам нужно для вёрстки?
29:58
Speaker A
Ну, во-первых, и агент можно использовать clД, можно использовать кодекс, можно использовать какие-то бесплатные там Open Aa, ой, этот Open CД и так далее, то разницы нет. Э, тут решает, э, скил. Что такое скил?
30:16
Speaker A
А, по сути, это методичка для нейронки, по которой она будет выполнять свою задачу. То есть у меня есть скилл по э вёрстке сайтов. То есть в нём описано, как неронка должна зайти в макет, как она должна прочитать его, как она должна
30:35
Speaker A
собрать эти данные и как она должна перенести эти данные в код, то есть в HTML, CSS и JavaScript. То есть три основных языка, на которых строятся сайты. То есть это методичка. Это то же самое, что к вам пришёл сантехник, э, и
30:52
Speaker A
начинает чинить вашу трубу. И, соответственно, если бы у него в голове не было каких-то знаний, как это делать, он бы этого не смог сделать. Но когда он учился на сантехника, ему дали пошаговый алгоритм, как ту или иную трубу там
31:07
Speaker A
починить. То же самое скилл для нейронки. Это какой-то пошаговый алгоритм, по которому нейронка берёт и выполняет свою задачу. Эти скилы могут быть абсолютно разными. Один скилл объясняет, как сверстать сайт. Другой скилл объясняет, а как провести оптимизацию сайта, чтобы
31:26
Speaker A
там не было лишнего кода, чтобы сайт супербыстро открывался, а чтобы сайт получил хорошие оценки, а в Google Page Speed. То есть это такой сервис, который оценивает быстроту сайта и так далее. Вот, соответственно, мм, этот скилл можно постоянно нарабатывать.
31:48
Speaker A
Что тут имеется в виду? Допустим, вы верстаете какой-то сайт, там есть суперсложная секция, и столкнувшись с вёрсткой этой секции, иишка поняла, что это что-то новое. И в таком случае она пойдёт искать решение в интернет. То есть она попробует найти такие же, ну,
32:10
Speaker A
какие-то, может, статьи найдёт, почитает, как это реализовать там и так далее. Вот, соответственно, когда она найдёт решение, она выполнит свою задачу, вы посмотрите, убедитесь, допустим, что всё верно, либо если есть, ну, нужно внести коррективы, вы их вносите. И потом говорите Иишке:
32:29
Speaker A
"О'кей, а запиши этот кейс в skill". Нейронка берёт, записывает вот этот кейс, который вы только что реализовали, и в следующий раз, когда она с чем-то похожим столкнётся, она уже не будет тратить свои токены.
32:45
Speaker A
на то, чтобы найти информацию, как это сделать, потому что в скиле уже написано, как это сделать. То есть в этой методичке. Соответственно, скилы они что делают? Они помогают нейронке реализовать задачу быстро, максимально эффективно и при этом не затрачивая
33:06
Speaker A
лишние токены. А потому что токенов есть ограниченное количество. Вот у меня есть в клоде пятичасовая сессия и семидневная сессия. На пятичасовую сессию даётся определённое количество токенов.
33:21
Speaker A
Предположим, что миллион токенов. И если эти миллион токенов в течение 5 часов потрачу, мне придётся подождать, пока эта сессия обновится. И вот когда вот эти 5 часов пройдут вот этот, э, промежуток, начнётся новый промежуток, в который мне выделят снова миллион
33:39
Speaker A
токенов, который я могу тратить. также и с недельным лимитом. То есть на недельный лимит, допустим, даётся 7 млн токенов. Если я их потратил, то мне какой-то время придётся подождать, пока не начнётся новая неделя. Вот, соответственно, а если вы будете
33:55
Speaker A
работать на скилах, то неронка будет меньше этих токенов тратить. Соответственно, вы сможете больше успеть, э, за единицу времени сделать работы. А лично я пока что сижу на самой базовой подписке на клодкод - это 20 долларов в месяц. И я вообще удивляюсь,
34:16
Speaker A
когда другие там блогеры в Ютбе говорят, что вот им, допустим, там максимального тарифа не хватает и так далее. Я, честно не понимаю, чем они там именно занимаются. То есть насколько они сложные тогда штуки там в нейронке реализовывают, что им не хватает
34:31
Speaker A
токенов, потому что мне хватает абсолютно базовой подписки. Причём на реализацию вот этого сайта, который я вам сейчас показывал. Так, а куда он у меня пропал? Вот он здесь. У меня ушло 20% недельного лимита. Всего лишь 20%, то есть это 1/5 лимита. За счёт чего? За
34:49
Speaker A
счёт того, что очень грамотно написан скилл, по которому Неронка это реализовывает. То есть, соответственно, там уже есть какие-то проработанные кейсы, потому что мы с Женей верстали и другие проекты. И за счёт этих сложных проектов очень хороший скилл наработался, за счёт которого Нейронка
35:07
Speaker A
суперэффективно выполняет свою работу, то есть довольно точно верстает и при этом мало токенов тратит. Вот. А дальше, то есть нам нужен иагент. Это первое.
35:18
Speaker A
Второе, нам нужен скилл для этого иагента, по которому он будет верстать сайт. И третье, нам нужен мостик Фигме. Он называется Figma MCP. То есть в Фигме MCP есть открытый код, к которому Иишка может подцепиться, прочитать ваши макеты, забрать данные к себе для того,
35:40
Speaker A
чтобы сверстать сайт. А как настраивать Figma MCP мы сейчас не будем, потому что это скучный процесс, но он довольно быстрый. Просто смотрите, заходите в клод либо в кодекс, пишите: "Помоги подключить Фигма MCP". Всё, неронка вам даст пошаговый план, как это сделать. Но
35:59
Speaker A
сразу предупрежу, что Figma MCP работает только на платных тарифах. Ну, то есть на образовательном тарифе либо на прошке. Ну и если вы там работаете в компании, то на enterprise тарифах. А, то есть вам нужен, ну, с чем это
36:14
Speaker A
связано? Потому что вам нужен режим разработчика. И внутри режима разработчика вы можете нажать сочетание клавиш Command K и набрать в поиске enable desktop MCP server. И вставите галочку MCP сервер включается. Потом идёте в нейронку и говорите, что я
36:33
Speaker A
включил. Она там подхватывает эти данные, смотрит и всё. Получается у вас между Иишкой и Фигмой мостик, через который иишка берёт и забирает данные из макетов.
36:46
Speaker A
А получается всё. Теперь я заранее перед лекцией спросил: "Видишь ли ты мои макеты? Вот Figma MCP работает". Он мне пишет: "Да, Фигма MCP работает. Я запросил структуру выделенного фрейма, и Фигма ответила: "Всё". И он мне говорит: "Какой выделен фрейм там и так далее".
37:04
Speaker A
Всё, можно начинать вёрстку. Соответственно, давайте начнём. Что мне необходимо сделать? Мне необходимо пойти в макеты, выделить необходимую секцию.
37:13
Speaker A
Так, сейчас defмо я выключу, он сейчас больше уже не нужен. Я выделяю три макета этой секции: десктоп, таблетку и мобилку. Захожу обратно в клод и говорю: "А я выделил, а давайте голосом буду набирать, чтобы нет. Я выделил макет, точнее выделил
37:36
Speaker A
десктоп версию". таблетку и мобилку. А возьми и сверстай статичную версию. Анимацию я тебе расскажу позже.
37:45
Speaker A
Так, всё. Рекомендую на набирать промты голосом, потому что этот промт не сразу улетает в нейронку, а вы его ещё потом можете текстово отредактировать, если там голос как-то неправильно распознался. Но времени это очень сильно экономит. То есть учитесь работать
38:02
Speaker A
быстрее, но не теряя эффективность. Вот, соответственно, вы просто будете больше отдыхать. То есть зачем вам работать по 12 часов в день, когда вы можете работать по 8 часов в день, выполняя ту же самую задачу. Поэтому ищите себе способы, как экономить время. Также и с
38:18
Speaker A
помощью Ии. Так, всё. Что делает Фигма? Она, а, читает контекст макетов, пишет: "Я получил данные с Фигма по всем тромверсиям. Теперь изучу, как устроены соседние блоки".
38:34
Speaker A
То есть она ещё берёт соседние блоки, может изучить, посмотреть, как они сделаны, и всё. И начинает растать.
38:41
Speaker A
Соответственно, нам немножко нужно подождать, а эти секции, точнее, результат этой вёрстки нейронка развернёт нам на локальном сервере. Локальный сервер - это имеется в виду, а эмуляция сервера на моём компьютере. Есть ещё удалённый сервер, то есть это, допустим, site.com, то
39:01
Speaker A
есть, ну, вообще это домен. Но удалённый сервер - это просто хранилище где-то в интернете для файлов сайта. Вот. А локальный сервер - это когда он у вас просто на компьютере разворачивается. С чем это связано? Это нужно для того, чтобы проверить
39:17
Speaker A
результат по-быстрому, не тратить лишние токены. И когда вы поймёте, что, в принципе, всё нормально выглядит, всё отлично, уже эти данные вы можете выгрузить на удалённый сервер. Для чего?
39:28
Speaker A
Для того, чтобы продемонстрировать клиенту результат своей работы. Потому что пока у вас результат работы на локальном сервере, его можете посмотреть только вы. Этой ссылкой вы никак не можете поделиться, потому что сервер живёт конкретно на вашем компьютере. Ну а когда вы выгружаете данные сайта на
39:45
Speaker A
удалённый сервер, соответственно, вы можете взять ссылочку, скинуть её клиенту и сказать: "Вот смотрите, я сверстал там пять секций из десяти.
39:53
Speaker A
Можете пройтись, посмотреть, возможно, какие-то баги увидите, если что, пишите там и так далее". Вот этот момент, надеюсь, тоже понятен.
40:02
Speaker A
Так а что-то у него там какая-то попытка не получилась и так далее. В общем, Ишка как работает? Она постоянно отчитывается вам. То есть она какую-то работу выполняет, описывает свои шаги и так далее. Если вам это, допустим, не нужно,
40:16
Speaker A
вы можете вообще ишки сказать, что мне неинтересно, что ты там делаешь, мне главное результат работы получить.
40:22
Speaker A
Соответственно, она тогда вам вот эти все данные непонятные скидывать не будет и вернётся к вам только после того, как выполнит свою задачу. Тут вы под себя рабочее пространство можете сами подстраивать, как вам удобнее.
40:36
Speaker A
Так, о'кей. Пока что верстает, Жень. Наверное, можем ответить на вопросы. Я думаю, минуток пять у нас есть.
40:44
Speaker A
А, да. Секунду. Смотрите, ребята, я поясню самый главный момент. А, продолжая тот дискурс. Э нейронка тупая.
40:55
Speaker A
Она, знаете, есть некоторые люди, которые умеют имитировать интеллект. Они, э, как бы Артемий Лебедев, вот, например, если что, я лично знакомый, прекрасный человек, э, могу сказать, он у нас хедлайнером выступал и очень комфортно, приятно. Так вот, за что я
41:13
Speaker A
немножко это угорю над лебедем. Он всего по чуть-чуть знает, но внешне создаёт вид эрудированного человека. Нейронка точно такая же. То есть ей нужно всегда направление и корректировка. Например, если даже ей с кормить какие-то готовые анимации или ещё или там референсы, она
41:30
Speaker A
это вот так вот тяп-ляп. Просто здесь в чате было написано, что нужен правильный контекст. Ты мне как руководителю про контекст не рассказывай, друг мой. Это с ирония, если что. Всё это такая то, что правильная постановка задачи. С этим у
41:42
Speaker A
меня всё в порядке. Но основная проблема то, что когда люди делают, а так же как неронка одна и та же проблема. То есть внешне выглядит хорошо, но потом нужно слои доработок, корректировок, чисток.
41:54
Speaker A
Помнишь, Артём, а как ты мне присылал вот этот сайт, и я тебе микротюнинг постоянно делаю. Скажи что-нибудь, а тут не видно. Угу.
42:02
Speaker A
Да. То есть, да, слышно меня? Дада. Да. Меня Женя постоянно корректировал по анимациям. Я их дорабатывал. В итоге получилась конфетка.
42:10
Speaker A
Да. То есть, понимаете, в чём суть? Что есть поверхностная работа - это то, что вот это и называется нейрослопом. И вот чтобы нету какого-то, знаете, скила, чтобы твою работу превратили в финал, потому что если бы Неронка сама умела
42:25
Speaker A
это делать, то ты бы кожаный мешок ей не нужен был бы. Вот это очень важный нюанс. То есть, а, мышление арт-директора мышление а арт оркестратора, назовём так, а, ну, или как эта профессия будет в будущем, вот.
42:38
Speaker A
А она является одной из самых важных э сейчас. А дай демонстрацию включу. Так да сейчас кнопочку найду. Вот. Ага.
42:52
Speaker A
Да. Смотрите, я вам сейчас покажу некоторые проекты. То есть самое прикольное вот например сегодня Николай отправил сайт на Awards. Вот можете посмотреть, какой уровень работ делают мои ученики. А, и вот, [фыркает] ребята, оцените, пожалуйста, по десяти, а, по
43:11
Speaker A
стобалльные, чтобы не путать эти баллы. Как вам уровень работы? Здесь мы затрагиваем тему загрязнением пластика.
43:19
Speaker A
Решили постараться нестандартно представить эту тему и, соответственно, рассказать о ней по-новому. Тема актуальна, она не теряет своей, скажем, новизны и актуальности.
43:35
Speaker A
Актуальности. Хотел повторять два раза. Вот другой проект. Это наш куратор уже делал. У нас есть постоянное обучение наших сотрудников. Вот.
43:43
Speaker A
И, соответственно, классно, что вот эти анимации так понять, я вылетел или Же вылетел. Так, ладно, ребят, чтобы эфир не был пустым, давайте я пока продолжу. Кстати, когда я у помощницы Жени узнал то, что вот этот сайт, где про загрязнение
44:50
Speaker A
океана уже свёрстн, блин, я пипец как расстроился. Мне так хотелось его сверстать, но ладно, не повезло. Но всё равно классные макеты нашлись, точнее, классные проекты.
45:01
Speaker A
Вот так демонстрацию, ребят, я пока что включу. Поделиться. Так, значит, у нас неронка пока продолжает. Она описывает какие-то свои шаги, что она там делала. Где-то она с фотографиями не разобралась, сказала, что вот точнее, как не разобралась, она сказала,
45:22
Speaker A
что где-то вот, допустим, маленькая фотография используется, то есть в маленьком разрешении, и, соответственно, ей бы хотелось получить ээ разрешение под 2К и 4К экраны. То есть вот такие штуки она может подметить и так далее. И по завершении работы она
45:38
Speaker A
может вам допустим, сказать, что чтобы допилить до идеала, там пришли мне такие-то там фотографии более качественные там и так далее. Либо можно, допустим, её попросить э разрешение подтянуть этой фотографии. То есть она может пойти в какой-то сервис в бесплатный, допустим,
45:57
Speaker A
взять и обйлить эту фотографию, то есть вот двух там до 4К, допустим, и так далее. Вот. Тём, давай я быстренько эту, а, часть эту пройду, чтобы мы в конце на это не тратили время, пока у нас сгенерит.
46:12
Speaker A
Немножко интернет вырубил. А, смотрите, коллеги, давайте я ключу моменты расскажу. В общем, э, у нас есть персональное обучение, где мы создаём, скажем, элиту. Вот аа это из компьютерных игр формулировка, то есть лю дизайнеров, которые конкурируют с арт-ртдиректорами на международном
46:30
Speaker A
уровне. А здесь три, э, человека, которые вас курируют от начала до конца. Это Артём дела, даёт обратную связь. Я даю обратную связь на контрольных точках. Ну, персонально вам записываю. И ещё непосредственно у вас есть персональный старший куратор, который,
46:45
Speaker A
а, с вами созванивается и, соответственно, с вами в одном чате и ведёт диалог. А, а, количество учеников в этот поток. У нас последний набор будет в ближайшее время. А, и, соответственно, сейчас мы набираем последний поток. Давайте я вам сейчас по
46:58
Speaker A
презентации пройдусь, чтобы быстрее, и, э, перейдём уже к ключевым моментам. А к тому у нас как раз рендерится. Смотрите, я вам показал сайты, они высокого уровня, они, соответственно, у нас была планка достичь ну высшего уровня. И у нас, как я думаю, как видите, оно
47:16
Speaker A
получилось. То есть это очень важный нюанс, потому что обучение по нейросетям очень много, но вот важный нюанс, чтобы я мало где видел, то есть все говорят: "За тебя нейросеть что-то сделают", но мало видел конкретного результата. А прок - это всегда конкретный результат
47:30
Speaker A
учеников. У нас мы всегда показываем проекты, э, коммерческие проекты учеников и так далее. Это принципиальная позиция. А сейчас результат вашей работы - это комплексный, а, объёмный продукт, который вы непосредственно можете продавать как, а, работодателю, так непосредственно агентством, а, или
47:48
Speaker A
клиентам. Вот. И cloudкод, он, конечно, пишет код, он так и называется. Вот. Но результат всегда зависит от того, какие задачи вы делаете. И, соответственно, именно этому мы и учимся на курсе Ultra Art Direction. Смотрите, завоёвываем Ewards, потому что это самая высшая
48:06
Speaker A
планка для дизайнеров, а, которые создают эмоциональный дизайн. То есть мы с вами разработаем концепцию бренда, создадим весь визуальный контент 3D фото, графика, создадим анимацию интерактив, сделаем дизайн сайта идентику, сделаем вёрстку в cloud код и оформим кейс на behн ещё, а будем
48:28
Speaker A
конкурировать с лучшими дизайнерами, а на международном рынке. Последний в этом году, а в двадцать шестом, последний поток на этот курс, старт 9 ноября. Всё, это последний поток. Следующий будет неизвестно когда. Вот. И за 2 с по месяца, там, на самом деле, 3 с по
48:48
Speaker A
месяца вы пройдёте. Ну, у нас ещё бы как бы, чтобы вашу планку выдерживать. Вы пройдёте путь от идеи до готового сайта. Научись готовить макеты вёрские разрабатывать сайты с Cloud Code. То есть, смотрите, мы всё рассказываем, действительно очень много делимся информацией, но вы должны
49:12
Speaker A
понимать, а я вообще сторонник того, что информация должна быть доступна бесплатно. Поэтому на нашем сайте Апрока вы можете, а, оставить заявку на сутки получить доступ к нашим курсам UXY. Там вообще они супер объёмные, суперкачественные, но самое ценное в
49:27
Speaker A
курсе - это обратная связь. именно такой поток, а, количество фидбеков, а, что вам персонально дают и, соответственно, ведут с вами. А, я думаю, мало вы где можете найти, если вообще где-нибудь сможете, потому что на этом самое сложное - это выстроить обратную связь,
49:41
Speaker A
чтобы ещё довести вас до конечного конкретного результат. Вам продаю продают по итогу ваше портфолио, ваш уровень исполнения, то есть, чтобы вы могли показать ваш проект. А я хочу, моя цель, чтобы вы стали чемпионами и самыми сильными игроками на рынке. Я люблю
49:57
Speaker A
амбициозные задачи. Утопия только одна, чего стоит. Соответственно, сделатьтся лучше и агрегатор на российском рынке, и конкурировать с зарубежными, мы выйдем на Запад, э, где-нибудь весной, посмотрим, как отработаем сейчасти все механики и начнём Запад э качать. Задача вот, но параллельно здесь и сейчас можем
50:16
Speaker A
качать вас. Задача сделать из вас универсальных бойцов, которые смогут сделать любую задачу с университеми, потому что мы учим в первую очередь мышлению, алгоритмичному мышлению, а сложным анимациям, то есть намного ещё сложнее, чем то, что вы видите, то есть
50:32
Speaker A
чтобы у вас вообще границ не было, я иногда называю берегов креативной айдентики, то есть чтобы ваш уровень дизайна аа ваших продуктов, мобильных приложений, сайтов, чего угодно был на высоче чайшем уровне и чтобы он не оставлял никого равнодушным.
50:52
Speaker A
А кроме этого мы ещё полностью сможем создавать контент любого уровня, потому что, в принципе, вот сами эти ме я же сам артдиректор, а и, соответственно, я умею создавать, ну, в принципе, всё, что угодно. За эти 20 лет мало кто имеет
51:06
Speaker A
такой стаж, как у меня. И, соответственно, я просто вам передаю готовые механики. В этом смысл. И это всё можно видеть. Программирование. А также у нас блог объёмный вот с персональным обучением с Артёмом и а с его кураторами. У нас тоже это
51:23
Speaker A
продуктовые дизайнеры. С опытом будем в ближайшее время вас знакомить с ними. Вот. И, соответственно, это даёт напрямую коммерческую выгоду. Вы можете продавать клиенту проект под ключ. А я вам вообще-то рекомендую ребят смотреть в сторону не только продуктового дизайна, но ещё фриланса,
51:38
Speaker A
потому что теперь вы можете даже, может быть побольше поинтереснее зарабатывать на фрилансе, потому что вы можете полностью под ключ закрывать клиента. Если только дизайн там, допустим, 60-80.000 руб., то дизайн свёрсткой, особенно таких сайтов от 150.000 руб. и выше. А мы научимся
51:55
Speaker A
делать визуальный дизайн. А здесь вот все этапы, это не только создание самого визуального дизайна, это вершина айсберга, но непосредственно ещё а бизнес-аналитика, конкурентный анализ и, соответственно, создание своего бренда. Cloud CД изучим основу вёрстки, а настройка рабочей среды. И здесь ещё пояснение, а что сюда
52:17
Speaker A
входит? Подготовка макета к вёрске, раскадровка анимации по секам, вёрстка сайта, оптимизация и деплой, то есть полностью подключены. Важный нюанс, смотрите, информация в интернете бе много бесплатно, так же, как по физике, например, атомной. Ну, много ли атомных физиков стало или вот также по разным
52:33
Speaker A
профессиям? Суть в том, что мы готовы, мы с удовольствием делимся информацией, чтобы продемонстрировать наш системный подход. Но самое главное - это именно обратная персональная связь и результаты, которые вы можете непосредственно демонстрировать а своему работодателю, клиенту. И, соответственно, вы фактически это
52:50
Speaker A
перепродаёте. Вот. И лучшее подтверждение вашего результата - это международные награды, которые мои ученики уже получают. А они регулярно получают сайты дня на CSS, desigor, best CSS и так далее. Также, а, отмечаются наградами на Иворте и, соответственно, других международных
53:10
Speaker A
наградах. В итоге вы создадите проект на уровне ведущих дизайнеров и арт-директоров с нуля и сами доведёте его до работающего сайта с нашим контролем, а, с нашим, э, соответственно, нашей помощью. При этом я лично буду давать фидбеки на ключевых
53:25
Speaker A
точках и плюс у вас будет выдентор, который будет всегда на связи в чате. То есть у вас прямо чат будет, где вы общаетесь напрямую с куратором и и делаете проекты. Вот награды. А webгуру сайдня CSSAR сайдня CSS Winner сайдня
53:39
Speaker A
дизаign Nomines сайдня CSS Lite сайдня best CSS сойдня CSS сайдня то есть а и можно увидеть что работа действительно на высоком уровне здесь тоже а можно увидеть что работа на высоком уровне и это всё реальные проекты просто гуглитеsк
53:57
Speaker A
или best CSS words APRO и вот эти работы можете потрогать и посмотреть последний поток в двадцать шестом году году.
54:04
Speaker A
Длительность обучения 3 месяца, то есть у нас месяц бонусный для тех, кто оставит сейчас заявку. 2 с2 месяца более чем достаточно время на прохождение этого курса. 9 ноября старт нового потока. Группа будет максимум 10 человек. А, и непосредственно вы сейчас
54:22
Speaker A
можете оставить заявку на то, чтобы попасть влист. Э, мы делаем отбор тех учеников, которые попадают в этот йлист.
54:30
Speaker A
Обучение будет очень плотно, ребят, потому что результаты -э потому что это не просто -э только сверстать в клоди, а-а, а это ещё сгенерировать контент, придумать бренд, нарисовать дизайн там, то есть там такой объём, что, ну, просто с ума сойти может в хорошем смысле. Вот
54:47
Speaker A
курс в первую очередь для тех, у кого уже есть опыт в дизайне. Минимум один-два проекта в портфолио - это для учеников Апрока. Ну, потому что у нас эта планка высокая. Вот. И наша задача не научить вас работать фиг. Поэтому про
54:59
Speaker A
фиг мы не будем рассказывать, а вывести вас на уровн, где вы сможете сделать под ключ, любую задачу и создать проект, с которым можно завоёвать награды на международном уровне. Набирай группу до 10ти человек, чтобы уделить внимание каждому э проекту. То есть я каж я уже
55:15
Speaker A
делюсь вчера, кстати, а у себя в канале делился раскадровкой. Стоимость а для наших учеников 79.000 руб., для остальных желающих 89.000 руб. в рассрочку от 4.125.
55:28
Speaker A
чтобы оставить заявку. А так, а ещё можно отдельно приобрести только часть cloud код. Стоимость при оплате сразу 59.000 руб. Так, а ссылка на рассрочку. Чтобы оставить рассрочку, нужно написать имя, Евгений, номер телефона и ваш Telegram. Всё. А вы бронируете
56:01
Speaker A
всё, оставляете заявку и бронируйте на последний поток в этом году. Фух. А напишите, пожалуйста, плюсик, а у кого заинтересовало это обучение. Вот. И для граждан, э, с зарубежных стороны у нас есть рассрочки, а оплата матерским капиталом и тринадцатипроцентный
56:20
Speaker A
налоговый вычет. То есть от этой суммы ещё -13%, это ещё минус 10.000 руб. и оплата cloud код на месяц вам, чтобы вам хватило как раз на вёрску а сайта. Так, всё вроде э ссылка на бронь в чате закреплена в
56:40
Speaker A
чате, а этого вебинара и, соответственно, под видео. Так, можно ссылку на сайт, на который, например, для вёрски сейчас, да, пришлём.
56:54
Speaker A
Так, всё, Тёмыч, передаю тебе слово. Спасибо за внимание. Так, ребят, смотрите, сейчас демонстрацию включаю.
57:04
Speaker A
А, итак, вот результат вёрстки. Сейчас секция статичная, потому что мы ей анимацию ещё не отдавали, но она абсолютно похожа на Фигму. То есть можем даже сравнить вот как выглядит Фигми, как выглядит здесь на сайте.
57:23
Speaker A
А что сейчас пока Женя рассказывал, я ещё отдал, ну, чтобы не терять время, отдал верстать следующую секцию. Она, ну, нейронка сейчас нам подготовит статику этой секции, и потом мы между ними уже будем накручивать м анимации. А пока она это
57:43
Speaker A
делает, давайте проверим, как это выглядит на адаптиве. То есть включаю мобильную версию. Сейчас мне нужно немножко полистать.
57:52
Speaker A
Тём, ты как закончишь, какой-нибудь кусочек передашь мне слово? Тут важный вопрос. Конечно, да. Да, можно сейчас, можно сейчас.
58:00
Speaker A
А, да, смотрите, ребята, постоянно задают вопрос такой ещё я, а, типа, ещё дизайнеры, опытные дизайнеры постоянно говорят: "А зачем эти сайты с AWS? Это пока смот и всё остальное". Я думаю, господи, как почему такие вопросы создают? Смотрите, а человек устроен таким образом, то что
58:19
Speaker A
он как бы видит что-то, и он буквально воспринимает, что так это надо один к одному использовать. Вот это не не претензии к тому человеку. Это вообще глобальная проблема. Я вот этому удивляюсь в нашей индустрии. Суть такая.
58:31
Speaker A
Представьте, что есть ползунок. Если вы научились делать на максимум, ну, типа с весами, а отжимание, то если мы уберём количество анимаций, то значит вы можете попроще делать проекты. То есть, если вы сделали вот такого уровня проект, то вы
58:48
Speaker A
можете любую анимацию сделать, любой визуальный проект можете сделать. Так, Артём? Да, абсолютно верно. Добавь что-нибудь от себя вот какую свою мысль по этому поводу, чтобы это дополнить. А, да. Э, ребят, у нас такая профессия, что нам постоянно нужно чему-то новому
59:07
Speaker A
учиться. Вот я сколько работаю в дизайне, то есть уже по сути 9 лет уже.
59:11
Speaker A
жесть. И я каждый год учусь, каждый год вкладываю деньги на то, чтобы развиваться, потому что невозможно стоять на месте. Соответственно, вот такие вот работыs, они помогают мм ваши мозги расчехлить, то есть растормошить их, чтобы вы более глубоко думали, чтобы
59:31
Speaker A
какие-то новые моменты пробовали. Это то же самое, что вот, допустим, вы в качалку ходите.
59:36
Speaker A
Если вы будете делать одни и те же упражнения, да, у вас будет результат, но мышцам иногда нужно давать что-то новое, то есть какие-то другие тренажёры попробовать и так далее. То же самое вот с фестивальными сайтами. Это как дать
59:53
Speaker A
новый глоток воздуха своему воображению, чтобы реализовать что-то интересное, более прикольное. Потому что, допустим, вот я работаю продуктовым дизайнером, там очень сухой дизайн, ребята, он так надоедает, потому что, ну, он такой очень системный, сухой, там много аналитики и так далее. И когда я вот
60:11
Speaker A
верстаю такие проекты, это вот для меня как развлечение. Я как конструктор играю, как будто вот я ребёнок, мне вот на Новый год подарили конструкторы, из которого я всякие приколюхи собираю.
60:21
Speaker A
Вот. То есть я вот это так воспринимаю. То есть это просто, как сказать, развлечение. Для меня это как развлечение в профессии. Вот я ещё добавлю то, что я почему я так зацепился за этот вопрос? Потому что у вас должно быть практическое понимание,
60:38
Speaker A
нахера я это делаю. Вот человек так устроен, ему нужен смысл. Смысл в том, что вот конкретно вот этот сайт, а, у меня вопрос, коллеги, напишите, пожалуйста, плюсик или минус, а можно ли было бы сделать его реальному продукту, фотоаппарату и был бы ли он уместен? Вот
60:55
Speaker A
напишите плюс или минус. Пока вы пишите 1 2 3 4 5 6 7 8 9 10, я дам ответ.
61:01
Speaker A
Смотрите, поскороль, пожалуйста, Тём. А ты скролишь, ты любой лендинг скролишь. Вот здесь не супер длинный лендинг, он раза в полтора длиннее, может в два, но по факту он длинный только за счёт страниц, ну, больших картинок. И тебя это не напрягает, это не создаёт
61:22
Speaker A
какой-то сложный опыт, где ты, вы просто не помните на флше какие раньше сайты были. Это Я я просто делал такие, когда работал на крупные бренды, и там ты должен был додуматься, а здесь просто скролишь, скрошилишь и постоянно чего-то там происходит. Да не отсохнет.
61:37
Speaker A
У вас палец проскролит чуть больше, чем обычно. Есть. Вы в тиктоках сидите и скролите. Это фактически TikTok, ребят.
61:44
Speaker A
Поэтому конкретно вот этот проект. И мы как раз учим делать такие проекты, которые можно реально а даже адаптировать под некоторых клиентов.
61:52
Speaker A
Откуда я это знаю? Я делал для клиентов подобные сайты, коммерческие заказы. И это были промышленные тематики. Вот поэтому самое главное, ребят, не концентрируйтесь на форуме, концентрируйтесь на суть. развивайтесь постоянно будьте гибкими, гибкими, научитесь делать на максимум, а потом,
62:09
Speaker A
соответственно, адаптируйте уже под разные ситуации. Ну а главное на самом деле, ребята, если тут суть такая, вы комплексно этому всему научитесь, а потом непосредственно одному клиенту сделать только адентику, визуал, другому только вёрстку и третьим, если вы весь спектр научились, ну, конечно, можно
62:25
Speaker A
комбинировать под разную ситуацию. Я поясню просто это забавная ситуация, то что раньше надо было прямо дизайнеры делали баталии, типа нахрена мне EWS, потому что Awards не нужен. То есть буквально хейтили Words, потому что сами не понимали. Вот это как раз говорит
62:43
Speaker A
вообще [вздыхает] [смех] индустрия у нас очень странная, на самом деле. Вот плюсики. Спасибо большое за плюсики, ребят. А-а, и за вашу активность. Всё, давайте вам а покажем.
62:57
Speaker A
А, давай. Я извини, что перебил тебя. Вот на все ваши вопросы остальные мы ответим.
63:01
Speaker A
Вот. Арт Тём, передаю тебе слово. Да. Итак, ребят, смотрите, а две секции готовы, они в статике находятся. А, и теперь нам необходимо уже накрутить на них анимацию. То есть сейчас будет самое интересное происходить.
63:18
Speaker A
А, как видите, статика свёрстана абсолютно прекрасно. То есть все отступы учтены, а, всё выглядит точно так же, как на макете. И, кстати, ещё хочу одну штуку продемонстрировать насчёт скила.
63:31
Speaker A
Сайты-то на самом деле получаются резиновые. Сейчас смотрите, как ведут себя размеры элементов, когда я меняю Vпоort. Vпоort - это вот размер окна. То есть, видите, они тянутся. А за счёт чего это происходит? За счёт того, что в скеле
63:47
Speaker A
написано, а, чтобы нейронка переводила все размеры из пикселей в относительные единицы. Относительно единиц - это там проценты.
63:59
Speaker A
Единица view, Views - это вот VWH - это высота в viewпорта. То есть 100 VH - это 100% высоты экрана, 100 VWви - это 100% ширины экрана. То есть вот такие относительные величины и ремы.
64:13
Speaker A
Единица рем - это единица, которая отсчитывается от базового размера шрифта. То есть, допустим, на сайте базовый размер шрифта 16 пикселей, значит, один рем равен 16 пикселям. И за счёт там определённой формулы все размеры элементов считаются в ремах. И,
64:34
Speaker A
соответственно, когда я меняю ширину экрана, меняется базовый размер шрифта в зависимости от ширины экрана, и, соответственно, по определённой формуле высчитываются размеры элементов. И получается так, что вот этот сайт, который вы верстаете, он у вас будет идеально выглядеть на любых устройствах.
64:53
Speaker A
То есть не будет каких-то резких переходов. Резкие переходы происходят только на планшет, вот как сейчас, и на мобилку. Вот два резких перехода: десктоп, таблетка, мобилка. Всё. А остальные размеры резиновые тянутся. Это называется, на самом деле, не резиновая вёрстка, а флюидная вёрстка. Не знаю,
65:12
Speaker A
откуда это повелось. Э, вообще флюид, насколько я помню, это агрегатное состояние между газом и жидкостью. Вот, может, отсюда аналогия взялась.
65:23
Speaker A
Вот как-то так. Так, теперь смотрите, что нам теперь нужно сделать. Нам нужно анимацию как-то описать нейронке, отдать её. Что мы делаем? А, мы выделяем макеты по кадровой ну, точнее, макеты раскадровки. Внутри макетов, напоминаю, там всё по слоям идеально сделано. А что
65:42
Speaker A
нам теперь нужно сделать? пойти в нейронку. Так, сейчас её потерял. Вот она. А, и сказать, а, примерно следующее.
65:52
Speaker A
Я выделил ани сейчас обратно. Я выделил макеты, точнее раскадровку макетов секции Chз. Эта секция состоит из четырёх слайдов. А каждый из слайдов находится в маске. Эта маска крутится вокруг точки, которая находится в середине правой границы экрана.
66:22
Speaker A
А на раскадровке показан переход от одного слайда к другому. Сделай переходы к другим слайдам по аналогии.
66:33
Speaker A
Вот примерно такой промт. Так, сейчас немножечко нужно подредактировать, потому что не всегда слова нормально распознают, либо я криво разговариваю.
66:46
Speaker A
Так, я выделил выделил макеты раскадровки секции чуз. Э, так, секции чуз поставим точку. Эта секция состоит из четырёх слайдов.
67:08
Speaker A
Можно ставить запятую, можно не ставить. Каждый слайдов находится в маске. Так, эта маска крутится вокруг точки, которая находится в середине правой границы экрана. Смотрите, а по раскадровке мы видим, что у нас есть маска, которая крутится. И чтобы нейронке подсказать, как эту маску
67:28
Speaker A
реализовать, я ей говорю условно точку, вокруг, э, которой маска эта крутится. И мы видим по раскадровке, что эта точка находится здесь, в середине правой границы экрана. Соответственно, нейронке будет от чего оттолкнуться, и она поймёт, как это реализовать.
67:46
Speaker A
Вот видите? То есть эта маска, она тут вот так вот по кругу прокручивается. Вот, соответственно, сейчас отдадим эти макеты и посмотрим, как она это сделает.
67:56
Speaker A
Так, сделай переход к другим слайдам по аналогии. Внитце экрана. Всё, можно отдавать. Сейчас Нейронка это подхватит, прочитает макеты, поймёт, как элементы переходят от одного состояния в другое и попробовать нам это реализовать. Я надеюсь, с первого раза получится. Ну а нам нужно немножко
68:21
Speaker A
подождать, я думаю, минуток пять, Жень. Так что можем, в принципе, ещё поотвечать на вопросы.
68:26
Speaker A
А, да, я немножко это секундочку поясню. По поводу скилов, ребята. Смотрите. Честно вам скажу, я, наверное, в общем, а, извините, я выгорил хренам.
68:40
Speaker A
У нас это Яндекс-сервера упали, и, соответственно, сегодня опять были ава ава аварийная ситуация у утопии. Вот мы сейчас всё починили, там сейчас всё работает. Я параллельно потестировал и за это немножко подвыгорил. Вот. А, смотрите, хорошая новость, то, что мы в
69:01
Speaker A
утопию подключим клод. Мы сделаем специальное приложение для того, чтобы вам не надо было мучиться с этим, а, cloudд-кодом, потому что там постоянно банят российских пользователей, и это не секрет. Нужно постоянно танцы с бубном устраивать. Мы сделаем приложение, которое, ну, то есть сейчас работаем над
69:21
Speaker A
приложением, которое позволит программировать и менять файлы а у себя на рабочем стале, там на компьютере, в общем, видите, выгорел немножко. И ещё MCP для Фигмы, для Блендера, для всего остального. У нас есть отдельная команда под это выделена. Вот. И хорошая новость
69:40
Speaker A
для вас, то есть мы сейчас скилы, а, не будем давать здесь. Приношу извинения. Они только нашим ученикам а будут даваться. Во-первых, потому что мы их протестируем максимально, потому что их надо, знаете, не на двух-трёх проектах, которые Артём сверстал, а их
69:57
Speaker A
нужно постоянно развивать. Вот. И, соответственно, когда мы будем с учениками делать, мы там точечно будем докручивать их. Вот это и потом и ученики научатся сами править свои скилы создавать с помощью вот этого точный контроль. А потом скилы мы
70:14
Speaker A
выложим -э в утопию, и там сможете с этим со всем работать. И мы будем постоянно пополнять, а, скилами вообще утопию там, а, в ближайшее время выйдут скилы для создания рекламных роликов, где фактически я его написал, дал регламент, механизм. Ну, и большое
70:32
Speaker A
количество, кстати, а в утопи уже можешь зайти в утопию, если есть возможность. Тём. Да, сейчас. А мне интересно, как ты упиi.
70:46
Speaker A
Да, у меня где-то папка не выкатили новое обновление. А, а давай я сам быстренько зайду. Ну давай ты.
70:54
Speaker A
А давай, давай, давай. Давай я быстренько зайду. Сейчас, Женя, отойду на минутку. Хорошо. Что?
71:02
Speaker A
На минутку отойду. Хорошо. Ага. Давай. Я вам сейчас хочу показать просто, ребята, и это пока она грузится.
71:11
Speaker A
Так, смотрите, у Артёма зацените режимы в потоках. То есть ты сейчас заходишь, у тебя вот большое количество режимов, и у нас цель добавить просто колоссальное количество режимов. Дайтеля, извините, робот там нападает. А я начал рассказывать. Зацените, какой кайф. Вы
71:37
Speaker A
сможете все пункты меню подстраивать под себя. Вот если мы зайдём сюда, вот здесь пункты также обновляются.
71:45
Speaker A
Вот. И что главное вышло? Агент. То есть вы теперь можете здесь там сделай мне фотосессию.
71:53
Speaker A
А, сделай мне фотосессию. И в ближайшее время мы начнём, а пачками добавлять сюда скилы. А мы вот видите, она прикрепи фотографию там. Давайте вот эту фотку, давайте девушку, например, вот там продолжить. Обратите внимание, какой это классный интерфейс, как это удобно.
72:17
Speaker A
Мы всё время конкурентовы смотрим и стараемся сделать что-нибудь получше, чем у конкурентов. Вот. А-а, а ещё прикольно, а, су, если нет суперагент холст.
72:32
Speaker A
Во-первых, вы теперь поделиться можете холстом, сделал доступ по ссылке. Мы и над командной работой, э, сейчас ведём работу, чтобы вы могли редактировать. И обратите внимание, где у нас там линейки. А, ну, в общем, здесь скорость страницы сверху появятся. Токены
72:52
Speaker A
появились здесь. В общем, я думаю, страницы появились. В общем, работаем. А, то есть, несмотря на вот все эти долбаные аварийные ситуации, которые происходят, вот и Артём как раз появился. Смотрите, она неронко проанализировала промт, предложила эти -э всё и пошло. Вот.
73:17
Speaker A
И ещё в ближайшее время скилы появятся. То есть мы сделаем большую библиотеку скилов. Если у вас есть скилы, а интересно, пишите. Мы с удовольствием добавим с вашим авторским, а-а, ну, лицом. Вот. Напишите, пожалуйста, по десятибалльной шкале, как вам а эти
73:32
Speaker A
изменения. Вот. Я буду рад, если вам они понравятся. Вот. Всё, тогда. А, Тёма появился, как раз занял эфирное время и на всякий случай напомню, а бронь а-э здесь, э, на в общем, всё, как нам выговорил. Давай, Тём, ты рули, я тебе
73:49
Speaker A
потом вопросы скину. Вот. А то это очень устал. Ребята, извините за тенические сбои, которые произошли, за всей этой аварии. Тут я сам вообще жутко недоволен. Вот. Ээ всё, Тёма передаю слово.
74:03
Speaker A
Да, ну сайт Ой, господи, Неронка пока ещё делает свою работу, так что можем на вопросы поотвечать. Да. Ну да, спасибо большое за десятки. Так, по скилам я надеюсь ответил. Нам нужно тактактак. Давай вопросы.
74:18
Speaker A
Какой порог входа? Смогу ли я сверстать свои макеты, не имея опыта вёрстки классическим образом, не разбираясь в написании кода? Вообще, конечно, ребята, у нас курс сделан так, что я поначалу вам в уроках объясняю из чего вообще сайт состоит, и мы медленно,
74:37
Speaker A
потихонечку подбираемся к тому, как настроить рабочую среду. То есть будут понятные инструкции, как это сделать, причём видеоинструкции. И потом вам вам не надо писать код, поймите. Вы ни строчки кода вообще не напишите. Вы будете писать промты, то есть задачи
74:53
Speaker A
нерунки. Всё. Так, следующий вопрос. Так, получается ли мы передаём и весь файл, а не конкретный фрейм?
75:04
Speaker A
Нет, нет, нет, ребят, лучше по фреймам делать. Почему? Опять же, я в начале лекции говорил, что у нейронки есть своя оперативная память. И чем больше данных вы ей отдаёте, тем больше она тупит и хуже делает свою задачу. Поэтому
75:18
Speaker A
рекомендую делать по секциям. То есть логический блок сделали, поправили, всё отлично выглядит, идёте дальше.
75:27
Speaker A
Так, а перенос [откашливается] макетов из Фигмы в клод только из платной фигмы возможен, например, с тарифа и Да, только, к сожалению, да, ребят, так работает MCP, то есть MCPфигма доступна только вот на платных тарифах. Можно, конечно, скриншоты отдавать, но это будет супер
75:47
Speaker A
неэффективно. Угу. Следующий вопрос. Так, а получается Угу. Тактак. А можно же весь этот клод переложить?
76:00
Speaker A
Тактактак. А мобильную анимацию тоже кадрировать нужно отдельно? Нет, нет. Для адаптивов достаточно подготовить именно статичные макеты, а нейронка уже сама всё додумает. То есть она проведёт аналогию, поймёт, как перестроились элементы. Соответственно, она поймёт, как перестроить анимацию в адаптивах. То есть я ни разу не делал
76:21
Speaker A
раскадровку для адаптивов. Это лишняя работа. Так, следующий вопрос. А тактактак. Говорят, что верста через клод сайт получается намного менее безопасным, легче взломать, так как код примитивнее.
76:37
Speaker A
Правда ли это? В целом такие риски, возможно плюсы-минусы. А, смотрите, ребят, насчёт безопасности. Вы просто говорите неронке перед тем, как отдать клиенту, сказать, что проведи меры по безопасности сайта. Всё, неронка сама проанализирует. Она даже вам скил напишет, по которому она это сделает, и
76:58
Speaker A
всё. И сайт будет безопасный на защищённом соединении и так далее. А опять же повторюсь, воспринимайте нейронку как инструмент. То есть есть запрос, о'кей, отдайте этот запрос нейронке, пускай делает.
77:13
Speaker A
Она может то, что сделал человек. Вот если программист сделал, значит и неронка сможет. Почему? Потому что есть ээ документация в интернете открытая, которую Неронка может прочитать и сделать также всё.
77:25
Speaker A
Да, она не придумает код с нуля, ребята, она использует чей-то чужой. То есть скорее это вопросы их безопасности тому, у кого она взяла этот код. Но я думаю, они постоянно над этим работают и развивают его. Вот. И соответственно,
77:39
Speaker A
Женя, держись. Спасибо большое, ребят. Реально всё это прямо вымотало сильно. Поэтому вот ещё тут нужно рассказывать, презентовывать курс. Между нами на самом деле, ребят, а творцы не любят презентовывать свою работу, а у них по умолчанию, вот я, например, считаю, что
77:55
Speaker A
у нас лучший курс, вот имею право и, соответственно, а, международные награды там, так далее. Ну, вот сейчас тяжело прямо вот здесь вот рыдать охот, знаете, когда комок здесь. Это из-за усталости.
78:06
Speaker A
Так, а про скилы, которые Артём использует на стримы, поделитесь. поделимся, но в утопию, когда мы ещё больше оттестируем. И, соответственно, это будут просто базовые настройки внутри а того, что вы сможете это верстать э с нашими скилами. Просто сделано так, чтобы вы могли минимальное
78:24
Speaker A
количество действий сделать. Мы даже фиг сюда добавим, чтобы ещё референсов. То есть у меня цель, ребят, сделать так, чтобы у вас был лучший инструмент. Так, а где брать идеи для таких крутых анимаций? Правильно сказали, наворте.
78:39
Speaker A
Вот теперь вопрос. А потом из клода скачивают архив с кодом загружать на хостинг, чтобы сайт стал сайтом рабочим.
78:46
Speaker A
К тебе вопрос. А вы просто даёте данные вот этого хостинга, а неронка подключается к нему и сама выгружает, то есть делает деплой.
78:57
Speaker A
Деплой - это вот как раз-таки, когда готовый сайт уже выгружается на хостинг. Неронка вам вообще даст пошаговую инструкцию, как этот, как домен к этому хостингу подключить, как произвести деплой, какие данные ей для этого нужны и так далее. То есть насчёт этого тоже
79:14
Speaker A
не переживайте. Задаёте вопрос, Неронка даёт вам пошаговую инструкцию, вы выполняете её шаги и всё вообще замечательно.
79:25
Speaker A
А какие размеры для трёх адаптивов берёте? А, смотрите, ребят, для десктопа неважно. Вот если вы привыкли делать 1440, делайте440. Привыкли делать 1920, о'кей, делайте 920. Для планшетов средненький, ну, усреднённый размер самый нормальный - это 768 пикселей на 1024. А для мобилок рекомендую брать
79:48
Speaker A
375x на812, то есть размеры Айфона под 360. Там насколько-то не помню, что там у Андроида. Нейронка сама допилит за счёт флюидной вёрстки.
80:00
Speaker A
Так, следующий вопрос. А, а тут человек говорит своё мнение. Вот скажи контрмнение или подтверди это мнение.
80:07
Speaker A
Создать, то есть он говорит, как процесс должен выглядеть. Создать скилы, что будут проводить анализ рефов, а, разбирать на дизайн компоненты, а потом из этого собирать уже саму вёрстку. Вот.
80:20
Speaker A
А такое возможно? Это, кстати, вопрос, а не мнение. А, и уже по ходу внося правки. Такой механизм возможен. То есть, на мой взгляд, как я это расшифровал, то есть получается, как будто очень много делегируется нейронки, что она сама наберёт рефы, сама это
80:37
Speaker A
разберёт на компоненты, а, и сама это сверстает, но ты как будто на промежуточных точках его курируешь, чтобы он там рефы, не те, давай ещё потом он тебе что-то предлагает и вот так вот дособирает. Возможен ли такой цикл? Как ты думаешь, Тём?
80:54
Speaker A
Да, абсолютно. Я даже в интернете видел, что сейчас можно полностью с нуля сделать сайт. Вообще ничего не трогая руками, только промтевая. То есть один скилл там по подбору референсов, другой скилл по анализу рынка, третий скилл, который вам прототипы соберёт, четвёртый
81:13
Speaker A
скилл, который натянет дизайн на эти прототипы, потом этот дизайн передаётся через другой скилл, верстается и так далее.
81:21
Speaker A
То есть сейчас вообще всё возможно, какие-то чудеса начались. Мне даже страшно. [смех] А я немножко дополню. Смотрите, ребят, э а сколько, то есть тут вот есть нюанс.
81:33
Speaker A
Допустим, нейронка вам найдёт референс. А сколько она вам найдёт? 10, 20, 30, 50. А какого качества она найдёт эти референсы?
81:42
Speaker A
Да. А вот ты когда с А ты вот, например, опытный дизайнер, я могу вам сказать, чтобы сделать один проект. Я спокойно 100 сайтов посмотрю какие-нибудь, ещё отфильтрую, как мне надо, и потом ещё, э-э, как бы, то есть, а на пинтересте,
81:57
Speaker A
когда я смотрю, он мне, конечно, под подборки делает. Он это фактически неронка, но я каждый референс смотрю, отбираю, да, нет, да, нет, да, нет. То есть, если мне такой тиндер сделаю для моих референсов, и он будет мне подбирать подбирать это конечно мне
82:14
Speaker A
и на основе этого как пинтерес, то это может сработать. Вот так, чтобы 10 он дал мне, но этого недостаточно. А потом ещё на компоненты. Вот как бы много, поймите правильно, а рутины с нас реально снимут 95%. Но вот микроконтроль
82:31
Speaker A
на всём этом протяжении он должен быть, иначе ваша автор, а, ну, авторство и ваш уровень он теряется. Так, а следующий вопрос.
82:42
Speaker A
А или ты ещё что-нибудь Сём хочешь добавить? Нет, нет, пока ничего. Я тут пока отдам в работу, чтобы следующую секцию сделал, пока ты читаешь вопросы.
82:54
Speaker A
Угу. Что делать, если на мобилке элементы всё же немного меняются по составе и логике работы?
83:02
Speaker A
А сказать неронке, что она ошиблась и не надо так делать, и она поправит. То есть конкретно объяснить, какие элементы куда поехали, что исчезло, если вдруг что нужно поправить и так далее.
83:16
Speaker A
А так, кстати, это же всё уже было, помните времена, когда была куча инфоциганских сайтов, тысячи одинаковых, 1 почти. Мы уже всё это проходили, эта история про передать всё на и то же самое. Насколько ты согласен или не согласен с этим мнением?
83:35
Speaker A
Так, можно ещё раз? Девушка сказала интересное мнение. Кстати, с нейронками вот с этим, а то, что все хотя думают, что сайты сделают одним вот так вот. Это уже всё было.
83:50
Speaker A
Помните времена, когда была куча инфоциганских сайтов, ну, сайтов шаблонов, назовём так, тысячи одинаковых, один в один почти. Мы уже всё через это проходили. Это история про передать всё наи то же самое.
84:04
Speaker A
М, нет, не соглашусь. А и и это же просто инструмент, с помощью которого можно сделать всё, что угодно. То есть тут ээ нет же такого, что вот я отдал неронке сделать сайт и она фигак.
84:17
Speaker A
Тём, Тём, извини, пожалуйста. Я, видимо, плохо сформулировал. Давай я мысль разобью, а ты пополнишь.
84:23
Speaker A
Суть такая вот смотри, то, как ты делаешь- это одно. Это параллель провести. Вот раньше было очень много шаблонных сайтов. Ну, шаблонов, и все такие: "Я сам без дизайнера сделаю себе сайт". Было такое, помнишь, Тём?
84:38
Speaker A
Угу. Да. Вот. И на этих шаблонах они делали одинаковые сайты, особенно VIX. А, да, да, дада, да.
84:45
Speaker A
Вот. А, но в то же время вот эта культура конструкторов дала тильдоводам, которые там на зироблоках делали или на вебфлоow, кто делал кастомные сайты. То есть, как и с ИИ похожа история, что сейчас каждый второй говорит: "Да я на Иистро соберу".
85:03
Speaker A
И он сделает так называемый неросло, то есть типовой сайт, как у других. Это будет 90 там 8% рынка. И вот 2% отго, как ты, то, что мы пропагандируем, как раз, а не расслабиться и сказать, типа, неронка из меня всё сделает, а использую как
85:20
Speaker A
инструмент, который является продолжением тебя. Вот и а человек вот это имел в виду, а я, наверное, интонацию неправильно передал. Вот. Ты как думаешь, с этой мыслью согласен?
85:34
Speaker A
А, да. То есть получается, если дать нейронку в руки какого-то предпринимателя, который не разбирается в дизайне, да, у всех этих предпринимателей примерно одинаковый дизайн получится. Если дать инструмент дизайнеру, то эти сайты будут отличаться, потому что у дизайнеров свои
85:52
Speaker A
референсы, свои подходы и так далее. Угу. То есть тут глуби от глубины погружения зависит.
86:00
Speaker A
Так, а есть ли смысл изучать блок по анимациям автоэффекции или сейчас реализация анимации нейронки сильно меняет процесс?
86:11
Speaker A
Так, это вопрос ко мне. Да. Да. А, смотрите, а мы можем анимацию за After EffectF передать нейронке в качестве видео. Она это видео изучит и поймёт, как это реализовать. То есть это вот прямо, если супер сложная какая-то анимация, которую вот очень трудно в
86:31
Speaker A
Фигме в качестве раскадровки сделать, то это хороший способ. Если какая-то анимация попроще, которую можно с помощью раскадровки Фигми сделать, то в целом не вижу смысла тратить время на AfterF.
86:43
Speaker A
Ага. Всё. И это я немножко добавлю. Смотрите, ребят, я за то, чтобы э сейчас смотрите, есть такое ощущение, что нахера мне руками это всё делать, если за меня неронка научится делать. Вот я привожу пример своих руководителей. У меня принцип у всех руководителей. Вот
87:05
Speaker A
Артём, например, он у нас теперь руководитель уже по направлению. А-а, как я с ним нача начал работать, я сказал: "Артём, сделай руками всё". Ну, он сам проявил инициативу, он сам делал руками и сделал не один проект, а несколько. И вот как только он до
87:24
Speaker A
вызубрил это всё, а он только потом стал руководителем а по вот этому направлению, скажем так. И я точно так же прохожу. Это на у нас вообще такая концепция. То есть, смотрите, ребят, а если ты хочешьделать что-то крутое, ты
87:38
Speaker A
вначале научись делать это руками. Вот, а хотя бы один-два раза. Кино прямо снимать не надо, но раскадровочку сделать можно на на бумаге примерно прикинуть всё. А там а если нарисовать, не обязательно прямо хорошо, но а позы, композицию научиться надо расставлять.
87:56
Speaker A
Вот. А потому что если ты это не делаешь, то у тебя какой-то рандом получается. Поэтому в AfterЭeF не надо делать гениальные вещи, но базово научиться эти принципы, тайминги, а, какую-то простейшую анимацию сделать нужно. И вот, соответственно, по вёрстке
88:12
Speaker A
не надо знать всю вёрстку, но синтаксис выучить нужно, а дизайн, ну, его нарисовать бы пару раз, а потом уже можно и делегировать всё это нейронки. А если вы как бы перепрыгиваете этап, то у вас это поверхностное восприятие, понимание предметной сути будет, и у вас
88:30
Speaker A
не будет вот этого ображения конечного результата, потому что именно это и помогает вам ставить задачу. Вот. Можно ещё инфы про ультрави? Да, с удовольствием. Уточните, пожалуйста. А какая, э, скажу. И вот тут ещё это, э, Катя, Жень, хочешь тебя поддержать?
88:49
Speaker A
Спасибо большое, Катя. Так. А не сходится, смотрит 156, а пальцев вверх 135. Согласен полностью, ребята. У нас ещё осталось немного времени, чтобы получить больше токенов. Так, что думаете о библиотеках MD-файлов типа?
89:06
Speaker A
Годно для дизайнера МВП. Что думаешь, Тём, чужие скилы использовать? Имеет смысл? А, смотрите, можно использовать чужие скилы только в, ну, лично я считаю, только в качестве какого-то решения, от которого нужно оттолкнуться. То есть вы читаете скилл, пытаетесь понять, ага,
89:25
Speaker A
что он делает, и на него нарабатываете. То есть хорошая база, то есть от которой можно оттолкнуться. Но скилы они вот конкретно под какие-то ваши задачи, под ваши привычки тоже написаться. Поэтому скилы нужно постоянно развивать. То есть, о'кей, взяли там базу, допустим,
89:43
Speaker A
нашли в интернете скил, с помощью которого нейронка будет верстать сайт. О'кей? И на этот скилл нарабатываете, говорите: "Ну вот я точно так же эти скилы разрабатывал". То есть я сказал: "Смотри, а я хочу, чтобы ты максимально точно переносил макеты из Фигмы в
90:00
Speaker A
вёрстку. Давай с тобой подумаем, а как мне эти макеты размечать, чтобы у нас с тобой был максимально крутой результат.
90:10
Speaker A
И мне Неронка сказала: "А давай сделаем так-то". Я такой посмотрел: "Не, говорю, давай сделаем вот так-то". И мы с ней порассуждали, сделали тестовый прогон. Я посмотрел: "Ага, вообще офигенно". Э, то есть получается очень точно вёрстка получилась. Ну, с какими-то огрехами. Я
90:28
Speaker A
говорю: "Есть вот такие-то погрешности, по подумай, как можно их допилить". Он мне предложил, говорит: "Вот, давай переменные использовать". Я такой: "Отлично, конечно, буду делать переменные в макетах". И всё. Вот таким образом нарабатывается скилл. То есть берёте какую-то основу, от неё
90:45
Speaker A
отталкиваетесь и делаете под себя. А, да, ещё вот тут по поводу курса Ultra UI Rirection, честно скажу, ребята, вот мне сейчас Лёша по утопию пишет там небольшой баг, а технический как раз из CDN. Вот я просто очень выгорел. А у вас
91:04
Speaker A
есть ссылка на бронь? Это бронь там на консультацию вам дадут полностью подробно. Я сам ещё аудио запишу завтра на какие-то ваши вопросы. Сейчас просто, честно, тяжело ментально вообще на что-то дополнительно отвечать. Вот и я тему тебя продолжу. Ссылка на бронь, ну
91:23
Speaker A
и на консультацию в закреплённом к этому чату и к этому видео. Так, тём. А тактактак.
91:31
Speaker A
А сейчас Тём, секундочку. Есть ли смысл учать программы для вёрски тильд Webflow? Спасибо за стрим, пожалуйста.
91:43
Speaker A
А так смотрите, какую цель вы преследуете. Если вы хотите посильнее разобраться в вёрстке, то рекомендую изучить Вебflow, ну, чисто вот под себя, чтобы техническую базу наработать. Если у вас цель супербыстро верстать сайты и особо не разбираться, как они технически
92:02
Speaker A
устроены, чтобы за это только нейронка отвечала, то не вижу смысла. Отдавайте всё нейронке. Так а и вроде всё.
92:15
Speaker A
Так, один вопрос. Можно мо, возможно, пропустил, но как проходит работа с компонентами? Отрисом ли мы в таком случае их сами с разными состояниями? Например, дефолт, при наведении, при нажатии или можно надать клоду?
92:30
Speaker A
А смотрите ребята рекомендую отрисовывать, потому что клод может всякую фигню сделать. Как это выглядит?
92:36
Speaker A
Допустим, а, карточка в форме заявки. Сейчас покажу форму заявки. А, точнее, форма заказа, то есть выделенная карточка и в обычном состоянии. Берёте, делаете под неё компонент, показываете, что вот в таком-то состоянии она selected, в другом состоянии она no selected. То же
92:54
Speaker A
самое с кнопкой, то есть обычное состояние при наведении. И можно ещё сделать через прототипирование переход, который помогает нейронке понять, с какой скоростью эта анимация происходит, по какому графику и вообще что, э, собственно происходит при наведении. Вот это тоже помогает нейронке. Она, а,
93:16
Speaker A
находит этот компонент внутри макета, такая смотрит: "Ага, это компонент. Ну-ка, пойду-ка я в в материнский компонент, посмотрю, как устроено". Идёт сюда, смотрит, видит, ага, между ними переход, такие-то два состояния и так далее.
93:29
Speaker A
Вот поэтому рекомендую это делать. То есть компоненты лучше использовать. Так нейронка более точно воспроизводит их поведение.
93:39
Speaker A
Так, ну а все вопросы прошлись. А прошу тебя. Отлично. А поделись, как у тебя всё сверталось?
93:47
Speaker A
Смотрите, да, неронка пишет, что она закончила. Давайте пролистаем к этому моменту. Могут быть огрехи, но сейчас посмотрим. С огрехами даже интереснее, потому что можно показать, как вносятся правки.
94:00
Speaker A
Так листаем листаем листаем листаем. Так, в этой секции всё в принципе хорошо. Есть небольшой баг, то, что у нас вот эти слова смещаются, это очень легко поправить.
94:12
Speaker A
А, и барабан не крутится. Надо сделать, чтобы крутился барабан. Так, а дальше а дальше секцию почему-то не видно, потому что, скорее всего, неронка ошиблась и вот эту секцию наслоила на предыдущую.
94:28
Speaker A
Сейчас будем разбираться. Сейчас напишем. Тём, давай, у нас уже 2 часа будет [откашливается] вебинар скоро. Я предлагаю минут 10-15 заканчивать. А напишите пожалуйста плюсик ребята если общий принцип вам понятен. То есть мы фактически, ну, сверстали такую значительную часть сайта. Вот. А Тёма
94:47
Speaker A
сейчас ещё внесёт правки, у вас ещё больше закрепится, как это делается. Вот. А пока Тёма вносит правки, а ты только не пиши, Тём. А я тебе сейчас это попрошу объяснить это вот.
95:00
Speaker A
А и ещё, ребят, вы пишите плюсики. Супер. Спасибо большое вообще за реакцию, потому что намного легче вести вебинар, когда есть диалог. И напишите, пожалуйста, какую какие темы по клоду вы хотели бы в будущем, чтобы мы раскрыли.
95:14
Speaker A
Мы обязательно это сделаем. Вот. А-а, Женя, Артём, спасибо за ваш крутой тандем. Спасибо большое, Оля. Вот, как всегда, всё разложили.
95:23
Speaker A
Это Оля. Вот. А, а, скажем так, Оля всегда меня поддерживает, всегда пишет мне это хорошего вебинара, там все дела. Спасибо, Оль, большое.
95:37
Speaker A
Да, я очень признателен, ребят, за вообще нормальную поддержку. Немножко отвлекусь. А я поясню. Я в чате стараюсь держать очень вежливую, тактичную обстановку вот в нашем чате дизайнеров вопрок, потому что дизайнеры сами по себе часто токсичные люди, которые там
95:50
Speaker A
завидуют друг другу, токсичничают там или ещё что-то. Вот и я, соответственно, работал в разных рекламных московских компаниях, Digital. А и такая токсичная тусовка была, сейчас таких нет уже. Это рекламная тусовка была такая прямо. Вот.
96:05
Speaker A
И мне хотелось создать такое уютное место, где на как для себя фактически, вот где было бы комфортно. И вот та обстановка, которая у нас на Ютубе, а которая в чате, а я это то как бы как дома, чтобы ты как домой пришёл и что ты
96:20
Speaker A
знал, что ты можешь поделиться проектом, и ты не услышишь говна там на тебя на навалят, а а тебе скажут там какую-то конструктивную обратную связь поддержат.
96:30
Speaker A
Ты там скажешь: "Блин, меня что-то расстроило обратную связь". Тебе скажут: "Да нормально всё, не переживай, всё наработается". То есть такая такой, знаете, высокий уровн тактичности. Вот.
96:40
Speaker A
Поэтому за вашу поддержку я очень по-человечески признателен, потому что это даёт веру в людей, на самом деле, учитывая, как много дизайнеров, ну, как наше дизайнсообщество очень легко превратить в это в тактичную среду. Вот какой-нибудь там чат, если любой там,
96:54
Speaker A
если брать. Вот. Поэтому, э, я вам признателен, что мы остаёмся людьми. Это прекрасно, ребят. Вот. И, э-э, быстренько. Женя, Артём, спасибо за вебинар и материал. Женя, держись, нужно давай тебе отдыхать. Думаю, сейчас мы добьём там. Нашли баг. А как вы
97:10
Speaker A
поправите? Сделайте тему максимально сложной анимации интегрирования клода в Blenderко сложная анимация. Вот то, что вы сейчас видите, это очень сложная анимация. По поводу BLраer- это конкретика. Сделаем.
97:22
Speaker A
Так, интересно, как люди без знаний вёрстки будут держать проблемы без инспектора кода в браузере. Хороший комментарий. Согласен. Это инспектор.
97:32
Speaker A
Это мы код, чтобы могли посмотреть в кодекс. Аналогична механика. Да, абсолютно. Интересно знать, как сделать сплайн сцены. 3D по скроллу и видео по скроллу через Тёмыч, ты запомнил? А, о'кей, проработаем.
97:47
Speaker A
Вот. Да, спасибо большое за вебинар. Очень приятное общение, понятное объяснение, много полезной информации. Благодаря от души, пожалуйста. И вам спасибо, ребят. Вот так. Э, что ещё хотел сказать? Да, смотрите, ребят, мм покажи ещё раз анимацию, которую ты сделал. Я хотел бы, чтобы вы, а, сегодня
98:06
Speaker A
вы узнали принципы анимации. Вот. А я вам не рекомендую делать такого же уровня сложности, потому что вы не потянете. А из-за того, что мозг должен как бы объективно видеть картину, он должен референс нормальный подобрать.
98:20
Speaker A
Вот всё это вот. Но более простые начните с малого, вот, и потихонечку там усложняйте. Вот. Но прямо высокий уровень. А обратите внимание, что не так много дизайнеров, несмотря на то, что Клод, э, фактически всё делает за вас, может делать на таком уровне. Это важный
98:36
Speaker A
нюанс. Вот просто как раз конкретика, что мы на самом деле даём. Мы даём мышление, чтобы ты с хорошим инструментом вообще себя, а, ни в чём не ограничивал. Так, можно админку добавить с помощью клода? Да, как раз у нас один
98:52
Speaker A
из следующих вебинаров будет, как мы админку подключаем. Сейчас готовим материал, поэтому А, да, про сплаine 3D будет интересно. Сделаем всё. Неронки умеют 3D делать. Интересно было потом GLB файл интегрировать со светом. Курсор Clт и какой-то проект показать круто
99:09
Speaker A
было бы. Ну вам прямо дизайнером. Тём, ты не замечал, что у дизайнеров фетиш на 3D? Вот.
99:16
Speaker A
Угу. Есть такое. Ну, сейчас в Инстаграме очень большой тренд на это всё, поэтому, наверное, оттуда растут. Извините, прервал. Вот. В общем, 3D сделаем. А, сохранится запись эфира? Да, сохранится.
99:29
Speaker A
Поэтому поставьте лайк для его продвижения. Это очень сильно помогает, потому что вот это блокировки Ютуба очень сильно зарезали. Я как человек, который на подобных вебинарах тысяч по 100 просмотров мы получали. Очень всё классно. Спасибо вам за ребят, что у вас
99:44
Speaker A
хватает сил на всё это, что показываете и рассказывайте очень правильно. Пожалуйста. Вот. Тём, ты внёс правки?
99:51
Speaker A
Да, ребят, внёс правки. Дело в том, что я просто не перезагрузил страницу. Мне казалось, что она сама перезагрузится.
99:56
Speaker A
Вот смотрите, переход есть. То есть четвёртый слайд и бац, элементы разъезжаются, и секция превращается в фотографию. Есть маленькие косметические моменты, которые можно поправить, но, в принципе, уже на эфире не будем на это тратить время. Что тут можно было бы
100:12
Speaker A
сделать? Видите, секция растёт, то есть фотография растёт. Этого не должно быть. То есть вот этот момент поправить, а дальше вот эти боковые элементы не слишком далеко уезжают. Нужно, чтобы они побольше разъехались. Ну и в целом всё.
100:26
Speaker A
То есть вот эти две правки внести, и анимация будет сделана идеально. И на этой анимации только поправить центрирование вот этих э текстов внутри своего контейнера, потому что обратите внимание, как они смещаются. Вот видите, они как-то в бок как будто уезжают. Как
100:41
Speaker A
будто бы они по левому краю что ли выровнены. То есть у них очень странная координаты очень странные стоят. Это тоже за один промт можно поправить и всё, анимация будет сделана отлично. А, ну и барабан, чтобы крутился на 45° при
100:57
Speaker A
каждом слайде. И всё. А так, да, я надеюсь, мы с вами вам с Женей передали пайплайн, так сказать, алгоритм действий, как это делать. Вы видите, что сложная анимация оказалась не такой уж и сложной для Клода. Главное правильно объяснить. правильный подход
101:15
Speaker A
применить. Так что я надеюсь, вам это было очень полезно и, а, как сказать, интересно, да, тут важный нюанс. Тут уже сложность не в том, чтобы это сверстать, а в том, чтобы это придумать и чтобы это было комплексно и цельно. И это самое
101:31
Speaker A
сложное. Ребят, обратите внимание, насколько интересно вот эти все анимации друг с другом комплексно связаны, потому что анимаций много, референсов много, но чтобы создать из этого единую историю - это самое сложное. И чтобы ещё бренд был, визуал был, и всё это было единым
101:47
Speaker A
миром. Вот инструментарий поможет вам это реализовать, а вот придумать это у вас никто это не отнимет. И вам нужно это развивать, ребята. Тем более в мире нестей, которые у тебя э тебя слишком расслабляют. Вот. И, соответственно, а я
102:04
Speaker A
вам обещал токены дать. А мы получили 160 а-а 160 лайков. Вот у вас 5 минут на то, чтобы ещё проставить до 200. Вот можете попробовать. И, соответственно, это а несколько вопросов, а может быть не совсем по теме, а но
102:28
Speaker A
сделать вебинар про варианты переноса готовых страниц на хостинг. Тём, может быть, не вебинар сделаем, а видео уже какие-нибудь гайды с такими во-то вещами, да? Потому что это очень скучно, ребят.
102:39
Speaker A
Но там практически визуально нечего показывать. То есть там просто пару промтов и ждать, да?
102:45
Speaker A
Тёма крутой, Жень, как всегда уважение. Согласен, Тёма крутой. Я очень рад, что я выиграл от вебинаров. Вот. И, но очень хотел с вами делиться контентом на таком же уровне. И вот я рад, что Тёма это в хорошем смысле меня, ну, более чем
102:58
Speaker A
достойно заменяет. Матом не ругаешься. Так бы вообще цены бы тебя не было бы. Полностью заменил бы.
103:06
Speaker A
Так, ма, так смешно матом ругаться, только я умею. Вот. А как в дальнейшем носить правки в готовом сайте, если заказчик не захочет внести новый блок или поменять текст, например? Интересный вопрос. Вот если на тильде, то и таптоп, понятно как, но не
103:22
Speaker A
тут. А, ну просто берёте, открываете текущую сборку, готовите макеты под новые секции либо доработки, отдаёте нейронки, говорите: "Вот добавь на сайт вот такую-то секцию". Неронка возьмёт, сверстает и потом опять делаете плой на хостинг.
103:43
Speaker A
Либо на админку посадить. Ну, на админке там чисто редактировать контент можно, а вот добавить прямо новый дизайн, это уже нужно макеты сначала подготовить и сверстать их.
103:56
Speaker A
Так. А о'кей. А ещё про какие видеогайды вам подготовить, ребята? Скажите, пожалуйста. Так, ну всё, пару минут остаётся, потому что я сейчас плакать хочу. Это мне ещё пост в утопию писать. Лёша, да.
104:15
Speaker A
Что я хотел сказать-то? А, Тём, спасибо тебе большое за то, что ты со мной, и я очень тебе признателен, потому что я бы охерел бы эти вебинары вести, а ты так классно всегда готовишь.
104:26
Speaker A
Вот мы с Тёмой темы разные подготавливаем. Вот Тёма является, а, инициатором. Я немножко там подсказываю свежим взглядом, чтобы вам было бы интересно. Поэтому вы, кстати, давайте побольше обратной связи, нам будет легче придумать. Вот с Тёмый очень приятно работать. Мы расширяем штат, а полод
104:43
Speaker A
коду. Это в основном продуктовый дизайнер. Как раз у них это продузайнеров системность вот эта инженерная, близко мне, она вот есть. И соответственно это мы сильно штат расширять не будем. Вообще, наверное, видим. Я между нами, э, вижу свою стратегию. Я устал от обучения. У меня
105:01
Speaker A
цикл жизни 7 лет карьеры, 7 лет студии, 7 лет школы. Сейчас 7 лет свой продукт, скорее всего, будет потом нахер на пенсию. Ебал я в рот до 60 работать. Вот правильно поддерживаю полностью.
105:14
Speaker A
Вот школу мы, наверное, в это в таком формате будем бутьковым и возможно вот такой вот формат, где э по в группе с тобой персональный куратор, наверное, попробуем как основным форматом сделать обучение. Вот. И это я за вашу эффективность. Вот мы пока тестируем,
105:32
Speaker A
может быть, на других курсах код, но пока сейчас у вас есть возможность, а, мою персональную обратную связь получать ещё на вот нашем курсе Ultra VII Rirection. Вот. Так что, ребята, оставляйте заявку, а, для того, чтобы получить консультацию. Ссылка на бронь в
105:46
Speaker A
чате. А ссылка на бронь или на консультацию, чтобы получить больше информации. Вот как на админку посадить.
105:53
Speaker A
Сделаем вебинар. Вот всё, вроде. А теперь давайте, э-э, Итак, сегодня мы получаем, а, 200 токенов, 172 лайка, это очень много.
106:06
Speaker A
Давайте. Хорошо. А, смотрите, ребят, это единственное исключение, когда мы ушли от правил. Аа вы, каждый из вас получит 500 токенов.
106:17
Speaker A
Вот. Но в дальнейшем будем непосредственно полностью соблюдать правила, которые мы с вами зафиксировали. И, соответственно, это, надеюсь, это вас порадует. А с вас лайк под этим видео, а пусть оно двигается больше. Здесь подробная инструкция, как непосредственно получить эти токены.
106:36
Speaker A
Буквально пару минут. Тёмыч, а тебя не видно зелёненьким когда выдели, скажи что-нибудь. А, да, да. Я вот кота своего взял, хотел показать, похвастаться, какой у меня кот красивый. Вот этот Цезарь, только он вырывается, ребят. Долго на него поглядеть не получится.
106:54
Speaker A
Вот это мой копсихолог. Дамне хреново. Я иду его глажу, тискаю. Вот так. Жень, мы мы заканчиваем. Да.
107:02
Speaker A
Да. Давай ты, Тём, это пообщайся с ребятами последнее слово. А что-нибудь скажи. Да, ребят, спасибо большое, что приходите, смотрите. Вебинары у нас такой такие довольно длинненькие, но мы стараемся делать их насыщенными, интересными, чтобы у вас фокус внимания не уходил в сторону. Вот. Аэ, у нас
107:21
Speaker A
куча-куча всякого контента будет классного, связанного с и поэтому не теряйте нас, приходите, будем делиться супер прикольными штуками.
107:33
Speaker A
А, да, спасибо вам, ребят, большое. А, в общем, крепко вас обнимаю. Давайте двигаться дальше. А, всем доброго вечера. Пока-пока.
107:43
Speaker A
Пока. M.
Topics:Claude CodeFigma MCPвёрстка с ИИанимация сайтовпромосайтAWWWARDSмасочная анимацияавтолейаутадаптивная вёрсткадизайн-система

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries and speaker detection. 30 minutes free.

App Store Google Play
Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools

Related Transcripts

View All
Как использовать AI разработчику в 2027 / Полный курс по AI в 6 часах — Transcript5:51:48
Как использовать AI разработчику в 2027 / Полный курс по AI в 6 часах — Transcript
Антон Назаров I Осознанная Меркантильность
50,729 1 Russian
История Мира Disco Elysium — Transcript59:28
История Мира Disco Elysium — Transcript
Likoris
9,640 1 Russian
ТРЭШ МОД НА STALKER. ПРИКЛЮЧЕНИЯ ТОЛИКА. ИГРАЕМ ЗА БОМЖА #1 — Transcript22:59
ТРЭШ МОД НА STALKER. ПРИКЛЮЧЕНИЯ ТОЛИКА. ИГРАЕМ ЗА БОМЖА #1 — Transcript
Мануэль
4,388 1 Russian
Йозеф Менгеле – ДОКТОР СМЕРТЬ из ОСВЕНЦИМА [История в Личностях] — Transcript41:23
Йозеф Менгеле – ДОКТОР СМЕРТЬ из ОСВЕНЦИМА [История в Личностях] — Transcript
GEO
5,430 1 Russian
Искусственный интеллект и авторское право: зарубежная практика #30 — Transcript1:55:46
Искусственный интеллект и авторское право: зарубежная практика #30 — Transcript
Гардиум, юридическая компания
15,774 1 Russian
Как Сохранить СПОКОЙСТВИЕ даже с НЕВЫНОСИМЫМИ ЛЮДЬМИ | Еврейская Мудрость — Transcript30:02
Как Сохранить СПОКОЙСТВИЕ даже с НЕВЫНОСИМЫМИ ЛЮДЬМИ | Еврейская Мудрость — Transcript
Еврейский Код Богатства
3,764 1 Russian
15 лучших книг по психологии и психотерапии! — Transcript25:15
15 лучших книг по психологии и психотерапии! — Transcript
Евгения Стрелецкая
3,179 1 Russian
Как уничтожить тех, кто причинил вам боль | Еврейская мудрость — Transcript23:58
Как уничтожить тех, кто причинил вам боль | Еврейская мудрость — Transcript
Еврейский Код Богатства
2,728 1 Russian
ЯПОНИЯ – Как Подавить Нацию — Transcript30:36
ЯПОНИЯ – Как Подавить Нацию — Transcript
ТОНИ ТУТ
5,127 1 Russian
Секрет создания капитала: как стать богатым, как Уоррен Баффет — Transcript47:08
Секрет создания капитала: как стать богатым, как Уоррен Баффет — Transcript
Артур Миракян
7,232 1 Russian
ВЕДЖИТА БОЛЬШЕ НЕ КЛОУН! ЧТО ИЗМЕНИЛИ в Dragon Ball Super Beerus? — Transcript10:58
ВЕДЖИТА БОЛЬШЕ НЕ КЛОУН! ЧТО ИЗМЕНИЛИ в Dragon Ball Super Beerus? — Transcript
Regular Bloger
1,470 1 Russian
Как я стал Хендименом — Transcript2:07
Как я стал Хендименом — Transcript
Handydima
371 1 Russian