Claude Design + Claude Code: как я пересобрал портфолио без дизайнера — и чему это меня научило

Вокруг Anthropic сейчас не утихает хайп. Новая модель Opus 4.7, миллионный контекст, агенты, которые сами заходят в браузер и делают работу. Каждую неделю что-то новое. На этой неделе — Claude Design.Пятница, 17 апреля. Компания выкатывает новый инструмент: описываешь интерфейс разговором, получаешь работающий мокап в HTML/CSS/JS.

Пятница, 17 апреля. Компания выкатывает новый инструмент: описываешь интерфейс разговором, получаешь работающий мокап в HTML/CSS/JS. Готовый макет упаковывается в бандл, который одной инструкцией передаётся Claude Code — и тот собирает продакшен-код. Живой кликабельный прототип → рабочий сайт, без ручного перевода макета в код.

Захожу в claude.ai/design тем же вечером. У меня есть портфолио lavr5000.github.io — статичный сайт на Next.js, собранный три месяца назад. Список проектов, две кнопки, тёмная тема. Честно? Стыдно показывать. Я строитель, а не дизайнер — и это видно.

Решаю попробовать — пересобрать свой сайт через Claude Design, чтобы на реальной задаче проверить, работает ли обещанная связка «мокап → код».

Что такое Claude Design

Если коротко: это Figma, внутри которой сидит Claude. Ты описываешь интерфейс текстом, он рендерит живой HTML/CSS/JS прямо в чате. Не картинку-мокап, а настоящий интерактив. Можно тыкнуть в кнопку — она отработает.

Три способа редактировать:

— Разговором: «сделай hero ниже, добавь 3D-модель робота справа»

— Inline-комментариями: указал на элемент, оставил заметку

— Прямым редактированием: правишь код руками, он понимает контекст

Когда дизайн готов, нажимаешь «Ship to Claude Code» — Claude Design упаковывает всё в handoff-бандл: HTML, CSS, скрипты, ассеты, системные инструкции для coding-агента. Открываешь Claude Code, отдаёшь бандл — получаешь продакшен-версию с правильной структурой проекта, оптимизацией, тестами.

Работает на Claude Opus 4.7 (vision-модель). Доступен в research preview для Claude Pro, Max, Team, Enterprise. Экспорт — Canva, PDF, PPTX, standalone HTML.

Вчера, когда я слышал «AI для дизайна», я представлял генератор картинок. Вот с этим — не угадал.

Что я собирал

Требования были простые, но капризные:

— Single-page сайт, не Next.js и не SSR — хочу статический HTML, который ляжет на GitHub Pages без билда.

— Hero с 3D-моделью робота, не картинкой. Робот крутится, его можно повращать мышью.

— Интерактивная демонстрация StroyOps — одного из моих внутренних инструментов. Нажимаешь кнопку, на глазах печатается письмо подрядчику: голосовая команда прораба → готовое деловое письмо.

— Карточки проектов: Apartment Auditor (приложение для приёмки квартир, опубликовано в RuStore), IDGenerator (генератор исполнительной документации).

— Тёмная тема, оранжевый акцент, RU/EN-переключатель, раздел «Услуги» с тремя тарифами.

— Статическая ссылка /apartment-auditor/privacy-policy.html — обязательное требование RuStore, её нельзя сломать.

Для v2 на Next.js на это ушло несколько недель с переделками. Хотел проверить, сколько займёт v3 через Claude Design.

Первые 30 минут: эйфория

Запускаешь Claude Design, описываешь задачу текстом. Через секунды — готовый первый вариант: структура, цвета, сетка, типографика. Шрифт нормальный, отступы человеческие. Не слишком красиво, но и не стыдно.

Начинаю диалог:

— «сделай hero чернее, уменьши заголовок на 15%»

— «вставь сюда 3D-модель робота через model-viewer, файл — robot.glb, 2 МБ»

— «добавь секцию StroyOps с кнопкой Посмотреть демо»

— «переключатель RU/EN в шапке, текст в двух объектах i18n.ru и i18n.en, реактивность через React state»

Каждый раз вижу живой результат в правой панели. Могу крутить модель, кликать кнопки, скроллить. Это не статичный макет, это работающий прототип.

Через полчаса — каркас всех секций, основная навигация, переключатель языка, скелет StroyOps-демо. Один файл, React UMD inline + Babel standalone, model-viewer как web-component.

Это та точка, где я подумал: «Всё, задача закрыта, осталось только задеплоить».

Ошибся.

Следующие часы: два бага, которых не нашла ни одна модель

Баг 1 — 2D-двойник робота

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

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

Внутри <model-viewer> — shadow DOM, в котором живут ДВА canvas:

— первый без id, без класса — 2D poster-canvas. Он рендерит запечённую картинку, пока грузится WebGL. После загрузки должен скрываться.

— второй с id="webgl-canvas", класс .show — живой WebGL.

Мой CSS в теме по умолчанию делал canvas { display: block }. Этого хватало, чтобы оба остались видимыми. Poster-canvas не прятался после загрузки — получил двойника.

