Теперь дизайнером может стать каждый: собираем ретролендинг в Claude Design с нуля

Всем привет! На связи Тимур Угулава, и сегодня мы разберём крутейший ИИ-инструмент так, чтобы даже ваша бабушка захотела попробовать чего-нибудь сварганить. А у бабушки, между прочим, первая игра явно была пиксельной — так что сегодня мы с ней в одном лагере.

Всякий раз, когда выходит новая нейросеть или AI-сервис, в соцсетях начинают хоронить очередную профессию. Обычно зря — торопятся. Но в этот раз, кажется, одной профессии всё-таки придётся подвинуться.

На днях Anthropic выкатили Claude Design — и это, пожалуй, самый демократичный запуск последних месяцев.

МегаФон Таргет: рекламная платформа для бизнеса

• Сервис позволяет запускать рекламные кампании в одном окне.
• Сегментируйте базу по поведению и интересам с таргетингами.
• Стабильный СМС-канал.
• На первый запуск 3000 бонусных рублей.
• Запустите первую кампанию за 10 минут с ИИ-помощником.

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585. ERID: 2W5zFHynoTX.

Раньше, чтобы превратить идею в лендинг (про сайт и вовсе молчу), вам нужен был либо дизайнер, либо конструктор сайтов и крепкие нервы. А если вы, как я сегодня, захотели ещё и пиксельную эстетику 80-х, с CRT-свечением и неоном на чёрном, то это только к специализированному иллюстратору — и ещё деньжат сверху. Теперь же всё это счастье собирается с помощью несложных промптов и чашки кофе.

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

Чтобы не быть голословным, я решил собрать в Claude Design что-то реально полезное, а не просто поиграться. Поэтому будем учиться на примере лендинга — анонса предстоящего прямого эфира «НейроМастерской».

Да-да, той самой рубрики, которую вы сейчас читаете. Рекурсия!

И сделаем это с размахом: построим с нуля стиль ретро 80-х, пиксельной графики и неона. Как в старой доброй аркаде.
Я вам не говорил, что у меня есть хобби? Обожаю ретроконсоли!

В посадку встроим мини-игру, ну и всю важную информацию про эфир.

Поехали!

Спойлер: вот такое ретросчастье у нас получится. Ни одного вручную нарисованного пикселя

Что такое Claude Design и почему это круто

Claude Design — новый продукт Anthropic Labs (это те самые ребята, которые сделали Claude Code).

Проживает он по адресу www.claude.ai/design (не забудьте оказаться за пределами РФ) и работает на основе всех популярных моделей Claude. Но, конечно, для самого мощного результата лучше выбирать самую мощную модель — Opus 4.7. Она отлично подходит под визуальные задачи, лучше видит макеты и вообще понимает меня с полуслова.

Есть готовые шаблоны, но куда интереснее создавать свои!

Так вот, логика работы с Claude Design до примитивного проста: на входе даём промпт, плюс наши референсы, описание контекста, контент и всё, что у нас вообще есть. На выходе нейромозг способен сделать готовые лендинги, презентации, рекламные креативы, интерфейсы дашбордов и многие другие визуалы.

Общаться можно как умеешь. Он всё поймёт

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

Здесь важно уточнить отличия от других популярных сервисов для дизайна.

Не Figma и не Canva. Это не редактор, в котором нужно ручками двигать пиксели. Это скорее соавтор, который делает первый драфт. Ну, а дальше остаётся докрутить словами, ползунками или карандашом поверх.

Не Midjourney и не Nano Banana. Это не генератор красивых картинок. Это генератор рабочих HTML/JS-макетов — со смыслом, иерархией, брендом и, что особенно приятно, с живыми кнопками и реальным интерактивом. Claude Design не рисует статичную картинку «как будет выглядеть сайт», а пишет настоящий код этого сайта.

Является ли Claude Design заменой всех этих сервисов? Скорее нет, чем да. Но основная фишка новинки в том, что создавать действительно крутой визуал теперь может любой. И делать это максимально нативно и просто.

Вот такую посадку для одного из мероприятий я сделал буквально за полчаса

Наша задача на сегодня

