00:00:00Claude Code плох во фронтенд-дизайне, и это ваша вина,
00:00:04но эту проблему можно решить с помощью простого плана.
00:00:07Нужно лишь понимать, к чему вы стремитесь.
00:00:09И в этом видео
00:00:10я разберу семь уровней фронтенд-дизайна
00:00:13в Claude Code и объясню, чего ожидать на каждом из них,
00:00:16каких ловушек стоит избегать
00:00:18и что нужно сделать, чтобы перейти на следующий этап.
00:00:21В итоге
00:00:22у вас будет простой и повторяемый процесс создания
00:00:25фронтенд-дизайна в Claude Code, который не будет
00:00:28очередным безликим и скучным шаблоном.
00:00:30Нашим примером сегодня станет
00:00:33вымышленное SaaS-приложение под названием Argus.
00:00:36Argus — это сервис мониторинга социальных сетей.
00:00:41По сути, место, где создатели контента
00:00:43могут находить трендовые темы в своей нише.
00:00:48И на примере Argus
00:00:49мы пройдем через весь процесс из семи уровней.
00:00:52Итак, начнем с первого уровня.
00:00:53К сожалению, многие застревают именно здесь.
00:00:55Это уровень «вы и один промпт».
00:00:57Вы открываете Claude Code и просто
00:00:59пишете что-то вроде: «Привет,
00:01:01давай создадим лендинг для Argus,
00:01:02моего приложения для соцсетей, которое помогает
00:01:05авторам находить и определять тренды в их нише».
00:01:08Но даже если
00:01:09я сделаю это в режиме планирования (plan mode),
00:01:12результат получится очень посредственным.
00:01:15Почему? Потому что мы не дали никаких указаний по дизайну.
00:01:18Мы полагаемся на то, что Claude Code сам додумает,
00:01:20что именно выглядит хорошо.
00:01:22Часто говорят, что у ИИ нет вкуса. Это правда,
00:01:26но на самом деле у большинства людей его тоже нет.
00:01:28И из-за этого
00:01:31они не могут внятно объяснить задачу Claude Code.
00:01:33Если вы сами не знаете, как должен выглядеть идеал,
00:01:35как Claude Code должен это понять?
00:01:37Поэтому на самом базовом уровне
00:01:39нам нужно освоить несколько навыков.
00:01:41Это написание описательных промптов,
00:01:43выбор фреймворков и понимание того,
00:01:46что они собой представляют,
00:01:46а также формирование базового дизайнерского словаря.
00:01:50Просто используя режим планирования,
00:01:53вы начнете развивать эти навыки, потому что
00:01:55ИИ будет спрашивать: «Какой техстек использовать
00:01:57для этого лендинга?»
00:01:58Next.js, чистый HTML или Astro?
00:02:00Возможно, вы понятия не имеете, что это значит,
00:02:02но если вы просто спросите в чате:
00:02:05«Что это за фреймворки?» —
00:02:07вы начнете нарабатывать определенный уровень
00:02:11компетенции в этой сфере. Нужно просто задавать вопросы.
00:02:13Режим планирования также заставит вас
00:02:14задуматься о дизайнерских решениях и целях сайта,
00:02:17потому что недостаточно просто сказать:
00:02:19«Я хочу лендинг для Argus».
00:02:20В чем смысл этого сайта?
00:02:21Какого результата вы хотите достичь?
00:02:23В данном случае
00:02:25нам нужна регистрация в список ожидания и показ продукта.
00:02:26Затем ИИ прямо спросит нас
00:02:29о стиле. Но заметьте,
00:02:32визуальные стили, которые он предложит,
00:02:35снова будут довольно общими: «темный и технологичный»,
00:02:38«чистый и минималистичный».
00:02:41Этого недостаточно,
00:02:42чтобы получить действительно крутой результат.
00:02:45Именно на этом этапе все и застревают,
00:02:47поэтому всё выглядит так однотипно.
00:02:49Для примера выберем «чистый и минималистичный»,
00:02:52добавим главный экран (hero),
00:02:53функции и призыв к действию (CTA), и отправим запрос.
00:02:55Вы, наверное, думаете: «Если всё так просто,
00:02:58как мне научиться писать подробные промпты
00:03:01и развить дизайнерский кругозор?»
00:03:03Честно говоря,
00:03:04это требует времени и опыта.
00:03:06Чем больше вы видите
00:03:09качественных примеров креативного дизайна,
00:03:12тем лучше вы начинаете в нем разбираться.
00:03:13Об этом мы подробнее поговорим на следующих уровнях.
00:03:16Давайте посмотрим, что получилось... Господи, ну и «ИИ-шлак».
00:03:20Это ужасно, максимально банально.
00:03:24Тут даже есть эти фиолетовые градиенты,
00:03:27которые ИИ почему-то обожает. Что пошло не так?
00:03:30Даже с режимом планирования мы получили это.
00:03:32Ну, правда в том, что,
00:03:35как вы уже знаете, Claude Code и ИИ в целом
00:03:37не особо сильны во фронтенд-дизайне.
00:03:38И если давать им расплывчатые, скучные промпты,
00:03:42на выходе будет именно это.
00:03:44И всё же именно такой дизайн встречается повсеместно,
00:03:46разве что с мелкими отличиями. Что же делать?
00:03:48Как выбраться с первого уровня и покинуть этот «дизайнерский ад»?
00:03:51Но прежде чем продолжить,
00:03:52пару слов от спонсора — то есть от меня.
00:03:55Недавно я выпустил мастер-класс по Claude Code.
00:03:58Это лучшее место,
00:03:59чтобы пройти путь от нуля до ИИ-разработчика,
00:04:02особенно если у вас нет технического образования.
00:04:04Я обновляю курс каждую неделю. С момента выхода
00:04:07мы добавили более часа нового контента
00:04:10и обновили более 20 модулей. Если интересно,
00:04:13ищите подробности в Chase AI.
00:04:14Ссылка есть в закрепленном комментарии.
00:04:17А если вы совсем новичок,
00:04:18и это кажется вам слишком сложным,
00:04:19загляните в бесплатное сообщество Chase AI.
00:04:22Ссылка в описании.
00:04:24Чтобы перейти на второй уровень,
00:04:25нам нужно «обучить» Claude дизайну.
00:04:28И здесь мы начинаем подключать специальные навыки.
00:04:30Мы используем внешние специализированные промпты,
00:04:33которые учат Claude Code проектировать лучше.
00:04:36Такие навыки, как «Front-end Design»
00:04:39и «UI UX Pro Max», сделают за нас всю основную работу.
00:04:41Они внедряют в Claude Code инструкции:
00:04:42«Слушай, если ты создаешь сайт для этой индустрии,
00:04:45вот на что стоит обратить внимание».
00:04:49Или: «Вот список приемов типичного
00:04:51плохого ИИ-дизайна, избегай их».
00:04:55По сути, это прокачивает наши запросы,
00:04:56даже если изначально они были слабоваты.
00:04:58Вот как выглядит навык «UI UX Pro Max».
00:05:00Это открытый репозиторий на GitHub с 52 000 звезд.
00:05:03Мы можем зайти в папку навыков
00:05:07и посмотреть, как всё устроено. По сути,
00:05:09это просто текстовые промпты —
00:05:12набор контрольных списков для Claude Code,
00:05:15которые помогают ему уйти от шаблонов.
00:05:17Чтобы мы не застряли на примитивном уровне.
00:05:19Установить этот и другие подобные навыки очень просто.
00:05:21На GitHub есть инструкция.
00:05:23Мы просто вводим команду «/plugin marketplace»,
00:05:26находим нужный навык и устанавливаем его.
00:05:27Запускаем это прямо в терминале Claude Code.
00:05:30Если это кажется сложным,
00:05:32можно просто скопировать URL репозитория,
00:05:35вставить его в Claude Code и сказать:
00:05:37«Я хочу установить этот навык».
00:05:40Давайте проверим навык в деле.
00:05:41Я загрузил его через косую черту (/).
00:05:42Можно также просто написать: «Эй, Claude Code,
00:05:44используй навык UI UX Pro Max».
00:05:46И добавим: «Переделай лендинг,
00:05:47используя этот навык. Задавай любые вопросы».
00:05:50Как и в обычном режиме планирования,
00:05:51он спросит про стиль. В этот раз
00:05:54мы согласимся с его рекомендациями.
00:05:55Акцент на типографике? Отлично.
00:05:57Цвет призыва к действию? Пусть будет оранжевый.
00:05:59Нам нужно любой ценой уйти от фиолетового.
00:06:03Claude Code закончил редизайн, давайте глянем.
00:06:05Вот лендинг с использованием навыка UI UX Pro Max.
00:06:07Сразу видно — стало намного лучше.
00:06:09Появился нормальный фон с этими квадратиками.
00:06:12У кнопок теперь легкое свечение,
00:06:15и они меняют цвет при наведении.
00:06:18Есть графика, и цвета меняются от секции к секции.
00:06:21Это на голову выше прежнего, хотя ИИ
00:06:22всё еще тянет к фиолетовому. Тем не менее,
00:06:25сразу понятно, что это сделал ИИ.
00:06:27Это не тот дизайн, который заставляет сказать «вау».
00:06:30Это всё еще похоже на «ИИ-шаблон».
00:06:33Хорошо проработанный, но всё же шаблон.
00:06:36По сути, это тот же сайт,
00:06:38просто в более симпатичной обертке.
00:06:40Как нам прыгнуть выше?
00:06:43Как перейти со второго уровня на третий?
00:06:46Навыки — это круто.
00:06:48Они добавляют понимание теории цвета, типографики,
00:06:49отступов и общей композиции, но результат всё еще
00:06:51кажется шаблонным.
00:06:52И тут на первый план выходит важнейший навык:
00:06:55как оценивать результат взглядом дизайнера
00:06:56и превращать эту критику в промпты.
00:06:59Проблема всё еще в промптах, но ловушка в том,
00:07:02что у нашей способности описывать есть предел,
00:07:04особенно в самом начале. Нам просто не хватает
00:07:07знаний, чтобы точно сформулировать проблему.
00:07:08Пытаться объяснить визуальную среду
00:07:11и визуальную задачу словами — это всегда потеря смыслов.
00:07:13Что же тогда делать?
00:07:16Нам нужно начать показывать это Claude Code.
00:07:18Нам нужно показывать ему реальные примеры того,
00:07:21к чему мы стремимся.
00:07:23Третий уровень открывается тогда,
00:07:27когда мы уходим от чисто текстовых промптов
00:07:27и переходим к визуальному языку.
00:07:31Начинаем не просто рассказывать, а показывать.
00:07:34На уровне 3 вы становитесь визуальным директором.
00:07:36Здесь мы даем Claude Code конкретные
00:07:39примеры того, что хотим получить.
00:07:41Так мы перестаем полагаться только на текст и навыки.
00:07:44Теперь мы используем текст + навыки + визуальные примеры.
00:07:46Это дает мощный прорыв по двум причинам. Во-первых,
00:07:49Claude Code гораздо лучше скопирует стиль изображения,
00:07:52Мы начинаем показывать, а не просто рассказывать.
00:07:54И вот на третьем уровне вы становитесь визуальным директором.
00:07:56Здесь мы начинаем давать Клоду код,
00:07:58конкретные примеры того, к чему мы стремимся, верно?
00:08:01Так мы перестаем полагаться только на текст и навыки.
00:08:03Теперь мы будем использовать текст плюс навыки плюс визуальные примеры.
00:08:07Это огромный прорыв по двум причинам. Во-первых,
00:08:09Claude Code, очевидно, сможет лучше имитировать
00:08:12изображение, которое вы ему покажете, чем ваше описание этого изображения.
00:08:15А во-вторых, поскольку мы используем изображения,
00:08:17это подразумевает, что мы смотрим на другие сайты и
00:08:20теперь можем видеть, как выглядит качественный результат,
00:08:23что делают настоящие профи в этой области и как мы можем им подражать.
00:08:25Существует множество мест,
00:08:26где можно найти вдохновение для фронтенд-дизайна,
00:08:28и я перечислим четыре из них.
00:08:31Первое — это Awwwards. Тот, что с тремя «w».
00:08:34Это место, куда люди присылают свои фронтенд-работы,
00:08:37и их оценивают. Так что там очень творческий уклон.
00:08:40Второе — это godly.website.
00:08:42Это сайт с бесконечной прокруткой, где можно увидеть
00:08:45множество разных дизайнов. Номер три — Pinterest,
00:08:48в котором, как ни странно, есть довольно крутые вещи.
00:08:49Здесь я просто ищу целевые страницы для SaaS.
00:08:52Когда я нахожу подходящую,
00:08:53я также могу увидеть кучу похожих вариантов.
00:08:56И, наконец, у нас есть Dribbble. Тот, что с тремя «b».
00:08:58Тут я тоже ввел «SaaS landing page». И снова
00:09:01я вижу много разных штук, которые выглядят довольно круто.
00:09:04Допустим, я остановился на сайте вроде Open Hands, который мне нравится.
00:09:07Мне нравится, ну, знаете,
00:09:09эта штука с прокруткой вверху с проверенными
00:09:11рабочими процессами. Мне нравится необычная цветовая схема.
00:09:14Это сразу что-то непривычное.
00:09:15У них есть социальные доказательства и вообще,
00:09:19мне нравится стиль, понимаете? К примеру. Итак,
00:09:22я сделаю нечто очень и очень простое.
00:09:23Я просто сделаю кучу скриншотов этой страницы,
00:09:26закину их в Claude Code и скажу: «Эй, вот визуальный стиль,
00:09:29к которому я хочу прийти». Прямо в Claude Code я написал:
00:09:31«На самом деле, я хочу, чтобы наш сайт соответствовал стилю Open Hands».
00:09:34Я дал ему URL-адрес. И затем добавил:
00:09:36«Вот несколько скриншотов для справки».
00:09:38И я загрузил туда все скриншоты.
00:09:40И теперь у него есть реальные визуальные ориентиры.
00:09:43Мне было бы трудно, по крайней мере, описать
00:09:45словами то, что я здесь искал,
00:09:47даже с помощью навыка «UI/UX Pro».
00:09:51И именно через этот процесс
00:09:52мы начнем отбирать действительно хорошие визуальные примеры.
00:09:55Их существует огромное количество.
00:09:57И когда вы начнете видеть их все чаще и чаще,
00:10:00то подобные вещи станут вызывать полное отторжение. Думаешь:
00:10:03«Зачем мне делать так, когда доступно столько всего крутого?»
00:10:05И когда вы изучите больше таких примеров,
00:10:07даже если мы просто даем Claude Code скриншоты,
00:10:09это поможет вам точнее доносить свои мысли,
00:10:12потому что...
00:10:12потому что вы будете видеть одни и те же элементы снова и снова,
00:10:14просматривая все эти референсы.
00:10:16А еще вам стоит начать
00:10:18комбинировать идеи с нескольких сайтов, верно?
00:10:21Хотя здесь мы использовали Open Hands,
00:10:23наверняка я нашел что-то крутое в Pinterest или
00:10:26на Godly Websites, и думаю: «Возьму-ка я это отсюда,
00:10:28а вот это — оттуда», понимаете?
00:10:29Я хочу взять лучшее от всех этих сайтов и
00:10:32объединить это. Однако
00:10:33на этом уровне очень легко попасть в одну ловушку.
00:10:36Я бы сказал, что большинство людей останавливаются здесь, на третьем уровне,
00:10:39когда они понимают: «Да, мне нужно использовать навыки».
00:10:41Claude Code вначале работает не очень,
00:10:42но с навыками и скриншотами можно продвинуться довольно далеко.
00:10:45Правда в том, что здесь есть потолок, потому что
00:10:49мы застрянем на «разрыве в атмосфере».
00:10:50Вы увидите это по тому, что он выдает.
00:10:52Это будет как бы близко, понимаете?
00:10:55Но это не будет идеально, потому что опять же,
00:10:57сохраняется эффект потери качества,
00:11:01когда я даю указания Claude Code,
00:11:03который делает все в коде, показывая ему картинку и
00:11:05говоря: «Эй, переведи визуал в код».
00:11:08И в этом проблема многих фронтенд-дизайнов.
00:11:10Это визуальная среда, но
00:11:12я пытаюсь описать ее текстом, и в то же время,
00:11:15если я закидываю его скриншотами,
00:11:17все равно остается этот этап перевода.
00:11:18Как сделать это правильно? Ну,
00:11:20честно говоря, есть предел, и мы можем видеть этот
00:11:22предел в действии прямо здесь,
00:11:24потому что вот что он создал на основе всех этих скриншотов.
00:11:28Вот оригинал, а вот наш вариант.
00:11:31И как я уже говорил раньше,
00:11:32именно здесь люди застревают.
00:11:33Потому что если мы прокрутим это, ну, знаете,
00:11:36если прищуриться,
00:11:37то можно примерно понять, к чему он стремился.
00:11:39Может быть, он продвинулся процентов на 50.
00:11:41И есть вещи, которые нам нравятся,
00:11:43но люди обычно делают так: они идут сюда,
00:11:46делают еще один скриншот главного экрана. Ладно.
00:11:49«Давай поработаем над этой частью» — снова и снова,
00:11:51куча промптов, так, вернулись, скриншот, вернулись.
00:11:53Это тянется вечно, и вы никогда не попадаете в точку на 100%.
00:11:56Верно?
00:11:57Из-за этой проблемы перевода со скриншотов
00:11:59в код.
00:11:59И чтобы выйти с третьего уровня и перейти на
00:12:02четвертый уровень,
00:12:03нам нужно не только смотреть на поверхность сайтов,
00:12:06которые нам нравятся, и черпать в них вдохновение.
00:12:08Нам нужно научиться клонировать их должным образом и
00:12:11получать исходный код, который лежит в основе чего-то вроде
00:12:15Open Hands. И это выходит за рамки просто: «Ой,
00:12:18мы просто хотим это клонировать и просто копируем их».
00:12:20Нет, сам процесс клонирования и выяснения того,
00:12:23как на самом деле копируются эти вещи, дает нам огромные преимущества,
00:12:26и дело не только в шаблонах, что само по себе здорово,
00:12:30но вы столкнетесь с реальным кодом,
00:12:34который находится под капотом, и так перейдете
00:12:36с третьего уровня на четвертый.
00:12:38Теперь мы должны пойти дальше простого поверхностного взгляда
00:12:41на эти сайты для вдохновения через скриншоты.
00:12:44Теперь нам нужно научиться заглядывать вглубь,
00:12:48заглядывать за кулисы и видеть, как эти сайты построены
00:12:51с точки зрения их реальных программных компонентов,
00:12:54их HTML, CSS и JavaScript.
00:12:56Итак, четвертый уровень — это «Клонировщик».
00:12:59Здесь мы учимся, воруя у профессионалов.
00:13:02Позвольте мне пояснить.
00:13:04Этот уровень не про то, что
00:13:05«мы сейчас пойдем плагиатить сайты, копировать и называть
00:13:08своими». Речь не об этом.
00:13:10Речь о том, что мы собираемся находить сайты, которые нам нравятся,
00:13:13деконструировать их, а затем использовать как
00:13:16шаблон, на котором мы строим свое. И в процессе этого
00:13:20мы многому научимся, как и в любом навыке в любой сфере.
00:13:24Как в чем-то стать лучше? Вы смотрите, что делают профи.
00:13:27Пытаетесь их скопировать.
00:13:28Вы многому учитесь, пытаясь им подражать.
00:13:30И со временем вы привносите что-то свое и создаете
00:13:33нечто оригинальное. Вот в чем суть этого уровня.
00:13:35И чтобы извлечь из этого максимум,
00:13:37нам нужно начать понимать, что вообще происходит во
00:13:39фронтенд-дизайне. Если упростить, фронтенд-дизайн
00:13:42состоит из трех частей. У нас есть HTML.
00:13:45Думайте об этом как о костях сайта, верно?
00:13:47Как он на самом деле структурирован. У нас есть CSS.
00:13:50Это стилизация сайта, верно?
00:13:52Думайте об этом как об одежде сайта.
00:13:55И еще у нас есть JavaScript.
00:13:56Представьте JavaScript как мышцы, хорошо?
00:13:59Это то, что позволяет чему-то происходить, когда вы нажимаете
00:14:01кнопку или делаете что-то еще.
00:14:02И именно благодаря изучению этих трех составляющих сайта
00:14:05мы, во-первых, сможем лучше клонировать или копировать сайт,
00:14:08а во-вторых, поймем, как они работают, верно?
00:14:10Вся эта идея деконструкции сайта и изучения того,
00:14:13как они это делают. Так как же нам это сделать?
00:14:15Как мы можем деконструировать, к примеру, Open Hands?
00:14:17Очевидно, скриншоты не работают, потому что это не одно и то же.
00:14:21Ну, это относительно просто. Чтобы получить HTML,
00:14:25мы просто заходим на сайт и нажимаем Ctrl + U.
00:14:28То, что вы видите здесь, — это весь HTML-код.
00:14:33Итак, что мы сделаем: мы скопируем это,
00:14:37да? Мы скопируем всё это целиком.
00:14:39А затем вставим это в Claude Code.
00:14:42Обычно это довольно большой объем. В данном случае
00:14:44здесь 1152 строки HTML. И в самом,
00:14:48самом низу
00:14:50вы можете увидеть ссылки на CSS-файлы,
00:14:54а также на JavaScript.
00:14:56Вот это я и выделяю здесь внизу.
00:14:58Такое будет в конце практически всех
00:15:01этих HTML-файлов, я сейчас уменьшу масштаб.
00:15:04Видно плохо, но внизу, да,
00:15:06у нас есть JavaScript, а также CSS.
00:15:09Это реальные файлы, которые тоже содержат кучу кода.
00:15:13Поэтому мы сделаем следующее: после того как дадим ему HTML,
00:15:17мы также скажем Claude Code: «Эй,
00:15:19посмотри еще на JavaScript и на CSS,»
00:15:22чтобы по-настоящему понять, что происходит. Так я и написал:
00:15:24«Взгляни также на CSS и JS файлы». На этом можно остановиться.
00:15:29И он сам воспользуется инструментом Web Fetch, чтобы изучить их.
00:15:31Проблема в том, как работает Web Fetch: Claude Code запускает его,
00:15:35но вызывает для этого более компактную модель, понимаете?
00:15:39То есть сам этот экземпляр Claude Code не заходит на страницу.
00:15:42Он использует модель поменьше. Она изучает всё, делает резюме и
00:15:46передает его обратно в Claude Code.
00:15:47Проблема в том, что CSS и JS файлы довольно большие, и в них
00:15:51скрыты те самые специфические детали того, как собран этот сайт.
00:15:54А нам нужно всё, понимаете? Мне не нужно краткое содержание этих файлов.
00:15:58Поэтому я создал навык, который позволяет Claude Code делать это
00:16:03лучше. По сути, это улучшенный промпт.
00:16:04Он забирает столько CSS и JavaScript, сколько ему нужно.
00:16:07Так что я просто говорю: «Используй навык Site Tear Down».
00:16:12Я выложу этот навык «Site Tear Down» в бесплатном сообществе School,
00:16:16ссылка на него есть в описании.
00:16:18Вам просто нужно его загрузить, и вы тоже сможете это делать.
00:16:21И в итоге, что я сказал? Я сказал: «Вот HTML сайта Open Hands».
00:16:25Взгляни также на CSS и JS файлы.
00:16:28Используй навык «site tear down» и эту информацию, чтобы лучше клонировать оригинальный сайт OpenHands.
00:16:31Как же это нас обучит? Ну, во-первых,
00:16:36вы, вероятно, понятия не имеете, как мне удалось сделать такой фон, верно?
00:16:39Так ведь?
00:16:40Вы, скорее всего, не до конца понимаете или даже не знаете, какую лексику нужно использовать,
00:16:43чтобы ИИ лучше имитировал оригинал, понимаете?
00:16:46Когда мы просто давали скриншоты, получалось что-то вроде:
00:16:50«Ну, вроде как похоже»,
00:16:52но когда Claude Code видит, что происходит «под капотом»,
00:16:56мы можем доверить ему обучение, потому что теперь Claude Code
00:17:01действительно понимает происходящее на уровне кода.
00:17:04Теперь мы можем вести с ним интеллектуальный диалог и спрашивать: «Слушай,
00:17:07как они это сделали? Что это значит? Что такое GSAP?»
00:17:11Типа, как они сделали анимацию прокрутки? Как реализовали это?
00:17:13Как сделали то?
00:17:14И со временем, когда вы клонируете всё больше сайтов и используете их
00:17:18как шаблоны для собственных проектов — ведь, опять же,
00:17:19вы всегда будете привносить свою индивидуальность.
00:17:21Вы просто используете это как фундамент.
00:17:23Вы станете лучше разбираться во фронтенд-дизайне,
00:17:26как и в любом другом деле.
00:17:29Это процесс, при котором вы не просто знакомитесь с профессиональными техниками,
00:17:31но и начинаете внедрять их в свои сборки.
00:17:34Но чтобы выйти на новые уровни, как я уже говорил, нельзя быть просто
00:17:38«обезьянкой за клавиатурой» с Claude Code,
00:17:41как и во всём остальном. Нельзя просто жать «принять, принять, принять»,
00:17:43«далее, далее», потому что как тогда вы будете выделяться?
00:17:46Так какие навыки нам нужно освоить в этом процессе?
00:17:48Нам нужно научиться читать и понимать исходный код.
00:17:51Claude Code помогает нам в этом.
00:17:52Нам нужно определять, какие техники создают те или иные эффекты,
00:17:57потому что в какой-то момент мы должны научиться смотреть на сайты
00:18:02и сразу узнавать: «О, вот как это сделано».
00:18:04И наконец, нам нужно научиться адаптировать эти шаблоны для своих дизайнов.
00:18:09Мы не занимаемся плагиатом — мы черпаем вдохновение.
00:18:12И если вы не овладеете этими навыками,
00:18:13вы попадете в ловушку «потолка клонирования»:
00:18:16вы будете просто копировать, но не сможете создавать.
00:18:18Вы не захотите понимать суть «почему».
00:18:20И тогда вы упретесь в жесткий лимит.
00:18:22В конечном итоге я мог бы заменить вас любым человеком с улицы,
00:18:25просто сказав ему выполнить шаги один, два и три, верно?
00:18:27Это не приведет вас туда, куда вы стремитесь.
00:18:29Давайте посмотрим, что Claude Code смог собрать, когда мы дали ему
00:18:32весь этот дополнительный контекст кода. Вот обновленная версия.
00:18:35Этот вариант, очевидно, гораздо ближе к оригиналу,
00:18:39особенно теперь, когда фон выглядит как надо.
00:18:41Если мы сравним их сейчас, то это пока не стопроцентная копия.
00:18:45Это был, по сути, первый проход, но он намного лучше,
00:18:48гораздо ближе к тому, что нам нужно.
00:18:50И если мы захотим продолжить итерации и еще сильнее приблизить результат
00:18:54к оригиналу — это теперь гораздо проще, верно?
00:18:57Потому что теперь ИИ смотрит в ту же «книгу рецептов»,
00:19:01что и создатели OpenHands, и мы можем сказать: «Так, давай поменяем это».
00:19:04«Давай поменяем то. Я вижу, как они это сделали. Давай повторим».
00:19:07И именно здесь начинается процесс обучения. Например,
00:19:10как работает этот крутой фон?
00:19:12И как нам сделать так же, как у OpenHands, чтобы при прокрутке мыши
00:19:17часть элементов, ну, как бы исчезала?
00:19:19Вам просто нужно спросить Claude Code: «Как работает фон?»
00:19:22«Как нам повторить этот эффект?» И каждый раз, когда вы так делаете,
00:19:25вы добавляете новый инструмент в свой арсенал.
00:19:27Claude Code объясняет, как работает эффект, и, что еще лучше, внедряет его
00:19:32на наш собственный фон. Довольно круто.
00:19:35Но по очевидным причинам мы не хотим застревать на четвертом уровне.
00:19:38Мы не хотим быть просто «клонерами», верно? Мы хотим добавить свое.
00:19:42Мы хотим, чтобы это стало нашим проектом. Как это сделать?
00:19:45Как перейти на пятый уровень и привнести что-то свое? Что ж,
00:19:48именно здесь мы начинаем развлекаться с компонентами и дизайном
00:19:53собственных ассетов. Мы привносим свое.
00:19:56Мы больше не копируем в точности то, что делает другой сайт.
00:19:57Один из самых простых способов начать — это поиск качественных компонентов
00:20:02на сайтах вроде 21st.dev. Во многом
00:20:04это похоже на поиск вдохновения для сайтов целиком, но здесь
00:20:08мы берем отдельные части на микро-уровне, на уровне компонентов.
00:20:11На ресурсе вроде 21st.dev, к примеру,
00:20:14я могу посмотреть разделы вроде «Кнопки» в меню слева.
00:20:17И там я увижу целую кучу самых разных
00:20:21дизайнов кнопок. И если мне приглянется какой-то вариант, допустим,
00:20:26вот такой... Я могу просто скопировать промпт,
00:20:29вставить его в Claude Code и сказать: «Слушай, давай интегрируем этот дизайн».
00:20:33И это применимо абсолютно к любой детали, понимаете?
00:20:36Там есть карусели, области прокрутки, карты,
00:20:40навигационные меню, изображения — всё что угодно.
00:20:42И это не ограничивается только 21st.dev. Есть и другие сайты, например CodePen.
00:20:46На CodePen много крутых дизайнов, которые мы тоже можем заимствовать.
00:20:50Monet — еще один классный ресурс. На самом деле,
00:20:52существует масса мест, где можно найти подобные компоненты
00:20:57и начать внедрять их на свою страницу.
00:20:59Но что если нам нужно что-то более индивидуальное?
00:21:01Я не хочу просто собирать сайт из случайных чужих компонентов.
00:21:04Как сделать его по-настоящему оригинальным? Есть два пути.
00:21:08Первый: вы всё равно берете компоненты с 21st.dev,
00:21:11но просите Claude Code изменить их. Это же просто код.
00:21:14Промпт дает нам исходный код, а дальше мы его правим
00:21:18как душе угодно. Или же мы можем буквально создать всё с нуля.
00:21:21Если зайти на Pinterest, там можно найти потрясающие лендинги,
00:21:25которые выглядят почти как арт-объекты. Ничто не мешает
00:21:29нам использовать ИИ для создания подобного изображения,
00:21:34которое станет главной «фишкой» нашей страницы.
00:21:36И это не обязательно должны быть статичные картинки.
00:21:39Мы вполне можем добавить видео на фон,
00:21:42привязать его к определенной анимации прокрутки, чтобы,
00:21:45взяв идеи из четвертого шага, сделать их по-своему.
00:21:49Давайте так и поступим. Быстро переделаем нашу страницу,
00:21:53отойдем от клона OpenHands и создадим какой-нибудь
00:21:57крутой ИИ-арт, который будет первым, что видят посетители сайта.
00:22:01Вы уже знаете, как это делается:
00:22:02сначала ищем вдохновение. Полистав Pinterest
00:22:06некоторое время,
00:22:07я заметил много сайтов, где используется некое
00:22:10мультяшное или стилизованное изображение в фоне первого экрана.
00:22:14А текст при этом располагается слева.
00:22:16И вот тут можно начать подключать визуальный сторителлинг.
00:22:19Какое приложение мы создаем? Наше приложение — Argus, верно?
00:22:22Нам нужно придумать слоган, который в идеале
00:22:27будет перекликаться с самим изображением. Чего мы хотим от Argus?
00:22:30Аргус — мифологический персонаж с десятью тысячами глаз.
00:22:33Мы говорим о социальных сетях.
00:22:34Мы говорим о поиске информации раньше других.
00:22:37Так что я придумал слоган: «Узнай, что будет завтра». Просто.
00:22:41Лаконично. И знаете, кто помог мне его придумать?
00:22:44Конечно, это был Claude Code. И тогда я сказал Claude Code:
00:22:47«Слушай, тут такое дело...»
00:22:49«...нам нужен визуальный сторителлинг».
00:22:51«Какие идеи для образов у нас есть?»
00:22:54Потому что на этом этапе мы уже делаем свое, понимаете?
00:22:57Я могу взять общую концепцию того, что вы видите здесь,” —
00:23:01в плане композиции, но само изображение должно быть моим. Опять же,
00:23:04визуальный ряд, который связан с тем, что ваше приложение
00:23:07на самом деле делает, даст отличный результат.
00:23:10В итоге я создал изображение на основе идей,
00:23:15которые мне подкинул Claude Code. Я использовал Midjourney —
00:23:18вы можете использовать любой генератор изображений,
00:23:21будь то Nano Banana Pro или Seed Dream, неважно.
00:23:24Мне нравится Midjourney для создания таких концепт-артов,
00:23:28особенно седьмая версия —
00:23:31восьмую я еще не успел толком протестировать.
00:23:33Ей можно дать довольно странный промпт. Например, я написал:
00:23:38«Мне нужно фоновое изображение для главной страницы сайта Argus».
00:23:41«Слоган: Узнай, что будет завтра».
00:23:43И даже по такому слабому и расплывчатому промпту
00:23:47я получил кучу крутых вариантов на выбор.
00:23:50Увидев этот, я подумал: «Выглядит мощно, да?». И я уже
00:23:54прямо сейчас могу представить,
00:23:55как мы разместим информацию вот здесь слева,
00:23:59может, что-то добавим сверху. Я могу с этим играть. Это,
00:24:02по-моему, очень круто. Возможно, позже мы даже добавим анимацию.
00:24:06Когда картинка готова, всё становится просто.
00:24:10Я скачиваю изображение, даю его Claude Code и говорю: «Слушай,
00:24:13я хочу переделать первый экран, используя эту картинку как фон».
00:24:17В Claude Code я так и написал:
00:24:19«Я хочу полностью изменить фронтенд».
00:24:21«Используй следующее изображение в качестве фона для обложки».
00:24:24«Давай разместим информацию о приложении Argus слева»,
00:24:27«оставим свободное место справа, чтобы было видно картинку, и сделаем слоган:
00:24:30Узнай, что будет завтра». Посмотрим, что получится. Опять же,
00:24:34на этом уровне вам нужно дать волю своим творческим способностям,
00:24:37потому что до этого момента
00:24:39вы видели много разных вариантов дизайна фронтенда,
00:24:43которые отличаются от скучных шаблонов для типичных сервисов.
00:24:46Какой-то крутой арт или что-то еще — повторюсь,
00:24:48визуальный сторителлинг, к которому мы стремимся, поднимет ваш уровень
00:24:52на порядок.
00:24:52Вот как выглядит наш обновленный первый экран с этим новым
00:24:56фоновым изображением. Я сделал его чуть поменьше,
00:24:58чтобы вы могли видеть его целиком. Claude Code к тому же
00:25:02обновил все цвета. И снова: это был только первый проход.
00:25:06Мы всего лишь добавили фон, но уже сразу
00:25:09чувствуется, что сайт выглядит более оригинальным,
00:25:12творческим и выделяющимся, верно?
00:25:15И теперь мы начинаем добавлять всё больше своих фишек.
00:25:19Для начала можно просто улучшить качество этой картинки.
00:25:21Это можно сделать прямо в Midjourney, потому что, как мы видим,
00:25:24изображение кажется немного растянутым и не таким детальным, как хотелось бы.
00:25:28Либо мы можем добавить движение.
00:25:30Фон не обязательно должен быть статичным.
00:25:32Мы можем поставить туда видео.
00:25:34Превратить картинку в видео очень легко.
00:25:36Просто идете на сервис вроде Kling 3.0 или Veo 3.1 —
00:25:40в любое место, где можно задать начальный кадр.
00:25:41В идеале стоит задать и конечный кадр, как вы видите здесь слева,
00:25:45чтобы не было слишком резких движений. Нужно помнить,
00:25:49что в идеале это должен быть бесшовный цикл.
00:25:52Иногда бывает трудно заставить ИИ-видео зацикливаться идеально.
00:25:55Поэтому второй вариант — создать достаточно длинное видео, секунд на 15.
00:25:59И движение должно быть едва заметным. Вроде того, что вы видите здесь, да?
00:26:03Если бы у меня был такой фон, даже с неподвижными птицами
00:26:07(что вполне нормально), это создало бы некий эффект параллакса.
00:26:11Поскольку это главная страница и видео длится 15 секунд,
00:26:14шанс, что кто-то будет сидеть и 30 секунд смотреть на него,
00:26:18крайне мал. Так что даже если в конце будет небольшая склейка,
00:26:22ничего страшного. Но в данном случае,
00:26:24так как движение было очень тонким,
00:26:25вы почти не заметите перехода с 15-й секунды на первую.
00:26:29Так что будем использовать этот вариант. Вы, наверное, спросите:
00:26:31«А как же производительность?». Что касается компьютеров,
00:26:35то с видео всё будет в порядке, но мы скажем Claude Code:
00:26:38«Слушай, если заходит мобильный пользователь...»
00:26:42видео загружаться не будет. Вместо него просто подгрузится статичное изображение.
00:26:45Поэтому я скормил ему новое апскейл-изображение и сказал использовать его для мобилок.
00:26:50Затем я дал ему ссылку на видео и попросил
00:26:52заменить им фон в главном блоке (hero).
00:26:54И вот как теперь выглядит страница с этим движением,
00:26:58здорово, правда? И что важно — оно ненавязчивое.
00:27:02Не стоит делать слишком резкую анимацию, превращая фон в полноценную видеоигру,
00:27:06если только вы точно не знаете, что делаете.
00:27:07Но вот такое едва заметное движение облаков
00:27:11и колыхание воды внизу... Опять же, это придает
00:27:14вашему сайту определенный характер.
00:27:15И именно создание такого уникального характера — это суть пятого уровня.
00:27:19Как я уже говорил, на первых четырех уровнях мы учили основы и смотрели на профи.
00:27:22А здесь, на пятом, мы начинаем реальную кастомизацию.
00:27:25И точно так же, как мы проработали главный блок,
00:27:28нужно подходить и к любому другому разделу.
00:27:32Например, эти карточки — они ужасны. И фон здесь скучноват.
00:27:36Он везде абсолютно одинаковый. Что я сделаю?
00:27:38Я пойду искать вдохновение. Загляну на 21st thought dev или на Awwwards.
00:27:42Закину идеи в Claude Code и буду итерировать, итерировать,
00:27:45итерировать, пока результат мне не понравится. На этом этапе,
00:27:48внося все эти визуальные правки, вы можете почувствовать себя
00:27:51немного скованными внутри Claude Code. Опять же,
00:27:54всегда есть некий дискомфорт, когда сидишь в терминале
00:27:58и работаешь с текстом, пытаясь при этом создать что-то визуальное. Поэтому в шестом шаге
00:28:03мы начнем понемногу выходить за рамки Claude Code.
00:28:06Именно на шестом уровне мы подключаем внешние инструменты,
00:28:11которые позволяют более детально прорабатывать визуал.
00:28:14В нашем распоряжении полно отличных сервисов.
00:28:17У нас есть paper.design, Stitch, Figma, верно?
00:28:21Есть pencil.dev.
00:28:22Теперь у вас достаточно навыков, чтобы использовать эти сторонние
00:28:26программы для тонкой настройки. И один из крутых вариантов,
00:28:29заточенный под ИИ и очень простой в освоении — это Stitch. К тому же он бесплатный.
00:28:33Это продукт от Google, который дает нам визуальный холст для работы над фронтендом.
00:28:37Так что я сделал: мы ведь не начинаем с нуля.
00:28:38Мы делаем редизайн. Я скормил ему скриншоты нашего сайта —
00:28:42и главного экрана, и всего остального.
00:28:45Я сказал: «Вот как сейчас выглядит страница. Мне нравится главный блок,
00:28:47нравится эстетика и цветовая гамма».
00:28:51«Но я хочу обновить всю нижнюю половину сайта».
00:28:53Она кажется слишком плоской, понимаете?
00:28:57Se siente muy plano, ¿verdad?
00:28:59Покажи, что ты можешь придумать».
00:29:03Давайте посмотрим, какой вариант редизайна он нам выдал.
00:29:05И вот результат.
00:29:08Прелесть Stitch в том, что я могу делать редизайн самого редизайна.
00:29:10Если я выберу элемент,
00:29:14внизу появится поле, где можно писать промпты, как в обычном чат-боте.
00:29:15Также можно нажать правую кнопку мыши, выбрать «варианты» и снова
00:29:18поменять макет, цветовую схему, изображения и так далее.
00:29:22Поскольку это был редизайн в Stitch, а не разработка с нуля,
00:29:24он просто создал изображение.
00:29:28Но я могу спокойно кликнуть правой кнопкой, скопировать его
00:29:30и принести обратно в Claude Code со словами: «Эй,
00:29:34что думаешь об этом?» Видите,
00:29:37такие визуальные редакторы просто великолепны для процесса генерации идей.
00:29:38Их много, например, тот же Pencil.dev.
00:29:43Вы будете часто встречать подобные инструменты.
00:29:46Это отлично работает, если вы используете Cursor или VS Code,
00:29:47потому что вы можете открыть холст и редактировать всё в реальном времени.
00:29:50Инструментов в этой нише масса, и новые появляются буквально
00:29:54каждую неделю. В общем, я закинул ту картинку обратно в Claude Code
00:29:58и спросил: «Ну, как тебе это?»
00:30:01«Что скажешь насчет эффекта матового стекла (glassmorphism) поверх фонового изображения?»
00:30:03«Давай попробуем внедрить это».
00:30:06И вот так вы будете работать, пока сайт не станет
00:30:08ровно таким, каким вы его задумали.
00:30:12Это этап во фронтенд-дизайне, когда идет чистая доводка.
00:30:12Вы будете подправлять одну мелочь за другой.
00:30:15К этому моменту вы уже набили руку и понимаете, к чему стремитесь,
00:30:16но это крайне итеративный процесс, здесь нет коротких путей.
00:30:21Зато теперь у вас есть все необходимые инструменты,
00:30:25как для поиска вдохновения, так и для экспериментов.
00:30:27И вот спустя минут 20 самостоятельной работы,
00:30:31вот что у меня получилось с Argus. Прежде всего,
00:30:34вы заметите несколько небольших изменений, которые придают сайту солидности
00:30:37и ощущение премиальности. Во-первых — экран загрузки.
00:30:40Когда я обновляю страницу, что вы видите?
00:30:43Заметна небольшая пауза перед тем, как загружается текст, и это
00:30:45добавляет веса, сайт кажется более основательным.
00:30:49Также обратите внимание, что я сменил шрифты. Шрифты — это база. Типографика решает всё.
00:30:52Где можно посмотреть разные шрифты и
00:30:57почерпнуть вдохновение? Отличное место — Google Fonts.
00:31:00Там их миллиард, и все бесплатные.
00:31:03Они разбиты по типам, и Claude Code умеет работать с любым из них.
00:31:06Так что обязательно загляните туда, если не знаете,
00:31:08какой шрифт выбрать. Далее, мы добавили секцию прокрутки.
00:31:11Мы вставили бегущую строку внизу, которая также служит границей
00:31:14между нашим видео и фоновым изображением под ним.
00:31:19Раньше резкий переход от видео в главном блоке
00:31:25к тому же самому изображению в качестве фона выглядел грубо,
00:31:30но эта строка создает мягкий и естественный переход.
00:31:35Также вы видите изменения, которые мы привнесли из Stitch.
00:31:38Теперь у нас есть эффект матового стекла, который еще нужно немного подправить.
00:31:41Видите, края иногда обрезаются при анимации,
00:31:44но зато это подчеркивает фоновый арт и добавляет сайту индивидуальности.
00:31:48И еще пара тонких деталей.
00:31:52Если я обновлю страницу прямо сейчас,
00:31:54вы заметите, как счетчик быстро взлетает от нуля до 10 миллионов. Именно
00:31:59такие мелочи показывают, что вы действительно заморочились над сайтом,
00:32:03что у вас есть некая профессиональная гордость.
00:32:07Вы даже можете увидеть блик, пробегающий по карточкам ИИ-инструментов и контент-стратегии.
00:32:10И опять же — это всего лишь детали.
00:32:12Это маленькие штрихи, которые большинство людей, честно говоря,
00:32:16даже не заметит. Но когда они складываются вместе,
00:32:20вы получаете нечто целостное — вещь, в которую вы вложили душу,
00:32:24и неважно, использовали вы при этом ИИ или нет.
00:32:27Суть в том, что это ручная работа. В ней куча мелких фишек.
00:32:31Взять хотя бы полосу прогресса прокрутки наверху.
00:32:34Снова мелочь. Как же я составлял промпты для этого?
00:32:38Ну, честно говоря,
00:32:40это была комбинация всего того, о чем мы говорили до этого. Например,
00:32:42я видел примеры того, что мне нравится.
00:32:45Я делал скриншоты и нес их в Claude Code. Но более того —
00:32:48я ведь не эксперт в веб-дизайне. Поэтому в некоторых моментах,
00:32:52я сразу понимал: «О, мне нравятся
00:32:53карточки с эффектом стекла, которые мы видели в Stitch».
00:32:57Помните, Stitch первым подкинул нам эту идею.
00:32:59А когда Claude Code изначально сделал их, они были плоскими.
00:33:03В них не было объема. И я сказал: «Слушай,
00:33:06давай добавим им веса. Пусть они как бы приподнимаются над страницей».
00:33:08Но еще я сказал Claude Code вот что:
00:33:12«Я хочу, чтобы ты поискал в сети
00:33:17лучшие практики веб-дизайна для реализации подобных вещей».
00:33:20«И помимо того, чтобы сделать эти карточки объемными,
00:33:22придумай, что еще может придать сайту более премиальный,
00:33:25но при этом сдержанный вид». И он выдал кучу идей.
00:33:29Я просмотрел их все: что-то отбросил, что-то оставил,
00:33:32но таков общий рабочий ритм, понимаете?
00:33:36Вам не нужно полагаться только на себя.
00:33:40Claude может пойти в интернет и найти лучшие практики, но помните:
00:33:41контроль всегда в ваших руках.
00:33:45Вы за рулем, и не бойтесь получать от процесса удовольствие.
00:33:47Как я и говорил, все эти мелочи создают
00:33:50характер проекта и делают его именно вашим, понимаете?
00:33:53Чем больше в работе будет вашего авторского видения и творческого
00:33:57начала, тем лучше будет результат. Серьезно.
00:34:02Потому что если сайт отражает вас, ваши желания
00:34:04и те образы, которые вы пытаетесь донести, его уже сложно назвать «ИИ-халтурой».
00:34:08Это не просто ИИ-шаблон, потому что он — ваш.
00:34:11И хотя на первый взгляд шестой уровень — это про
00:34:14использование внешних инструментов вроде Stitch,
00:34:17я думаю, на самом деле он про всё то, что я сейчас перечислил.
00:34:19Про итерации с помощью инструментов вроде Stitch.
00:34:23Но в конечном счете — это уровень,
00:34:25где вы наконец-то начинаете мыслить творчески, самовыражаться
00:34:27во фронтенде, используя Claude Code как инструмент. Тогда как на первых
00:34:31уровнях мы были просто пассажирами. И у нас остается последний слой — седьмой.
00:34:34Что же там такое? Что за тема с 3D?
00:34:37Ну, спойлер:
00:34:41скорее всего, большинству из нас там ловить нечего.
00:34:45Когда мы говорим о «фронтире», «архитекторах» и 3D-графике,
00:34:51это территория высшей лиги.
00:34:55Нам такое пока вряд ли под силу.
00:34:57На сегодняшний день, в конце марта 2026 года,
00:35:02я не уверен, что это в нашей компетенции, потому что здесь в игру вступают
00:35:05кастомные WebGL, шейдеры и полноценный 3D-опыт.
00:35:07Мы говорим о сайтах,
00:35:12которые выглядят как современные видеоигры. Взять хотя бы этот сайт.
00:35:13Как вы думаете, можно ли здесь просто нажать Ctrl+U, выделить всё
00:35:17и через HTML/CSS понять, как всё устроено?
00:35:20Нет. Это уже чистое искусство.
00:35:25Целая команда дизайнеров потратила уйму времени,
00:35:30чтобы собрать всё воедино, и это выглядит потрясающе.
00:35:34Теоретически, может ли ИИ сделать такое? Возможно. Но будем честны:
00:35:37это пока далеко за пределами наших с вами возможностей.
00:35:41Я включил это сюда просто для того, чтобы показать вам горизонты.
00:35:45Если хотите увидеть больше подобных примеров,
00:35:47зайдите на Awwwards, про который я говорил раньше, и посмотрите
00:35:50на их «Сайты дня» или «Сайты месяца». У них у всех есть общая черта —
00:35:53это глубоко кастомные работы.
00:35:54Возможно, через пару лет ИИ позволит нам зайти и в эту нишу.
00:35:57Но это и сейчас выглядит очень круто.
00:36:00Сфера веб-дизайна вообще безумно интересная.
00:36:03Такие вещи — это уже настоящее искусство. И как я сказал,
00:36:07когда только начинаешь в этой области,
00:36:09видишь одни и те же типичные SaaS-шаблоны раз за разом.
00:36:12Но когда сталкиваешься с подобным, это просто выносит мозг.
00:36:16Это и есть седьмой уровень.
00:36:17И если вы знаете, как делать такое с помощью ИИ —
00:36:19вам стоит самому записывать видео на YouTube.
00:36:22Я бы сам с удовольствием поучился. Но этот уровень я добавил,
00:36:24честно говоря, просто чтобы похвастаться сайтом Igloo.
00:36:27Уж очень он крутой. Так что обязательно посмотрите его,
00:36:29пусть он вас впечатлит и заставит задуматься о том,
00:36:30что станет возможным в будущем.
00:36:34На этом я завершаю наш разбор семи уровней
00:36:38фронтенд-дизайна с Claude Code. Я надеюсь, что вы вынесли из этого
00:36:42прежде всего понимание того, как развивать свои навыки,
00:36:43чтобы прийти к подобным результатам. Ведь это вполне реально.
00:36:46Главная идея: сначала мы ищем то, что нам нравится,
00:36:51а затем учимся разбирать это на части.
00:36:56Концепция клонирования сайтов, на мой взгляд, безумно важна.
00:36:58Вы узнаете очень многое, когда Claude Code буквально за руку проведет вас
00:37:01по процессу создания чужого сайта, который вас зацепил. В ходе этого
00:37:03вы познакомитесь с различными техниками и эффектами,
00:37:06о существовании которых могли даже не догадываться.
00:37:10А затем вы сможете прийти к своему собственному проекту
00:37:14и применить эти знания в своем уникальном стиле. Вот в чем истинный смысл.
00:37:18Дело не в том, что «есть один секретный навык, который
00:37:21ты скармливаешь Claude Code — и вуаля, идеальный сайт». Поверьте,
00:37:26будь это так просто, у всех были бы отличные сайты. Но это не так.
00:37:30А значит, есть нюансы. Я думаю,
00:37:33мысль о том, что у ИИ нет вкуса, отчасти верна,
00:37:37но более точно будет сказать вот что:
00:37:40нам самим порой трудно сформулировать свой вкус,
00:37:44и трудно потому, что мы просто не знаем подходящих слов.
00:37:47Мы ведь не веб-дизайнеры. Мы не владеем терминологией.
00:37:48Мы не знаем номенклатуру.
00:37:53И это общая проблема при работе с ИИ,
00:37:57не только в дизайне, но и, например, в кодинге.
00:38:02Если вы не из этой среды,
00:38:05вы буквально не знаете языка. Возникают трудности
00:38:06перевода между вами и Claude Code, и в итоге результат
00:38:10получается сырым и безликим. Но я надеюсь, что пройдя по этой дорожной карте,
00:38:13вы увидели путь, как со временем преодолеть эти барьеры.
00:38:15Надеюсь, вам было полезно. Мне было в удовольствие это готовить.
00:38:19Делитесь своим мнением в комментариях и, как всегда, заглядывайте в
00:38:21Chase AI Plus, если хотите пройти мастер-класс по Claude Code.
00:38:25Будем рады видеть вас там. До скорого!
00:38:29ves un camino a seguir para aliviar algunas de esas cosas con el tiempo.
00:38:32Así que espero que hayas sacado algo de esto. Me divertí haciendo esto. Eh,
00:38:37cuéntame en los comentarios lo que piensas y, como siempre, asegúrate de echar un vistazo a
00:38:40chase AI Plus, si quieres poner tus manos en la masterclass de código en la nube,
00:38:43nos encantaría tenerte allí y nos vemos pronto.