Claude Design: как собирать прототипы, презентации и визуал прямо в Claude

Claude Design это визуальный редактор от Anthropic, встроенный прямо в Claude. Ты описываешь что нужно, Claude собирает рабочий драфт на живом канвасе. Дальше правишь через чат, инлайн-комментарии или руками, пока не будет как надо.

Это не генератор картинок. На выходе кликабельные прототипы, презентации, редактируемые документы, визуализации на коде. Всё это реальный HTML, CSS и JavaScript, который можно выгрузить, отдать разработчику или закинуть в Canva, Figma, Vercel.

Claude Design входит в Pro, Max, Team, Enterprise. Без доплаты. Работает на claude.ai/design и в десктоп-приложении Claude.

Как открыть

Вариант A (десктоп). Открой десктоп-приложение Claude. В левом нижнем углу сайдбара кнопка Design. Клик.

Вариант B (браузер). Заходи на claude.ai/design. Тот же интерфейс, те же возможности.

Работа устроена по проектам. У каждого проекта своя история чата, свой канвас, свой дизайн-контекст. Жми New Project чтобы начать с нуля.

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

Что можно собрать

Интерактивные прототипы

Полностью кликабельные прототипы: рабочая навигация, hover-состояния, анимации, переходы. Это не статичные мокапы, они ведут себя как настоящее приложение.

Build an interactive prototype for a task management app. Include:
- A sidebar with project categories
- A kanban board with drag-and-drop columns (To Do, In Progress, Done)
- A task detail modal with due date, assignee, and description fields
- Dark mode toggle in the top bar
Make all interactions functional.

Презентации и питч-деки

Готовые слайды с единым стилем, переходами и раскладкой под спикера. Claude берёт на себя структуру, дизайн и текст.

Create a 10-slide pitch deck for a Series A fundraise. The company is an AI-powered legal research platform. Include: title slide, problem, solution, market size, product demo screenshots, business model, traction metrics, competitive landscape, team, and ask. Use a clean, modern design with navy blue and white. Professional but not corporate.

Графика под соцсети

Instagram-посты, карусели, сторис, LinkedIn-баннеры, Twitter-шапки, любые форматы.

Design an Instagram carousel (5 slides) about '5 AI Tools You Need in 2026.' Style: bold sans-serif headings, dark gradient backgrounds, neon blue accent color. Each slide should have one tool name, a one-line description, and a visual icon. First slide is the hook, last slide is the CTA.

Постеры и маркетинговые материалы

Design a poster for a tech conference called 'Build 2026.' Date: September 15-17. Location: San Francisco. Style: futuristic, dark background, holographic gradient accents. Include speaker headshot placeholders, sponsor logos area, and QR code for registration.

Документы и резюме

Профессиональные документы с типографикой, вёрсткой, форматированием. Резюме, one-pager, кейсы, отчёты.

Design a modern resume for a senior product designer. Two-column layout. Left column: contact info, skills bar charts, education, certifications. Right column: experience with role, company, dates, and 3 bullet points each. Clean sans-serif font. Subtle color accents. Print-ready.

3D и интерактивные визуализации

Claude Design тянет прототипы на коде с 3D-графикой, анимациями, WebGL-шейдерами, интеграцией голоса и видео. Anthropic называет это «frontier design».

Build an interactive 3D solar system. Let me click on each planet to see its facts: diameter, distance from the sun, orbital period, number of moons, and surface temperature. Use realistic colors and relative sizing. Add orbital paths and a slow rotation animation. Include a zoom control.

Режим редактирования

Всё что генерит Claude Design полностью правится. Жми кнопку Edit сверху канваса чтобы войти в прямое редактирование. Но у тебя не один способ, а три.

Правки через чат. Пишешь что поменять в чате, Claude обновляет на канвасе. Подходит для крупных изменений: «сделай шапку выше», «поменяй цветовую схему на зелёную».

Инлайн-комментарии. Кликаешь по любому месту на канвасе, ставишь пин комментария. Пишешь фидбек прямо на элементе. Claude читает и правит именно этот элемент. Подходит для точечных правок: «сдвинь кнопку на 10px вправо», «этот текст жирным».

Прямое управление. Жмёшь Edit сверху канваса. Открывается прямое управление: перетаскивание элементов, хендлы ресайза на каждом боксе, редактирование текста кликом внутрь, пипетки цвета, переупорядочивание слоёв. Подходит когда точно знаешь что хочешь и лень объяснять.

Дизайн-системы

Если собираешь несколько проектов под один бренд, Claude Design сохраняет твою дизайн-систему: цвета, типографика, стили компонентов. Не надо каждый раз объяснять бренд с нуля.

Чтобы настроить, открой любой проект, жми Design System сверху. Добавь фирменные цвета, шрифты, стили компонентов. Сохрани. Дальше каждый новый проект в этом воркспейсе подтягивает систему.

Если параллельно работаешь в Claude Code, дизайн-систему можно синкать между ними командой /design-sync. Так кодовая база и прототипы остаются визуально в одном ключе.

Импорт и экспорт

Claude Design стыкуется с другими инструментами через встроенные коннекторы.

Импорт из: Figma (кидаешь share-ссылку), PDF (грузишь напрямую), картинки (drag and drop), текст и Markdown (копи-паст).

Экспорт в: Canva, Figma, Adobe, Vercel, Wix, Gamma, Webflow, Framer, Base44. Каждый коннектор отдаёт дизайн в целевом формате.

Что важно на практике

Указывай размеры сразу. «1080x1080» или «16:9» даёт правильный размер с первого выхода.

Используй референсы. Загрузи скрин дизайна, который тебе нравится, и скажи «сделай в таком духе».

Собирай широко, потом доводи. Сначала общая раскладка, потом детали через Edit или комменты.

Сохраняй версии. Claude Design автосохраняет, но версии можно фиксить руками чтобы сравнивать итерации.

Экспортируй пораньше. Проверь как дизайн смотрится в целевом инструменте до финала.

Если словил «chat upstream error», обнови страницу и отправь последнее сообщение заново. Проект сохраняется автоматически, ничего не потеряется.

Если у тебя бизнес и нужно встроить AI в маркетинг, продажи, контент или продукт: grindaleai.com/work.

Свежие связки, промпты и разборы в канале: t.me/grindaleweb3.