00:00:00Я собираюсь предложить вам и сотням других дизайнеров один очень крутой эксперимент.
00:00:06Я хочу посмотреть, как далеко мы сможем зайти в AI-дизайне, и на этот раз мы используем Claude Code,
00:00:13чтобы создать hero-секцию для одной и той же вымышленной бизнес-идеи.
00:00:19Сейчас на сайте designcourse.com проходит 30-дневный челлендж по UI-дизайну.
00:00:24Это на 100% бесплатно.
00:00:25У нас уже прошел один этап, на который прислали более 200 работ, и это
00:00:30второй челлендж.
00:00:31Я покажу вам, как использовать Claude Code и наделить его специальным дизайнерским навыком,
00:00:37чтобы создавать по-настоящему качественный дизайн.
00:00:40Цель этого испытания в том, что я дам вам всем одну и ту же идею для бизнеса,
00:00:44но мы проверим, насколько хороши ваши навыки промптинга для создания лучшего UI,
00:00:50возможного для этой задачи.
00:00:52Чуть позже я покажу, как именно вы можете принять участие в этом челлендже сегодня.
00:00:56Неважно, когда вы смотрите это видео — это может быть даже через несколько месяцев.
00:00:58Вы всегда можете поучаствовать и посмотреть, что делают другие.
00:01:01Но сначала я покажу, как настроить все необходимое.
00:01:04Итак, во-первых, вам, очевидно, понадобится Claude Code, ясно?
00:01:07Вот страница для его настройки.
00:01:10Там разные среды выполнения.
00:01:11Я не буду разбирать их все, просто оставлю ссылку на страницу установки.
00:01:15Разберетесь, как установить, если еще этого не сделали.
00:01:17Когда все будет готово, просто введите «claude», и он должен запуститься.
00:01:22Отлично.
00:01:23Хорошо.
00:01:24Следующий шаг — наделить его специальным навыком.
00:01:26Навык — это, по сути, просто набор инструкций, которые подаются в контекст ИИ.
00:01:30И существует множество различных навыков.
00:01:31Прежде чем показать сам навык, объясню, как устанавливать их в систему.
00:01:32Вам нужно найти папку Claude Code в зависимости от вашей ОС и среды,
00:01:37которую вы используете.
00:01:43Затем вы просто берете этот Markdown-файл (это и есть навык) и помещаете его
00:01:44в ту самую папку.
00:01:49Тот конкретный навык, о котором я говорю, называется Front End Design.
00:01:50Я оставлю ссылку на него в описании, чтобы вы могли его открыть.
00:01:55Вам нужно зайти в Skills, Front End Skills, Skill.md и затем нажать здесь:
00:01:58«Download Raw File» (Скачать файл), ясно?
00:02:03Когда у вас будет этот файл навыка, возьмите его и найдите папку Claude Code
00:02:06по тому пути, который я только что показывал.
00:02:12На моей Windows 11 эта папка находится по адресу: диск C, Users, Gary, .claud.
00:02:14Внутри этой папки у вас может не быть папки «skills».
00:02:21Если нет — создайте её.
00:02:24У меня она уже есть.
00:02:25Заходите в неё и создаете папку с названием «Designer».
00:02:26И уже внутри неё вставляете файл Skill.md.
00:02:31Если у вас уже запущен Claude, обязательно сначала закройте его,
00:02:35нажав пару раз Ctrl+C.
00:02:39Снова введите «claude», а затем просто напишите «/skills», чтобы вывести список всех навыков.
00:02:41Сейчас у меня их три.
00:02:47И мы видим здесь Front End Design.
00:02:48Доступ к нему осуществляется через команду «/frontend-design».
00:02:51Затем вы вставляете свой промпт.
00:02:56Давайте покажу это в действии.
00:02:58Если я напишу «/frontend-design» и запрос: «Дизайнерская hero-секция лендинга для
00:03:00сервиса проверки личности на базе ИИ».
00:03:06«У нее должен быть светло-бежевый фон, две колонки, мощный заголовок и текст
00:03:07слева с призывом к действию».
00:03:11«А справа должна быть вымышленная, но простая UI-анимация, демонстрирующая
00:03:13идею верификации личности».
00:03:16«Помести это в HTML-файл с CSS и используй переменные».
00:03:20Вот и весь мой промпт, и вот что получилось в итоге.
00:03:23Не знаю, как вам, а по-моему, это выглядит очень достойно, и он сделал это с первой попытки.
00:03:28И вы видели промпт.
00:03:33Он совсем короткий.
00:03:35Теперь я покажу вам задание и бизнес-идею для промпта, которую
00:03:36я хочу, чтобы вы использовали, и мне не терпится увидеть ваши результаты.
00:03:41Суть в том, чтобы дополнить ее вашими собственными дизайнерскими предпочтениями,
00:03:46создав нечто уникальное и даже анимированное, если захотите.
00:03:51Первым делом перейдите на страницу [designcourse.com/foundations](https://www.google.com/search?q=https://designcourse.com/foundations) challenge.
00:03:53Ссылка где-то внизу.
00:03:58Когда перейдете, увидите вот эту страницу: уже 613 студентов и 197 работ
00:04:00по первому заданию, которое у нас уже было.
00:04:06Это для второго челленджа.
00:04:08Просто нажмите здесь: «Получить шаблон Figma UI/UX 2026».
00:04:09В нем находится задание №2, и именно его я хочу, чтобы вы выполнили.
00:04:16Вот как это выглядит.
00:04:20Это задание номер два, а вот инструкции к нему.
00:04:23Эту часть я хочу, чтобы вы включили в свой промпт.
00:04:27Это вымышленная бизнес-идея.
00:04:29Я не хочу, чтобы вы использовали какую-то другую идею.
00:04:31Я хочу, чтобы мы все работали над одной темой: сервис проверки домов с помощью ИИ.
00:04:32Он использует компьютерное зрение для анализа подполов, крыш и фундаментов на наличие дефектов
00:04:37и автоматически генерирует стандартные отчеты об инспекции.
00:04:42Наша цель — проинструктировать ИИ с помощью вот этого начального промпта,
00:04:45чтобы создать hero-секцию нового уровня, используя наш навык Claude Code Designer.
00:04:50А вот здесь находятся инструкции.
00:04:56Используйте Claude Code для генерации hero-секции для вымышленного бизнеса,
00:04:58описанного в этой рамке справа.
00:05:03Обязательно вставьте это описание как часть вашего промпта.
00:05:05Укажите бизнес-идею, но также добавьте свои собственные предпочтения по дизайну и стилю.
00:05:08Примерно так я и действовал, когда просил создать ту анимированную карточку,
00:05:13которую мы видели.
00:05:17Вы можете использовать сколько угодно уточняющих промптов для улучшения результата.
00:05:18При желании можно добавить анимацию.
00:05:22При отправке работы сначала укажите количество промптов, которые потребовались для финала,
00:05:24потому что я хочу, чтобы вы дорабатывали результат до идеала.
00:05:29Также прикрепите сам промпт в поле для комментариев.
00:05:32Вы также можете использовать плагин «Claude Code to Figma», чтобы поделиться
00:05:36прототипом дизайна в Figma, но это не обязательно.
00:05:42Обычного скриншота будет вполне достаточно.
00:05:44Плагин «Claude Code to Figma» позволяет взять готовый результат вашего UI
00:05:47и перенести его прямиком в Figma.
00:05:53Я не буду показывать, как это делать здесь, потому что буквально вчера выложил
00:05:54отдельное видео на эту тему.
00:05:58Опять же, делать это не обязательно.
00:06:00Скриншот для вашей заявки подойдет отлично.
00:06:01Далее, здесь показано, как именно отправить свою работу.
00:06:04Допустим, если вы все же решили поделиться документом Figma,
00:06:09что позволит мне внести правки, если я выберу вашу работу для обзора,
00:06:14тогда вы просто нажимаете «Share» (Поделиться) вот здесь.
00:06:18Нажмите «Copy prototype link», убедитесь, что доступ открыт для всех,
00:06:20и приложите ссылку к своей работе.
00:06:25Это будет очень интересный челлендж, потому что мы увидим,
00:06:26насколько похожими будут результаты.
00:06:30Они будут одинаковыми, если вы не дадите ИИ четких указаний, не проявите
00:06:32творческий интерес к стилистике и не вложите свои идеи.
00:06:37Но если вы это сделаете, думаю, мы увидим массу интереснейших
00:06:40вариаций и концепций.
00:06:47Так что уточняйте желаемую цветовую схему, описывайте интересные
00:06:48иллюстрации или анимации.
00:06:53Цель — выжать максимум из того, что может создать ИИ.
00:06:55Что ж, надеюсь увидеть всех среди участников.
00:06:58Это действительно крутой челлендж.
00:07:01Это по-настоящему крутой челлендж.