Skip to content

ОБНОВЛЕНИЕ Claude УБИЛО шаблонный дизайн

Обновление Claude Design превратило его в мощный инструмент для создания дизайн-систем, лендингов и презентаций, заменяя Фигма и Канва.

Key Takeaways

  • Claude Design теперь интегрирован с Claude Code, что упрощает рабочий процесс.
  • Обновление превращает Claude Design в универсальный инструмент для дизайна и прототипирования.
  • Автоматическая проверка дизайн-системы помогает избежать ошибок и улучшить качество.
  • Инструмент заменяет традиционные решения, такие как Фигма и Канва.
  • Работа с дизайн-системами и брендбуками стала проще и доступнее для команд.

What the video covers

  • Claude Design получил крупное обновление за последние 30 дней, значительно расширив функционал.
  • Новый Claude Design интегрируется с Claude Code, позволяя напрямую синхронизировать дизайн и код.
  • Теперь можно создавать и редактировать дизайн-системы, лендинги, презентации и документы в одном инструменте.
  • Команда Design Syn автоматически проверяет и исправляет баги в дизайн-системах перед загрузкой.
  • Инструмент позволяет экономить время, создавая элементы дизайна по текстовому описанию с учётом фирменного стиля.
  • Claude Design подходит для системной работы с брендингом и UI, что важно для крупных компаний.
  • Обновление устраняет необходимость в использовании нескольких инструментов, таких как Фигма и Канва.
  • Пользователь может легко делиться доступом и редактировать дизайн совместно с командой.
  • Интерфейс позволяет создавать прототипы, вайрфреймы и анимации в едином стиле.
  • Обновление делает Claude Design удобным и мощным решением для дизайнеров и разработчиков.

Chapters

  1. 00:00Введение и обзор обновления Claude Design
  2. 01:02Как раньше работал Claude Design и проблемы интеграции
  3. 01:52Пример проекта и использование UI kit
  4. 02:53Запуск команды Design Syn и её возможности
  5. 03:52Проверка и исправление багов дизайн-системы
  6. 04:50Преимущества нового Cloud Design и создание страниц
  7. 05:53Создание Instagram-карусели с помощью Claude Design
  8. 07:05Системная работа с брендингом и дизайн-материалами
  9. 08:07Редактирование дизайн-системы и совместная работа
  10. 09:03Заключение и сравнение с другими инструментами

Answers

Questions about this video

Что нового в последнем обновлении Claude Design?

Обновление добавило интеграцию с Claude Code, возможность создавать и синхронизировать дизайн-системы, лендинги и презентации в одном инструменте, а также автоматическую проверку багов.

Как команда Design Syn помогает в работе с дизайном?

Команда Design Syn автоматически переносит дизайн из Claude Code в Claude Design, проверяет дизайн-систему на баги и оптимизирует проект перед загрузкой.

Может ли Claude Design заменить Фигма и Канва?

Да, благодаря обновлению Claude Design стал универсальным инструментом, который позволяет создавать дизайн-системы, лендинги и презентации, что делает использование Фигмы и Канвы необязательным.

Full Transcript — Download SRT & Markdown

