22 августа пришла рассылка Anthropic: в Claude Code появилась команда `/design` — агент рисует макеты прямо в чате, на редактируемом канвасе. У меня как раз лежал подходящий подопытный: прототип медиа о провалах знаменитых предпринимателей, собранный в Lovable и заброшенный полтора года назад.
Спустя вечер это было двуязычное издание с 20 историями, фирменной иллюстрацией у каждой и собственным доменом: failforward.cc. Ниже — весь путь по шагам, с реальными скриншотами процесса. Спойлер: код я не открывал ни разу.
!Рассылка Anthropic про /design — с неё всё началось
Что было на входе
Заброшенный прототип выглядел как типичный лендинг из генератора: серый градиент, «Success is built on failure» по центру. Внутри — шесть историй по паре абзацев общих слов, а вместо иллюстраций — случайные стоковые фото: в статье про Маска, например, стоял хаски на снегу. Последний коммит — март 2025-го.
!Старый лендинг: шапка и хиро из шаблона
!Сетка историй: у Маска — хаски, у Джобса — стоковая толпа, у Гейтса картинка вообще не загрузилась
!Второй ряд: у Цукерберга битая картинка, у Хаффингтон — случайная девушка со стока
!Статья про Маска целиком: хаски на снегу и четыре абзаца общих слов
Задачу я сформулировал в одну строку: «сделай как настоящее медиа». Дальше началось интересное.
Шаг 1. Референсы: четыре моих и один его
Весь мой «бриф» — четыре референса: Wirecutter от NYT (сетка и шрифты), The New Yorker (микс форматов фичеров и иллюстрации), Pitchfork (иллюстрации) и серия интервью VICE Party Legends (стиль иллюстраций).
Дальше Claude открыл браузер и разобрал каждую вёрстку вживую, а не по памяти: ходил по страницам и выписывал приёмы — несколько форматов фичеров вместо однообразной плитки, колонка «The Latest», линейки-разделители, засечковая типографика. По пути сам зашёл ещё и на The Atlantic — его никто не просил.
!Агент изучает вёрстку Wirecutter в браузере
Шаг 2. Канвас /design: макеты, стикеры, итерации
`/design` открывает рядом с чатом канвас с артбордами — как Figma, только внутри Claude Code. Агент повесил туда главную, страницу статьи и мобильную версию, а рядом — жёлтые стикеры: что решили по дизайну и чек-лист «что делаем после утверждения». Канвас редактируемый: любой элемент можно двигать и править текст руками, а весь артборд — выгрузить в PDF.
!Канвас с макетами и стикерами-заметками
!Стикеры на канвасе: решения по дизайну и план внедрения
Дальше — обычная работа с дизайнером, только дизайнер не спит. Я писал фидбек текстом, иногда со скриншотами: «тексты статей слишком короткие», «Маск на иллюстрации непропорционален — выглядит как артист АК-47», «предложи варианты, как сделать современнее». На каждый раунд агент перевешивал на канвас новые варианты — всего их накопилось четырнадцать артбордов, от «Главная А» до финальной «Г ⭐ по фидбеку».
!Раунд фидбека в Claude Code: слева переписка, справа канвас
Шаг 3. Выбор стиля иллюстраций
На «сделай современнее» агент не стал спорить — сгенерировал один и тот же сюжет (Маск между горящим родстером и упавшей ракетой) в восьми разных стилях и повесил на канвас борд: от дуотон-гравюры и лайн-арта до фотоколлажа и кислотного зина. По каждому — подпись, чем стиль хорош и куда его применять.
!Обсуждаем стили в переписке: коллажи беру, но только с реальными фото-вырезками
!Борд с вариантами стилей иллюстраций
Сошлись на системе «цвет = эпоха»: истории до 1960-х — чистая сепия, 1960–80-е — тушь с красным акцентом, современные — плоский постер с одним фирменным цветом компании. Зелёный Starbucks, синий Ford, голубой Twitter. Идея про фирменные цвета — мой единственный арт-директорский вклад за весь проект.
!Три эпохи — три стиля иллюстраций
Шаг 4. Картинки: агент работает в моём ChatGPT
Иллюстрации генерились в ChatGPT — но промпты туда писал не я. Claude подключился к моему Chrome (в браузере это выглядит как зелёная плашка «Claude started debugging this browser»), открывал чат, писал детальные промпты с требованием реального сходства — «узнаваемый Цукерберг: бледное круглое лицо, короткие кудри, серая футболка» — ждал генерацию, забирал файлы в нужном разрешении и раскладывал по проекту.
!Агент пишет промпт в ChatGPT в моём браузере
Когда стиль поменялся на фирменные цвета, старые сепийные версии современных историй агент перегенерил той же схемой:
!Было и стало: сепия против фирменных цветов
Отдельный урок вышел с качеством: первые экспорты агент ужимал до 1050 пикселей, и на ретине всё рассыпалось в кашу. После моего «всё в пикселях» он заново выкачал все иллюстрации главной — 21 штуку — в нативных 1536×1024 без пережатия. Правило запомнили оба: никогда не ресемплить.
Шаг 5. Сборка и SEO
Утверждённый макет агент перенёс в код: Vite + React + Tailwind. Репозиторий для этого он завёл сам — подключил Lovable к моему GitHub и перенёс проект. Заодно:
- расширил библиотеку с 6 до 20 историй и переписал старые заглушки в полноформатные фичеры — каждая история с проверкой фактов по первоисточникам и списком источников в конце;
- сделал полные русскую и английскую версии (переключатель в шапке);
- собрал SEO-слой: 50 статических страниц-шеллов, sitemap, schema.org-разметка, OG-картинки и llms.txt для ИИ-поисковиков;
- нарисовал фавиконку — газетную «F» с фирменной красной точкой.
!Фавиконка FailForward в браузерной вкладке
Шаг 6. Домен: нашёл, проверил, купил
На «найди мне норм домен и давай купим» агент перебрал варианты, проверил занятость через whois и предложил failforward.cc за 5 €. Дальше сам открыл GoDaddy в моём браузере, положил домен в корзину, выключил все апселлы, поменял «5 лет» на «1 год» — и по пути вычистил из корзины премиум-домен за 1332 €, который я сам когда-то туда положил и забыл. Единственное, что сделал я, — ввёл CVV карты: данные платежей агент не трогает по правилам.
После оплаты DNS подключился к хостингу автоматически, а агент добавил сайт в Google Search Console, Яндекс.Вебмастер и Bing — с верификацией и sitemap в каждом.
Результат
failforward.cc — живое двуязычное медиа: обложка, фичеры с цитатами, рубрики, страницы статей с выносами и источниками.
!Цитатный фичер со Стивом Джобсом
!Мобильная версия: главная, статьи на двух языках и рубрика
Цифры:
- **20 историй** × 2 языка, все с факт-чеком и источниками;
- **40+ сгенерированных иллюстраций**, 21 на главной;
- **50 URL** в sitemap, три поисковые консоли;
- **5,14 €** — вся стоимость запуска (домен на год).
Мой вклад — концепция, четыре референса и раунды фидбека: суммарно меньше часа. Пока агент работал, я успевал сходить за пивом и выгулять собаку — прогресс видно с телефона, а правки можно диктовать голосом: «тут фичер с Джобсом надо переделать, год повторяется — сделай».
Что изменилось в работе с Claude Code
Три вещи, которые ощущаются как новый уровень:
1. Канвас `/design`. Раньше агент показывал макеты картинками в чате — посмотрел и забыл. Теперь это редактируемые артборды с заметками: видно итерации, можно двигать руками, можно выгрузить в PDF.
2. Агент в моём браузере. ChatGPT, GoDaddy, поисковые консоли — Claude работает в моих залогиненных сервисах, а я только смотрю и подтверждаю чувствительные шаги.
3. Длинные автономные сессии. «Перекачай все иллюстрации в нативном разрешении» — это час монотонной работы: скроллить чат, собирать ссылки, качать пачками, раскладывать. Агент делает её фоном, пока я пишу фидбек по следующему вопросу.
Когда я показал сайт коллегам по AI-комьюнити, первая реакция была предсказуемой: «так не бывает — значит, всё сделал ты сам». Понимаю. Именно поэтому этот кейс написан со скриншотами каждого шага.
Роль человека в таком процессе — заказчик и арт-директор: сформулировать «как настоящее медиа», выбрать референсы, сказать «Маск непропорционален» и придумать про фирменные цвета. Всё остальное — включая эту статью-кейс и скриншоты в ней — сделал агент.