← denisyudin.com Claude Design — разбор
1 / 22
Anthropic · 17 апреля · Research preview

Claude Design
разбор без хайпа

Что на самом деле выпустил Anthropic, для кого он, что сломает ваш недельный лимит — и 9 секретов из утёкшего системного промпта на 422 строки.

Главный вердикт

Claude Design — не замена Figma. Это инструмент для другой аудитории с другой логикой работы.

+

Сэкономит часы

если знаешь, как пользоваться: прототип, дизайн, слайды, баннеры — за минуты.

Сожрёт лимит

если не знаешь — недельная квота уйдёт за пару часов, и ты останешься ни с чем.

=

Не убийца Figma

Figma падала задолго до релиза. Раздутое IPO, убытки, общий AI-страх по SaaS.

Что такое Claude Design

Отдельная вкладка на claude.ai. Описываешь текстом — Claude строит визуально. Прототипы, лендинги, презентации, баннеры.

Ключевая механика

  • Не генерирует картинки — пишет код: HTML, CSS, React-компоненты
  • Каждый дизайн — работающая веб-страница
  • Результат интерактивный: кнопки кликаются, страница скролится
  • Можно отдать в Claude Code одной командой

Доступ

  • Тарифы Pro, Max, Team, Enterprise
  • Бесплатного доступа нет
  • Только в вебе — не в Claude Code, не в десктопе
  • На Enterprise включается админом вручную

Первая строка системного промпта: «Ты эксперт по дизайну, ты создаёшь дизайн-артефакты через HTML». Claude Design не рисует — он программирует дизайн. Отсюда интерактивность и готовность к передаче в код.

Разоблачение хайпа

Блогеры: «Claude убил Figma за 24 часа». Акции Figma −13% за неделю. Реальный контекст никто не даёт.

ДатаСобытиеЦенаЧто происходило
Июль 2025IPO Figma~142$Оценка $62 млрд — в 3 раза выше реальной
Янв 2026−30%Claude Design ещё не существует
Март 2026−28%Claude Design всё ещё нет
10 апр 2026Минимум17.73$До релиза Claude Design — неделя
17 апр 2026Релиз Claude DesignПоследний гвоздь в крышку гроба, который строился задолго

Причины падения — раздутое IPO, выручка $1 млрд при убытке $1.25 млрд, общий AI-страх по SaaS и конкуренты: Stitch, Lovable, Bolt, v0, Replit — все вышли до Claude Design.

Для кого — и для кого точно нет

Figma и Claude Design конкурируют за разных людей. Это не замена — это соседняя полка.

Claude Design — ваш

  • Фаундер: показать идею инвестору без дизайнера
  • Продукт-менеджер: прототип до разговора с командой
  • Маркетолог: лендинг/баннер за 10 минут
  • Разработчик: визуал перед тем, как начать кодить
  • Стартапер, работающий сам на себя
  • Тот, кто устал от PowerPoint

Claude Design — не ваш

  • Профессиональный дизайнер с настроенной Figma
  • Нужен Pixel Perfect production design
  • Нужна экспортируемая Figma-спецификация
  • Нужна безлимитная генерация
  • Нужны компоненты, auto-layout, плагины, командные библиотеки

Из системного промпта: «Хороший детальный дизайн не начинается с нуля — он опирается на существующий дизайн-контекст. Без контекста результат будет плохим». Это инструмент для тех, кто знает, чего хочет, но не умеет это нарисовать сам.

Четыре вкладки интерфейса

На первой странице Claude Design — четыре режима. Last три многие недооценивают и напрасно.

01

Prototype

Интерактивные вещи: прототипы приложений, лендинги, дашборды.

02

Slide deck

Презентации с speaker notes. Навигация, печать в PDF, локальное состояние.

03

From template

Свои или чужие шаблоны — клонируй структуру под новые продукты.

04

Other

Статика: email-рассылки, пейджеры, маркетинговые баннеры, каркасы.

Правило большого пальца: Prototype — для кликабельных вещей. Other — для статичных. Путают чаще всего эти два режима.

Что можно создать

Любой цифровой артефакт, который можно описать HTML + CSS + React.

Лендинги и веб-страницы

От логотипов до полноценных one-page.

Мобильные прототипы

iOS/Android — автоматически в рамке телефона.

Презентации и слайд-деки

С анимацией, навигацией, speaker notes.

Маркетинговые баннеры

Несколько вариантов за один промпт.

