Claude Code + Impeccable = ЧИТ-КОД для дизайна
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00"У ИИ нет вкуса, и это ваша вина".
00:00:03Причина, по которой ваши визуальные результаты такие посредственные,
00:00:05заключается в том, что ваши промпты такие посредственные.
00:00:08Вы не используете ту терминологию,
00:00:10язык и номенклатуру,
00:00:11которые использовал бы настоящий дизайнер.
00:00:13Но, к счастью для нас, я нашел решение.
00:00:16Оно называется Impeccable.
00:00:17Это репозиторий с открытым исходным кодом на GitHub,
00:00:20который, по сути, представляет собой единый навык,
00:00:23который мы можем импортировать в Claude Code,
00:00:25чтобы решить эту конкретную проблему.
00:00:27Он дает Claude Code язык дизайна,
00:00:29который учит его тому, как на самом деле выглядит хороший дизайн,
00:00:32а также подсказывает, каких плохих решений следует избегать.
00:00:36И сегодня я не только покажу вам, как работает этот навык,
00:00:39мы собираемся использовать его для создания совершенно нового веб-сайта
00:00:42и редактирования одного из моих существующих сайтов.
00:00:45Так что к концу этого видео у вас не будет оправданий,
00:00:48когда дело дойдет до создания посредственного фронтенд-дизайна.
00:00:51Impeccable — это репозиторий на GitHub с открытым кодом,
00:00:54который дает нам единый навык,
00:00:55позволяющий создавать фронтенд-дизайн,
00:00:58который не отстой.
00:01:00Это единый навык,
00:01:01но это его немного недооценивает,
00:01:03потому что этот навык включает 23 различные команды.
00:01:07В нем есть семь справочных файлов по конкретным доменам.
00:01:10Он говорит нам, каких антипаттернов избегать,
00:01:13и даже позволяет редактировать вещи прямо в браузере.
00:01:17Так что это на самом деле очень мощный инструмент.
00:01:20Это не просто навык фронтенд-дизайна,
00:01:22который состоит из нескольких абзацев
00:01:24о том, что должен делать Claude Code.
00:01:26Но такая сложность может немного пугать,
00:01:28потому что существует буквально 23 различных команды,
00:01:31которые выполняют множество различных действий,
00:01:34когда речь заходит о вашем дизайне.
00:01:35Они все подробно расписаны здесь, внутри репозитория,
00:01:37но правда в том, что вы никогда не запомните их все.
00:01:40Но здесь есть две вещи, которые помогают.
00:01:42Во-первых, очевидно, что Claude Code довольно хорошо
00:01:44разбирается в том, какую именно из них стоит использовать.
00:01:46Но во-вторых, у них есть целый веб-сайт,
00:01:49который также показывает, что делает каждый из этих 23 навыков.
00:01:53Ссылка на сайт есть на GitHub,
00:01:54это impeccable.style.
00:01:56И самое крутое, что для каждого отдельного навыка Impeccable
00:01:59мы можем увидеть, как что-то выглядело до,
00:02:02то есть при обычном использовании Claude Code,
00:02:03и как это выглядит после
00:02:05использования конкретной команды Impeccable.
00:02:07Так что это довольно здорово.
00:02:09У Impeccable есть семь столпов дизайна:
00:02:12типографика, цвет, пространственный дизайн, адаптивность,
00:02:15взаимодействие, движение и UX-копирайтинг.
00:02:17Так что он не ограничивается только цветами и подобными вещами.
00:02:21Это довольно всеобъемлющий инструмент.
00:02:22Прямо здесь мы можем пролистать
00:02:25все эти различные команды.
00:02:27И, как я сказал, увидеть, как они выглядят
00:02:29с использованием навыка и без него.
00:02:31Так что если вы думаете: «Хм, что именно это делает?
00:02:34Могу я увидеть это в действии?»,
00:02:35то это то самое место.
00:02:37На сайте также есть тематическое исследование,
00:02:39показывающее, как они создали этот веб-сайт
00:02:40с помощью Impeccable и одного единственного изображения.
00:02:42И я думаю, это выглядит довольно круто.
00:02:43И наконец, они показывают режим Live,
00:02:45с которым мы немного поэкспериментируем,
00:02:47он пока в альфа-версии,
00:02:48и позволяет нам действительно возиться с нашим сайтом
00:02:51через браузер, как я упоминал ранее.
00:02:53У них также есть расширение для Chrome и CLI,
00:02:56но, честно говоря,
00:02:56мы получаем около 99% пользы именно через этот навык.
00:02:59Так что сегодня мы сосредоточимся на этом.
00:03:01Чтобы установить эту штуку, достаточно одной строки кода,
00:03:04всё, что нужно сделать — скопировать её,
00:03:06зайти в терминал и вставить.
00:03:07Теперь, что касается использования Impeccable,
00:03:09есть два пути развития событий.
00:03:11Первый — это «Greenfield»,
00:03:12когда мы создаем сайт с нуля,
00:03:14а второй — редактирование существующего сайта.
00:03:17Сегодня мы попробуем и то, и другое, и даже больше,
00:03:20потому что я не только покажу вам,
00:03:22как создать сайт с нуля,
00:03:23я также покажу, как это выглядит,
00:03:25когда мы создаем сайт с помощью какого-то референсного изображения,
00:03:27своего рода мудборда.
00:03:30После этого мы перейдем на мой реальный сайт,
00:03:33посмотрим, что Impeccable думает о нём,
00:03:36и какую халтуру мы сможем исправить в моей собственной работе.
00:03:41Напоследок мы взглянем на Impeccable Live,
00:03:43который находится в стадии альфа-тестирования,
00:03:44и увидим, насколько хороша эта штука на данный момент.
00:03:48Но прежде чем мы погрузимся в сам процесс сборки,
00:03:50пара слов от вашего любимого спонсора — меня.
00:03:54В прошлом месяце я выпустил свой мастер-класс по Claude Code,
00:03:56и это лучший способ пройти путь от нуля до AI-разработчика,
00:03:59особенно если у вас нет технического бэкграунда.
00:04:02Я обновляю этот курс каждую неделю,
00:04:05так что это лучшее место, чтобы разобраться,
00:04:07как на самом деле использовать этот невероятный инструмент.
00:04:10Мы фокусируемся на реальных сценариях использования.
00:04:12Я только что выпустил свой полный
00:04:13план урока по созданию агентной ОС на Claude Code.
00:04:16Так что если вы хотите получить к нему доступ,
00:04:18вы можете найти его внутри Chase AI Plus.
00:04:20Ссылка на него есть в закрепленном комментарии.
00:04:23Итак, давайте начнем,
00:04:24и мы начнем с проекта Greenfield.
00:04:27Мы собираемся создать сайт с нуля.
00:04:29Опять же, команд так много,
00:04:31что можно немного запутаться.
00:04:32Если вы начинаете что-то с нуля,
00:04:35я предлагаю начать с команды impeccable craft,
00:04:39потому что она будет включать
00:04:41некоторые вспомогательные команды, такие как impeccable teach.
00:04:44Итак, что же все это значит?
00:04:45Impeccable craft в основном означает,
00:04:48что он пройдет через свою версию режима планирования
00:04:50и будет задавать вопросы о нашем сайте, продукте,
00:04:53о том, что мы на самом деле пытаемся построить.
00:04:55И в этом процессе он создаст два файла.
00:04:59Он создаст product.markdown
00:05:01и design.markdown.
00:05:02Теперь, design.md — это почти то же самое,
00:05:07что мы видели в Google Stitch.
00:05:09Вы ведь помните Google Stitch, верно?
00:05:11Бесплатный инструмент дизайна от Google.
00:05:13У вас есть эта штука с дизайн-системой,
00:05:14и у вас есть файл design.md,
00:05:16который представляет собой очень подробный markdown-файл,
00:05:20указывающий ИИ, как что-то построить.
00:05:21Вся эта структура design.md
00:05:24становится своего рода отраслевым стандартом.
00:05:27Сейчас вы видите это повсюду.
00:05:29И Impeccable следует этому подходу.
00:05:31По сути, он собирается взять у нас интервью,
00:05:32чтобы понять, что мы строим
00:05:34и как мы хотим, чтобы это выглядело.
00:05:36И как только он проведет интервью,
00:05:37он сам создаст для нас лендинг.
00:05:39Итак, внутри Claude Code,
00:05:41я нахожусь в новой папке под названием impeccable-test.
00:05:44Команда — impeccable craft.
00:05:47А промпт такой: давай создадим лендинг
00:05:49для моего вымышленного SaaS-продукта Lighthouse.
00:05:51Это аналитическая платформа для соло-основателей и малых команд.
00:05:54Задавай мне любые вопросы, которые хочешь.
00:05:56Это практически тот же самый промпт,
00:05:58который я дал Huashu Design в своем последнем видео.
00:06:01Если вы его не видели, обязательно посмотрите,
00:06:03это по сути клон облачного дизайна.
00:06:06Так что будет интересно посмотреть,
00:06:08как Impeccable покажет себя по сравнению с той дизайн-системой.
00:06:11И если вы не видели то видео,
00:06:13я дам ссылку выше.
00:06:14Итак, он вернулся с 13 вопросами.
00:06:16Первые четыре — все о продукте,
00:06:18например, кто является реальным клиентом?
00:06:19Как бы вы описали Lighthouse?
00:06:21Какой настрой у посетителя?
00:06:22И каков основной CTA?
00:06:23Какова реальная цель этого лендинга?
00:06:25Следующие несколько вопросов — о голосе и внешнем виде,
00:06:28прежде чем он перейдет к объему работы.
00:06:29Мы делаем только первый экран?
00:06:30Полный скролл, реальные скриншоты?
00:06:32Типа, есть ли у вас для меня еще какие-то активы?
00:06:34И что мне здесь нравится, так это глубина вопросов.
00:06:36Это больше вопросов, чем Huashu Design задал нам
00:06:40в прошлом видео.
00:06:41И это довольно близко к количеству вопросов,
00:06:43которые вы получили бы от чего-то вроде Claude Design.
00:06:44Это очень глубокий подход, и мне приятно это видеть.
00:06:46Так что я просто отвечу на них.
00:06:49Я буду придерживаться стандартных ответов.
00:06:50Мне не нужно делать ничего безумного.
00:06:52И мы попросим сделать полный скролл.
00:06:53Итак, вот что Impeccable дал нам с первой попытки
00:06:56с минимальными инструкциями.
00:06:57Все, что мы на самом деле сделали — ответили на вопросы.
00:06:59Мы не давали ему никаких активов или даже примеров.
00:07:01Теперь, сразу же,
00:07:02я определенно не думаю об ИИ-халтуре, когда вижу это,
00:07:05хотя вы начинаете видеть этот кремовый цвет
00:07:08и шрифт с засечками повсюду в этих более современных
00:07:11фронтенд-дизайнах, особенно в таких вещах, как Claude Design.
00:07:13Мне нравится этот дашборд, который он придумал,
00:07:16определенно нравится.
00:07:18Мне нравится, что я вижу не только ваши стандартные,
00:07:20вы знаете, четыре бенто-бокса, которые вы видите на каждом
00:07:23веб-сайте с дизайном от ИИ.
00:07:25Эта часть выглядит довольно хорошо.
00:07:26У нас есть цитата, полные цены,
00:07:30а потом типа: эй, вперед, оставьте нам свой email.
00:07:32Итак, для первого прохода довольно неплохо.
00:07:35Но в последнее время, когда дело касается
00:07:37моего веб-дизайна с Claude Code,
00:07:40я не позволяю ему выдавать только один вариант, как этот.
00:07:44Поэтому я сказал Impeccable, также известному как Claude code,
00:07:47что мне не нужен всего один макет сайта.
00:07:50Как видите здесь, это был первый вариант, который он выдал.
00:07:52Я хочу видеть три разных варианта, из которых я смогу выбрать.
00:07:56И я хочу, чтобы они все были довольно разными.
00:07:59Кроме того, я хочу иметь возможность переключаться между ними
00:08:01и видеть их все бок о бок.
00:08:03Поэтому мне нужны своего рода макро-макеты,
00:08:05прежде чем мы по-настоящему погрузимся в детали
00:08:08и начнем работать с компонентами.
00:08:09И Impeccable выдал мне это.
00:08:11Итак, у нас есть редакционный вариант, на который мы только что смотрели.
00:08:15Он создал вариант, который назвал "drenched".
00:08:17Определенно другой стиль, гораздо больше цвета.
00:08:20И еще у нас есть бруталистский.
00:08:22Итак, взглянем на "drenched",
00:08:24определенно намного более другой.
00:08:26Скажу, что есть некоторое сходство в шрифте,
00:08:29но это выглядит довольно непохоже на большинство ИИ-генераций.
00:08:34И когда мы просматриваем это, мне в какой-то мере нравится смелость
00:08:39этого веб-сайта, хотя я не совсем уверен насчет цветов.
00:08:43Но скажу, что мне нравится этот бруталистский вариант.
00:08:44Он очень в серых тонах,
00:08:46но мне нравится, как расставлены цифры.
00:08:48Мне нравится, как блоки расположены со смещением.
00:08:52Как будто линии не совсем совпадают.
00:08:54Мне на самом деле очень нравится этот вариант.
00:08:56Думаю, он выглядит очень круто и совсем иначе.
00:08:58И поэтому я думаю, что мы сделаем так: мы выберем
00:09:02этот вариант на данный момент.
00:09:04И просто чтобы вы знали, вся эта идея с тремя дизайнами
00:09:07и возможностью видеть их все сразу,
00:09:08это не то, что присуще Impeccable.
00:09:12Это то, что я делаю сам.
00:09:13Это просто один запрос.
00:09:14И я настоятельно рекомендую вам делать так независимо от того,
00:09:17какие дизайны или инструменты вы используете.
00:09:19Думаю, я подсмотрел это у Stitch,
00:09:23потому что Google Stitch делает очень простым
00:09:25выполнение таких вещей, когда можно увидеть
00:09:26все эти разные вариации на одной странице
00:09:29и сравнить их.
00:09:30И лично мне нужно видеть эти визуальные вещи,
00:09:33чтобы иметь хоть какое-то представление, в каком направлении двигаться.
00:09:37Поэтому я настоятельно рекомендую вам так делать.
00:09:38Вам не обязательно делать три.
00:09:39Вы можете сделать шесть, можете хоть миллион.
00:09:41И также когда вы просите Claude code
00:09:42сделать что-то подобное, просто скажите ему:
00:09:44Я хочу видеть все три на одной странице.
00:09:47Я хочу иметь возможность открывать их в полноэкранном режиме по очереди.
00:09:50И вы также можете попросить его выдать вам кучу
00:09:53разных макро-вариантов,
00:09:55а потом вы просто сможете выбрать из них
00:09:57и попросить его создать эти варианты.
00:09:57Потому что очевидно, что на их генерацию требуется время.
00:09:59Итак, теперь, когда у нас есть целевая страница, которая нам нравится,
00:10:01пора приступать к редактированию,
00:10:03и здесь в игру вступает новый Impeccable Live.
00:10:06Так что все, что нам нужно сделать, это сказать:
00:10:07Эй, давай запустим Impeccable Live на этой бруталистской странице.
00:10:10Теперь, как только вы выполните эту команду,
00:10:12Claude code сообщит вам, что Live mode запущен.
00:10:14Он должен дать вам ссылку на localhost,
00:10:18на который вам нужно перейти, или вы можете просто обновить браузер.
00:10:20И вот внутри вы теперь можете видеть,
00:10:22как я прокручиваю страницу, элементы подсвечиваются.
00:10:26И внизу у нас тоже есть кое-что.
00:10:29Во-первых, у нас есть design.md.
00:10:32Он открывает боковую панель справа.
00:10:35И если я нажму "raw", я увижу все, что он создал.
00:10:39Теперь, если я нажму на конкретный компонент,
00:10:41например, этот основной текст, появятся некоторые опции.
00:10:45Во-первых, у нас есть "free form", то есть:
00:10:47Эй, я просто даю ему текстовый запрос,
00:10:50или у меня есть доступ, по сути,
00:10:52ко всем этим различным командам Impeccable.
00:10:54Так что "bolder", "quieter", "distill", "polish", "adapt".
00:10:56Это все просто часть тех 23 команд Impeccable,
00:11:00о которых мы говорили ранее.
00:11:02Допустим, я выберу что-то вроде "bolder".
00:11:04Итак, "bolder" — это, по сути, заранее разработанный промпт.
00:11:09И если мы посмотрим сюда, в документацию Impeccable,
00:11:12то увидим, что "bolder" сделает его более смелым.
00:11:15Итак, это было до, а это после.
00:11:18Это просто делает его немного более ярким.
00:11:21Точное определение в том, что он подталкивает безопасные дизайны
00:11:26к большей выразительности, не скатываясь в хаос,
00:11:28говорит, когда его использовать, как он работает и все такое.
00:11:31Так что, если мы применим "bolder" к этому, и, честно говоря,
00:11:32я чувствую, что это уже довольно смело.
00:11:34Не знаю, лучший ли это вариант.
00:11:35Я могу уточнить это дополнительно.
00:11:37Так что я могу использовать "bolder" плюс любой запрос, который захочу.
00:11:40Допустим, я напишу "добавь цвета".
00:11:43У меня есть такая штука, которая говорит:
00:11:46три варианта, четыре варианта, два варианта.
00:11:47Это количество вариаций, которые он мне покажет.
00:11:50И затем нажимаем "go".
00:11:51Так что это в некотором роде микроверсия
00:11:56того, что мы делали здесь в плане вариаций,
00:11:58когда я такой: "Хорошо, дай мне эту вещь".
00:12:00Давай изменим это, покажи мне вариации.
00:12:03Теперь мы делаем это на микроуровне,
00:12:06и мы можем быть еще более конкретными
00:12:08в плане того, чего мы хотим достичь, верно?
00:12:09В данном случае мы используем "bolder".
00:12:10Мы могли бы выбрать любой из этих 12 вариантов,
00:12:13и вот что он предложил.
00:12:14Да, очень смело по сравнению с другими опциями.
00:12:17Это вариант один, вариант два,
00:12:21немного более сдержанный,
00:12:22а вариант три — какой-то дикий, да?
00:12:25Также эта возможность настраивать вариации.
00:12:27Если я нажму на "tune",
00:12:30мы можем изменить смещение.
00:12:31Например, этот "дикий" вариант, как вы хотите, чтобы он выглядел?
00:12:36Какими вы хотите видеть цвета?
00:12:39Опять же, если вспомнить мое последнее видео
00:12:42или Claude design, то это, по сути, микронастройки,
00:12:44которые применяются ко всем вариантам.
00:12:47Скрыть ключ, показать ключ, так что многое можно сделать.
00:12:50Допустим, мы хотим выбрать это.
00:12:53Если я хочу выбрать это, что мне нужно сделать?
00:12:54Я просто нажимаю "accept", и изменения применяются.
00:12:56Если при нажатии "accept" возникнет сбой,
00:13:00просто проверьте Claude code,
00:13:02он просто применяет изменения и перезагружает страницу.
00:13:03И вот как это выглядит с внесенными изменениями.
00:13:06Единственное, о чем я не упомянул, — это "detect".
00:13:09Если я нажму здесь "detect", то он будет пытаться увидеть,
00:13:10нет ли здесь какого-либо "ИИ-мусора".
00:13:13Обнаруживает ли он какие-либо антипаттерны,
00:13:17о которых мы говорили ранее?
00:13:19Поскольку это было полностью создано с помощью Impeccable,
00:13:20я очень сомневаюсь, что он что-то найдет,
00:13:24и именно поэтому мы ничего не видим.
00:13:26Но позже, когда мы взглянем на мой собственный веб-сайт,
00:13:28мы увидим, так ли это.
00:13:31Но именно так работает живая система.
00:13:32Думаю, эта часть действительно крутая и выделяет его
00:13:34среди других инструментов и репозиториев для фронтенд-дизайна,
00:13:37которые вы видели в прошлом,
00:13:41особенно тот факт, что мы можем создавать дополнительные вариации.
00:13:42Я очень воодушевлен возможностью видеть
00:13:45все эти разные варианты сразу
00:13:47и настраивать их на этом очень, очень, очень микроуровне.
00:13:49Так что мне это очень нравится, но опять же, это альфа-версия.
00:13:52Так что, возможно, вы столкнетесь с какими-то ошибками.
00:13:54Есть пара вещей, которые кажутся
00:13:57немного грубоватыми, как перезагрузка, которую вы только что видели, но эй,
00:13:59думаю, это суперкруто.
00:14:01Так что обязательно попробуйте это, если используете Impeccable.
00:14:03Не просто создавайте и забывайте об этом.
00:14:04Зайдите в "live" и покопайтесь там.
00:14:07Теперь, когда вы привели веб-страницу в вид, который вам нравится,
00:14:09у вас есть возможность запустить еще больше команд.
00:14:11Например, запустить "polish",
00:14:13чтобы выполнить финальную доработку дизайн-системы.
00:14:16Мы можем сделать что-то вроде "harden",
00:14:18где он изучит граничные случаи и ошибки
00:14:20и убедится, что все работает.
00:14:22Как я уже сказал, это очень, очень сложный
00:14:24инструмент, и он довольно глубокий с точки зрения команд, которые мы можем запустить.
00:14:25Но чтобы сэкономить время, сейчас
00:14:28я покажу вам, как строить с нуля,
00:14:30но в этот раз мы будем использовать,
00:14:33по сути, мудборд или макет,
00:14:35видение которого мы хотим передать в Impeccable.
00:14:38Потому что я хочу посмотреть, как это будет выглядеть,
00:14:40если мы скопируем их кейс,
00:14:43потому что они взяли это изображение,
00:14:45засунули в Claude Code, отправили в Impeccable,
00:14:48и, типа, создали этот веб-сайт,
00:14:50и смогли получить нечто
00:14:52потрясающее.
00:14:53Так что я создал несколько изображений,
00:14:54которые соответствуют эстетике, использованной Impeccable в их кейсе,
00:14:55но мы используем Lighthouse,
00:14:58чтобы хотя бы провести тест,
00:15:02который будет чем-то вроде сравнения один к одному.
00:15:04Мне нравится этот вариант, думаю, мы его и возьмем.
00:15:07Как и прежде, я запускаю Impeccable craft.
00:15:09Он задал мне похожий ряд вопросов,
00:15:11и я, в общем-то, сказал, что нужно придерживаться
00:15:15настроения и атмосферы,
00:15:18которые я получил от изображения.
00:15:21И вот что он предложил,
00:15:22и, честно говоря, это оставляет желать лучшего.
00:15:24Думаю, просто закинуть мудборд
00:15:26и сказать ему: "Эй, давай создадим сайт на основе этого" —
00:15:29он с этим не справился.
00:15:33Думаю, он сделал все, что мог.
00:15:35У нас все еще есть панель, есть цвета,
00:15:37но это не так хорошо, как то, что создали они,
00:15:38потому что я дал ему только один актив
00:15:41но это не так хорошо, как то, что создали они,
00:15:43потому что, я думаю, раз я дал ему только этот один актив,
00:15:46и не включил дополнительные ресурсы,
00:15:48он не разбил его так же,
00:15:51как Impeccable сделала с их кейсом,
00:15:52но, возможно, дело в промпте.
00:15:55Но даже несмотря на это, можно увидеть каркас
00:15:57того, что здесь могло бы сработать.
00:15:59Мне нравится, как они сделали панель управления.
00:16:01Так что, определенно, не так впечатляюще, я думаю,
00:16:05как тот черновой вариант, что мы сделали в начале,
00:16:09но, эй, я решил попробовать.
00:16:11А теперь давайте посмотрим, как это сработает при редактировании существующего сайта.
00:16:14Мы используем мой сайт, мой реальный сайт AI-агентства,
00:16:18и запустим на нем несколько команд.
00:16:21Мы используем документ Impeccable,
00:16:23чтобы он мог фактически реконструировать файл design.md
00:16:26из кода, а потом мы сделаем что-то вроде запуска аудита
00:16:29и критики, и мы на самом деле снова проделаем всё вживую
00:16:32на моем реальном сайте, чтобы посмотреть,
00:16:36какие рекламные объявления мы сможем создать.
00:16:37Итак, для справки, это сайт моего AI-агентства.
00:16:41У меня там что-то вроде стандартного главного раздела.
00:16:43Я перехожу к услугам, рассказываю о своей философии
00:16:47того, как мы внедряем ИИ,
00:16:49перед тем как добавить призыв к действию,
00:16:51место, где люди могут заполнить свою информацию,
00:16:54если хотят работать со мной.
00:16:55У меня есть дополнительные страницы, такие как блог,
00:16:57но пока мы остановимся на главной странице.
00:17:00Первое, что я сделал — это сказал:
00:17:02давайте запустим Impeccable document на этой кодовой базе
00:17:05и посмотрим, что Impeccable скажет о моем текущем сайте.
00:17:08Итак, он проходит по всей кодовой базе,
00:17:11и собирается создать design.md для того, что у нас уже есть,
00:17:16и именно на этой основе
00:17:18мы сможем начать редактировать вещи.
00:17:19После того как Impeccable прошел по кодовой базе,
00:17:21он написал три файла, которые по сути являются
00:17:23стратегическим контекстом того, что происходит.
00:17:26Он говорит о победах, о «Полярной звезде»,
00:17:29но также говорит о семи различных нарушениях, которые он нашел.
00:17:33Например, синяя сфера, он говорит, что макеты сервисных карточек
00:17:37по сути — это набор картинок из клипарта,
00:17:40намеренная сетка карточек.
00:17:43Он ненавидит глассморфизм, так что ему это не нравится.
00:17:47Говорит, что мы загрузили определенный шрифт, но никогда его не использовали,
00:17:50а также другие вещи.
00:17:53Так что были некоторые функции,
00:17:54которые по сути есть в коде,
00:17:55но на самом деле не отображаются в реальном интерфейсе.
00:17:58И еще проблема с некоторыми цветами.
00:18:02Также говорится о стратегическом пробеле,
00:18:04заключающемся в том, что я, по сути, не особо показываю себя, человека, Чейза,
00:18:07на самом сайте, что справедливо.
00:18:10Теперь мы можем получить еще более глубокую критику,
00:18:12если запустим команду critique.
00:18:15Давайте сделаем это сейчас.
00:18:16Итак, я говорю ему запустить команду critique.
00:18:18Даже не написал "critique" правильно.
00:18:20Говорю ему запустить команду critique на лендинге.
00:18:23Он провел критику, и вердикт был таков: это,
00:18:25да, граничит с "ИИ-халтурой".
00:18:27Он дал мне оценку состояния дизайна по 10 разным критериям,
00:18:33и каждый был по четырехбалльной шкале,
00:18:34и я не набрал больше трех ни по одному из них,
00:18:37но я и не получил ни одной единицы, так что это хорошо.
00:18:39Общая оценка — 25 из 40, что классифицируется как приемлемо.
00:18:43За когнитивную нагрузку он поставил мне пять из восьми, провал.
00:18:46Говорит, что фоновое движение конкурирует с контентом.
00:18:51Да, я думаю, оно довольно сдержанное,
00:18:54но я вижу, откуда он это взял.
00:18:56Два CTA равного веса здесь с двусмысленным приоритетом.
00:19:00Раздел услуг имеет четыре разные визуальные схемы
00:19:03наряду с некоторыми другими вещами.
00:19:05И его общее впечатление таково, что у сайта хороший каркас,
00:19:08но можно сделать немного больше.
00:19:10И в конце он разбивает это
00:19:11на три разных пункта, неделю назад.
00:19:14Так что, честно говоря, мне нравится эта критика.
00:19:16Она очень, очень глубокая и дает нам много материала для работы
00:19:19и становится довольно конкретной в том, что считает неправильным.
00:19:22Теперь, согласен ли я с чем-то из этого,
00:19:24я думаю, это уже вопрос десятый,
00:19:26но это дает нам пищу для размышлений.
00:19:29Знаете, я не собираюсь слепо предполагать,
00:19:31что всё, что он мне говорит — правильно,
00:19:32но мы можем пройтись по этим пунктам, или если я захочу,
00:19:35я могу пройтись по всем ним.
00:19:36Я такой: хорошо, давайте изменим это и то.
00:19:37Так что давайте посмотрим, что будет, если мы сделаем B
00:19:40и скажем, что хотим немного поиграться
00:19:42с тем, что он называет "дисциплиной оформления"
00:19:44и посмотрим, какие изменения он внесет.
00:19:46А после того как увидим, какие изменения он внесет,
00:19:48мы перейдем в live-сессию,
00:19:51точно так же, как мы сделали с первым лендингом, который создали,
00:19:54и повозимся с этим.
00:19:55Так что давайте посмотрим на некоторые изменения, которые он сделал.
00:19:57И изменения были очень тонкими.
00:19:59Так что мы можем видеть прямо здесь, в разделе услуг,
00:20:03это обновленная версия.
00:20:04Они немного приглушили цвета и сохранили их
00:20:07только в виде этого терракотово-оранжевого и белого.
00:20:09Вы заметите, что больше нет такого синего тумана
00:20:13внизу слева.
00:20:14Для справки, это предыдущий вариант,
00:20:17где у вас есть этот синий внизу слева
00:20:18а потом синий и зеленый.
00:20:20Так что он сводит всё к двум цветам, верно?
00:20:23То есть белый, ну, на самом деле три цвета,
00:20:25я бы сказал белый, серый и оранжевый.
00:20:28Вы также можете увидеть это здесь, в разделе подхода.
00:20:32Так что, когда я навожу курсор на карточки, у нас все еще есть это оранжевое свечение,
00:20:36но в оригинале здесь был еще оранжевый цвет.
00:20:41Там сверху была линия карточки
00:20:43и он считает, что это такая вещь в духе "ИИ-халтуры".
00:20:47И это весь объем изменений дисциплины оформления.
00:20:51Так что довольно тонко, у него есть другие варианты,
00:20:53которые он тоже хочет попробовать.
00:20:54Они связаны с чем-то вроде доверия и конверсии,
00:20:56и потенциально добавлением вещей, таких как фото головы.
00:20:58Но что мы пропустим сейчас,
00:21:00так это переход в live-режим.
00:21:02Так что давайте взглянем на сайт сейчас в live-режиме.
00:21:05Итак, допустим, я хочу немного изменить эти карточки
00:21:08и, как и раньше, что мне сделать?
00:21:10Я могу сделать это в свободной форме или продолжить
00:21:13и выбрать одну из этих предустановленных команд.
00:21:17Давайте попробуем "delight" (восхищение) для этого.
00:21:19А затем мы перейдем к трем вариантам.
00:21:22И то, что делает "delight", — это добавляет немного настоящей индивидуальности
00:21:26этому конкретному компоненту.
00:21:27Вот взгляд на некоторые варианты, которые он нам дал.
00:21:30Так что этот немного больше,
00:21:32имеет что-то вроде этой штуки здесь, справа.
00:21:35Он меняет реальный текст здесь.
00:21:37И добавляет еще вот эту маленькую штучку.
00:21:40И, очевидно, как и в них, у нас есть настройки,
00:21:43чтобы поиграть тоже.
00:21:45Это должно быть число, оно немного не то.
00:21:49Так что да, практически тот же сценарий,
00:21:53как и с первым сайтом, который мы создали.
00:21:55Я думаю, эта функция live для Impeccable
00:21:57безусловно, ее самый мощный инструмент.
00:22:00Тот факт, что мы можем делать эти микрокорректировки
00:22:02по сути через графический интерфейс,
00:22:04против того, чтобы делать всё через командную строку.
00:22:06Так что я рад видеть, что это практически
00:22:08тот же самый набор инструментов,
00:22:09даже когда мы используем существующую кодовую базу.
00:22:12В общем, мне очень понравился Impeccable.
00:22:13Я думаю, это на 100% навык, который стоит добавить в свой стек,
00:22:17и определенно стоит протестировать, когда вы будете заниматься своим следующим раундом
00:22:20фронтенд-дизайна,
00:22:21будь то сайт, который вы создаете с нуля,
00:22:23или для чего-то, что уже существует.
00:22:26И на 100% попробуйте live-инструмент.
00:22:29Это то, что они только что добавили,
00:22:31я думаю, около недели назад.
00:22:32И я думаю, это большой дифференциатор
00:22:34от всех этих других вещей.
00:22:35Я думаю, когда вы объединяете эти микрокорректировки
00:22:38с макро-макетами, которые я советовал вам делать
00:22:41через промптинг в самом начале,
00:22:43я думаю, у вас получится действительно мощный рабочий процесс.
00:22:45Как всегда, дайте знать, что вы думаете.
00:22:47Ссылка на этот репозиторий будет в описании.
00:22:49Там также есть ссылка в закрепленном комментарии на Chase AI+,
00:22:52если вы хотите получить доступ к моему мастер-классу по Claude Code.
00:22:55А помимо этого, еще увидимся.