**ОБНОВЛЕНИЕ Claude УБИЛО шаблонный дизайн — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/update-claude-killed-template-design/

Обновление 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 прототипирование нейропросвещение

Учить по этому видео

- [Карточки по этому видео](https://sozai.app/ru/tools/ai-flashcard-generator/?from=transcript&id=61057)
- [Тест по этому видео](https://sozai.app/ru/tools/quiz-generator/?from=transcript&id=61057)

Бесплатно, составлено ИИ по этой расшифровке. Без регистрации.


---
This is the markdown twin of https://sozai.app/transcript/update-claude-killed-template-design/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/