29 апреля в 16:00 я буду проводить эфир «НейроМастерской».

Тема: Как задавать контекст в работе с нейросетью и зачем это нужно?

Гость легендарный: сам Дмитрий Кот придёт в гости!

Задачу вижу такой: хочу сделать под этот эфир лендинг с описанием, темой, тезисами и линком в Google Календарь. Ну чтобы не пропустили.

Но не просто лендинг, а такой, чтобы, во-первых, попадал в дух «НейроМастерской» (ретро 80-х, пиксель, неон, аркадный вайб), а во-вторых, чтобы на нём было не скучно залипнуть.

Поэтому к обычному анонсу я хочу прикрутить фичу — мини-игру в стиле 8-bit прямо на странице. Человек зайдёт на посадку, ахнет от красивостей и крутости темы, погамает пару минут в игрульку и точно захочет прийти на этот эфир!

Вот такую штуку сделаем с нуля.

Что понадобится

1. Подписка Claude. Сейчас Claude Design доступен только в платных версиях подписок Claude: Pro, Max, Team или Enterprise. В моём случае — Max.

2. Внятная идея атмосферы посадки. Не «сделай красиво», а чтобы прямо подробное описание было — я его заранее подготовлю в обычной нейронке, чтобы не жечь токены. Чем конкретнее будет описание, тем точнее станет попадание.

3. Осмысленное ТЗ на посадку. Что за эфир, во сколько, кто спикер, что обещаем, куда ведём. Чем точнее, тем меньше итераций.

Claude Design входит в подписку Claude, лимиты по нему выведены отдельной строкой

Да, собственно, и всё. Если бы у нас уже был фирменный стиль, брендбук или другая айдентика, то мы могли бы загрузить все эти артефакты и делать страничку уже в привычном дизайне. Но я целенаправленно хочу пойти дорогой самурая.

Шаг 1. Создаём первую версию

Для создания нового проекта нам нужно выбрать один из четырёх табов. Разберёмся с каждым.

Prototype. Интерактивные макеты приложений и сайтов. Здесь можно выбрать детализацию (fidelity).

Slide deck. Презентации, pitch-деки, ретро, годовые отчёты. Есть ползунок с прикольной фичей Use speaker notes: если включить в положение ON, то нейронка ещё и составит примерный текст защиты презентации для спикера.

From template. Быстрый старт из существующих заготовок. Можно выбрать готовый шаблон.

Other. Произвольный промпт. Можно делать также лендинги, инфографику, маркетинг—материалы, обложки — всё, что подходит по формату к предыдущим пунктам.

Держите табличку для удобства

Выбираем, само собой, первый пункт — Prototype. Детализацию ставим High, так как хотим получить итоговый продукт.

Вводим название проекта — «НейроМастерская» — и кликаем на ставшую активной кнопку Create.

Пока название не введём, кнопка активной не будет

Еху! Самое важное позади. Перед нами раскинулось бескрайнее поле экспериментов.

Слева — чат. Справа — рабочая область

Теперь нам нужно задать вводные. Есть больше десяти вариантов, как это можно сделать. От надиктовки голосом до линка на чужой/свой сайт для «творческого переосмысления».

Скрины, какие-то элементы дизайна, презентации — всё пойдёт в дело. Можно даже скетч нарисовать

Мы поступим так: дадим 2–3 референса из Pinterest и остальное опишем словами.

Pinterest вообще хорош для поиска визуальных идей

Выбираем на Pinterest картинки по настроению retro gaming 80-x, atari game, neon. В общем, то, что откликается атмосферой.

Я выбрал вот такие. Ностальжи…

Картинки закачиваем в Claude Design → Add screenshot.

Всё в чат, все в чат!

Дальше прямо в чате пишем, чего мы хотим. Очень важно не только описать какие-то параметры, но и дать контекст. Выгружайте всё, что у вас есть в голове.

У меня получилось вот так:

Готово! Загружаем туда же в чат и кликаем на Send.

Процесс пошёл

Дальше нейромозг сам составит чек-лист дел и пойдёт творить магию. Мы тем временем наслаждаемся, как кто-то работает вместо нас, и пьём кофе.

Шаг 2. Вносим правки и докручиваем