Email-рассылки

В фирменном стиле из дизайн-системы.

Каркасы (wireframes)

Структура без финального визуала.

Motion / анимированные видео

HTML-таймлайн как в After Effects из промпта.

Дашборды и админки

Любые панели управления, таблицы, графики.

Лайфхак: откройте вкладку Claude Design на iPad Pro с Apple Pencil — рисуйте скетч рукой, Claude превратит набросок в полноценный дизайн. Мышкой/трекпадом это неудобно.

Дизайн-система — дорогой шаг

Ваши цвета, шрифты, логотипы, стили. Claude запоминает и применяет ко всем будущим проектам в проекте.

Как создать

  • Ссылка на GitHub — Claude вытащит стили сам
  • Путь на локальном компьютере
  • Upload Figma-файла
  • Перетянуть логотипы/ассеты вручную
  • В конце — заметки и Continue to generation

Цена

20−25%
недельного лимита
~4$
средний extra usage

~5 минут времени генерации.

Осторожно: когда даёшь Claude Design полную свободу — результат креативнее. С дизайн-системой модель зажата в рамках и может стать хуже. Сначала попробуйте без системы, инвестируйте в неё только когда точно поняли инструмент.

Режим Prototype

Wireframe vs High Fidelity + Plan Mode

Два режима детализации. Плюс расширенный план-режим, который задаёт 10+ вопросов перед генерацией.

Wireframe

  • Быстрые наброски
  • Структура без визуала
  • Для показа логики, не стиля

High Fidelity

  • Финальный визуал
  • С дизайн-системой
  • Кликабельный прототип

Plan Mode — обязательный

Claude задаёт минимум 10 вопросов. Это цитата из промпта, не пожелание.

  • Продукт и целевая аудитория
  • Главная цель лендинга
  • Язык и тон
  • Что должно быть интерактивным
  • Тарифы, валюта, шрифты
  • Сколько вариантов (1 или 3)

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

Самый важный шаг

Контекст — король

Из системного промпта: «Создание полного макета с нуля — крайняя мера, которая приведёт к плохому дизайну. Без контекста результат будет шаблонным».

Dribbble / Awards / Godly

Найдите референс-лендинг и приложите его к промпту.

GitHub-репозиторий

Подключите свой проект — Claude возьмёт реальные цвета, отступы, шрифты.

Figma-файл

Не копируется дословно — используется для воспроизведения стиля.

URL любого сайта

Web Capture извлекает живые компоненты, не скриншоты.

Скетч на iPad

Набросок превращается в napkin-файл → полноценный дизайн.

CLAUDE.md в корне

Постоянные инструкции на весь проект — как в Claude Code.

Промпт — лайфхаки

Четыре приёма, которые радикально улучшают первый результат и экономят лимит.

1. Негативные указания

Пишите, чего не хотите. Запретить проще, чем потом переделывать.

«без градиентов, без ярких цветов, структура монохромная»

2. Ссылки на реальные продукты

«Вдохновись как Apple» — сработает. «Скопируй интерфейс Apple» — откажется (проверяет email-домен).

3. Пусть Claude Code сам напишет промпт

Откройте Claude Code в терминале: «Напиши детальный промпт для Claude Design. Мне нужен лендинг для X». Получите структурированный промпт на 10–15 строк.

4. Один визуальный запрос — один промпт

Не мегапромпты. «Поменяй шрифт, перекрась фон, подвинь кнопку» — Claude сделает 1–2 вещи, остальное проигнорирует.

Модели: Opus 4.7 — для первого создания и плана. Sonnet 4.6 — для итераций, правок, анимаций. Sonnet справится не хуже, но в разы дешевле по токенам.

Variants и Twix

Две механики итерации, недоступные в обычном Claude Code. Там же — главное правило экономии.

Variants (варианты)

  • В Plan Mode можно заказать 1/2/3 варианта финальной страницы
  • Параллельная генерация разных направлений
  • Выбираете лучшее и докручиваете

Twix (точечные настройки)

  • Слайдер вариантов одного элемента
  • Мгновенный результат без нового промпта
  • Быстрее итераций в Claude Code на порядок

Правило стопа

Смотрите в Updates to-do list сбоку. Если Claude идёт не туда — жмите Stop сразу. Каждая секунда генерации = токены из лимита.

~4%
один лендинг
+17%
11 twix-вариаций

Дешевле остановить на полпути и поправить промпт, чем переделывать готовое.

