Как использовать Claude Design для создания красивых сайтов
AAI LABS
Computing/SoftwareInternet Technology
Transcript
00:00:00Хороший дизайн действительно имеет значение, потому что визуальное оформление сайта — это первое,
00:00:05что оценивают пользователи. Существует множество инструментов, помогающих в этом, и Claude Design — один из самых
00:00:09мощных на сегодняшний день. Но качественный дизайн не создается простым вводом запросов. Поэтому в
00:00:14этом видео мы разберем пятиэтапный процесс, который вы сможете пройти с Claude Design
00:00:18самостоятельно. Никогда не открывали Claude Design или пользуетесь им уже несколько месяцев — здесь найдется
00:00:22полезная информация для каждого. Если вы никогда раньше его не открывали, ничего страшного, мы начнем с того,
00:00:27что вообще представляет собой этот инструмент. А если вы уже проектируете в нем, мы перейдем к тому, как интегрировать Claude Design
00:00:32с Claude Code, чтобы сделать его намного мощнее. Воспользуйтесь таймкодами ниже, чтобы сразу перейти к нужному моменту.
00:00:37Если вы впервые на нашем канале, то добро пожаловать. На самом деле мы являемся софтверной компанией и создали
00:00:41для вас полноценную систему вокруг Claude Design на основе наших внутренних процессов. Так что, не теряя больше
00:00:47времени, давайте перейдем к видео. Этот раздел предназначен только для тех, кто не знает, что такое Claude Design. Так что
00:00:52если вы уже знакомы с ним, можете пропустить его. Он впервые появился в качестве исследовательской версии
00:00:57при выпуске модели Claude Opus 4.7. По сути, это инструмент дизайна с очень простым в использовании
00:01:02интерфейсом, который позволяет любому человеку, даже не техническому специалисту, создавать отличные дизайны с помощью простых
00:01:07промптов. И он доступен на всех платных тарифах. Причем это касается не только веб-сайтов. Вы также можете
00:01:12проектировать слайды, документы и даже создавать анимацию с его помощью. Кроме того, Claude Design доступен
00:01:17как в приложении Claude Desktop, так и на сайте Claude. Так что вам не обязательно устанавливать десктопное приложение.
00:01:22Если вы хотите использовать его через приложение, просто скачайте его, запустите установку и войдите в свою учетную запись.
00:01:27Затем откройте боковую панель, нажмите на дизайн, и откроется его интерфейс, где вы сможете начать работу.
00:01:32Claude Design предоставляет на выбор все модели Claude, включая Fable — их самую мощную
00:01:37модель, хотя доступ к ней ограничен. Флагманом для общего использования по-прежнему остается Opus,
00:01:42и он по-прежнему лучше всего подходит для дизайна. Но проблема моделей Opus заключается в том, что они расходуют
00:01:46огромное количество токенов. Haiku, с другой стороны, использует гораздо меньше, но может потребовать больше
00:01:51доработки для получения качественного дизайна. Вдобавок к этому вы можете настроить уровень усилий для каждой
00:01:55модели. Уровень усилий по сути определяет, насколько глубоко модель думает перед выполнением задачи. Мы используем
00:02:01Opus 5, последнюю на данный момент модель, на среднем уровне усилий для наших дизайнерских задач, потому что это позволяет легко проектировать
00:02:06без перерасхода токенов. Он также позволяет подключать все ваши MCP и навыки, что значительно упрощает
00:02:12использование собственной системы прямо внутри него. Для тех, кто не знает, MCP — это то, что позволяет
00:02:18агенту подключаться к внешним ресурсам, таким как другие инструменты и сервисы, а навыки — это наборы
00:02:23инструкций, которые учат агента лучше справляться с задачами, предоставляя пошаговые руководства и справочные материалы.
00:02:28Прежде чем начать, следует учесть один важный момент. Существует лимит на количество создаваемых дизайнов.
00:02:33Claude Design работает в рамках 5-часового лимита, но он распространяется не только на дизайн. Все остальные действия
00:02:38в Claude учитываются в том же лимите. В течение этого 5-часового окна действует ограничение на количество токенов,
00:02:44которые вы можете потратить, и как только оно исчерпывается, приходится ждать окончания этих 5 часов, прежде чем снова использовать инструмент.
00:02:49И несмотря на то, что он стал намного лучше по сравнению с моментом выхода, Claude Design по-прежнему
00:02:53очень прожорлив до токенов, поэтому при интенсивном использовании ожидайте, что лимиты будут исчерпываться быстрее. Чтобы
00:02:59компенсировать огромный расход токенов, вам нужно предпринять определенные шаги до того, как бросаться к написанию промптов.
00:03:04Эти шаги важны, так как они гарантируют получение желаемого дизайна без лишних затрат
00:03:09токенов. Первое, что нужно сделать, — создать файл design.md. Этот формат
00:03:15был предложен Google, и в нем содержатся все детали фирменного стиля вашего бренда. Ваш ИИ-агент по кодингу читает этот файл
00:03:20перед тем, как что-либо написать, поэтому каждый экран соответствует вашему бренду. Ему не приходится ничего угадывать,
00:03:25поэтому он никогда не отклоняется от стиля. В Claude Design есть функция создания дизайн-систем.
00:03:30Дизайн-система — это набор стилевых решений, которые применяются на вашем сайте. Она содержит шрифты,
00:03:35цвета и все остальные детали, определяющие ваш дизайн, и позволяет использовать их для создания
00:03:40новых макетов. Таким образом, все дизайны, созданные на основе дизайн-системы, будут следовать единому стилю и выглядеть частью
00:03:46одного сайта. Но главная причина начинать с предопределенного файла design.md заключается в том, что
00:03:51все эти модели выдают идентичные на вид дизайны. Если позволить Claude Design самостоятельно построить дизайн-систему,
00:03:57он просто возвращается к стандартным цветам и стилям, которые модели Opus используют повсеместно, и
00:04:02из-за этого ваш сайт в итоге выглядит как любой другой сайт, созданный с помощью ИИ. Но если вы
00:04:07передадите ему design.md в качестве базы для дизайн-системы, этот файл четко укажет вашему агенту, что именно вам нужно, обеспечивая гораздо
00:04:12больший контроль без возврата к стандартным настройкам по умолчанию. И как уже упоминалось, другая
00:04:17причина — это согласованность. Поскольку вся дизайн-система строится на основе этого единственного файла, каждая страница следует
00:04:22абсолютно тому же стилю, что и обеспечивает единообразие вашего многостраничного сайта. Для этого мы создали навык,
00:04:27который планирует дизайн.md за вас. Чтобы воспользоваться этим навыком, запустите его внутри Claude Code. А Claude
00:04:33Code — это еще один инструмент от Anthropic. По сути, это инструмент для написания кода с помощью ИИ, который запускается в терминале
00:04:39и может создавать для вас целые приложения. Чтобы установить его, зайдите на их официальный сайт, скопируйте команду установки
00:04:45и выполните ее в своем терминале. После этого введите claude в терминале,
00:04:49и вы сможете начать работу, вводя свои промпты. Поскольку мы собирались создавать приложение в Claude
00:04:54Code, мы просто поместили этот навык в папку skills внутри директории .claude, где хранятся
00:04:59все настройки и конфигурации Claude Code. У вас этой папки может не быть, но вы можете просто
00:05:05сказать Claude Code в поле ввода запроса, что вам нужно установить навыки в проект, и он настроит все
00:05:10за вас и даже самостоятельно поместит туда навык. Папка .claude не будет видна, когда вы откроете проект
00:05:15в Finder. Это потому, что ее имя начинается с точки, а файлы с точкой в начале считаются
00:05:20системными, поэтому Finder скрывает их по умолчанию. Чтобы зайти туда, вам понадобится редактор кода —
00:05:25приложение, позволяющее увидеть все файлы проекта в одном организованном месте. Мы используем
00:05:31VS Code от Microsoft, который выбирает большинство разработчиков из-за удобства работы с ним.
00:05:36Чтобы установить его, зайдите на официальный сайт, скачайте установщик для вашей операционной системы
00:05:40и выполните установку. Затем откройте в нем папку вашего проекта, и вы сможете увидеть все файлы,
00:05:45включая скрытые. Затем, когда вы захотите создать приложение, вы просто вызываете этот навык
00:05:49с помощью слеш-команды — короткой команды, начинающейся со слеша, чтобы активировать его
00:05:54и дать промпт с описанием того, что вы хотите построить. Он проводит с вами опрос и подробно планирует
00:05:59визуальную идентичность продукта, а после получения всей информации генерирует
00:06:03весь файл design.md и проверяет его на соответствие стандартам Google с помощью скриптов. Этот навык
00:06:09также содержит антишаблонные рекомендации, исключающие типичные признаки сайтов, созданных с помощью ИИ.
00:06:15Так что предварительное планирование design.md — действительно лучший вариант. Если вам интересно, где
00:06:21получить этот навык, не переживайте, мы расскажем об этом позже в видео. Приложение, которое мы создаем в этом видео,
00:06:26представляет собой инструмент управления проектами, где вы можете управлять всеми своими кодинг-проектами в одном месте. Для начала
00:06:31передайте в Claude Code промпт со слеш-командой для этого навыка, в общих чертах описав приложение,
00:06:36которое вы хотите создать, и его назначение, после чего он начнет с анализа визуальной индивидуальности
00:06:41вашей идеи. Получив её, он начинает задавать вопросы, например, есть ли у вас на примете
00:06:46определенный цвет для вашего сайта. Если вы уже определились с фирменными цветами, вы можете указать их,
00:06:51либо позволить системе выбрать их самостоятельно. Благодаря использованию этого навыка он не выберет шаблонные цвета,
00:06:55поэтому вам не придется беспокоиться о банальном внешнем виде, но все же лучше определиться с ними
00:07:00заранее. Обычно мы используем Coolors — сайт, который генерирует и визуализирует
00:07:05цветовые палитры, чтобы вы могли увидеть, как цвета сочетаются друг с другом. Найдя понравившуюся комбинацию цветов,
00:07:09вы можете нажать кнопку экспорта, выбрать вариант с кодом, и вам будет предоставлен
00:07:14текст, который можно просто скопировать и вставить в Claude Code. Claude Code поместит этот текст
00:07:18в ваши файлы design.md. После этого он создаст файл design.md и выполнит
00:07:24несколько этапов проверки. Сам файл дизайна формируется точно так же, как его разработал Google.
00:07:29Этот формат понятен для ИИ-модели, но вам самим сложно
00:07:33представить генерируемый дизайн, поэтому трудно понять, отвечает ли он вашим требованиям
00:07:38или требует доработки. Однако не стоит тестировать его внутри Claude Design. Вы генерируете
00:07:43свои дизайны там, и предположим, что они вам не понравились. Теперь вам нужно вернуться в design.md,
00:07:48внести изменения и сгенерировать все заново. Каждый такой цикл стоит вам токенов. Существует множество
00:07:53инструментов для визуализации design.md, и один из использованных нами — design.md.space. Любой
00:07:59из них показывает, как выглядит ваш файл дизайна и как выбранные цвета для разных областей
00:08:04сочетаются между собой. Он также визуализирует все элементы, что сильно упрощает принятие решений. Это лишь
00:08:10один из способов создания design.md, но есть и другие. Если вы не хотите создавать его самостоятельно,
00:08:15можно просто взять за основу дизайн популярного веб-сайта в качестве примера. Честно говоря, копирование чужого дизайна
00:08:19в качестве ориентира — это то, что делают многие. Вы берете его за отправную точку и вносите изменения,
00:08:24чтобы адаптировать под себя, точно так же, как многие взяли за основу лаконичный стиль Notion и переработали
00:08:29его в собственные дизайны после нескольких правок. Для этого существует сайт getdesign.md, где собрано
00:08:34набор брендов и их стилей в виде файлов design.md, которые можно получить самостоятельно. Поскольку у нас
00:08:39уже есть собственный design.md, мы можем перейти к Claude Design и создать на его
00:08:44основе новую дизайн-систему. При создании новой системы запрашиваются сведения о продукте. Но поскольку у вас
00:08:49уже есть design.md, вы просто загружаете его в качестве ресурса. После этого система начинает генерировать новый макет,
00:08:55читая файл, создавая задачи и прорабатывая их по очереди. Через некоторое время Claude Design
00:09:00создает дизайн-систему и визуализирует все элементы, которые будут
00:09:06использоваться в приложении. Чтобы повторять этот рабочий процесс за нами, вам понадобится этот навык.
00:09:10Мы выложили его на GitHub и оставили ссылку в описании, так что вы можете получить его бесплатно.
00:09:14Чтобы использовать его, просто передайте эту ссылку Claude Code и попросите настроить его, и он установит
00:09:19и поместит его в папку .claude без каких-либо дополнительных действий с вашей стороны. После того как дизайн-система
00:09:24зафиксирована и наступает время ее непосредственного использования, перед началом
00:09:29создания сайта есть еще один очень важный шаг. Это создание макетов того, что вы хотите построить. Макет — это по сути
00:09:34грубый эскиз, который позволяет увидеть, где располагаются все элементы и правильно ли они размещены. Конечно,
00:09:39можно сразу приступить к созданию сайта, но это приводит к проблемам. Пришлось бы долго ждать,
00:09:43потому что Claude Design медленно создает проекты, и если после всего этого дизайн окажется не тем,
00:09:48что вам нужно, пришлось бы переделывать все с нуля. Поэтому в Claude Design нужно выбрать созданную
00:09:53дизайн-систему, выбрать опцию макета и задать запрос с подробной информацией о том, сколько экранов вам нужно.
00:09:58После этого инструмент позволяет создавать несколько вариантов для каждого экрана, чтобы Claude мог предложить
00:10:03несколько разных стилей для каждого экрана на выбор. Генерация займет совсем немного времени, после чего вы сможете
00:10:08изучить структуру и просмотреть все вариации, созданные для одной и той же страницы. Здесь также
00:10:12есть функция комментариев, поэтому для изменения какого-то одного элемента достаточно просто оставить к нему комментарий. Комментарий по сути
00:10:18отправляет точные данные этого элемента вместе с вашим запросом, чтобы Claude точно знал, какая область нуждается
00:10:23в изменении и каким образом. Это делает подход намного лучше, чем просто отправка запросов в надежде, что Claude сам догадается,
00:10:28какую область вы имеете в виду. Чтобы добавить комментарий, вы просто выбираете соответствующую функцию, кликаете на нужный
00:10:33элемент и вводите необходимые изменения. Вы можете добавлять столько комментариев, сколько потребуется.
00:10:38Их можно отправлять по одному, но лучше сгруппировать и отправить все разом, чтобы система обработала их
00:10:42вместе и исправила все за один заход. Это сводит время ожидания к минимуму. Так что просто продолжайте
00:10:48настраивать все, пока не будете довольны структурой, а закончив здесь, можете двигаться дальше. И если
00:10:52видео вам пока нравится, подписывайтесь на канал и жмите кнопку лайка. Этот небольшой жест
00:10:57поддержки очень важен для нас. Ну а после разработки каркаса пришло время создавать полноценный
00:11:03дизайн. Вы также можете использовать его для создания нескольких вариантов. Поскольку обычно
00:11:06вы просите Claude сделать несколько вариантов одного дизайна, сначала вы выбираете нужный вариант
00:11:10из только что созданных. Каждая такая страница идентифицируется по кодовому номеру, поэтому вы выбираете
00:11:15ее именно по нему. После этого вы отправляете запрос с просьбой превратить эти экраны в полноценный
00:11:20дизайн с высокой детализацией, сохраняя макет и структуру из каркаса с чистыми отступами
00:11:26и иерархией. Затем Claude Design считывает все элементы, созданные при построении дизайн-системы.
00:11:31И с их помощью он выстраивает весь сайт так, чтобы он полностью соответствовал дизайн-системе
00:11:36и макету — именно так, как нам нужно. Как и в случае с каркасом, здесь тоже можно оставлять комментарии и исправлять
00:11:41ошибки. И вам, скорее всего, потребуется много изменений, так как цвета кнопок часто подбираются неверно.
00:11:46Некоторые кнопки должны привлекать внимание и выделяться ярким цветом, так что вы можете попросить
00:11:50исправить это. И поскольку сайт строится на основе каркаса, он получается немного пустым
00:11:55само по себе, содержащим лишь базовые детали поверх грубого эскиза, поэтому вы можете попросить добавить текстуры
00:12:00и элементы для более законченного вида. Правки можно вносить прямо в дизайн, так что при наличии мелкого
00:12:05изменения, например удаления какого-то элемента, вы можете сделать это прямо в макете, не отправляя запрос Claude.
00:12:10Таким образом, изменение применяется без ожидания и траты токенов на столь мелкую задачу.
00:12:15А когда вы закончите с правками, вы можете попросить Claude Design улучшить общий вид,
00:12:20и он внесет тонкие, но значимые изменения в дизайн. Итак, первая версия приложения
00:12:25готова, но кое-чего не хватает, а именно анимаций. Они важны, поскольку
00:12:29делают использование сайта более приятным и направляют взгляд на то, что действительно важно. Такие вещи, как появление
00:12:35при прокрутке или другие мелкие штрихи, делают сайт более живым. Поэтому мы дали Claude Design
00:12:40запрос добавить анимации на все экраны — например, элементы, появляющиеся при прокрутке, или другие штрихи,
00:12:45оживляющие сайт. При этом мы попросили сделать их ненавязчивыми и не переусердствовать с пружинящими
00:12:50эффектами, так как это может выглядеть странно. После завершения работы Claude Design стали заметны анимации
00:12:55прокрутки и всплывающего текста, из-за чего весь сайт стал гораздо интерактивнее. Когда вас
00:13:00устроит дизайн, можно переходить к следующему этапу — передаче в разработку. Дизайн в Claude
00:13:05Design теперь полностью утвержден, и пора вдохнуть в него жизнь, превратив в реальный продукт,
00:13:10который мы в итоге и выпустим. Раньше в Claude Design этого не было, но теперь можно экспортировать дизайн
00:13:15напрямую в Claude Code. Для этого используется MCP Claude Design, который позволяет Claude Design и
00:13:21Claude Code взаимодействовать друг с другом. И это работает в обе стороны. Вы можете переносить
00:13:26дизайны из Claude Design в Claude Code и точно так же возвращать их обратно. Вы снова открываете Claude
00:13:31Code и вставляете промпт, полученный из Claude Design. Сначала он считывает метаданные,
00:13:36то есть сводную информацию о дизайне, а затем выводит список проектных файлов. Сначала считывается дизайн-система,
00:13:42поскольку в ней определен сам стиль, а затем по очереди считываются все элементы.
00:13:47Получив полный дизайн, инструмент воссоздает его в вашем проекте со всеми анимациями из Claude Design.
00:13:52Однако эту конвертацию стоило перепроверить, чтобы убедиться в ее правильности. Визуально
00:13:57все выглядело отлично, но при превращении “ сырого “ кода из Claude Design в реальное приложение
00:14:02могли возникнуть внутренние проблемы. Поэтому мы запросили глубокий анализ, и он начал сверять design.md
00:14:08с тем, что было фактически построено, чтобы проверить их соответствие. Эта проверка выявила множество проблем,
00:14:12таких как проблемы с адаптивностью — это значит, что приложение некорректно отображалось на различных экранах,
00:14:17например на телефонах или планшетах. То, что создает Claude Design, часто страдает этой проблемой,
00:14:22поскольку это все еще ранняя версия, и создаваемый дизайн лучше всего подходит именно под целевое устройство. Макет,
00:14:27созданный для сайта, отлично смотрится там, но не всегда подходит для других размеров экранов, поэтому мы применили исправления,
00:14:32и после этого визуальная часть приложения заработала и стала адаптивной. Теперь для завершения работы
00:14:36над приложением и обеспечения его работоспособности нам нужно было подключить его к базе данных.
00:14:41Проблема на данный момент заключается в том, что хотя приложение полностью функционально, и при клике на кнопки все работает и добавляются
00:14:46детали нового проекта, при повторном открытии приложения весь достигнутый в нем прогресс
00:14:51будет утерян. Именно поэтому нам необходима база данных, чтобы все эти данные сохранялись внутри приложения, и пользователи могли
00:14:57им полноценно пользоваться. Для этого мы использовали Supabase. Это один из самых популярных бэкенд-провайдеров,
00:15:02а также один из лучших способов управления пользователями и всеми данными. Supabase для нас не новшество. Мы используем его
00:15:08почти в каждом создаваемом приложении независимо от заказчика, и даже многие наши внутренние инструменты
00:15:12работают полностью на нем. Все потому, что он избавляет нас от львиной доли рутинной работы,
00:15:17которую иначе пришлось бы делать самим. Это еще и одна из самых широко используемых баз данных благодаря простоте
00:15:22интеграции с ИИ-агентами, такими как Claude Code. У Supabase также есть агентский навык, который содержит
00:15:28инструкции, скрипты и ресурсы для более надежной работы агента с Supabase. Благодаря этому
00:15:33он знает все необходимое для максимальной эффективности инструментов Supabase. Чтобы установить его, вы просто копируете
00:15:39команду установки и передаете ее агенту; этот пакет содержит два навыка. Первый — это
00:15:43навык Supabase, представляющий собой руководство по использованию, а второй — навык рекомендаций по оптимизации,
00:15:48содержащий лучшие способы повышения производительности приложения. После завершения установки
00:15:53в вашем проекте появятся оба новых навыка. Навык Supabase активируется при любых
00:15:58задачах с базой данных или входом в систему, а навык рекомендаций срабатывает, если вы хотите, чтобы Claude Code ускорил
00:16:04приложение, упомянув в промпте слова “оптимизировать производительность”. Все это
00:16:08подкреплено огромной библиотекой справочных материалов по всевозможным проблемам. После установки этих навыков
00:16:13вы можете дать Claude Code задачу создать бэкенд и связать с ним существующий дизайн,
00:16:18чтобы все приложение наконец заработало. Поскольку мы не хотели, чтобы агент самостоятельно занимался структурой
00:16:22организации данных приложения, мы заранее подготовили ее сами и добавили в главную папку
00:16:27проекта. Поскольку навык представляет собой лишь набор инструкций, он не может получить доступ к вашему проекту
00:16:32на серверах Supabase и вносить там изменения. Это просто текст, указывающий агенту, что делать,
00:16:36поэтому он не содержит инструментов для работы с внешними по отношению к агенту объектами. Именно поэтому навык Supabase
00:16:41предлагает подключить либо их CLI (инструмент командной строки),
00:16:46либо MCP. Каждый из них дает агенту инструменты для прямой работы с вашим проектом Supabase,
00:16:51избавляя вас от ручной работы. Мы выбрали MCP, так как его проще настроить,
00:16:56и не придется возиться с ключами для входа в учетную запись через CLI. Для подключения
00:17:01нужно зайти на их официальный сайт, скопировать команду установки для используемого агента
00:17:05и выполнить ее в терминале, открытом в папке проекта. После этого введите команду /mcp
00:17:10внутри Claude Code, и вы увидите, что он подключен, но сразу использовать его не получится, поскольку
00:17:15не выполнен вход. Выбрав аутентификацию, вы будете перенаправлены в браузер для входа в систему,
00:17:20после чего MCP установит соединение. Как только MCP подключен, Claude Code загружает навык
00:17:25и приступает к работе над приложением. Он внес множество изменений и протестировал запросы к базе данных,
00:17:30чтобы создать наилучшую версию. Он также позаботился о защите всех областей,
00:17:34доступных не каждому пользователю, благодаря рекомендациям из этого навыка. И вот так
00:17:39Supabase полностью берет на себя весь бэкенд с помощью этого навыка. Теперь все приложение собрано
00:17:44и реально работает. Остался всего один шаг — деплой, то есть размещение в сети,
00:17:49чтобы им мог воспользоваться любой желающий. Но мы не будем останавливаться на этом здесь, так что следите за
00:17:53новыми видео, где мы разберем это подробно. Предоставленный нами навык на самом деле является частью более крупной
00:17:59дизайн-системы, которую мы используем в наших внутренних проектах. Если вы хотите получить к ней доступ,
00:18:04вы можете найти ее в нашем сообществе AI Labs Pro. Там же вы найдете
00:18:08другие навыки и ресурсы, показываемые в наших видео, а также место для общения с нашей
00:18:14командой. Так что если вы нашли пользу в нашей работе и хотите поддержать канал, это лучший способ
00:18:18сделать это. Ссылка находится в описании. На этом наше видео подходит к концу. Если вы хотите поддержать
00:18:23канал и помочь нам продолжать создавать подобные видео, вы можете воспользоваться кнопкой суперспасибо
00:18:28внизу. Как всегда, спасибо за просмотр, и до встречи в следующем выпуске.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video