Между тем электромозг уже подготовил первую версию. Раскрываем на весь экран и смотрим полученное счастье.

Сам стиль получился бодрый. Но мне не нравится, что лендинг зажат и не растягивается на весь экран. Ещё пугает слово «смерть». Грустненько как-то

Надо поработать с текстами и убрать целую пачку английских слов. Не пойдёт нам такое. Да и снимок Дмитрия Кота надо разместить более реалистичный

А вот игрушка неплохая, работает. И звуки издаёт. Мне нравится!

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

Правим тексты

Просто кликаем на кнопку Edit в верхнем горизонтальном меню и пишем, что хотим. Заодно можно поиграться с размерами, шрифтом, цветом и прочими настройками.

Я решил поиграться с классикой в стиле «казнить нельзя помиловать»

А заодно «русифицировал интерфейс»

Правим графику

Теперь хочу заменить снимок непонятно кого на моську Дмитрия Кота. Предварительно я обработал его фото в Nano Banana, чтобы не выделялся по стилю.

Графику лучше делать в другом месте, не самая сильная сторона Claude Design

Новый снимок просто закидываю в чат и прошу заменить.

Теперь Дмитрий похож сам на себя!

Главное правило — одна правка за раз! Если написать сразу кучу изменений, то высокая вероятность, что-то пойдёт не так или просто будет пропущено.

Ещё один хороший инструмент для правок — кнопка Draw. Можно просто обвести нужное место и голосом или текстом попросить внести изменения.

Обвёл кнопочки и попросил голосом русифицировать их

Правим интерфейс

Предположим, что я хочу докрутить игрульку. Тогда кликаю на кнопку Comment, выбираю нужный блок и пишу: «Давай докрутим игру так, чтобы она вся была на русском». А то чего в ней какие-то иностранные словечки?! Не понимаю!

Вуаля, правка внесена!

Боремся за чистоту родной речи!

Настраиваем Tweaks

Нельзя не упомянуть про фичу, которая именуется Tweaks.

По сути, это ползунки/переключалки для гибкой настройки. Они создаются индивидуально под проект. И мы можем… их настроить!

Tweaks — это блочок с ползунками в правом нижнем углу

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

Так и пишу в чат.

Получаем результат. Внешний вид, кстати, тоже можно подшаманить

Правим вёрстку

Ну и наконец, давайте внесём самую крупную правку — в вёрстку. Сделаем так, чтобы экран тянулся, а не был так жёстко зажат.

Пишем о своих желаниях в чат.

«Давай попробуем вариант вёрстки, которая будет адаптироваться под разные разрешения».

Теперь абсолютно красиво! Можно релизить!

Шаг 3. Релизим лендинг в интернет

Ну что, друзья. Мы вроде как на финишной прямой. Сейчас нужно куда-то разместить на боевую страницу это счастье.

Вариантов великое множество. Кликаем на Share в верхнем правом углу и выбираем, что по душе и компетенциям.

• Сохранить проект в ZIP-архив — и после ручками его захостить.

• Отправить в Canva — и дальше с ним ещё поработать.

• Закинуть в Claude Code (Handoff to Claude Code) — наш случай, потому что мне удобно, чтобы Claude Code сделал всё, что нужно, сам.

Если что, можно сохранить и в других форматах

У меня Claude Code живёт в VSCode. Поэтому я кликаю на Handoff to Claude Code, копирую оттуда команду типа:

«claude-code implement https://design.anthropic.com/bundle/xxxxx \ -instruction „Build the landing page exactly as designed“ \ -file src/pages/landing.tsx»

Копировать >>> Вставить

И вставляю её в сессию в Claude Code. Он, в свою очередь, всё это дело прочитал, изучил и готов работать дальше с файлами посадочной страницы. Может накодить чего или, как в нашем случае, разместить где-то в публичном месте.

Если ещё не освоили дружбу VSCode + Claude Code, напишите мне в тележечке в канале. Будет запрос — сделаю гайд и по этой штуке

Дабы не усложнять, просто попрошу залить лендинг на мой GitHub и сделать публичную ссылку. Если бы мне нужно было прикрутить какой-то домен, то дал бы ему (Claude Code, в смысле) доступы к домену, данные хостинга — и шайтан-машина сама бы всё сделала.

