Speaker A
Если вы уже начинали веб-кодить,
Видео показывает, как с помощью Claude Cowork создавать красивые, уникальные дизайны сайтов без дизайнера, используя AI для прототипирования и редизайна.
Key Takeaways
- Claude Cowork позволяет создавать и редизайнить сайты с помощью AI без глубоких знаний дизайна.
- AI может генерировать несколько вариантов прототипов, из которых можно выбрать лучший для внедрения.
- Важна адаптация AI-дизайна под текущий контент и стиль сайта для более органичного результата.
- Добавление анимаций и деталей помогает сделать дизайн менее «искусственным» и более живым.
- Использование AI-инструментов экономит время и ресурсы, позволяя создавать качественные сайты самостоятельно.
Summary
- Автор делится опытом создания уникальных веб-дизайнов с помощью AI-инструмента Claude Cowork.
- Показывается процесс генерации нескольких прототипов сайта на основе описания и текущего дизайна.
- Объясняется, как Claude Cowork монтирует проектную папку и работает с фронтенд-дизайном.
- Демонстрируется выбор и внедрение одного из прототипов в Ruby on Rails проект.
- Рассматривается добавление визуальных анимаций с помощью AI, чтобы дизайн выглядел более живым и человечным.
- Обсуждается отличие Claude Cowork от Claude Code в работе с интерфейсами и дизайном.
- Автор опровергает мнение, что для красивого дизайна обязательно нужен дизайнер.
- Показан пример эволюции дизайна сайта с использованием AI, а не простого копирования шаблонов.
- Видео содержит практические советы по работе с AI для создания и улучшения веб-интерфейсов.
- Подчеркивается важность кастомизации и адаптации AI-генерируемого дизайна под бренд и задачи.
Full Transcript — Download SRT & Markdown
Speaker A
и у вас получались первые сайты, наверняка вы замечали, что дизайны какие-то очень похожие.
Speaker A
Вот, ну, чаще всего вообще вот такие вот, один из первых моих сайтов с прошлого года.
Speaker A
Они получаются какие-то одинаковые.
Speaker A
И ещё там очень много палится AI.
Speaker A
Ну и как-то недорого, небогато это не выглядит.
Speaker A
Ну, например, так, вот вот этот блок сравнения у меня,
Speaker A
ну, это прямо AI-ем пахнет отсюда, да?
Speaker A
Вот это вот явно как-то.
Speaker A
Ну, вот это что-то не очень интересно нарисовано.
Speaker A
Но я нашёл
Speaker A
ещё более простой способ.
Speaker A
Началось с того, что мы нашли клодовский скилл на фронтенд-дизайн.
Speaker A
И у нас вот такой уже, ну, поинтереснее начало получаться.
Speaker A
Наш сайт VibeBase, где лежит этот Claude Skill.
Speaker A
Он уже Claude Skill-ом фронтенд-дизайна сделал.
Speaker A
В этом мы где-то писали, вот фронтенд, заходим на VibeBase.
Speaker A
Фронтенд-дизайн находим.
Speaker A
И копируем этот промт, или просто копируем, или скачиваем Markdown.
Speaker A
И вставляем в свой проект.
Speaker A
Однако, есть ещё более элегантный способ.
Speaker A
И вот смотрите, как я покажу, как я превратил вот это
Speaker A
вот это.
Speaker A
Вот это.
Speaker A
Или даже вот это.
Speaker A
Ну, то есть выглядит намного более дорого, богаче.
Speaker A
И, ну, посерьёзнее.
Speaker A
И нас кто-то в Ютубе стебал.
Speaker A
Наймите дизайнера.
Speaker A
Ну, не знаю.
Speaker A
Я считаю, что можно уже красиво делать самому.
Speaker A
И в этом видео я покажу, как сделать достаточно просто
Speaker A
очень необычный, самобытный, красивый описательный дизайн.
Speaker A
Простыми шагами.
Speaker A
Поехали.
Speaker A
А, кстати, я покажу ещё дальнейший редизайн.
Speaker A
Вот.
Speaker A
Покрасивше сделал.
Speaker A
Всё, всё летает, красиво.
Speaker A
Элегантно.
Speaker A
А, ну, весь продукт, короче.
Speaker A
Поиски там, Димит.
Speaker A
Всё красиво.
Speaker A
Поехали.
Speaker A
Для этого нам нужен Claude Cowork.
Speaker A
Оказалось,
Speaker A
что в Claude Cowork-е лучше, чем в Claude Code, получается именно работа с интерфейсами, с дизайнами.
Speaker A
Я до конца не понимаю, почему.
Speaker A
А, но работа намного более приятная.
Speaker A
Для того, чтобы начать, давайте я
Speaker A
вот этот сайт своей компании сделаю полный редизайн с нуля.
Speaker A
Это будет смертельный номер.
Speaker A
А.
Speaker A
Поехали, попробуем.
Speaker A
Это мой Ruby on Rails проект.
Speaker A
Значит, мы открываем Claude в режиме Cowork-а.
Speaker A
Нам нужно подключить папку нашего проекта.
Speaker A
Ну, давайте я подключу, это у меня Nocodo, кажется, называется.
Speaker A
Вот.
Speaker A
Мы подключили.
Speaker A
А, Always Allow.
Speaker A
Что происходит?
Speaker A
А, это Claude Cowork, это, точнее, Open Claude, вот Claude Bot, может, слышали.
Speaker A
Это немножко такая, похожая версия на Claude Code.
Speaker A
Почему? Потому что Claude Cowork, он вот эту папку, которую я добавил, он примонтировал её.
Speaker A
То есть он имеет полный доступ к моей папке, но не к остальному компьютеру.
Speaker A
И вот я говорю, а, Make me four different prototypes for my website design.
Speaker A
I want them to reflect what my company is as a technology services provider and SaaS builder
Speaker A
as well as consultancy agency.
Speaker A
Ну, вот поехали.
Speaker A
Замутим.
Speaker A
Вот так вот.
Speaker A
Что он выдаст?
Speaker A
Он сначала не кодит у вас прямо, ну, не меняет HTML-вьюхи в самом проекте.
Speaker A
Он сначала прототипирует и даст нам HTML-ки, которые
Speaker A
можно открыть прямо здесь в Claude Cowork-е, посмотреть, выбрать.
Speaker A
И уже попросить имплементацию, разработку этого в своём продукте.
Speaker A
И можно попросить дальнейший редизайн.
Speaker A
Вот Claude Cowork мне спрашивает.
Speaker A
Ты что
Speaker A
хочешь? Ну, я не знаю, кстати.
Speaker A
Tech-forward, современный, минимальный.
Speaker A
Tech-forward, футуристичный дизайн.
Speaker A
Ну, я даже не знаю.
Speaker A
Корпоративный и профессиональный.
Speaker A
Ну, я не люблю корпоративный.
Speaker A
Я хочу.
Speaker A
Давай, Bold and Dynamic.
Speaker A
Предложить цветовую гамму.
Speaker A
Кто Target Audience?
Speaker A
Это оба, короче.
Speaker A
Both equally.
Speaker A
Отлично, неплохо.
Speaker A
Да, кто-то скажет, в Claude Code нынче тоже анкетки появились.
Speaker A
Ну, ладно, хорошо, появились.
Speaker A
А, какое название твоей компании?
Speaker A
Моё название - это Nocodo LTD.
Speaker A
Я ввожу кастомно.
Speaker A
Он, походу, сам не догадался пока что.
Speaker A
Вот и посмотрим.
Speaker A
Он говорит, что сделает сейчас четыре прототипа.
Speaker A
Ну, как я и просил, кажется.
Speaker A
Да, четыре прототипа.
Speaker A
Подождём.
Speaker A
Видите, когда он кодит JSX.
Speaker A
Я не знаю, но это явно не Ruby on Rails.
Speaker A
Это что-то другое.
Speaker A
А, те, кто с этим форматом работают, закидывайте меня камнями.
Speaker A
Но не суть.
Speaker A
Они достаточно, главное, чтобы сделать кликабельный
Speaker A
просматриваемый прототип.
Speaker A
Потом оно уже конвертирует это на
Speaker A
на язык разметки моего Ruby on Rails, если вы используете другой фреймворк.
Speaker A
Ну, он на другой фреймворк вам это переведёт.
Speaker A
Подождём.
Speaker A
Итак, несколько минут спустя ожидания, Claude нам отчитался о проделанной работе.
Speaker A
Он создал нам четыре прототипа.
Speaker A
Ну, вот давайте, как я и сказал, он сначала кликабельными прототипами нам показывает.
Speaker A
Смотрим первый.
Speaker A
Что-то не открывается.
Speaker A
Ну-ка, второй.
Speaker A
Вот, второй нам сделали.
Speaker A
Но мне это не нравится.
Speaker A
Третий.
Speaker A
Четвёртый.
Speaker A
Ну, мне что-то я не впечатлён.
Speaker A
Но я специально так сделал, потому что, потому что вы также начнёте.
Speaker A
И чтобы вы не удивлялись.
Speaker A
Так как у меня уже текущий дизайн, я говорю, Wait, we already have current design schema with Tailwind
Speaker A
and existing design.
Speaker A
I want, я хочу новый дизайн.
Speaker A
I want new design based on my current landing page content.
Speaker A
И иду в работу.
Speaker A
Другими словами, на будущее, если мы в первом же промте намекнём ему, что, ну, вообще-то
Speaker A
я хотел бы эволюцию своей странички и использую контент этой странички.
Speaker A
Он бы сразу сделал.
Speaker A
Ну, вот мы увидели, как это работает, если неподготовленным начать.
Speaker A
Вот он теперь смотрит на текущий лендинг-пейдж, мою дизайн-систему.
Speaker A
Потому что мы её хотим улучшить.
Speaker A
Вот, видите, а, он пишет, у вас есть Rails-приложение с, ну, с неплохим дизайном в циане, морского цвета.
Speaker A
Давай я замучу четыре дизайн-прототипа, используя существующий контент, но со свежими лейаутами и визуальными подходами.
Speaker A
Ну, и ждём.
Speaker A
Итак, ещё несколько минут спустя, нам сделали очередные прототипы.
Speaker A
Открываем их теперь.
Speaker A
Ну, кстати, мне больше всего понравились
Speaker A
вот этот.
Speaker A
И вот этот.
Speaker A
А, я ему, шаг два, первичное внедрение.
Speaker A
Это какой?
Speaker A
Третий прототип.
Speaker A
I choose prototype number three, modify in Rails project my primary landing page with this design and layout.
Speaker A
Ну, первым шагом мы хотели бы, чтобы это всё изначально внедрилось.
Speaker A
После этого, шагом два, мы будем кое-что напильником допиливать.
Speaker A
Также в Claude Cowork-е, чтобы было, ну, ещё круче это выглядело.
Speaker A
Я в этом видео опущу вопросы, связанные, ну, что конкретно здесь писать.
Speaker A
Ну, я считаю, что глупо писать, ну, Claude, ладно.
Speaker A
То, что мы Solid Queue, Rails-ов используем, ну, это никому не интересно.
Speaker A
Hotwire там.
Speaker A
А, то, что где-то здесь было написано, а, ну, вот здесь вот две-три недели Production Ready Feature.
Speaker A
Это о'кей, там, в другой версии было 48 часов.
Speaker A
Ну, я для себя-то могу за 48 часов.
Speaker A
Но для клиентов, например, нет.
Speaker A
Подождём.
Speaker A
Итак, ещё пару минуток спустя.
Speaker A
Он уже внедрил это на основном лендинге.
Speaker A
И если я уже зайду на свой Localhost и перезагружу.
Speaker A
Вуаля.
Speaker A
Я вижу новый дизайн.
Speaker A
Ну.
Speaker A
Ну, вот это, конечно, too much.
Speaker A
Но если это фишка.
Speaker A
Если это фишка.
Speaker A
То о'кей.
Speaker A
Значит, что я ещё хотел бы?
Speaker A
Я хочу какую-то визуальную анимацию.
Speaker A
А, есть один из промтов, который я для себя открыл.
Speaker A
Это говорим.
Speaker A
Ну, вот этот блок называется обычно Hero Section, да?
Speaker A
Я ему говорю, In Hero Section for background come up with some cool animation.
Speaker A
И самое главное, я произношу следующее, что be a human designer.
Speaker A
So it doesn't look like AI with design taste.
Speaker A
Со вкусом.
Speaker A
Просто посмотрим, что оно вытворит.
Speaker A
Пока оно делает.
Speaker A
Можем посмотреть лог его мыслей.
Speaker A
Что он пишет, что пользователь хочет добавить крутую, стильную, ну, со вкусом фоновую анимацию.
Speaker A
Которая как будто сделана человеком, а не базовым AI-generated.
Speaker A
И какой подход можно, чтобы решить проблему?
Speaker A
Значит, избегать клише.
Speaker A
А, Subtle, ненавязчивый и с целью.
Speaker A
По бренду.
Speaker A
И вот у него внутренние, видите, инструкции.
Speaker A
И смотрим, что он из этого сделает.
Speaker A
А, он открывает.
Speaker A
Он думает идеи.
Speaker A
Что уже по вёрстке, по HTML-шаблону сделать в самом проекте.
Speaker A
Но теперь наш контекст.
Speaker A
Переписки закончился, он делает автокомпакт.
Speaker A
И мы ещё пару минуточек подождём.
Speaker A
Вот он, кстати.
Speaker A
Уже продолжает.
Speaker A
Смотрим, как он думает.
Speaker A
И я очень советую всем вчитываться, что он делает.
Speaker A
Открываем Show More.
Speaker A
И он говорит, он видит файл.
Speaker A
Видит, где секция начинается.
Speaker A
Видит, что какие-то анимации сделать.
Speaker A
Вот, добавит анимацию.
Speaker A
Что добавлено?
Speaker A
Так, что-то добавлено уже.
Speaker A
Открываем.
Speaker A
Рефрешим страничку.
Speaker A
А, ну, видите, вот эта линия, черта двигается.
Speaker A
Ну, оставим её.
Speaker A
Но таким образом можно какие-то визуализации продуктовые получить.
Speaker A
Это пример номер один.
Speaker A
Пример номер два.
Speaker A
А, проект, который только начался в разработке.
Speaker A
Это V0 для написания постов в Telegram.
Speaker A
В нём ещё дизайн, ну, видите, там не работали особо над ним.
Speaker A
И что, попробуем то же самое провернуть.
Speaker A
Но мы уже подготовлены.
Speaker A
Также в Claude Cowork-е мы создаём новый проект.
Speaker A
На этот раз добавляем проект, ну, с исходным кодом этим.
Speaker A
Я ему говорю.
Speaker A
А, дай мне три HTML-прототипа for our landing page, check current content with alternative design and look and feel matching what our product does.
Speaker A
Opus 4.5 включаем.
Speaker A
И ждём.
Speaker A
Вот пусть он проанализирует уже, как лендинг выглядит, какой на нём контент.
Speaker A
Мы сразу запросили HTML, чтобы это просто в Claude открылось.
Speaker A
И потом мы уже это внедрили с вами.
Speaker A
Подождём.
Speaker A
Пока читаем, что он нам показывает, он понял, о чём продукт.
Speaker A
Ну, я его тогда назвал Anton Writer.
Speaker A
В честь одного из учеников, которые у нас на Street MBA Vibe-программе этот проект делает.
Speaker A
И мы вот с нуля вместе на воркшопе его начинали делать.
Speaker A
Сделали.
Speaker A
Антон его у себя уже тоже почти доделал.
Speaker A
И я просто в честь учеников называю рабочие версии билды проектов.
Speaker A
Видите, что он показывает, что это AI-powered.
Speaker A
Контент-генерационный инструмент для LinkedIn и Telegram-креаторов, которые обучаются ихнему уникальному, ну, голосов.
Speaker A
Короче, лексикону.
Speaker A
А, чтобы сделать нативные посты.
Speaker A
Контент на русском.
Speaker A
Таргетинг Ghostwriter-ов, коучей и солопренёров.
Speaker A
Ну, о'кей.
Speaker A
Вот посмотрим, чтобы мы немножко за рамки текущего дизайна.
Speaker A
Который уже был внедрён в приложение.
Speaker A
Попробуем.
Speaker A
Вот он уже второй делает прототип.
Speaker A
Первый он уже нарисовал.
Speaker A
Второй.
Speaker A
Подождём ещё пару минуток и продолжим.
Speaker A
Кстати, пока он делает уже третий дизайн.
Speaker A
У нас справа есть папка артефактов, ну, то есть результатов труда.
Speaker A
И мы можем уже заранее первые два дизайна посмотреть.
Speaker A
Открываем первый дизайн.
Speaker A
И смотрим.
Speaker A
А, смотрите.
Speaker A
Вот.
Speaker A
Лепота.
Speaker A
Ну, кстати, он и пишет.
Speaker A
Если там Go to Mark, если нормально описать бизнес, он очень релевантно, хорошо писать стал.
Speaker A
А.
Speaker A
Всё, что нужно автору контента.
Speaker A
Раньше я тратил 3 часа на один пост.
Speaker A
С Антоном 20 минут.
Speaker A
И мой голос остаётся узнаваемым.
Speaker A
Знаете, это похоже на сайт Медузы, по-моему.
Speaker A
Этот дизайн назовём его Медуза.
Speaker A
Раз, два, да, неплохо.
Speaker A
Можно вот так закрыть.
Speaker A
Открываем второй дизайн.
Speaker A
Болдовый.
Speaker A
Контент на автопилоте.
Speaker A
Антон пишет.
Speaker A
Отличная идея.
Speaker A
Ну, этот какой-то попроще дизайн.
Speaker A
Но там, кстати, потенциал развития неплохой.
Speaker A
Пока что я склоняюсь к дизайну Медузы.
Speaker A
И посмотрим, что там с третьим будет.
Speaker A
Подождём ещё чуть-чуть.
Speaker A
Итак, третий дизайн готов.
Speaker A
Нажимаем на него.
Speaker A
Ну, мы можем здесь нажать.
Speaker A
Вот сейчас он покажет, чтобы уже богато.
Speaker A
Профессиональный дизайн.
Speaker A
Открываем.
Speaker A
Ну, это какой-то базовый.
Speaker A
Это какой-то базовый.
Speaker A
Ну, хорошо.
Speaker A
Давайте, значит.
Speaker A
Спасибо большое, я выбираю дизайн номер один.
Speaker A
Мне он понравился больше всего.
Speaker A
Попрошу тебя его внедрить в мой Rails-продукт.
Speaker A
И пусть он делает.
Speaker A
Но пока он будет делать, мы пользуемся этим свободным временем.
Speaker A
Для того, чтобы немножко подумать.
Speaker A
А, это, кстати, неплохо.
Speaker A
Но, допустим, я думаю добавить
Speaker A
что-то про боли и с анимацией, какую-то визуализацию.
Speaker A
Ну, допустим.
Speaker A
Ну, кстати, это очень хорошо, что он векторно нарисовал вполне приличненько и релевантно.
Speaker A
Здесь я бы.
Speaker A
Попросил его развить прямо превью, как это работает, показать.
Speaker A
А всё, что нужно автору контента, я придумал.
Speaker A
Не хватает некого конспекта про боли.
Speaker A
Какой-то, знаешь, который манифестирует проблему ещё больше.
Speaker A
И я отправляю.
Speaker A
Ну-ка, что тут?
Speaker A
Вот.
Speaker A
Кстати, это редкая ошибка случилась.
Speaker A
Ну, давайте сделаем continue тогда.
Speaker A
И вот эту задачку я добавлю в очередь.
Speaker A
Дальнейшие изменения, так как уже в продукте мы делаем.
Speaker A
Мы уже, конечно, не здесь смотрим.
Speaker A
А.
Speaker A
Пытаемся рефрешить.
Speaker A
Ну, вот, видите.
Speaker A
Уже наш сайт готов, завёрстан.
Speaker A
Неплохо.
Speaker A
Весьма неплохо, кстати.
Speaker A
Давайте затестим.
Speaker A
Мобильная версия.
Speaker A
Хорошо.
Speaker A
Прямо очень неплохо.
Speaker A
Вот, видите, он говорит, что завершил.
Speaker A
И начинает добавлять секцию со сторителлингом после Hero, после вот этой.
Speaker A
Вот сюда.
Speaker A
С анимацией.
Speaker A
Вот, смотрим, как он думает.
Speaker A
Он пишет, что надо добавить сторителлинговую секцию.
Speaker A
Надо нарратив о сложностях писателя.
Speaker A
Надо вот, визуализация пустая страничка и курсор.
Speaker A
Вот, когда мы пишем в текстовых редакторах.
Speaker A
У нас же курсор.
Speaker A
И мы ждём.
Speaker A
Хорошо.
Speaker A
Clock Time.
Speaker A
Время прессует тебя.
Speaker A
И трансформация, которая продаётся, чтобы было продуктивное, ну, чтобы человек продуктивно писал что-то и выдавал.
Speaker A
И пишет, что готово.
Speaker A
Вот эти изменения, они часто быстрее происходят.
Speaker A
И я.
Speaker A
Вот так вот.
Speaker A
Смотрите, друзья.
Speaker A
Знакома?
Speaker A
Завтра нужен пост.
Speaker A
Потому что у меня лично в Telegram-канале есть такая проблема.
Speaker A
И смотрите.
Speaker A
Это не картинка.
Speaker A
Это прямо, ну, HTML.
Speaker A
Кастомно завёрстанный.
Speaker A
Как-то так.
Speaker A
И смотрите, финальный наш результат.
Speaker A
Полностью переделали дизайн, добавили визуализации.
Speaker A
Чтобы это меньше похоже было на AI.
Speaker A
И таким образом можно каждый, при желании, раздел вашего сайта добавлять.
Speaker A
Изменять, модифицировать.
Speaker A
Надеюсь, это видео полезно.
Speaker A
Это простые шаги.
Speaker A
Шаг номер один - добавить свой текущий проект в Claude Cowork.
Speaker A
Но вы можете, если проекта нет, кстати, просто ему сказать, вот у меня проект.
Speaker A
Вы очень глубокий анализ даёте ему, мы этому на программе Street MBA Business рассказываем.
Speaker A
Учим.
Speaker A
Хорошее, детальное описание сути проблемы, сути целевой аудитории.
Speaker A
И примерное направление продукта.
Speaker A
И он на основе этого подберёт что-то релевантное вам.
Speaker A
Сразу просите то, чтобы прототип был сразу в HTML.
Speaker A
А, ну, с каким-то дизайнами, и что человек с вкусом.
Speaker A
With a design taste, с дизайнерским вкусом работает над этим.
Speaker A
И AI начинает врубаться, что есть некая AI-слепота.
Speaker A
Ну, когда сайты вот похожи, вот эти особенно двухколоночные вот эти дизайны.
Speaker A
Сравнительные.
Speaker A
Палится сильно.
Speaker A
Вот так.
Speaker A
Если ты хочешь научиться вот это с нуля делать и доводить это полностью до рабочего продукта.
Speaker A
Который масштабируем, дёшев в содержании.
Speaker A
И чтобы ты понимал, как с нуля пилить свои проекты.
Speaker A
А проекты могут быть мобильные приложения с бэкэндами, веб-сайты, SaaS.
Speaker A
И Telegram-боты.
Speaker A
Тебе обязательно стоит присоединиться и рассмотреть нашу программу с Денисом.
Speaker A
Street MBA Vibe.
Speaker A
Если ты хочешь научиться прокачаться в запуске продуктов.
Speaker A
А, как делать маркетинг?
Speaker A
Как делать продажи?
Speaker A
И вообще, в конце концов, как придумать идею, понять, а, где есть ниша со спросом.
Speaker A
Где заплатят.
Speaker A
И как стать самому контент-креатором и писать свои Telegram-ы, заводить каналы.
Speaker A
Тебе обязательно к нам в программу Street MBA Business.
Speaker A
Все ссылочки будут в описании.
Speaker A
И если тебе нравится то, что ты сейчас увидел, услышал.
Speaker A
И ты хочешь смотреть этот контент дальше.
Speaker A
Подписывайся на канал, поставь лайк, напиши коммент.
Speaker A
Нам это очень приятно с Денисом.
Speaker A
Алгоритмы Ютуба это любят.
Speaker A
И в наших Telegram-каналах тоже ссылочка в описании.
Speaker A
Ещё больше подобного контента.
Speaker A
Увидимся в следующих выпусках.
Topics:веб-дизайнClaude CoworkAI дизайнпрототипирование сайтаредизайн сайтаRuby on Railsфронтенд дизайнавтоматизация дизайнавизуальная анимациясоздание сайтов
