Содержание
Обновлено 12 октября 2026 года: после официального анонса 8 октября 2026 года Claude Design вышел из беты и теперь доступен на всех тарифах, включая бесплатный. Отдельный экран claude.ai/design закроется 14 декабря 2026 года. Мы обновили условия доступа в разделе 4 и FAQ.
Обновлено 26 сентября 2026 года: мы переписали раздел 3 по официальной документации Claude Code и официальной справке. /design-sync — это команда, которая загружает дизайн-систему из вашего repo в Claude Design; путь от дизайна к коду обеспечивают передача в Claude Code и /design. Мы также исправили по официальному анонсу список направлений экспорта, добавленных в июне, и описали, что делает навык /design, встроенный в Claude Code с августа.
Claude Design — это инструмент для дизайна от Anthropic Labs, который позволяет создавать дизайн интерфейсов, прототипы, одностраничники и другие визуальные материалы прямо в диалоге (запущен 17 апреля 2026 года как исследовательский превью). А затем, 17 июня 2026 года, крупное обновление добавило импорт дизайн-систем и двусторонную синхронизацию с Claude Code (/design-sync, /design), резко сократив число итераций между дизайнерами и разработчиками. А 16 сентября 2026 года, вместе с объединением Claude Cowork и чата, Claude Design стал работать внутри любого диалога (отдельный экран claude.ai/design закроется 14 декабря 2026 года).
В этой статье разбираем: что такое Claude Design, в чём суть июньского обновления, как /design-sync и /design делят работу, условия доступа и почему это важно — на основе официальной информации. Три главные мысли сразу. (1) Claude Design — это инструмент дизайна на основе диалога, который вы доводите до ума через чат, комментарии, прямое редактирование и ползунки. (2) Главное в июне — «импортируйте свою дизайн-систему и стройте на её реальных компонентах» и «синхронизируйтесь с Claude Code в обе стороны». (3) 8 октября 2026 года он вышел из беты и доступен на всех тарифах, включая бесплатный (на Enterprise включается по умолчанию с 15 октября). С 16 сентября достаточно просто попросить дизайн в обычном диалоге, а /design-sync живёт в Claude Code.
Дизайн и код — в обе стороны
— переходите между canvas и repo
/design-sync · /design ↔
Code→Design загрузите дизайн-систему из repo через /design-sync и стройте на реальных компонентах,
Design→Code передайте готовые дизайны в Claude Code, который продолжит реализацию, а код превратите в живой прототип на canvas (/design).
1. Что такое Claude Design
Claude Design — это инструмент, где «вы описываете в диалоге, что хотите получить, Claude строит дизайн, а вы доводите его через чат, инлайн-комментарии, прямое редактирование и ползунки». Он создаёт визуальные материалы: дизайны, интерактивные прототипы и одностраничники (официальная справка «Get started with Claude Design»). В анонсе запуска упоминались и слайды, но с 16 сентября 2026 года для презентаций есть отдельный инструмент — Claude Slides. Запущен 17 апреля 2026 года как исследовательский превью для Pro / Max / Team / Enterprise, и за первую неделю им воспользовались более миллиона человек.
О модели: на момент апрельского запуска он работал на Claude Opus 4.7 (которую Anthropic назвала «нашей самой способной vision-моделью»). Однако в анонсе июньского обновления модель повторно не указана, поэтому в статье мы не утверждаем, что «июньская версия работает на Opus 4.7» (актуальное уточняйте в официальных источниках). Более широкий обзор — см. сравнение AI-инструментов для дизайна.
2. Крупное обновление в июне 2026
Обновление 17 июня 2026 года сдвинуло Claude Design от «игрушки для прототипирования» к «рабочему пространству, которое делает повседневную работу в рамках бренда». Главные изменения:
Что добавило июньское обновление
/design-sync загружает вашу дизайн-систему, а готовые дизайны передаются в Claude Code на реализацию. /design ещё и превращает код в живой прототип (§3).Коротко: это эволюция в сторону «строй на своём бренде, ходи туда-обратно с кодом и впишись в корпоративное управление».
3. /design-sync и /design — переход между дизайном и кодом
В Claude Code есть две команды, связанные с Claude Design. Согласно официальному списку команд Claude Code, /design-sync — это навык, который «преобразует React-дизайн-систему вашего repo и загружает её в Claude Design, чтобы создаваемые дизайны использовали ваши реальные компоненты» (ей можно дать имя, например /design-sync Acme DS). Первая синхронизация проверяет каждый компонент и на большом repo может занять несколько часов. Авторизация через аккаунт claude.ai выполняется командой /design-login.
| Направление | Чем | Что происходит |
|---|---|---|
| Код → Дизайн (дизайн-система) | /design-sync | Читает токены и компоненты вашего repo и загружает их в Claude Design, так что следующие дизайны начинаются с ваших реальных компонентов |
| Дизайн → Код (передача) | Передача в Claude Code / /design | Передайте готовый дизайн в Claude Code, и он продолжит с существующей работы, а не пересоберёт со скриншота. Используйте «Handoff to Claude Code» в меню экспорта (локальный агент для кода или Claude Code on the web) или импортируйте дизайн в кодовую базу командой /design из Claude Code |
| Код → Canvas (прототип) | /design | Превратите собранный код в живой прототип и доработайте его на canvas |
Такое разделение описано в июньском официальном анонсе и в официальной справке. /design-sync подходит, когда дизайн-система уже есть в коде в виде React-компонентов; брендовую дизайн-систему, построенную на шрифтах, цветах и гайдлайнах, лучше создавать в чате из файлов, файлов Figma, презентаций и логотипов (официальная справка «Set up your design system in Claude Design»).
/design упоминалась уже в июньском анонсе, а с августа 2026 года это встроенный навык Claude Code: дайте ему бриф, и он нарисует макеты UI, последовательности экранов, лендинги или постеры как несколько артбордов на одном canvas и опубликует их как Design-артефакт (официальная документация «Artifacts»). Артборды правятся выбором элементов в браузере на компьютере, и каждый можно экспортировать в PNG или PDF. Обе команды работают через Anthropic API, но не через облака вроде Amazon Bedrock, Google Cloud или Microsoft Foundry (они опираются на функции claude.ai). Это хорошо сочетается с разработкой на основе спецификаций; см. разработка на основе спецификаций.
4. Условия доступа
Условия доступа на 12 октября 2026 года, сверенные с официальной справкой и официальным анонсом 8 октября. С июня изменились две вещи: объединение 16 сентября расширило вход с отдельного экрана до ваших обычных диалогов, а 8 октября инструмент вышел из беты и стал доступен на бесплатном тарифе.
| Пункт | Детали |
|---|---|
| Тарифы | Все тарифы: Free / Pro / Max / Team / Enterprise, включён по умолчанию. На Enterprise он включается по умолчанию 15 октября 2026 года, а владелец может включить его раньше в Organization settings > Artifacts |
| Доступ | Попросить в любом диалоге (или выбрать Output > Design в поле ввода) / шаблон Design на вкладке Artifacts / Claude Code (/design) / приложения для iOS и Android / отдельный экран claude.ai/design (закроется 14 декабря 2026 года; дизайн-системы можно перенести со страницы Artifacts в Claude) |
| Где работает | Редактирование на canvas — в web / desktop. В мобильных приложениях дизайн тоже можно попросить, посмотреть и отредактировать (изменить настройки доступа — только в web / desktop). /design-sync и /design живут в Claude Code (desktop или терминал) |
| Расход | Списывается из тех же лимитов использования, что чат и Claude Code (отдельной квоты для Claude Design нет) |
| Статус | Вне беты (17 апреля — исследовательский превью → 17 июня — крупное обновление → 16 сентября — работа внутри диалогов → 8 октября — выход из беты и бесплатный тариф) |
Легко перепутать вот что: «canvas (web/desktop)» и «/design-sync / /design (Claude Code)» находятся в разных местах. Над дизайном вы работаете на canvas, который открывается рядом с диалогом (или на claude.ai/design до 14 декабря 2026 года), а синхронизируете его с кодом командами Claude Code — и именно это разделение и есть мост между дизайнерами и разработчиками.
5. Почему это важно
До сих пор переход от дизайна к коду часто означал «пересборку со скриншота». Claude Design + /design-sync закрывает этот разрыв за счёт того, что (1) импортирует вашу дизайн-систему, чтобы строить на «реальных компонентах», и (2) позволяет дизайну и коду ходить туда-обратно в обе стороны. Инженеры не собирают с нуля, а дизайнеры могут отполировать результат кода на canvas.
Иными словами, Claude Design — это продукт, который связывает рабочий процесс «дизайнер × разработчик» в одну линию. Когда нужно быстро показать сборку, превратите её в общую страницу с помощью Claude Code Artifacts; для UI в рамках бренда используйте Claude Design — комбинировать новые возможности из окружения Claude Code выгодно. Пресса сообщает, что выход AI в область дизайна оказался достаточно ощутимым, чтобы на это отреагировали акции действующих производителей дизайн-инструментов (точные цифры мы не утверждаем — они колеблются).
Наряду с Claude Design в той же группе инструментов для создания материалов в бете также появились Claude Dashboards, который строит дашборды с данными, и Claude Motion, который создаёт объясняющие анимации. Различия и выбор между ними описаны в статье Что такое Claude Dashboards и Motion.
Итоги
Claude Design (исследовательский превью в апреле 2026, крупное обновление 17 июня) — это инструмент дизайна от Anthropic Labs для создания UI, прототипов, одностраничников и прочего через диалог; с 16 сентября 2026 года он работает внутри любого диалога. Главное в июне — (1) импорт дизайн-систем (сборка на реальных компонентах), (2) переход между дизайном и Claude Code (/design-sync, передача, /design), (3) прямое редактирование на canvas, (4) общие лимиты использования (решение проблемы «прожорливости токенов»), (5) управление брендом для Enterprise и (6) расширенные коннекторы экспорта.
/design-sync — это команда Claude Code, которая загружает React-дизайн-систему из вашего repo в Claude Design. Готовые дизайны уходят в реализацию через передачу в Claude Code или /design, а /design ещё и превращает код в живой прототип на canvas. Он доступен на всех тарифах, включая бесплатный (вне беты с 8 октября 2026 года), отдельный экран claude.ai/design закроется 14 декабря 2026 года, а /design-sync — в Claude Code. Суть — в сокращении числа итераций между дизайнером и разработчиком. Заметьте: многое может меняться — например, модель июньской версии официально повторно не названа — поэтому актуальное сверяйте с документацией. По теме: сравнение AI-инструментов для дизайна, Claude Code Artifacts, разработка на основе спецификаций.
FAQ
Q. Что такое Claude Design?
A. Инструмент дизайна от Anthropic Labs для создания дизайнов через диалог. Опишите словами, что вам нужно, и Claude сгенерирует UI, прототипы и одностраничники, которые вы доведёте через чат, инлайн-комментарии, прямое редактирование и ползунки. Запущен 17 апреля 2026 года как исследовательский превью, с более чем миллионом пользователей за первую неделю. С 16 сентября 2026 года достаточно просто попросить дизайн в обычном диалоге (также через шаблон Design на вкладке Artifacts, Claude Code или отдельный экран claude.ai/design до 14 декабря 2026 года).
Q. Что делает команда /design-sync?
A. Она загружает дизайн-систему из вашего repo в Claude Design. Если дизайн-система уже есть в коде в виде React-компонентов, команда читает токены и компоненты и выгружает их, чтобы дизайны Claude Design строились на ваших реальных компонентах. Первая синхронизация проверяет каждый компонент, поэтому на большом repo может занять несколько часов. Обратное направление (из дизайна в код и из кода на canvas) берут на себя передача в Claude Code и /design: передайте готовый дизайн в Claude Code, и он продолжит с существующей работы, а не пересоберёт со скриншота.
Q. Что изменилось в обновлении июня 2026?
A. В основном (1) импорт дизайн-систем (сборка на ваших компонентах, с проверкой и исправлением результата), (2) переход между дизайном и Claude Code (/design-sync, передача, /design), (3) прямое редактирование на canvas (перетаскивание/изменение размера/выравнивание), (4) решение «прожорливости токенов» за счёт общих лимитов использования с чатом/Cowork/Claude Code, (5) управление брендом для Enterprise, где администратор утверждает и блокирует эталон, и (6) расширенные коннекторы экспорта. Он сместился от прототипирования к «рабочему пространству для реальной работы в рамках бренда».
Q. На каком тарифе им можно пользоваться?
A. 8 октября 2026 года он вышел из беты и доступен на всех тарифах, включая бесплатный (Free / Pro / Max / Team / Enterprise), по официальной справке на 12 октября 2026 года. Расход списывается из тех же лимитов, что чат и Claude Code. Он включён по умолчанию, а на Enterprise включается по умолчанию 15 октября 2026 года (владелец может включить его раньше). В мобильных приложениях можно попросить, посмотреть и отредактировать дизайн, а /design-sync и /design живут в Claude Code. Отдельный экран claude.ai/design закроется 14 декабря 2026 года, поэтому дизайн-системы оттуда лучше перенести заранее.
Q. На какой модели он работает?
A. На момент апрельского запуска он работал на Claude Opus 4.7 (которую Anthropic назвала «нашей самой способной vision-моделью»). Однако в анонсе июньского обновления модель не указана, поэтому мы не можем утверждать, что «июньская версия работает на Opus 4.7». Модели и детали могут обновляться, поэтому за актуальной информацией обращайтесь к официальной странице.
