Как дизайнить красивые сайты в Claude Cowork

Если вы уже начинали веб-кодить,

и у вас получались первые сайты, наверняка вы замечали, что дизайны какие-то очень похожие.

Вот, ну, чаще всего вообще вот такие вот, один из первых моих сайтов с прошлого года.

Они получаются какие-то одинаковые.

И ещё там очень много палится AI.

Ну и как-то недорого, небогато это не выглядит.

Ну, например, так, вот вот этот блок сравнения у меня,

ну, это прямо AI-ем пахнет отсюда, да?

Вот это вот явно как-то.

Ну, вот это что-то не очень интересно нарисовано.

Но я нашёл

ещё более простой способ.

Началось с того, что мы нашли клодовский скилл на фронтенд-дизайн.

И у нас вот такой уже, ну, поинтереснее начало получаться.

Наш сайт VibeBase, где лежит этот Claude Skill.

Он уже Claude Skill-ом фронтенд-дизайна сделал.

В этом мы где-то писали, вот фронтенд, заходим на VibeBase.

Фронтенд-дизайн находим.

И копируем этот промт, или просто копируем, или скачиваем Markdown.

И вставляем в свой проект.

Однако, есть ещё более элегантный способ.

И вот смотрите, как я покажу, как я превратил вот это

вот это.

Вот это.

Или даже вот это.

Ну, то есть выглядит намного более дорого, богаче.

И, ну, посерьёзнее.

И нас кто-то в Ютубе стебал.

Наймите дизайнера.

Ну, не знаю.

Я считаю, что можно уже красиво делать самому.

И в этом видео я покажу, как сделать достаточно просто

очень необычный, самобытный, красивый описательный дизайн.

Простыми шагами.

Поехали.

А, кстати, я покажу ещё дальнейший редизайн.

Вот.

Покрасивше сделал.

Всё, всё летает, красиво.

Элегантно.

А, ну, весь продукт, короче.

Поиски там, Димит.

Всё красиво.

Поехали.

Для этого нам нужен Claude Cowork.

Оказалось,

что в Claude Cowork-е лучше, чем в Claude Code, получается именно работа с интерфейсами, с дизайнами.

Я до конца не понимаю, почему.

А, но работа намного более приятная.

Для того, чтобы начать, давайте я

вот этот сайт своей компании сделаю полный редизайн с нуля.

Это будет смертельный номер.

А.

Поехали, попробуем.

Это мой Ruby on Rails проект.

Значит, мы открываем Claude в режиме Cowork-а.

Нам нужно подключить папку нашего проекта.

Ну, давайте я подключу, это у меня Nocodo, кажется, называется.

Вот.

Мы подключили.

А, Always Allow.

Что происходит?

А, это Claude Cowork, это, точнее, Open Claude, вот Claude Bot, может, слышали.

Это немножко такая, похожая версия на Claude Code.

Почему? Потому что Claude Cowork, он вот эту папку, которую я добавил, он примонтировал её.

То есть он имеет полный доступ к моей папке, но не к остальному компьютеру.

И вот я говорю, а, Make me four different prototypes for my website design.

I want them to reflect what my company is as a technology services provider and SaaS builder

as well as consultancy agency.

Ну, вот поехали.

Замутим.

Вот так вот.

Что он выдаст?

Он сначала не кодит у вас прямо, ну, не меняет HTML-вьюхи в самом проекте.

Он сначала прототипирует и даст нам HTML-ки, которые

можно открыть прямо здесь в Claude Cowork-е, посмотреть, выбрать.

И уже попросить имплементацию, разработку этого в своём продукте.

И можно попросить дальнейший редизайн.

Вот Claude Cowork мне спрашивает.

Ты что

хочешь? Ну, я не знаю, кстати.

Tech-forward, современный, минимальный.

Tech-forward, футуристичный дизайн.

Ну, я даже не знаю.

Корпоративный и профессиональный.

Ну, я не люблю корпоративный.

Я хочу.

Давай, Bold and Dynamic.

Предложить цветовую гамму.

Кто Target Audience?

Это оба, короче.

Both equally.

Отлично, неплохо.

Да, кто-то скажет, в Claude Code нынче тоже анкетки появились.

Ну, ладно, хорошо, появились.

А, какое название твоей компании?

Моё название - это Nocodo LTD.

Я ввожу кастомно.

Он, походу, сам не догадался пока что.