Фикс — четыре строки инжектируемого стиля в shadow DOM: canvas:not(#webgl-canvas) скрыть, canvas#webgl-canvas показать, #default-poster скрыть, .slot.poster скрыть.

Ни Claude Design, ни первая итерация Claude Code этого не нашли. Баг проявляется только в реальном браузере, на реальной GLB-модели, после всех загрузок. В iframe-превью Claude Design рендерил один canvas и на этом успокаивался.

Баг 2 — клиппинг длинного письма в StroyOps-демо

Демо рисует печатную машинку: голосовая команда → постепенно проявляющийся текст письма. У меня сетка display: grid с двумя колонками — слева голосовая панель, справа «бумага» с письмом.

Письмо длинное, 20+ строк. В превью всё отображается — строки переносятся, бумага растёт. В браузере — письмо обрезается по нижней границе сетки. Выглядит как будто агент отработал на треть и сдох.

Причина — фундаментальное поведение CSS Grid: по умолчанию дочерний элемент grid-контейнера имеет min-height: auto, и это значение рассчитывается так, что контейнер не даёт ему раскрыться больше, чем нужно соседям. Нужно явно написать min-height: 0 — тогда overflow заработает корректно.

Фикс — одна строка. Но без неё демо выглядит сломанным.

Это классический грабль из документации MDN, который ловят руками сотни разработчиков. Claude Design тут не подвёл — он правильно сгенерировал grid. Подвёл я, когда закинул туда свой контент длиннее, чем он ожидал в мокапе.

Что именно сделал Claude Code после handoff

Нажимаю «Ship to Claude Code», получаю бандл. Открываю сессию Claude Code, отдаю.

Разбор бандла. Агент прочитал инструкцию Claude Design, понял структуру компонентов, выстроил файлы в проекте.

Вынос robot.glb из inline base64 в отдельный файл. В мокапе модель была зашита в base64 — сайт весил 5 МБ. Агент вынес в robot.glb, сайт стал ~190 КБ + 2 МБ лениво загружаемой модели.

Переписал GitHub Actions. Раньше был полный Next.js-пайплайн с билдом и статическим экспортом. Теперь — одна job: «скопируй корень репо в артефакт, задеплой на Pages». Проще не бывает.

Архивация старой версии. Вместо того чтобы убить историю, агент создал ветку archive/nextjs-v2, запушил её в remote, и только после этого заменил содержимое master. Откат — одна команда.

Починил кодировку, линтер, проверил ссылки. В версии из Claude Design /apartment-auditor/privacy-policy.html не было — агент восстановил страницу из предыдущей версии, проверил 200-код. Это требование RuStore — без privacy-policy приложение снимают с публикации.

Задачи, где я тратил часы на рутину в v2, в v3 сделаны Claude Code за одну сессию.

Результат

Сравнение v2 (Next.js) и v3 (Claude Design → Claude Code):

— Файлов в проекте: было ~40, стало 4 (index.html, robot.glb, scenarios.js, privacy-policy.html).

— Вес страницы: было ~1.2 МБ с hydration и тремя chunk, стало 190 КБ + 2 МБ модели lazy.

— 3D-элементов: было 0, стало 1 живой model-viewer.

— Интерактивных демо: было 0, стало 1 (StroyOps голос → письмо).

— CI/CD: было npm install + next build + export, стало copy corner → deploy.

— Время сборки в GitHub Actions: было ~2 минуты, стало ~20 секунд.

— Lighthouse performance: было 78, стало 96.

Честно про минусы Claude Design

Сложные интеракции он всё ещё не видит. 3D-модели, сторонние web-components, длинный пользовательский контент — то, что нужно проверять в реальном браузере на реальных данных. В iframe-превью многие баги не воспроизводятся.

Handoff-бандл не равно продакшен-код. Claude Design пишет прототип, Claude Code переводит его в поддерживаемый код. Это два разных этапа. Пытаться деплоить прямо из Claude Design — плохая идея: там inline base64 на 5 МБ, никакого code-splitting, никакого контроля загрузки.

Research preview. Доступ — Pro, Max, Team, Enterprise. Если у вас только бесплатный Claude — подождите.

Ценник на экспорт в Canva/PPTX — я его не использовал и не знаю всех нюансов, но стоит учитывать, если планируете активно пользоваться.

Кому это подойдёт

Инженерам, которые не хотят нанимать дизайнера. Мокап рождается в диалоге, не в Figma. Дальше — сразу рабочий код, без перевода с «дизайнерского языка».

Продакт-менеджерам и основателям. Прототип интерфейса для питча инвесторам за вечер. Не картинка — работающий кликабельный демо.

Маркетологам. Лендинг с кастомной механикой, который не умещается в шаблоны Tilda или Readymag. Собираете в Claude Design, отдаёте в Claude Code, деплоите на Cloudflare Pages.

Тем, кто уже живёт в Claude Code. Если ваш текущий workflow — «описал задачу текстом, агент сделал», Claude Design расширяет этот workflow на UI-задачи.

Главный урок

AI-дизайнер работает только в связке с AI-кодером. Сам по себе Claude Design — красивая игрушка. Сам по себе Claude Code — отличный автоматизатор, но ему нужно исходное направление. Вместе — закрытый цикл: описал проект разговором → получил прототип → передал бандл → получил продакшен.

Это то, на чём Anthropic выстраивает свою стратегию. Не отдельный инструмент «для дизайнеров», не отдельный «для разработчиков» — единая среда, где между идеей и продакшеном нет ручного перевода.

Два бага, которых не нашла ни одна модель, я поймал руками. Значит, роль человека в цепочке пока остаётся: принимать решения, проверять в реальной среде, ловить то, что не воспроизводится в iframe.

Технологии + живой опыт. Как и с VPN-кейсом месяц назад — не или/или, а вместе.

А вот и сам сайт, если интересно посмотреть вживую, что получилось: lavr5000.github.io. Откройте, покрутите робота, запустите StroyOps-демо. Буду рад обратной связи — что работает, что резанёт глаз, что бы вы сделали иначе.

Больше кейсов автоматизации — в Telegram: @ai_vibes_coding_ru.

Денис — заместитель директора строительной компании, главный инженер проекта. Использует Claude Code для автоматизации строительного документооборота: 250+ сессий, 70+ настроенных скиллов.