Разработчик скормил Claude свой блог и попросил переработать дизайн, а потом — внедрить эти изменения в код. Час работы, 38 центов потраченных токенов — и сайт превратился из «ещё одного шаблона на Tailwind с фиолетовым акцентом» в полноценный журнальный лейаут с живыми данными вместо плейсхолдеров. Самое любопытное здесь даже не сам результат, а замкнутая петля: один и тот же ИИ выступил и дизайнером, и фронтендером, а человек остался в роли арт-директора, который говорит «вот это шипим, а вот это — нет».
Как именно работает «дизайн → код» внутри одного инструмента
Под капотом тут не магия, а вполне конкретная связка двух продуктов Anthropic — Claude Design (запущен в Anthropic Labs совсем недавно) и Claude Code. Claude Design работает на Opus 4.7 с Canva Design Engine для рендеринга, и его ключевая фишка в том, что он отдаёт результат не как картинку из Figma, а как самодостаточный HTML/CSS-файл. То есть макет — это уже код, а не «техническое задание для разработчика, который потом ещё неделю будет пиксель-перфектить».
Дальше начинается самое интересное. Claude Design генерирует не просто HTML, а handoff-бандл: README с описанием решений, файл с дизайн-токенами (цвета, типографика, отступы), несколько вариантов компонентов в одном HTML и короткий URL вида api.anthropic.com/v1/design/h/<id>. Эту ссылку ты передаёшь в Claude Code одной командой — и агент сам её фетчит, читает README, маппит токены на твою globals.css и пропагирует новый дизайн по всем страницам.
Технические детали, которые мне зашли больше всего:
🎨 Дизайн-токены — это не описание, а сам стиль. В макете лежат CSS-переменные, и в продакшене лежат те же самые CSS-переменные. Никакого «дизайнер написал Inter 16px / 1.5, разработчик случайно поставил 1.6, и поехало» — мок и код говорят на одном языке.
⚙️ Архитектура мульти-агентная. Под капотом Claude Code распределяет работу между Sonnet 4.5 (архитектурные решения) и Haiku 4.5 (параллельное чтение файлов, бойлерплейт). Haiku в 4-5 раз быстрее и дешевле, и система сама решает, что кому поручить.
🔗 Импорт работает в обе стороны. Можно скормить Claude Design существующий репозиторий — и он вытащит оттуда твою дизайн-систему: палитру, шрифты, компонентные паттерны. А потом сгенерирует новые экраны, которые уже on-brand, без танцев с бубном вокруг style guide.
📦 Экспорт куда угодно. Готовый дизайн отдаётся как Canva-документ, PPTX, PDF, чистый HTML или бандл для Claude Code. Последнее — самое полезное, потому что превращает дизайн-апдейт в один промпт.
Где это реально полезно, а где — пока нет
В кейсе с переделкой блога автор честно признал: из восьми предложенных переработок компонентов он зашипил только четыре — те, у которых соотношение «эффект/риск» было адекватным. Остальное (полная переделка hero-блока с typed-анимацией, редизайн Ctrl+K-оверлея, перестройка архивных страниц) отложил на потом. И это, по-моему, самый важный момент во всей истории. AI-handoff надо ревьюить как PR от джуна— никогда не принимать целиком, всегда смотреть, что именно меняется, и резать неудачные предложения.
Что у системы получается хорошо: рефакторинг существующего интерфейса, доведение «сделанного на скорую руку» до production-grade, миграция между дизайн-системами, генерация консистентных компонентов поверх уже работающего стека. Что получается посредственно: дизайн с нуля для уникального продукта. Hacker News, например, прошёлся по Claude Design с вердиктом «компетентный UI, но ничего по-настоящему уникального». И это правда — модель отлично интерполирует между существующими паттернами, но плохо изобретает свои.
Ещё один камень в огород: fidelity к реальной дизайн-системе — около 50-75%. Builder.io в своём ревью отметили, что Claude Design «приближается» к референсной системе, но не воспроизводит её 1:1. Если у вас в команде уже выстроены настоящие компоненты с пропсами, типизацией и тестами — Claude сгенерирует что-то похожее, но не подключится к ним напрямую. Инженерам всё равно придётся делать пасс по интеграции.
И ещё про деньги: PCWorld словили rate limit на неделю после 30 минут использования. Так что разговоры про «38 центов за полный редизайн» — это лучший случай, а не средний. Реальный бюджет на нетривиальный проект — ближе к $10-20 за сессию, как у автора Gatsby-блога, который год назад делал похожее через голый Claude Code и потратил около $15.
Моё мнение: что реально меняется
Я смотрю на это со стороны разработчика, который последний год регулярно собирает мульти-агентные пайплайны на LangGraph и видел изнутри, как ломается «бесшовная» автоматизация на стыке инструментов. И вот что меня зацепило в кейсе с блогом: исчезает класс багов, связанный с переводом дизайна в код. Не «уменьшается», а исчезает — потому что переводить нечего, мок и есть код. Это та же логика, что когда-то убила XML-конфиги в пользу аннотаций: устранить промежуточное представление, и часть проблем растворится сама.
Но я бы не торопился хоронить ни Figma, ни дизайнеров. Реальная ценность дизайнера никогда не была в «нарисовать макет» — она в том, чтобы сказать «нет» девяти из десяти вариантов и «да» одному, который зайдёт конкретной аудитории. Вкус, как точно сформулировал Рубен Хассид, — это override-свитч. Claude может сгенерировать десять дашбордов за десять минут, но решение, какой из них шипить, всё ещё за человеком. И, что важнее, этот человек должен уметь обосновать решение, а не просто ткнуть пальцем.
Для маленьких команд и инди-разработчиков (вроде меня, когда я делаю свои pet-проекты на FastAPI и хочу нормальный UI к ним) это огромный буст. Раньше «сделать админку для своего сервиса» означало либо месяц возни с Tailwind и shadcn/ui, либо смириться с интерфейсом из 2010-х. Теперь — час работы и адекватный результат. Для корпоративных внутренних инструментов это вообще бомба: планка «приемлемого UI» поднимается, и больше нет оправдания для интерфейсов в стиле «работает же».
А вот для крупных продуктовых команд с устоявшейся дизайн-системой и зрелыми компонентами Claude Design пока сидит в неудобной нише между Figma и Claude Code. Импорт design system работает, но не идеально; интеграция с реальными компонентами — не 1:1; и инженерам всё равно придётся делать ручной пасс. На больших проектах это пока экономит часы, но не дни.
Что будет дальше
Прогноз у меня простой и не очень оптимистичный для одной конкретной компании: Figma действительно под угрозой. Не потому, что Claude Design лучше — он в целом ровно нет — а потому, что схема handoff'а через HTML-файл фундаментально элегантнее, чем через Figma-файл. Когда Anthropic запустила Claude Design, акции Figma упали на 7% за день, и Майк Кригер (CPO Anthropic) за четыре дня до этого вышел из совета директоров Figma. Это не совпадение, а сигнал — игроки на рынке считывают направление ветра.
Что нужно ждать в ближайшие месяцы: интеграции Claude Design с привычными инструментами (Storybook, Chromatic, design tokens из Style Dictionary), нормальная поддержка анимаций и интерактивных прототипов, и — самое интересное — version control для дизайнов, чтобы можно было ревьюить дизайн-PR так же, как код-PR. Если этого не сделают в Anthropic, сделает кто-то ещё; индустрия явно движется в сторону «дизайн как код».
И финальная мысль для разработчиков, которые сейчас читают это и думают «ну ок, ещё один AI-инструмент». Попробуйте такой эксперимент: возьмите свой самый страшный pet-проект (у меня это обычно админка к боту или дашборд к скрейперу), скормите его Claude Design и посмотрите, что он предложит. Это занимает час и стоит как чашка кофе. А вы получите честный фидбек на свой UI от модели, которая видела тысячи хороших интерфейсов. Иногда этого достаточно, чтобы сдвинуть проект из состояния «работает, но стыдно показать» в «работает и не стыдно».
Источники
🔗 Оригинальный твит автора @trq212
🔗 Boris Barash — Redesigned My Blog With Claude Design
🔗 Paddo.dev — Claude Designed My Blog. Then Claude Built It.
🔗 Anthropic — Introducing Claude Design
🔗 Builder.io — Claude Design Review
🔗 DesignerUp — How to Use Claude Design for UX/UI
🔗 Ruben Hassid — Claude Design (Substack)
🔗 BDTeo — AI Blog Redesign with Claude Code
🔗 Chandler Nguyen — How I Rebuilt My Blog Backend in 4 Days with Claude Code
🔗 Anthropic — Redesigning Claude Code on desktop