Slide deck · Other · Templates

Три вкладки, которые недооценивают. А зря — презентации в Claude Design получаются сильнее, чем лендинги.

Slide deck

Speaker notes, анимации, навигация стрелками. Можно сгенерировать видео-ролик из презентации с заданной длиной.

Other

Баннеры, email, одностраничники. Навык генерации баннеров — отличный, только переносы текста требуют правок вручную.

From template

Сохранил один email-шаблон — все будущие рассылки за один промпт. Template — это дизайн-система для структуры, а не для визуала.

CLAUDE.md в дизайн-проекте работает так же, как в Claude Code: постоянные правила для каждой сессии (тёмная тема, шрифт, никаких скруглений). Поведение дизайна, не визуал.

Экспорт — 5 форматов

Готовый дизайн можно вывести куда угодно: от PDF до полноценного Claude Code-проекта одной командой.

ФорматКогда использоватьРедактируемость
PDFПечать, быстро показать клиентуНет
PPTX (edit)Если будете дорабатывать в PowerPointТекстовые блоки, фигуры двигаются
PPTX (screenshot)Показать как есть, 1:1 как в дизайнеСкриншот, не редактируется
HTML standaloneАвтономный файл, работает онлайн/офлайнЧерез код
CanvaКомандная работа, маркетологиПолностью — официальное партнёрство
Handoff to Claude CodeФинальный продакшен: дизайн → код → API → логикаЧерез Claude Code

Правильный продуктовый подход: Discovery → дизайн → согласование → разработка под дизайн. Раньше Claude параллельно собирал и код, и дизайн. Теперь цикл закрывается как в классических продуктовых командах — внутри одной подписки.

9 секретов системного промпта · 1–5

Из утёкшей 422-строчной инструкции, которую Claude Design получает перед каждой сессией.

01

Claude API внутри дизайна

Артефакт может вызвать Haiku прямо из HTML без API-ключа, в рамках вашей квоты. Кнопка «сгенерировать описание» в прототипе реально работает.

02

7 starter-компонентов

iOS/Android Frame, macOS/Browser Window, DeckStage.js (презентации), Animation.js (таймлайн), Design Canvas (сравнение вариантов).

03

Файлы <1000 строк

Жёсткое правило: «всегда разбивай код на маленькие JSX-файлы». Поэтому экспорт в Claude Code даёт модульный код, а не кашу на 3000 строк.

04

Verifier Agent

После каждой генерации Claude запускает субагента-проверяющего: открывает дизайн во фрейме, делает скриншоты, ловит вёрстку. Автоматический QA.

05

Контекст из других проектов + Web Capture

Claude может читать файлы из других ваших дизайн-проектов без копирования. Web Capture по URL извлекает живые компоненты, не скриншот. Прототип соответствует реальному продукту.

Секреты 6–9 + Anti-slop

Оставшиеся секреты и список запретов, чтобы результат не выглядел как у всех остальных AI-генераторов.

Секреты 6–9

  • Copyright protector: «скопируй Notion» → отказ. Работает только если email-домен соответствует.
  • Snip Tool: в длинных сессиях Claude сам чистит старый контекст — качество не падает.
  • Figma Import: не копия, а воспроизведение стиля в HTML.
  • Canva partnership: официальный экспорт в полностью редактируемый файл.

Anti-slop — что запрещено

  • Агрессивные градиенты
  • Эмодзи (если не в дизайн-системе)
  • Скруглённые углы с цветным border-left (классический AI-card)
  • SVG-иллюстрации
  • Шрифты Inter, Roboto, Arial
  • Выдуманные цвета вне бренда
  • Filler-контент ради заполнения

Вот почему Claude Design визуально не похож на Lovable / Bolt / v0 / Replit. Anthropic прописали запреты в промпте осознанно. Поэтому результат отличается от других генераторов.

Сравнение с конкурентами

Claude Design vs Stitch vs Lovable/Bolt vs v0. Figma — не конкурент, это другой рынок.

ИнструментЧто делаетКлючевое отличиеЭкспорт
Claude Design Визуальный дизайн и прототип Plan Mode, Variants, Twix, CLAUDE.md, verifier Claude Code, Canva, HTML, PDF, PPTX
Google Stitch Тот же жанр Бесконечный холст, передача в Firebase + Gemini CLI. Нет Twix, нет Variants, нет Plan Mode Firebase
Lovable / Bolt Vibe-coding: рабочее приложение Выдают код с БД и авторизацией — это MVP, а не макет Полный стек
v0 (Vercel) Ближайший аналог React-компоненты из промпта. Нет дизайн-системы, Twix, мультиплеера Vercel
Figma Профессиональный дизайн Другая аудитория: дизайнеры, рисующие с нуля. 80–90% рынка UI/UX Design hand-off