Вот и посмотрим.

Он говорит, что сделает сейчас четыре прототипа.

Ну, как я и просил, кажется.

Да, четыре прототипа.

Подождём.

Видите, когда он кодит JSX.

Я не знаю, но это явно не Ruby on Rails.

Это что-то другое.

А, те, кто с этим форматом работают, закидывайте меня камнями.

Но не суть.

Они достаточно, главное, чтобы сделать кликабельный

просматриваемый прототип.

Потом оно уже конвертирует это на

на язык разметки моего Ruby on Rails, если вы используете другой фреймворк.

Ну, он на другой фреймворк вам это переведёт.

Подождём.

Итак, несколько минут спустя ожидания, Claude нам отчитался о проделанной работе.

Он создал нам четыре прототипа.

Ну, вот давайте, как я и сказал, он сначала кликабельными прототипами нам показывает.

Смотрим первый.

Что-то не открывается.

Ну-ка, второй.

Вот, второй нам сделали.

Но мне это не нравится.

Третий.

Четвёртый.

Ну, мне что-то я не впечатлён.

Но я специально так сделал, потому что, потому что вы также начнёте.

И чтобы вы не удивлялись.

Так как у меня уже текущий дизайн, я говорю, Wait, we already have current design schema with Tailwind

and existing design.

I want, я хочу новый дизайн.

I want new design based on my current landing page content.

И иду в работу.

Другими словами, на будущее, если мы в первом же промте намекнём ему, что, ну, вообще-то

я хотел бы эволюцию своей странички и использую контент этой странички.

Он бы сразу сделал.

Ну, вот мы увидели, как это работает, если неподготовленным начать.

Вот он теперь смотрит на текущий лендинг-пейдж, мою дизайн-систему.

Потому что мы её хотим улучшить.

Вот, видите, а, он пишет, у вас есть Rails-приложение с, ну, с неплохим дизайном в циане, морского цвета.

Давай я замучу четыре дизайн-прототипа, используя существующий контент, но со свежими лейаутами и визуальными подходами.

Ну, и ждём.

Итак, ещё несколько минут спустя, нам сделали очередные прототипы.

Открываем их теперь.

Ну, кстати, мне больше всего понравились

вот этот.

И вот этот.

А, я ему, шаг два, первичное внедрение.

Это какой?

Третий прототип.

I choose prototype number three, modify in Rails project my primary landing page with this design and layout.

Ну, первым шагом мы хотели бы, чтобы это всё изначально внедрилось.

После этого, шагом два, мы будем кое-что напильником допиливать.

Также в Claude Cowork-е, чтобы было, ну, ещё круче это выглядело.

Я в этом видео опущу вопросы, связанные, ну, что конкретно здесь писать.

Ну, я считаю, что глупо писать, ну, Claude, ладно.

То, что мы Solid Queue, Rails-ов используем, ну, это никому не интересно.

Hotwire там.

А, то, что где-то здесь было написано, а, ну, вот здесь вот две-три недели Production Ready Feature.

Это о'кей, там, в другой версии было 48 часов.

Ну, я для себя-то могу за 48 часов.

Но для клиентов, например, нет.

Подождём.

Итак, ещё пару минуток спустя.

Он уже внедрил это на основном лендинге.

И если я уже зайду на свой Localhost и перезагружу.

Вуаля.

Я вижу новый дизайн.

Ну.

Ну, вот это, конечно, too much.

Но если это фишка.

Если это фишка.

То о'кей.

Значит, что я ещё хотел бы?

Я хочу какую-то визуальную анимацию.

А, есть один из промтов, который я для себя открыл.

Это говорим.

Ну, вот этот блок называется обычно Hero Section, да?

Я ему говорю, In Hero Section for background come up with some cool animation.

И самое главное, я произношу следующее, что be a human designer.

So it doesn't look like AI with design taste.

Со вкусом.

Просто посмотрим, что оно вытворит.

Пока оно делает.

Можем посмотреть лог его мыслей.

Что он пишет, что пользователь хочет добавить крутую, стильную, ну, со вкусом фоновую анимацию.

Которая как будто сделана человеком, а не базовым AI-generated.

И какой подход можно, чтобы решить проблему?

Значит, избегать клише.

А, Subtle, ненавязчивый и с целью.

По бренду.

И вот у него внутренние, видите, инструкции.

И смотрим, что он из этого сделает.

