Claude Design — встроенный непосредственно в Claude инструмент Anthropic для создания визуальных материалов. Опишите, что хотите сделать, и Claude подготовит работающий визуальный черновик на интерактивном холсте. Затем дорабатывайте его в разговоре, с помощью встроенных комментариев или прямого редактирования, пока не получите нужный результат. Это не просто генератор изображений. Claude Design создаёт полностью интерактивные прототипы, готовые презентации, редактируемые документы и визуализации на основе кода. Результат — настоящий HTML, CSS и JavaScript: его можно экспортировать, передать разработчикам или перенести в другой инструмент доступным способом экспорта. Claude Design доступен в бета-версии на платных тарифах Pro, Max, Team и Enterprise и расходует общий лимит использования вашего тарифа. На Pro, Max и Team он включён по умолчанию. На Enterprise доступ отключён по умолчанию, пока администратор не включит его. На Free можно создавать обычные артефакты, но шаблон Claude Design недоступен. ## Как открыть Claude Design В разговоре попросите создать дизайн или выберите Output > Design. На вкладке Artifacts выберите шаблон Design. В Claude Code также доступна команда /design. Отдельная версия по-прежнему доступна на [claude.ai/design](https://claude.ai/design). С мобильного устройства можно запросить дизайн и просматривать его. Для редактирования холста и настроек общего доступа используйте веб-версию или настольное приложение. Начните с ясного задания: для чего нужен дизайн, кто будет им пользоваться, какие разделы в нём нужны, его размеры и реальные материалы бренда. Сначала передайте содержание и только потом просите улучшить макет. ### Ваш первый дизайн ``` Создай целевую страницу для фитнес-приложения PeakForm. Тёмная тема с неоново-зелёными акцентами. Добавь главный экран с заголовком, три карточки преимуществ, таблицу с тремя тарифами и нижний колонтитул со ссылками на соцсети. ``` Для первого тренировочного проекта используйте примерное содержание. Отмечайте вымышленные цены, отзывы и сведения о компании как заполнители. ## Что можно создавать ### Интерактивные прототипы Полностью кликабельные прототипы с работающей навигацией, состояниями при наведении, анимацией и переходами. Это не статичные макеты: они ведут себя как настоящие приложения. ``` Создай интерактивный прототип приложения для управления задачами. Добавь: - Боковую панель с категориями проектов - Kanban-доску с перетаскиваемыми столбцами (To Do, In Progress, Done) - Модальное окно подробностей задачи с полями срока, исполнителя и описания - Переключатель тёмного режима в верхней панели Сделай все взаимодействия рабочими. ``` ### Презентации и питч-деки Полноценные [презентации](/resources/claude-excel-powerpoint-guide-2026) с единым стилем, переходами и макетами, готовыми к выступлению. Claude подготовит структуру, дизайн и содержание. ``` Создай питч-дек из 10 слайдов для привлечения финансирования Series A. Компания — юридическая исследовательская платформа на базе ИИ. Добавь: титульный слайд, проблему, решение, размер рынка, скриншоты демонстрации продукта, бизнес-модель, показатели динамики, конкурентную среду, команду и запрос. Используй чистый современный дизайн в тёмно-синем и белом цветах. Профессионально, но без излишне корпоративного стиля. ``` ### Графика для социальных сетей Публикации и карусели Instagram, шаблоны сторис, баннеры LinkedIn, заголовки Twitter и любые другие форматы для соцсетей. ``` Создай карусель для Instagram (5 слайдов) на тему «5 инструментов ИИ, которые вам нужны в 2026 году». Стиль: выразительные заголовки без засечек, тёмные градиентные фоны, неоново-синие акценты. На каждом слайде — название инструмента, описание в одну строку и визуальная иконка. Первый слайд — цепляющее начало, последний — призыв к действию. ``` ### Постеры и маркетинговые материалы ``` Создай постер для технологической конференции «Build 2026». Даты: 15–17 сентября. Место: Сан-Франциско. Стиль: футуристичный, тёмный фон, голографические градиентные акценты. Добавь места для портретов спикеров и логотипов спонсоров, а также QR-код для регистрации. ``` ### Документы и резюме Профессиональные материалы с подходящей типографикой, макетом и форматированием: резюме, одностраничные документы, разборы кейсов и отчёты. ``` Создай современное резюме для старшего продуктового дизайнера. Две колонки. Левая: контактная информация, навыки в виде диаграмм, образование, сертификаты. Правая: опыт с должностью, компанией, датами и тремя пунктами для каждой позиции. Чистый шрифт без засечек. Ненавязчивые цветовые акценты. Подготовь для печати. ``` ### Трёхмерные и интерактивные визуализации Claude Design создаёт прототипы на основе кода с 3D-графикой, анимацией, шейдерами WebGL и даже интеграцией голоса или видео. Anthropic называет это «дизайном на переднем крае». ``` Создай интерактивную 3D-модель Солнечной системы. Дай мне нажимать на планеты и видеть сведения о них: диаметр, расстояние до Солнца, период обращения, число спутников и температуру поверхности. Используй реалистичные цвета и относительные размеры. Добавь орбиты и медленную анимацию вращения. Добавь управление масштабом. ``` ## Режим редактирования Уточняйте дизайн через чат, встроенные комментарии или прямое управление холстом. Используйте чат для изменения структуры, комментарии — для конкретного элемента, прямое редактирование — для настройки отступов и выравнивания. Если комментарий исчез, повторите просьбу в чате. ### Задайте точные правки ``` Сохрани текущие цвета, шрифты и содержание. Перемести основную кнопку прямо под вступительным абзацем. Уменьши отступ перед следующим разделом. Проверь макет при ширине 375px и 1440px, включая фокус клавиатуры и перенос текста. Покажи результат, прежде чем вносить какие-либо другие изменения. ``` Проверьте весь раздел до того, как будете полировать каждую мелочь. Макет с правильной структурой и черновым текстом исправить проще, чем красивую страницу с неверной структурой. ## Дизайн-системы Импортируйте готовую дизайн-систему из существующей кодовой базы или файлов дизайна. Добавьте цвета, типографику, компоненты и примеры. В Claude Code команда /design-sync помогает синхронизировать работу с дизайн-системой. Передайте Claude настоящий логотип и шрифты, которые хотите использовать. Скриншот показывает расположение элементов и стиль, но не заменяет редактируемый текст и компоненты. Попросите указать отсутствующие материалы, а не выдумывать замену. ``` Используй приложенные файлы бренда и образец дизайна. Сохрани предоставленные логотип, цвета и шрифты. На основе этих материалов создай повторно используемые стили кнопок, карточек, заголовков и отступов. Если каких-то данных не хватает, сначала объясни это, прежде чем подбирать замену. Примени систему к текущему дизайну и покажи основные компоненты вместе для проверки. ``` ## Импорт и экспорт Добавьте в задание содержание, скриншоты и нужные файлы проекта. Выберите формат экспорта для следующего этапа: PDF для проверки, PPTX для слайдов, HTML для браузера или ZIP для набора файлов. Экспорт в Google Slides доступен в отдельной версии. Доступные варианты передачи в другие инструменты перечислены в меню Export. Откройте экспортированный файл в приложении, где будете его использовать. Проверьте шрифты, разрывы страниц, ссылки, изображения и интерактивность. Перед запуском кликабельного прототипа всё ещё нужно реализовать настоящие данные, аутентификацию и другие функции рабочей версии. При передаче работы разработчику укажите цель, адаптивные макеты, ожидаемые взаимодействия и список незавершённых функций. Для презентации проверьте каждый слайд в приложении, из которого будете выступать. ## Советы и лучшие практики - Точно задавайте размеры. Запрос «1080x1080» или «16:9» сразу поможет получить нужный формат. - Используйте изображения-образцы. Загрузите скриншот понравившегося дизайна и скажите: «Сделай что-нибудь в таком духе». - Сначала задайте общий вид, затем уточняйте детали. Получите макет целиком, а после используйте режим редактирования или комментарии. - Перед крупной переработкой сохраните экспорт. Встроенной истории версий пока нет. - Экспортируйте результат почаще. До завершения проверьте, как дизайн выглядит в целевом инструменте. Если запрос не сработал, сохраните последний промпт, обновите страницу и проверьте текущее состояние проекта перед повтором. Не считайте ошибку доказательством того, что предыдущее изменение сохранилось. ## Ещё 20 примеров промптов для разных задач Ниже приведены полные примеры. Замените примерные сведения своими. Все цены, компании, отзывы, статистика и гарантии в примерах — заполнители, пока вы не предоставите реальные данные. Перед использованием прототипов с реальными людьми проверьте элементы управления. ### 1. Визитная карточка ``` Создай профессиональную визитную карточку. Лицевая сторона: имя, должность, место для логотипа компании. Оборотная сторона: телефон, электронная почта, сайт, LinkedIn QR-код. Минималистичный дизайн, тёмная тема. ``` ### 2. Шаблон email-рассылки ``` Создай шаблон email-рассылки для SaaS-компании. Заголовок с логотипом, место для главного изображения, блок с двумя колонками преимуществ, превью записей блога (3), кнопка CTA и нижний колонтитул с отпиской. ``` ### 3. Анонс запуска продукта ``` Создай графику для анонса продукта в социальных сетях. Крупно покажи название, ключевые функции в виде иконок, дату запуска и метку «Скоро». Размер: 1080x1080 для Instagram. ``` ### 4. Руководство по стилю бренда ``` Создай руководство по стилю бренда, включив: - Цветовую палитру с кодами hex - Шкалу типографики (от h1 до основного текста) - Варианты кнопок (основная, вторичная) - Компоненты карточек - Систему отступов и сетки - Примеры правильного и неправильного использования ``` ### 5. Аналитическая панель ``` Создай аналитическую панель со следующими элементами: - Верхняя панель: выбор диапазона дат, фильтры - Карточки KPI: выручка, пользователи, отток, MRR (со стрелками тренда) - Линейный график: динамика выручки по месяцам - Столбчатая диаграмма: регистрации по каналам - Таблица: 10 клиентов с наибольшими расходами Тёмная тема, сделай интерфейс интерактивным. ``` ### 6. Панель финансового отчёта ``` Создай панель квартального финансового отчёта. Добавь сводку P&L, каскадную диаграмму денежных потоков, кольцевую диаграмму выручки по сегментам, таблицу сравнения год к году и разбивку расходов. Чистый корпоративный стиль. ``` ### 7. Интерактивная викторина ``` Создай интерактивную викторину по географии мира. 10 вопросов с вариантами ответов и мгновенной обратной связью (верно/неверно с объяснением). В конце покажи счёт и разбор результатов. Добавь кнопку «Попробовать снова». ``` ### 8. Обзор учебной программы ``` Создай наглядную программу 12-недельного интенсива по анализу данных. Покажи каждую неделю отдельной карточкой с темой, основными навыками и индикатором прогресса. Сделай интерфейс прокручиваемым и интерактивным. ``` ### 9. Сайт-портфолио ``` Создай сайт-портфолио для UX-дизайнера. Разделы: главный экран с именем и слоганом, сетка кейсов (6 проектов с миниатюрами), обо мне с местом для фотографии, список навыков, форма обратной связи. Минимализм, много пустого места. ``` ### 10. Свадебное приглашение ``` Создай цифровое свадебное приглашение. Элегантный шрифт с засечками, акварельная цветочная рамка, имена пары, дата, место, кнопка RSVP и таймер обратного отсчёта. Мягкая палитра пудрового и шалфейного оттенков. ``` ### 11. Знакомство с мобильным приложением ``` Создай сценарий знакомства из 4 экранов для приложения медитации. На каждом экране: область для иллюстрации, заголовок, основной текст, точки прогресса и кнопка «Далее». На последнем экране — кнопка «Начать». Спокойная синяя и фиолетовая палитра. ``` ### 12. Страница тарифов SaaS ``` Создай страницу тарифов SaaS с тремя планами: Starter ($19/mo), Pro ($49/mo), Enterprise (индивидуальный). Под карточками добавь сравнительную таблицу функций. Добавь переключатель годовой/месячной оплаты. Выдели план Pro как «Самый популярный». Добавь FAQ. ``` ### 13. Интерактивная карта ``` Создай интерактивную карту мира: при нажатии на любую страну я должен видеть численность населения, столицу, ВВП и флаг. Используй цвета по континентам. Добавь управление масштабом и строку поиска. ``` ### 14. Музыкальный визуализатор ``` Создай музыкальный визуализатор со столбцами, волновыми формами и частицами, реагирующими на звук. Дай пользователю выбрать один из 3 стилей визуализации. Добавь управление воспроизведением, паузой и громкостью. Используй WebGL. ``` ### 15. Страница товара ``` Создай страницу товара для премиальных беспроводных наушников. Добавь карусель изображений, выбор цвета (3 варианта), цену с зачёркнутой исходной ценой, кнопку Add to Cart, таблицу характеристик, отзывы клиентов (оценка звёздами и текст) и блок похожих товаров. ``` ### 16. Сценарий оформления заказа ``` Создай сценарий оформления заказа из 3 шагов: Шаг 1: сводка корзины с количеством товаров Шаг 2: форма с адресом доставки Шаг 3: оплата с полями карты Добавь индикатор прогресса вверху, боковую панель с заказом и значки доверия. Сделай все этапы интерактивными. ``` ### 17. Инфографика ``` Создай инфографику на тему «Состояние ИИ в 2026 году». Добавь хронологию крупных запусков, сравнительную диаграмму размера рынка, долю внедрения по отраслям и блок с прогнозами. Вертикальная прокрутка, современный плоский дизайн. ``` ### 18. Сравнительная таблица ``` Создай интерактивную сравнительную таблицу для 5 инструментов управления проектами. Дай пользователю выбирать, какие инструменты сравнивать. Категории: цена, функции, размер команды, интеграции, мобильное приложение и общий рейтинг. ``` ### 19. Мини-игра ``` Создай простую игру на поиск пар карт. Сетка 4x4, карты лежат рубашкой вверх. Нажатие переворачивает карту; нужно найти пары. Отслеживай число ходов и время. При победе покажи экран с анимацией конфетти. Используй яркую цветовую схему. ``` ### 20. Анимированный логотип ``` Создай анимированное вступление с логотипом для YouTube-канала «TechPulse». Буквы должны появляться одна за другой с пульсирующим эффектом. Добавь за текстом ненавязчивую графику звуковой волны. Зацикли анимацию. ``` ## Ещё четыре промпта для макетов и правок ### Каркас мобильного приложения ``` Создай каркас мобильного банковского приложения. Добавь экраны: - Главная панель (баланс, последние операции, быстрые действия) - Сценарий отправки денег (3 шага) - История операций с фильтрами - Страница настроек Низкая детализация, оттенки серого, с поясняющими выносками к каждому разделу. ``` ### Целевая страница курса ``` Создай целевую страницу онлайн-курса «ИИ для начинающих». Добавь: главный экран с заголовком и кнопкой CTA, раскрывающийся план курса, раздел с биографией преподавателя, карточки с тремя отзывами учеников, цену со значком гарантии возврата денег и раздел FAQ. Светлая тема, дружелюбные цвета. ``` ### Примеры правок в чате ``` # Общие изменения Сделай весь дизайн темнее. Используй тёмно-синюю и угольную палитру. # Изменения структуры Перемести раздел с ценами перед отзывами. Добавь ниже раздел FAQ. # Изменение стиля Увеличь все заголовки. Вместо шрифта по умолчанию используй Inter. Сделай все углы кнопок скруглёнными до 12px. # Изменения содержания Перепиши заголовок главного экрана так, чтобы он побуждал к действию. Замени CTA «Узнать больше» на «Начать бесплатный период». ``` ### Опишите дизайн-систему ``` Создай дизайн-систему для моего бренда. # Цвета Основной: #1B3A5C (тёмно-синий) Вторичный: #C88B2E (золотой) Акцентный: #2E8B7A (бирюзово-зелёный) Фон: #F8F9FA (светло-серый) Текст: #3A3A3A (тёмно-серый) # Типографика Заголовки: Inter Bold Основной текст: Inter Regular, 16px Подписи: Inter Light, 14px # Компоненты Кнопки: скруглённые (8px), основного цвета Карточки: белые, с лёгкой тенью и углами со скруглением 12px Иконки: контурный стиль, 24px Сохрани эту систему как мою стандартную дизайн-систему и применяй её во всех будущих проектах. ``` После промпта о дизайн-системе уточните, где она сохранена, и прикрепляйте или выбирайте её при запуске следующего проекта. Просьба в промпте сама по себе не доказывает, что система унаследована всеми будущими рабочими пространствами. ## Частые проблемы - **Дизайн выглядит правильно, но кнопка ничего не делает:** опишите конкретное нажатие и ожидаемый результат, затем попросите реализовать и проверить это взаимодействие. - **Деталь бренда постоянно меняется:** приложите оригинальный материал и перечислите элементы, которые должны оставаться неизменными. - **На мобильном экране тесно:** укажите целевую ширину и попросите проверить всю страницу, включая длинные заголовки и пустые состояния. - **Экспорт отличается от холста:** откройте экспорт в целевом приложении и отправьте скриншот конкретной проблемы. ## Краткая справка | Задача | С чего начать | |---|---| | Начать дизайн | Разговор, Output > Design или шаблон Design в Artifacts | | Изменить структуру | Опишите правки в чате | | Исправить элемент | Оставьте встроенный комментарий | | Настроить отступы | Используйте редактирование холста в веб-версии или настольном приложении | | Сохранить стиль бренда | Импортируйте существующую дизайн-систему и материалы | | Сохранить этап работы | Перед крупными правками экспортируйте копию | | Передать результат | Экспортируйте нужный формат и перечислите незавершённые функции | > **СДЕЛАЙТЕ ЭТО СЕГОДНЯ:** выберите небольшой дизайн, передайте Claude настоящее содержание и соберите полную первую версию. Внесите три конкретные правки, экспортируйте её и откройте экспорт, прежде чем считать задачу завершённой.