Claude Design только что вышел... Разблокируй Суперспособности
Собираем свою дизайн-систему, генерируем слайды, сайты, калькуляторы и анимации одним промптом. Плюс эксклюзивный лайфхак про недельный лимит, которого нет в документации.
Если есть Figma: File → Save local copy → сохрани .fig файл
В Claude Design: Design Systems → Create
Назови систему (например, Mastodont Design System)
Перетащи в окно: папку Brand, .fig файл, все ассеты
💬 Промпт - Для поля Notes
Для моей дизайн-системы мне нравится премиальный тёмный стиль — чёрный фон, один яркий акцентный цвет (кислотный лайм или оранж), никаких генерик-градиентов и AI-слопа. Я делаю контент для предпринимателей которые хотят зарабатывать на AI, поэтому визуал должен быть дерзким, уверенным, про результат и деньги. Типографика жирная и смелая — крупные заголовки, много воздуха, чёткая иерархия.
Когда делаю слайды — один тезис на слайд, никакой воды, крупная цифра или главная мысль в центре внимания. Когда делаю сайты — сильный hero, цифровой вайб, subtle-анимации на скролле, счётчики цифр, ничего лишнего. Во всём — минимализм плюс смелые акценты.
💡 Лайфхак: прогони короткий промпт через обычного Claude (claude.ai) чтобы он его расширил профессиональной UI/UX терминологией.
💬 Промпт - Расширение через Claude
Расширь этот промпт для дизайн-системы, добавь профессиональные UI/UX термины, конкретные цвета, шрифты, принципы композиции. Сохрани суть:
[твой короткий промпт]
⚙️ Финал: вставляешь расширенную версию в Notes → жмёшь Generate → ждёшь ~5 минут → проходишь ревью UI-элементов.
03
🔥 Главный лайфхак - Extra usage toggle
Claude Design - это research preview с собственным недельным лимитом, отдельным от обычного Claude и Claude Code. На $20 Pro хватит на 1-2 серьёзных сессии в неделю. Даже на Max за $100-200 можно упереться за одну плотную сессию.
Обычная реакция - ждать неделю. Но есть способ лучше:
Справа проверь Monthly spend limit - по дефолту $20, ставь сколько не страшно потерять
Auto-reload по умолчанию OFF - Claude сам деньги не спишет
⚙️ Важно: официальная документация Anthropic пишет что Extra usage покрывает только обычный Claude и Claude Code. На практике - он покрывает и Claude Design тоже. Claude продолжает генерить по API-тарифу мелкими списаниями с баланса.
💡 Эксклюзив: ни один русскоязычный обзор Claude Design про этот момент не рассказывает. Теперь ты в курсе.
04
Сгенерируй первые слайды
Тест генерации в твоём собственном стиле.
В Claude Design: New Design → High-Fidelity → Slides
Проект назови Slides test
Design System: выбери свою (ту что сделал на Шаге 02)
💬 Промпт - 3 слайда про заработок на AI
Создай 3 слайда на тему «3 способа реально заработать на AI в 2026 году обычному человеку без технического образования». Один способ — один слайд. Строгий минимализм — одна фокусная точка на слайд: либо крупная цифра, либо смелый заголовок плюс одна поясняющая строка. Никаких стен текста, максимум 15-20 слов копи на слайд. Много воздуха, один акцентный цвет. Укажи реалистичный диапазон месячного дохода в долларах — крупной видимой цифрой, не в тексте.
⚙️ Жмёшь Send → получаешь готовые слайды в твоём брендбуке.
05
Реверс-инжиниринг дизайна claude.com
Если хочешь сделать слайды в стиле конкретного сайта - загружаешь его как референс.
Создай новый проект → No Design System → Claude landing slides → Create
Зайди на claude.com → сделай 5 скриншотов красивых секций
На странице claude.com жми Ctrl+A → Ctrl+C → сохрани текст в claude-text.txt
Погугли "Extract HTML code from URL" → используй любой сервис → вставь claude.com → скачай HTML
Дропай в чат Claude Design: скриншоты, txt-файл, HTML
В шестерёнке настроек выбери модель Opus 4.7
💬 Промпт - 5 слайдов в стиле claude.com
Создай красивый дек из 5 слайдов на основе дизайн-системы этого сайта: https://claude.com
Слайды должны подавать чёткий обзор Claude — что это, почему это важно и почему это сильнейший AI для реальной работы.
Структура (одна мысль — один слайд):
1. Hero — «Meet Claude» — одно смелое утверждение
2. Модели — Opus, Sonnet, Haiku — tier-система
3. Что он умеет — 3 главных use case как визуальные плитки
4. Экосистема — Claude Code, Claude Design, API
5. Как начать — чёткий CTA
Наследуй точную дизайн-систему, типографику и цветовую гамму claude.com. Строгий минимализм — максимум 20 слов на слайд.
💡 Функция Draw: если нужно что-то поправить - жми на кисть, обводи элемент, пиши в чат "сдвинь сюда" / "сделай отступ больше" → Claude точечно правит. Через Twix можно попросить масштабную переделку.
06
Сделай лендинг в стиле Linear.app
Один из самых мощных юзкейсов. Логика та же - загружаем референс и генерируем.
Новый проект → No Design System → High-Fidelity → Mastodont Site
Построй мне красивый лендинг в ТОЧНОМ стиле сайта Linear (HTML, скриншоты, весь текст приложены). Наследуй дизайн-систему, типографику, сетку, цвета, ритм, интерактивность — всю визуальную ДНК Linear.app.
Тема сайта: студия «Мастодонт» — внедрение AI-решений для бизнеса. Помогаем компаниям автоматизировать процессы и запускать AI-продукты. Целевая аудитория — основатели и CEO малого и среднего бизнеса.
Структуру, подход к контенту, визуальные приёмы — бери напрямую из Linear. Не импровизируй, повторяй ДНК.
⚙️ Send → через 3-5 минут готовый сайт. В правом нижнем углу - переключатель акцентных цветов, меняй на лету.
07
Экспорт в код и деплой на Vercel
Как превратить сгенерированный сайт в реально работающий в интернете.
В Claude Design жми Hand off to Claude Code → Copy command
Claude Code автоматом подтянет все файлы на твой ПК
Пиши в чат: «Задеплой сайт на Vercel»
Claude проведёт пошагово - нужно вставить токен Vercel
💡 Важно: по умолчанию Claude Design выдаёт чистый HTML. Если нужна сложная разработка с анимациями - сразу проси: «Создай этот дизайн на React или Next.js».
08
Сделай AI ROI калькулятор
Интерактивный виджет который можно встроить в любой бизнес-сайт.
На главной Claude Design зайди в Examples → найди пример калькулятора
Скопируй базовый промпт
В обычном Claude попроси переписать под свою задачу
💬 Промпт - Переработать под свою задачу
Перепиши этот промпт под калькулятор окупаемости искусственного интеллекта для B2B услуг. Калькулятор встраивается на лендинг студии «Мастодонт» — внедрение AI в бизнес. Считает сколько сэкономит и заработает предприниматель за 12 месяцев от внедрения AI-автоматизаций.
[оригинальный промпт из Examples]
Вставь расширенный промпт в Claude Design
Подключи свою дизайн-систему
Generate
💡 Как использовать: созванивайся с клиентом в Zoom → открывай виджет → играйся цифрами в реальном времени. Или экспортируй код и встраивай калькулятор на свой сайт.
09
HTML-анимация для интро YouTube
Claude пишет не картинку - а живой CSS/HTML код анимации. Открываешь на весь экран, записываешь через OBS и используешь в монтаже.
Новый проект → High-Fidelity → Intro animation
Подключи свою дизайн-систему
💬 Промпт - 10-секундная анимация
Сделай 10-секундную минималистичную HTML-анимацию для интро YouTube-видео. Чёрный фон, моя дизайн-система.
Текст появляется двумя строками с ударной подачей:
«AI не заберёт твою работу.
AI заберёт её у того, кто не юзает AI.»
Первая строка белая, вторая — акцентным цветом, появляется с задержкой и ударом (scale/glitch). После обеих строк снизу мелко появляется подпись: «Сегодня разбираем Claude Design».
Кинематографично, тишина-напряжение-удар.
⚙️ Send → получишь живую CSS/HTML анимацию → открой на весь экран → запись экрана в OBS → в монтаж.
10
Масштабирование через Routines
Веб-интерфейс отличный для старта, но упираешься в лимиты браузера. Для конвейера - вытаскиваем систему в код.
В Claude Design → Design Systems → открой свою → Download as ZIP
В левой панели - вкладка Routines → New Routine (local/remote)
💡 Пример автоматизации: пишешь сценарий в Google Docs → срабатывает триггер Routine → Claude Code подхватывает текст → применяет твою дизайн-систему → генерирует HTML-анимацию → сохраняет на рабочий стол → отправляет монтажёру в Telegram. Без твоего участия.