А, он открывает.

Он думает идеи.

Что уже по вёрстке, по HTML-шаблону сделать в самом проекте.

Но теперь наш контекст.

Переписки закончился, он делает автокомпакт.

И мы ещё пару минуточек подождём.

Вот он, кстати.

Уже продолжает.

Смотрим, как он думает.

И я очень советую всем вчитываться, что он делает.

Открываем Show More.

И он говорит, он видит файл.

Видит, где секция начинается.

Видит, что какие-то анимации сделать.

Вот, добавит анимацию.

Что добавлено?

Так, что-то добавлено уже.

Открываем.

Рефрешим страничку.

А, ну, видите, вот эта линия, черта двигается.

Ну, оставим её.

Но таким образом можно какие-то визуализации продуктовые получить.

Это пример номер один.

Пример номер два.

А, проект, который только начался в разработке.

Это V0 для написания постов в Telegram.

В нём ещё дизайн, ну, видите, там не работали особо над ним.

И что, попробуем то же самое провернуть.

Но мы уже подготовлены.

Также в Claude Cowork-е мы создаём новый проект.

На этот раз добавляем проект, ну, с исходным кодом этим.

Я ему говорю.

А, дай мне три HTML-прототипа for our landing page, check current content with alternative design and look and feel matching what our product does.

Opus 4.5 включаем.

И ждём.

Вот пусть он проанализирует уже, как лендинг выглядит, какой на нём контент.

Мы сразу запросили HTML, чтобы это просто в Claude открылось.

И потом мы уже это внедрили с вами.

Подождём.

Пока читаем, что он нам показывает, он понял, о чём продукт.

Ну, я его тогда назвал Anton Writer.

В честь одного из учеников, которые у нас на Street MBA Vibe-программе этот проект делает.

И мы вот с нуля вместе на воркшопе его начинали делать.

Сделали.

Антон его у себя уже тоже почти доделал.

И я просто в честь учеников называю рабочие версии билды проектов.

Видите, что он показывает, что это AI-powered.

Контент-генерационный инструмент для LinkedIn и Telegram-креаторов, которые обучаются ихнему уникальному, ну, голосов.

Короче, лексикону.

А, чтобы сделать нативные посты.

Контент на русском.

Таргетинг Ghostwriter-ов, коучей и солопренёров.

Ну, о'кей.

Вот посмотрим, чтобы мы немножко за рамки текущего дизайна.

Который уже был внедрён в приложение.

Попробуем.

Вот он уже второй делает прототип.

Первый он уже нарисовал.

Второй.

Подождём ещё пару минуток и продолжим.

Кстати, пока он делает уже третий дизайн.

У нас справа есть папка артефактов, ну, то есть результатов труда.

И мы можем уже заранее первые два дизайна посмотреть.

Открываем первый дизайн.

И смотрим.

А, смотрите.

Вот.

Лепота.

Ну, кстати, он и пишет.

Если там Go to Mark, если нормально описать бизнес, он очень релевантно, хорошо писать стал.

А.

Всё, что нужно автору контента.

Раньше я тратил 3 часа на один пост.

С Антоном 20 минут.

И мой голос остаётся узнаваемым.

Знаете, это похоже на сайт Медузы, по-моему.

Этот дизайн назовём его Медуза.

Раз, два, да, неплохо.

Можно вот так закрыть.

Открываем второй дизайн.

Болдовый.

Контент на автопилоте.

Антон пишет.

Отличная идея.

Ну, этот какой-то попроще дизайн.

Но там, кстати, потенциал развития неплохой.

Пока что я склоняюсь к дизайну Медузы.

И посмотрим, что там с третьим будет.

Подождём ещё чуть-чуть.

Итак, третий дизайн готов.

Нажимаем на него.

Ну, мы можем здесь нажать.

Вот сейчас он покажет, чтобы уже богато.

Профессиональный дизайн.

Открываем.

Ну, это какой-то базовый.

Это какой-то базовый.

Ну, хорошо.

Давайте, значит.

Спасибо большое, я выбираю дизайн номер один.

Мне он понравился больше всего.

Попрошу тебя его внедрить в мой Rails-продукт.

И пусть он делает.

Но пока он будет делать, мы пользуемся этим свободным временем.

Для того, чтобы немножко подумать.

А, это, кстати, неплохо.

Но, допустим, я думаю добавить