00:00
Speaker A
Вот что интересно. В последние 30 дней Клод Дизайн не просто обновился, а действительно стал убийцей Фигма, Канва и других дизайн-систем. Но почему-то об этом никто не рассказывает. Мы знаем Клод Дизайн таким, как он вышел 3 месяца назад. Но правда в том, что это
00:14
Speaker A
совершенно другой инструмент. Сегодня он заменяет конструктор лендингов, создание презентаций, создание документов и любые дизайн-задачи. В этом видео я закрою ту самую несправедливость и расскажу тебе о самых важных преимуществах, которые на сегодняшний день в ClD использует только 1% людей. Благодаря этим преимуществам
00:33
Speaker A
ты сможешь избавиться от нейролопа в своём дизайне, создавать лендинги, слово в конструкторе буквально за несколько часов и поймёшь, как делать классные презентации. Меня зовут Рома Райд, ты на канале Нейропросвещение. Давай начинать.
00:48
Speaker A
Последнее обновление, которое сделало так, что теперь Clodдий и Clot код — это буквально одно и то же. Clдизаign может коннектиться с MCP серверами. Можно сказать о том, что: "А вот у меня лендинг в моём САAS, загрузи-ты его, пожалуйста, ко мне в Clддизаign, я его
01:02
Speaker A
подредактирую и отправлю тебе назад". Вот про это почему-то никто не рассказывает. Первое, что нужно понимать — это как раньше работал Clдизайн. Я создавал какой-то дизайн у себя, потом его скачивал, отправлял в Clд-код как промт, и он его уже адаптировал. В этом
01:16
Speaker A
была большая проблема. У меня есть кит, который просто не учитывался. Мне нужно было создать вначале в Clклодизайн, потом перенести руками в Clклодкод через архив, потом назад. В итоге получалось так себе. Сейчас же я буквально могу взять мой Vipeкод проект, попросить
01:30
Speaker A
ClД-код через специальную команду отправить в Cloudдизаign данные и все мои компоненты, весь мой UI kit закинуть непосредственно в приложении. И здесь давай посмотрим на пример реального проекта. У меня есть вот такой вот MVP продукта, который должен создавать аналитику для блогеров. Пока что ещё
01:47
Speaker A
руки не доходят его до дела до конца, но Zero MVP мы сделали и даже там первые несколько сотен пользователей набрали.
01:52
Speaker A
Так вот, в этом проекте у меня есть UI kit, который был создан именно с помощью код-кода. Но, допустим, сейчас я хочу создать какую-то страницу приложения, неважно, или же в том числе изменить мой текущий лендинг. Раньше мне пришлось бы
02:05
Speaker A
либо скринами переносить, либо ещё как-то. Сейчас же мне буквально нужно ввести команду дизайн Syn. Нажимаем на неё, и происходит магия. Одной этой команды будет достаточно для того, чтобы перенести то, что мне нужно из Клод-кода в Clддизайн. Создать дизайн-систему,
02:24
Speaker A
которую я сейчас вам покажу, или же в том числе править лендинг. Но давай сейчас посмотрим, что же он сделает здесь. Он предлагает авторизоваться. Нам нужно будет дать доступ. И после чего выбираем, что именно мы будем использовать. Давай мы возьмём всё. В
02:38
Speaker A
итоге, спустя вот такое время, у нас готов ответ от кода. Здесь мы видим, что он собрал изначально всю библиотеку локально и готов воспроизводить дизайн SN. Он показывает мне саму библиотеку. И по моему опыту, создание такого UI — это
02:53
Speaker A
буквально самое важное, что ты должен сделать ещё на старте, потому что потом весь generated вычищать, ну, просто невозможно. Я об этом писал в своём Telegram-канале буквально недавно. Здесь же он говорит нам следующее. Нам нужно открыть Клод-код в терминале и выполнить
03:08
Speaker A
дизайн login. Для этого я использую весь код, поэтому перейду в терминал прямо тут напишу. Он у нас спрашивает разрешение на подключение. И после чего через слэш давайте наберём дизайн. И дальше он говорит нам сам, что нам нужно выполнить вход. Я бы попросил его: "А
03:24
Speaker A
можешь самостоятельно выполнить вход? Открой мне просто браузерное окно, которое это сделать для того, чтобы нам не возиться с терминалом." И мы видим, что он и сам понял, что у меня уже всё нормально войдено. И по сути сейчас он
03:36
Speaker A
должен просто продолжить и закинуть вот этот вот макет непосредственно нам в Clддизайн. Да, вот он подписывает. Здесь у нас остаётся только название нашего проекта. Выбираем его. Это то, что создаётся в Кддизайне, да, когда ты создаёшь дизайн-систему и после чего он
03:52
Speaker A
начинает саму загрузку. При том, что пока он это делает, нужно уточнить одну важную вещь. Вот у нас-то заняло больше часа по простой причине. Команда Design Syn работает не только на создание дизайн-системы, которую ты видишь в правой стороне экрана, но в том числе
04:07
Speaker A
эта команда находит все баги твоей дизайн-системы, что у тебя там где-то кнопки разного размера, где-то у тебя тени хаотично разбросаны. То есть она проверяет перед тем, как отправить к лод дизайну данный проект, весь твой дизайн наличие вот таких вот UIX багов. То
04:23
Speaker A
есть, когда у тебя дизайн просто сделан бык, да, у тебя ещё в придаче, если нету вообще никакого йокита, потому что здесь-то он был в самом начале, то тогда и вовсе он его с нуля создаёт, и это ему ещё сложнее, но это и помогает твой
04:35
Speaker A
проект оптимизировать. При этом также стоит уточнить, что если у тебя изначально не было крутого референса, то есть, и если у тебя изначально дизайн выглядит как и, то, ну, понятное дело, что он таким его и загрузит в Clклоддизайн, просто сделает это как
04:50
Speaker A
консистентную дизайн-систему, которую ты можешь использовать для дальнейшего прототипирования и разработки твоих страниц. Он обновил это и добавил в сам Клод Дизайн. Давай перейдём и, наконец-то, поймём вот это вот самое преимущество, которое теперь разрывает голову. Новый Дизайнign Cloudдизаign мы
05:06
Speaker A
сейчас ещё обсудим. Но теперь у нас здесь есть дизайн-система атрибуто UI kit. И благодаря тому, что мы это сделали, мы можем создавать новые страницы: прототипы, вайрфреймы, документы, даже анимацию. И всё это будет в единой стилистике, как и наш
05:23
Speaker A
сайт. Давай мы попробуем, что же это в итоге значит на примере довольно простой вещи. Допустим, я хочу создать пост-карусель, который пригласит новых пользователей попробовать нашим VP. Для этого я ему скажу: "Создай для меня пост-карусель по тексту, который я тебе
05:37
Speaker A
прикреплю". Вставляю сюда сам текст и после чего отправляю. Теперь код дизайн спрашивает у нас то, какой должна быть эта самая карусель. То есть он не просто делает, как, допустим, сделал бы Клодкод, а он спрашивает у нас: "О'кей, у нас Instagram портрет, нам нужно с
05:53
Speaker A
вами, допустим, пять кадров. Мы можем прямо перетаскивать вот так вот. Главная цель поста, а, перевести на атрибутор, как в оригинальной личный разговорной, чуть строже продуктовый. Обложка крупный хук. Пускай будет финальный призыв подтестить атрибуты. Дальше будут ли реальные картинки? Ну, давай сейчас не
06:12
Speaker A
будем их добавлять, нажмём продолжить. Тем самым мы можем экономить время на создание дизайна, потому что он сам учитывает даже такие вещи. И вот, пожалуйста, у нас готовая Instagram-карусель, которая абсолютно в наших цветах, в нашем дизайне, с нашим фирменным фоном. И казалось бы, тут
06:30
Speaker A
стоит сказать, что мы же создаём это как будто бы только для того, чтобы создавать классные сайты. Но нет, в том-то и дело, что это обновление Клод Дизайна помогает тебе работать именно системно с этим дизайном. То, как обычно делается в любой крупной компании, есть
06:48
Speaker A
брендбук. Поэтому брендбуку и UI создаются продукты, создаются дизайн-материалы, рекламные материалы и так далее. И так как большинство вайпкодеров сегодня не те, у кого был опыт, да, создания чего-то подобного, это не всегда было логично людям. Мы, например, такое создаём давно и без
07:05
Speaker A
Клоддизайна. Но это делают не все, и порог входа был сложнее. А теперь мы видим, что он спокойно создаёт то, что нам нужно. И дальше в этой же дизайн-системе, когда мы с вами перейдём, мы можем редактировать это, дорабатывать так, как мы хотим. Для
07:21
Speaker A
этого нужно зайти в дизайн-систему. Вот он наш атрибутор. Нажимаем редактировать. Мы можем давать доступ нашей команде, в том числе. И здесь, чтобы вы понимали, сколько всего он создал, давайте нажмём опубликовать. У нас есть правила дизайна в текстовом виде. Есть тот самый дизайн, который мы
07:38
Speaker A
только что видели. Он уже всё причесал, да? То есть вот у нас, пожалуйста, все эти компоненты, они готовы, работают тумблеры, как хотим. Тут у н
07:52
Speaker A
главное, теперь, если я хочу что-то поменять, я могу сделать это, в том числе, нажав на кнопку дит и через комментарии дать Клоду задачу исправить это и доработать. Опять же, раньше через код-код это было сложнее, но это один из
08:07
Speaker A
этапов. Создание дизайн-системы невероятно важно, но что ещё с этим обновлением открывается в clД? И ты не поверишь, это буквально замена Фигма, Тильда и всему остальному, потому что то, что они сделали для загрузки сайтов, просто невероятно. Покажу на примере
08:23
Speaker A
своей реальной задачи. Как вы знаете, у меня есть вот такой вот продукт PI. Это уже довольно крупный САЗ. Я его разрабатываю последние 3 месяца. Его MMR больше 10.000 долларов без всяких тамсторов и так далее. И вот я делал
08:36
Speaker A
самое крупное обновление этого сайта со времён того, как я его создал. Мне нужно было переделать вот эти вот блоки. Мне нужно было здесь плитки обновить, потому что добавились новые функции, обновить тексты и так далее. И раньше это занимало огромное количество времени на
08:51
Speaker A
создание с клод-кодом. То, что думаешь, как с клод-кодом реализуется подобный лендинг? Ну, у меня есть дизайн Фигма. И дальше я ему буквально на каждый текст даю правку. И там 10 пикселей туда подвину, 10 туда, 10 сюда. Это не вал.
09:03
Speaker A
Поэтому давайте зайдём на мой основной аккаунт и посмотрим тот самый usюеркейс. Итак, через ту же самую команду Design Syn я перенёс сюда целый лендинг. Вот он у меня. Ты можешь увидеть. И да, это вообще легко сделать. Получается, как в
09:16
Speaker A
Тильде, я вот здесь вот где-то прикреплю вам, а есть блоки готовые. Я то же самое сделал с нашим лендингом. Один раз я за него заплатил дизайнеру, после чего перенёс сюда. У меня здесь целиком эта страничка и все блоки по отдельности,
09:29
Speaker A
как такой шаблон, которым я могу пользоваться. Мы можем это увидеть тут по каждой страничке она достаточно того будет прогружать. Вот они. Да. Всё, что мне нужно есть именно здесь. Что я делаю дальше? По сути, я вам буквально говорю,
09:43
Speaker A
вот у нас отправляю скриншот, говорю, подумай, как можно улучшить визуал. И потом мы вместе с ним вот в таком вот виде вы можете на паузу поставить, посмотреть. Дорабатываю и это подменём.
09:54
Speaker A
Мы же можем ещё менять это через, то есть тут добавились все необходимые функции, что я могу, допустим, вот здесь взять и добавить новый текст. и что-то тут написать, допустим, давай напишем: "Привет", нажмём "Сохранить". И вообще, стоит помнить, что мы же вот здесь можем
10:07
Speaker A
выбирать конкретный элемент. Мы видим, что здесь у нас а добавился там контент сзади, который я сейчас только что пробовал добавить. Мы видим, что у нас есть комментарии, которые я могу оставлять. И самое главное, я могу сразу же проверять результат. Если я захочу
10:21
Speaker A
что-то поменять, то мне достаточно это выбрать и поменять. Соответственно, я могу что-то удалить, что-то выделить, исправить, где-то добавить новый фрейм, да, в котором я буду что-то создавать.
10:31
Speaker A
То есть это буквально новая Фигма, которая работает как тут, так и в приложении и позволяет тебе создавать такие лендинги без дизайнера. Или один раз отдал дизайнеру, он тебе сделал UI kit, а после чего у тебя уже клод за
10:45
Speaker A
тебя делает дизайн, уровень дизайнера, потому что у него есть базовые правила. И вот это как раз-таки и есть то обновление, которое все почему-то пропустили. Но теперь мы вернёмся в само приложение ClД. Ведь cloudдизаign теперь живёт, в том числе и здесь, в отдельном
10:59
Speaker A
окне. Признаюсь, это браузером при пользоваться, но здесь тоже возможно. Что мы имеем на выходе? Во-первых, добавлены анимация, презентации, которые может делать анимированные красивые, вот пример из нашего одного из видео, документы, которые вы можете генерить. И тем самым, допустим, как я готовлюсь
11:16
Speaker A
встрече с учениками, которые у нас на курс, я прямо беру и создаю для себя вот такие вот лонгриды, которые мы на созвоне разбираем с учениками. Вот в таком красивом формате я по каждому вижу отчёт перед созвоном. Ты можешь делать
11:28
Speaker A
то же самое, допустим, для своих встреч с клиентами или с партнёрами для того, чтобы тебе была подготовлена твоя встреча. В итоге колодзайн на сегодня, на мой личный взгляд, для меня лично убил Фигма целиком. У меня 3 месяца назад в видео было о том, что Клод убил
11:43
Speaker A
Фигма, но там было много но. Сегодня этих но нет. Я больше не использую Фигма вообще, как и я больше не использую ни один инструмент дизайна, кроме клоддизайн, потому что я не вижу в этом смысла. Презентации он делает лучше, чем
11:56
Speaker A
гамма. Я забыл, когда я пользовался гаммой. Карусель он делает тоже неплохо. Быстрее, чем сделать это в любом приложении. Нужен мне Long Нгрид, так это тоже сюда, как и UI Kit. И я не вижу здесь ни одной причины, почему сегодня я
12:09
Speaker A
должен пользоваться каким-то другим инструментом дизайн. для ресторо графики может быть, но это не про создание продуктов, поэтому обязательно сегодня перейдите в код дизайн и попробуйте его на максимум. Последнее видео доступно здесь по подсказке на экране. Увидимся.
12:22
Speaker A
M.
Topics:Claude Designобновлениедизайн-системалендингпрезентацияUI kitинтеграцияClaude Codeпрототипированиенейропросвещение

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