Клод понимает меня с полуслова. Это всегда приятно

Всё готово, можете поиграться.

Шаг 4. Сохраняем ДНК бренда

Всё? Ну почти. Сейчас мы поигрались и сделали что-то интересное. Дальше можно усложнять, вайбкодить, прикручивать всякие опции и фишки. Но логику мы уже знаем.

Ещё я бы хотел показать очень важную вещь: как сохранить стилистику, чтобы в будущем другие посадки, или баннеры графические, или там другие визуалы имели тот самый «ДНК бренда». Это уже позволит очень быстро создавать в будущем новые креативы в том же вайбе.

В Claude Design есть такая опция, как Design System. Один раз задали параметры — и все последующие проекты будут в единой стилистике.

Чтобы это сделать, на стартовом экране кликните на пункт Design System в горизонтальном меню справа. Там — Create.

Можно сделать далеко не одну систему дизайна

Дальше остаётся только загрузить примеры:

• ссылку на сайт/лендинг — он подтянет цвета, шрифты, структуру;

• GitHub-репозиторий — заберёт оттуда, надо будет только авторизоваться;

• Figma-файл — извлекает библиотеку стилей;

• брендбук — шрифты, логотипы, гайдлайны и прочее.

После чего Claude Design сформирует дизайн-систему: палитра, типографика, отступы, радиусы, набор компонентов. И все новые проекты автоматически будут следовать этой системе.

Загружаем что можем, в том виде, в каком умеем

Сформировал Design skill с описанием всех визуальных правил

В качестве полной рекурсии я закинул в Claude Design только что сделанный лендинг для «НейроМастерской». Ну, а чего два раза потом стараться.

Товарищ всё скушал, изучил и теперь готов работать на меня в два раза эффективнее и быстрее.

Сделал баннер в том же стиле. Умничка какой!

Где Claude Design пока спотыкается

Ни одна нейросеть пока не работает идеально, и Claude Design не исключение. Прежде чем пойдёте в него с головой — знайте про подводные камни.

• Это не волшебная палочка. Всё как с обычным дизайнером: мусор на входе — мусор на выходе.

• Иконки, геометрические иллюстрации — да, он рисует без проблем. А вот если нужен сложный пиксель-арт или фотореалистичная иллюстрация — это не сюда. Для таких задач используйте другой инструмент (Nano Banana или Midjourney) и положите результат в Design files.

• Полноценного бэкенда нет. Claude Design собирает фронтенд со всем интерактивом (таймеры, состояния, .ics, логика кнопок) — это он умеет. А вот серверную обработку форм, базу данных и прочий back — нет. Для них придётся прикрутить отдельный сервис.

• 3D и шейдеры ломаются. Если бы я попросил не 2D-аркаду, а 3D-астероиды — скорее всего, получил бы кривой результат. 2D-интерактив стабилен.

• Не заменяет толкового дизайнера. Для серьёзного бренда или сложного интерфейса всё равно нужен человек с глазомером.

• Иногда ломает свой же стиль. После 10–15 правок подряд Claude может забыть начальный стиль. Лайфхак: начните новое сообщение с фразы «напомни про дизайн-систему и пересобери» — и всё возвращается.

• Квоты. На Pro при активной работе быстро упирается в дневной лимит. Планируйте сессии кучками.

И всё же главная идея статьи в том, что Claude Design — это крутейший инструмент для дизайна с максимально низким порогом входа.

Теперь любой, у кого есть идея и внятный бриф, получит приличный первый драфт. А приличный первый продукт — это, извините, 80% маркетинговой рутины.

Так что дерзайте!

Ништяки от «НейроМастерской»

• Ультимативный гайд по Claude Design — я собрал полную версию знаний по Claude Design, со всеми механиками, с готовыми промптами и полным разбором инструмента. Лежит у меня в канале.

• Живой лендинг анонса эфира — вот тот самый, с мини-игрой и календарём. Поиграйте, потыкайте, убедитесь, что работает по-честному.

До следующей «НейроМастерской»!

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.