# Claude Design: как в Anthropic придумали инструмент для набросков идей
Канонический URL: https://zero2claude.ru/blog/claude-design-product-designer-story
Дата: 2026-07-24
Теги: claude, автоматизация, агенты, новости
Продакт-дизайнер Anthropic Нейт Пэррот рассказывает, как родился Claude Design — инструмент, который превращает чат с Claude в живые прототипы, презентации и анимации.
Осенью 2025 года Нейт Пэррот был единственным продакт-дизайнером в команде, которая переносила Claude Code из терминала в привычный интерфейс VS Code. Команда выпустила бету в конце сентября, а в ноябре вышла модель Opus 4.5 — и инженеры начали шипать фичи с бешеной скоростью. Нейт со своей обычной скоростью дизайна начал отставать. Нужно было что-то менять.
Первая попытка догнать инженеров была наивной: Нейт копировал текстовый вывод из терминала в Claude, добавлял скриншоты и писал что-то вроде «вот фича, которую мы хотим добавить, спроектируй её». Результат был так себе. Месяц он потратил как побочный проект — искал способ получить от Claude нормальный дизайнерский вывод.
## Как Claude научили работать с визуалом
Ответ оказался неожиданным: Claude отлично работает с HTML. Мы привыкли думать про HTML как про формат для сайтов, но на самом деле это богатая интерактивная визуальная среда — всё, что можно сделать в презентации, видео или PDF, можно собрать на веб-странице. Нейт стал промптить Claude на генерацию HTML и сделал интерфейс с чатом слева и живым результатом справа.
Это уже работало, но продакт-дизайн строится на знании конкретного продукта и бренда. Поэтому следующим шагом Нейт «упаковал» в промпты суть бренда Anthropic — шрифты, цвета, ассеты, принципы, которыми пользуются продукты компании. Теперь любой вывод инструмента автоматически соответствовал брендбуку.
Он собрал небольшой внутренний прототип и показал команде. Продакт-дизайнеры подхватили его моментально — особенно для интерактивных прототипов. В обычных дизайн-инструментах кликабельный прототип означает вручную отрисовать каждое состояние каждого экрана и соединить их проводами переходов. Здесь достаточно отдать Claude свои ассеты и сказать «сделай, чтобы работало» — и получить ссылку, которой можно поделиться так же легко, как обычным документом.
Claude Design и Claude Code дружат между собой: прототип, начатый в Claude Code, можно синхронизировать в Claude Design для доработки на холсте — и наоборот, готовую к сборке идею передать обратно в Claude Code.
## От побочного проекта до инструмента для всей команды
Момент, когда стало ясно, что Claude Design — это не просто удобная штука, а нечто большее, случился на офсайте команды Anthropic Labs. На сессии питчинга идей каждый участник на ходу собирал слайды в Claude Design — часто буквально во время встречи, перед своим выступлением. Именно эта сессия убедила команду Labs выделить ресурсы на проект: Claude Design перестал быть побочной затеей и стал полноценным продуктом.
Постепенно перестали описывать инструмент как «средство для мокапов продукта». Claude Design стал инструментом для любой визуальной коммуникации: презентации, лендинги, одностраничники для печати в PDF, письма, анимации, визуалы для соцсетей. Нейт называет это «на одну ступень выше продакт-дизайна» — коллаборация с Claude над визуалами, главная задача которых — донести идею и собрать фидбек, а не стать готовым продуктом.
По мере того как модели становятся лучше в работе с изображениями, растёт и диапазон задач, которые может решать Claude Design. Последняя модель уровня Opus — Claude Opus 5 — лучше читает графики, диаграммы и скриншоты, что делает связку с Claude Design особенно сильной для презентационных дек и меморандумов.
## Чего Claude Design делать не умеет — и не должен
У Claude Design нет собственной модели генерации изображений, поэтому он плохо подходит для дизайна логотипов — хотя люди всё равно пытаются его так использовать. Правильный подход: принести уже готовый логотип и ассеты, а инструмент будет работать с ними, а не пытаться сгенерировать с нуля. Вообще вся логика инструмента строится вокруг одной идеи: Claude создаёт варианты и отправные точки, чтобы не пялиться на пустой холст, а выбор хорошего варианта (или комбинации нескольких) остаётся за человеком.
И если задача — выпускать в продакшн реальный код, для этого существует Claude Code. Claude Code — для написания рабочего софта, Claude Design — для всего остального: ранней проработки идей, совместной работы, получения согласия команды на направление до того, как кто-то начал строить. Чем лучше модели становятся в написании продакшн-кода, тем важнее становится этап до кодирования — придумать хорошую идею, выровнять всех на одном видении, собрать обратную связь пока идея ещё сырая.
| Инструмент | Для чего | Что на выходе |
|---|---|---|
| Claude Code | Написание и правка реального кода | Рабочий продакшн-софт |
| Claude Design | Ранняя проработка идей, визуальная коммуникация | Прототипы, презентации, анимации, лендинги |
## Как Нейт использует Claude Design каждый день
Для Нейта это обычный рабочий инструмент, а не что-то экзотическое. Вот несколько примеров из его собственной практики:
- **Интро-анимация Claude Design.** Ролик, который проигрывается при регистрации в Claude Design, сделан внутри самого инструмента — но не напрямую: Нейт не аниматор, поэтому сначала попросил Claude Design собрать ему кастомный видеоредактор, а потом уже в этом редакторе сделал анимацию.
- **Приложение расписания метро** с настраиваемыми параметрами анимации — чтобы точно подобрать физику движения.
- **Цветовые контролы в стиле Instagram.** Нейт попросил Claude дать возможность крутить слайдеры и пресеты для настройки цветовой схемы приложения, вместо того чтобы описывать цвета словами.
- **Редизайн самого Claude Design.** Вместе с коллегами Хелен и Эндрю Нейт прямо внутри инструмента экспериментирует с новым дизайном редактора. В продакшн эту версию отправлять не будут — это способ исследовать, каким продукт может стать в будущем.
## Лучшие практики работы с инструментом
Нейт собрал набор советов, которые реально экономят время и нервы.
**Думай до того, как промптишь.** Самый эффективный способ получить результат, совпадающий с задумкой, — заранее сформулировать, что нужно. Нейт много времени тратит на написание промптов до того, как садится дизайнить: иногда диктует их голосом прямо в Claude Design, иногда набирает в заметках на телефоне с дивана, иногда записывает голосовую заметку на прогулке и вставляет расшифровку позже. Смысл в том, чтобы придумать, что хочешь, вдали от компьютера — тогда за компьютером Claude сразу выполнит именно твоё видение.
**Скажи Claude, как это должно выглядеть.** Без явных указаний Claude выбирает одну из своих любимых эстетик — ты, скорее всего, узнаешь её с первого взгляда. Чтобы этого избежать, задавай конкретные шрифты и цвета, приноси мудборд с референсами или попроси Claude накидать пары шрифт+цвет и обсуждай их по очереди, пока не найдётся подходящая.
**Превращай повторяющуюся работу в дизайн-систему.** Загрузи брендовые файлы и ассеты — логотипы, слайды, скриншоты, типографские спеки — и Claude проанализирует их и соберёт дизайн-систему. Каждый следующий артефакт будет стартовать не с пустого листа, а с твоих готовых решений.
**Проси десять вариантов, потом ремиксуй.** Большинство будет неудачными — это нормально, один-два окажутся хорошими. Дальше просто говоришь: «мне нравится вариант B и немного вариант D, сделай пять ремиксов, смешав их».
**Рисуй то, что не можешь описать словами.** Если в голове есть макет, а слов для него нет — набросай на бумаге и загрузи фото.
**Указывай и говори.** Вместо длинного описания, какой элемент имеешь в виду, кликни на него и произнеси комментарий голосом (нужна включённая диктовка на устройстве) — текст появится в поле комментария сам.
**Начинай с вайрфреймов, если детализация не важна.** Запрос на вайрфрейм выполняется быстрее и держит Claude сосредоточенным на структуре, а не на визуале — отличный способ быстро прогнать много идей.
**Финальные штрихи делай руками.** Для мелких правок — переставить блок, удалить, поправить текст, изменить размер — используй прямое редактирование, а не промпты. Это не тратит токены, а мелкую подгонку глазами всё равно делать быстрее.
**Дай Claude реальный контекст.** Если проектируешь фичу для существующего приложения, подключи GitHub — Claude подтянет компоненты и существующие экраны и с высокой точностью воссоздаст текущий дизайн как отправную точку. Веб-поиск и подключения через MCP тоже работают в Claude Design, если дизайну нужны внешние данные.
**Работай параллельно с Claude.** Не обязательно ждать, пока Claude закончит текущую задачу — можно ставить в очередь новые сообщения или продолжать говорить, пока предыдущий ответ ещё генерируется.
Если тебе только предстоит освоить базовые команды и логику работы с Claude, начни с гайда [С чего начать путь в Claude Code](/blog/how-to-start) — там разбираются те же принципы промптинга, просто применительно к коду, а не к дизайну.
## Сделай это живым
Нейт вспоминает выступление Брета Виктора «Stop Drawing Dead Fish» («Хватит рисовать мёртвую рыбу») — его стоит посмотреть каждому дизайнеру хотя бы раз. Главная мысль оттуда: всё, что мы рисуем, по умолчанию должно быть живым.
Любимые творения Нейта в Claude Design — те, что не вписываются в привычные рамки: документы с интерактивными симуляциями, презентации, которые буквально разговаривают с тобой, диаграммы, которые одновременно видео, дизайны, которые сами по себе являются собственным редактором. Код — и HTML в частности — оказался удивительным материалом для творчества, и теперь дизайнерам наконец стало относительно легко с ним работать.
Claude Design приобрёл свою нынешнюю форму именно потому, что сотрудники Anthropic постоянно находили ему применения, которые Нейт даже не планировал. Сейчас инструмент доступен в бета-версии на планах Pro, Max, Team и Enterprise.
## Итоги
История Claude Design показывает простую вещь: инструмент вырос не из грандиозного плана, а из побочного проекта одного дизайнера, который пытался решить конкретную личную проблему — не отставать от команды. Если у тебя есть идея, которую хочется быстро прощупать в визуале, прежде чем во что-то её превращать, — попробуй этот же принцип: сформулируй промпт заранее, дай Claude контекст бренда и не бойся просить сразу десять вариантов.
Это инструмент от Anthropic (в бете), который позволяет через чат создавать визуальные материалы — прототипы интерфейсов, презентации, анимации, лендинги, одностраничники — с помощью HTML как гибкого визуального формата. Доступен на планах Pro, Max, Team и Enterprise.
Claude Code предназначен для написания и доработки реального продакшн-кода. Claude Design — для ранней проработки идей, визуальной коммуникации и получения обратной связи до того, как кто-то начал строить продукт. Их можно использовать в паре: синхронизировать прототип из одного инструмента в другой.
Нет, у Claude Design нет собственной модели генерации изображений, поэтому для логотипов он подходит плохо. Лучше приносить готовые логотипы и ассеты, а инструмент будет работать с ними как с отправной точкой.
Да, можно подключить GitHub — Claude подтянет реальные компоненты и экраны и использует их как основу, воссоздавая существующий дизайн с довольно высокой точностью. Также работают веб-поиск и MCP-подключения для данных, которые нужны дизайну.
Если хочешь попробовать всё это руками — начни с бесплатного курса [«Claude с нуля»](/learn/claude-101).
По мотивам статьи Anthropic «How the product designer who built Claude Design uses it to explore ideas before building them». Пересказали по-русски для новичков.