App Store Google Play
Or transcribe another YouTube video here →

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

More from Нейропросвещение

View All
Вайб-кодинг принёс мне 1 000 000 ₽. Вот ВСЯ механика в … — Transcript9:16
Вайб-кодинг принёс мне 1 000 000 ₽. Вот ВСЯ механика в … — Transcript
2,444 1 Russian
Хватит платить за Claude Cowork — OpenAI сделала это БЕ… — Transcript15:35
Хватит платить за Claude Cowork — OpenAI сделала это БЕ… — Transcript
2,658 1 Russian
Дашборд поверх Claude за ОДИН вечер. Как собрать Agenti… — Transcript10:29
Дашборд поверх Claude за ОДИН вечер. Как собрать Agenti… — Transcript
1,812 1 Russian
Хватит ПАЛИТЬ токены: /graphify решает главную проблемы… — Transcript13:46
Хватит ПАЛИТЬ токены: /graphify решает главную проблемы… — Transcript
2,347 1 Russian
Ты используешь Claude Code НЕПРАВИЛЬНО. Все команды от … — Transcript25:35
Ты используешь Claude Code НЕПРАВИЛЬНО. Все команды от … — Transcript
5,606 1 Russian
Claude Code постоянно тебе ВРЁТ. Эти 5 репозиториев его… — Transcript9:01
Claude Code постоянно тебе ВРЁТ. Эти 5 репозиториев его… — Transcript
1,457 1 Russian
Claude — это уже НЕ ЧАТ. 6 режимов уничтожающих Gemini … — Transcript21:40
Claude — это уже НЕ ЧАТ. 6 режимов уничтожающих Gemini … — Transcript
3,733 1 Russian
Твоя SaaS-идея МЕРТВА. Как найти боль, за которую платят — Transcript33:51
Твоя SaaS-идея МЕРТВА. Как найти боль, за которую платят — Transcript
6,426 1 Russian
Claude + NotebookLM + Obsidian: секретная связка — Transcript24:31
Claude + NotebookLM + Obsidian: секретная связка — Transcript
3,536 1 Russian
ОТДАЮ СУПЕР СХЕМУ ЗАРАБОТКА НА ПАРТНЕРКАХ! ЗАБИРАЙТЕ! — Transcript8:35
ОТДАЮ СУПЕР СХЕМУ ЗАРАБОТКА НА ПАРТНЕРКАХ! ЗАБИРАЙТЕ! — Transcript
337 1 Russian
Если вы амбициозны, но ленивы, посмотрите этот урок от … — Transcript10:11
Если вы амбициозны, но ленивы, посмотрите этот урок от … — Transcript
1,538 1 Russian
Почему «настоящий ислам» — удобная выдумка — Transcript45:48
Почему «настоящий ислам» — удобная выдумка — Transcript
6,101 1 Russian