Плюсы и минусы честно

Чтобы принять решение, не опираясь на хайп.

Плюсы

  • Скорость итерации: десятки вариантов за минуты
  • Интерактивный результат, не картинка
  • Handoff в Claude Code в один клик
  • Экспорт в Canva редактируемый
  • Дизайн-система одна — все будущие проекты в стиле
  • Мультиплеер-режим для команды
  • Расширенный Plan Mode (10+ вопросов)
  • Мобильный дизайн часто лучше десктопного

Минусы

  • Недельная квота — очень жёсткая
  • 3–5 серьёзных проектов в неделю — потолок
  • Только веб — не в Claude Code, не в десктопе
  • Не для профессиональных дизайнеров: нет auto-layout, компонентов, pixel perfect
  • Экспорт в Figma невозможен (только из Figma сюда)
  • Без референсов результат скучный и шаблонный
  • Research preview — бета, всё может поменяться
  • Нет аудит-логов даже на Enterprise

Usage и экономия лимитов

Квота Claude Design отдельная от чата и Claude Code. Но сама по себе небольшая.

20−25%
дизайн-система
~4%
один лендинг
+17%
11 Twix-вариаций
15−25%
типичная сессия

Правила экономии

  • Отвечать в Plan Mode сразу и полно
  • Одну дизайн-систему, не несколько
  • Сначала выбрать направление, потом Twix-правки
  • Контекст давать с первого промпта
  • Всегда с референсом, не с нуля
  • Мобилку — как дупликат веб-проекта
  • Переключаться: Opus на план, Sonnet на правки
  • Один визуальный запрос = один промпт
  • /clear в длинных сессиях

Extra usage

Когда квота закончилась, можно платить сверху. Дорого, но дешевле живого дизайнера.

~20$
1 лендинг + 1 презентация + 1 видео + несколько баннеров

Мобилка — не автоматическая. Если не попросили — на телефоне будет криво. Проверяйте через F12 → mobile view перед деплоем.

Продвинутый workflow

Связка: Nano Banana + Seedance 2.0 + Claude Design

Как оживить лендинг видеофоном за 5 минут без дизайнера и видеографа. 5$ extra usage в Claude Design + относительно бесплатные тиры генераторов.

Шаг 1

Nano Banana или GPT Image 2

Стартовое изображение: не абстрактное, а с конкретной композицией под ваш лендинг.

Шаг 2

Seedance 2.0

First & last frame одинаковый → идеальный цикл. 720p для экономии. Длина 8 сек.

Шаг 3

Topaz Video Upscale

Апскейл до нужного качества, чтобы на лендинге выглядело дорого.

Шаг 4

Claude Design

«Замени hero-баннер на видео, автоплей, без звука, loop». Прикрепили файл — готово.

Бонусный трюк: попросите, чтобы голова поворачивалась только при скролле страницы. «Прокручивание будет двигаться по движению по странице» — Claude это сделает.

Кому нужен и кому нет

Без уверток: честная сегментация аудитории.

Нужен

  • Фаундер, показывающий инвестору идею без дизайнера
  • Продукт-менеджер, которому нужен прототип до разговора с командой
  • Маркетолог, которому нужен лендинг/баннер за 10 минут
  • Разработчик, которому нужен визуал перед тем, как кодить
  • Автор презентаций, уставший от PowerPoint
  • Пользователь Claude Code — связка закрывает цикл «идея → деплой»

Не нужен

  • Профессиональному дизайнеру с настроенной Figma
  • Тому, кто делает production с pixel perfect
  • Тому, кому нужна Figma-совместимость
  • Тому, кому нужен безлимит
  • Командам, которым критичны аудит-логи
  • Тем, кто не работает на Pro/Max/Team/Enterprise
Вывод

Вердикт после разбора

После утёкшего системного промпта, тестов и потраченных $20 — пять пунктов, в которых суть.

Зайдите на claude.ai/design, попробуйте один промпт с референсами в Plan Mode и через дизайн-систему. Сравните с тем, что даст ChatGPT или Cursor. Этого достаточно, чтобы понять, ваш ли это инструмент.