что-то про боли и с анимацией, какую-то визуализацию.

Ну, допустим.

Ну, кстати, это очень хорошо, что он векторно нарисовал вполне приличненько и релевантно.

Здесь я бы.

Попросил его развить прямо превью, как это работает, показать.

А всё, что нужно автору контента, я придумал.

Не хватает некого конспекта про боли.

Какой-то, знаешь, который манифестирует проблему ещё больше.

И я отправляю.

Ну-ка, что тут?

Вот.

Кстати, это редкая ошибка случилась.

Ну, давайте сделаем continue тогда.

И вот эту задачку я добавлю в очередь.

Дальнейшие изменения, так как уже в продукте мы делаем.

Мы уже, конечно, не здесь смотрим.

А.

Пытаемся рефрешить.

Ну, вот, видите.

Уже наш сайт готов, завёрстан.

Неплохо.

Весьма неплохо, кстати.

Давайте затестим.

Мобильная версия.

Хорошо.

Прямо очень неплохо.

Вот, видите, он говорит, что завершил.

И начинает добавлять секцию со сторителлингом после Hero, после вот этой.

Вот сюда.

С анимацией.

Вот, смотрим, как он думает.

Он пишет, что надо добавить сторителлинговую секцию.

Надо нарратив о сложностях писателя.

Надо вот, визуализация пустая страничка и курсор.

Вот, когда мы пишем в текстовых редакторах.

У нас же курсор.

И мы ждём.

Хорошо.

Clock Time.

Время прессует тебя.

И трансформация, которая продаётся, чтобы было продуктивное, ну, чтобы человек продуктивно писал что-то и выдавал.

И пишет, что готово.

Вот эти изменения, они часто быстрее происходят.

И я.

Вот так вот.

Смотрите, друзья.

Знакома?

Завтра нужен пост.

Потому что у меня лично в Telegram-канале есть такая проблема.

И смотрите.

Это не картинка.

Это прямо, ну, HTML.

Кастомно завёрстанный.

Как-то так.

И смотрите, финальный наш результат.

Полностью переделали дизайн, добавили визуализации.

Чтобы это меньше похоже было на AI.

И таким образом можно каждый, при желании, раздел вашего сайта добавлять.

Изменять, модифицировать.

Надеюсь, это видео полезно.

Это простые шаги.

Шаг номер один - добавить свой текущий проект в Claude Cowork.

Но вы можете, если проекта нет, кстати, просто ему сказать, вот у меня проект.

Вы очень глубокий анализ даёте ему, мы этому на программе Street MBA Business рассказываем.

Учим.

Хорошее, детальное описание сути проблемы, сути целевой аудитории.

И примерное направление продукта.

И он на основе этого подберёт что-то релевантное вам.

Сразу просите то, чтобы прототип был сразу в HTML.

А, ну, с каким-то дизайнами, и что человек с вкусом.

With a design taste, с дизайнерским вкусом работает над этим.

И AI начинает врубаться, что есть некая AI-слепота.

Ну, когда сайты вот похожи, вот эти особенно двухколоночные вот эти дизайны.

Сравнительные.

Палится сильно.

Вот так.

Если ты хочешь научиться вот это с нуля делать и доводить это полностью до рабочего продукта.

Который масштабируем, дёшев в содержании.

И чтобы ты понимал, как с нуля пилить свои проекты.

А проекты могут быть мобильные приложения с бэкэндами, веб-сайты, SaaS.

И Telegram-боты.

Тебе обязательно стоит присоединиться и рассмотреть нашу программу с Денисом.

Street MBA Vibe.

Если ты хочешь научиться прокачаться в запуске продуктов.

А, как делать маркетинг?

Как делать продажи?

И вообще, в конце концов, как придумать идею, понять, а, где есть ниша со спросом.

Где заплатят.

И как стать самому контент-креатором и писать свои Telegram-ы, заводить каналы.

Тебе обязательно к нам в программу Street MBA Business.

Все ссылочки будут в описании.

И если тебе нравится то, что ты сейчас увидел, услышал.

И ты хочешь смотреть этот контент дальше.

Подписывайся на канал, поставь лайк, напиши коммент.

Нам это очень приятно с Денисом.

Алгоритмы Ютуба это любят.

И в наших Telegram-каналах тоже ссылочка в описании.

Ещё больше подобного контента.

Увидимся в следующих выпусках.