Этот конспект не сохранится

Закроешь вкладку — потеряешь. Зарегистрируйся — и он будет в библиотеке навсегда.

Telegram

Ваш конспект

YouTubeClaude Design: полный гайд + секреты слитого системного промпта. | Туториал 2026

🎯 Claude Design: полный разбор без хайпа

Ключевые тезисы:

  • Claude Design — не замена Figma, а инструмент для другой аудитории (фаундеры, продакты, маркетологи, разработчики)
  • Генерирует работающий HTML/CSS/React-код, а не картинки → результат интерактивный
  • Жёсткие недельные лимиты — можно потратить всю квоту за пару часов без правильного подхода
  • Требует обязательного контекста (референсы, дизайн-система) для качественного результата
  • Экспорт в Claude Code — ключевая фишка для перехода от макета к рабочему продукту

🛠️ Что такое Claude Design?

Claude Design — это отдельная вкладка на claude.ai, где текстовый промт преобразуется в визуальный дизайн (прототипы, лендинги, презентации, баннеры).

Доступ: Только для тарифов Pro, Max, Team, Enterprise. Нет бесплатного доступа и десктопного приложения — только веб.

Как работает: Не рисует картинки, а пишет код (HTML, CSS, React-компоненты). Каждый дизайн — это работающая веб-страница с кликабельными элементами.

🗂️ Основные разделы и возможности

Прототип (Prototype)

Для создания интерактивных прототипов приложений, лендингов, дашбордов.

Слайд-деки (Slide Deck)

Для презентаций.

Шаблоны (Templates)

Создание и использование шаблонов для email-рассылок, баннеров, одностраничников.

Прочее (Other)

Для статичных элементов без кликабельности (например, калькуляторы, карточки).

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

  • Лендинги и веб-страницы
  • Прототипы мобильных приложений (iOS/Android)
  • Презентации
  • Маркетинговые баннеры и email-рассылки
  • Анимированные видеоартефакты (Motion Design на HTML)
  • Дашборды и админ-панели
  • Скетчи (рисунок от руки преобразуется в дизайн)

📤 Варианты экспорта

  1. PDF — для печати или отправки.
  2. PPTX — два режима:
    • Edit — редактируемые текстовые блоки и фигуры для доработки в PowerPoint.
    • Screenshot — финальный вид как скриншот.
  3. HTML — автономный работающий файл.
  4. Canva — полноценное редактируемое сотрудничество (официальная интеграция).
  5. Handoff to Claude Code — копирование одной командой переносит весь код дизайна в ваш проект в Claude Code для дальнейшей разработки.

🔥 Разоблачение хайпа: "Claude Design — убийца Figma"

Реальность:

  • Акции Figma действительно упали на ~13% за неделю после анонса Claude Design.
  • Но контекст важнее: Figma вышла на IPO с завышенной оценкой ($62 млрд при выручке $1 млрд и убытках $1,25 млрд). Акции падали из-за раздутой оценки, общего страха AI в SaaS-секторе и высокой конкуренции (Google Stitch, Lable, Bolt, V0, Replit) ещё до выхода Claude Design.

Для кого инструменты:

  • Figma: Профессиональные UI/UX-дизайнеры (80-90% рынка). У них есть готовые компоненты, библиотеки, плагины.
  • Claude Design: Фаундеры, продакт-менеджеры, маркетологи, разработчики — те, кто не работает в Figma, но нуждается в быстром визуальном макете.

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

🚀 Пошаговый туториал и ключевые моменты

1. Дизайн-система (Design System)

Дизайн-система — это визуальный шаблон (цвета, шрифты, логотипы, стили компонентов), который применяется ко всем будущим проектам.

Важно:

  • Создание дизайн-системы съедает 20-25% недельного лимита (стоит ~$4-5).
  • Создавайте одну финальную систему. Если её нет — сначала изучите инструмент без неё.
  • Дизайн-система улучшает консистентность, но может убить креативность (модель зажата в рамках).

Как создать: Можно загрузить файлы из Figma, GitHub, с компьютера или указать ссылку на репозиторий.

2. Создание прототипа

  • Можно выбрать режим Wireframe (быстрые каркасы) или High-fidelity (высокая детализация).
  • Обязательно давайте контекст: Референсы с Dribbble/Awwwards, ссылку на сайт, скетч, файл из Figma или код с GitHub.
  • Используйте голосовой ввод для удобства.

3. Режим Plan Mode

После промта Claude Design задаёт 10-14 уточняющих вопросов (о продукте, аудитории, цели, стиле и т.д.). Отвечать на них критически важно для качественного результата.

4. Лайфхаки для промтов

  • ✅ Пишите, чего НЕ хотите (например, "без градиентов").
  • ✅ Ссылайтесь на реальные продукты ("вдохновись сайтом Apple"), но не просите скопировать чужой UI (Claude проверяет email-домен).
  • ✅ Попросите Claude Code написать промт за вас — он создаст детальную структурированную инструкцию.
  • ✅ Следите за Updates To-Do List во время генерации. Если дизайн идёт не туда — останавливайте процесс, чтобы не тратить лимит.
  • ✅ Делайте один запрос за промт (не "поменяй шрифт, перекрась фон, подвинь кнопку").

🕵️ Секреты из утёкшего системного промта (422 строки)

  1. Вызов Claude внутри дизайна: Можно встроить вызов модели Haiku прямо в HTML (например, кнопка "Сгенерировать описание" в прототипе будет реально работать).
  2. Встроенные стартер-компоненты: Готовые шаблоны (iOS/Android Frame, macOS/Browser Window, Deckstage для презентаций, Animation JS для анимаций, Design Canvas для сравнения вариантов).
  3. Правило "меньше 1000 строк": Код разбивается на маленькие модульные файлы, что упрощает работу в Claude Code.
  4. Anti-Slop Rules: Жёсткие запреты на типичный "AI-вид":
    • Никаких агрессивных градиентов
    • Никаких эмодзи (если это не часть дизайн-системы)
    • Никаких скруглённых углов с цветным бордером слева (классический AI Card)
    • Запрещённые шрифты (Inter, Roboto, Arial)
    • Цвета — только из бренда или гармоничные дополнения
    • Запрет на "лер-контент" (наполнение ради наполнения)
  5. Verifier Agent: После генерации запускается субагент, который проверяет вёрстку на ошибки (автоматический QA).
  6. Web Capture: Указываете URL — Claude извлекает живые компоненты с сайта для референса.
  7. Copyright Protector: Откажет в воссоздании фирменного UI, если ваш email-домен не принадлежит компании.
  8. Контекстное управление (SNIP): В длинных сессиях автоматически чистит устаревший контекст, чтобы не падало качество.

⚖️ Сравнение с аналогами и конкурентами

  • Google Stitch: Бесплатный, похожий функционал, но нет твиков, Plan Mode и выбора моделей. Сложен для использования из России.
  • Lavable Bolt, V0: Генерируют рабочее приложение с бэкендом. Claude Design генерирует визуальный прототип, который потом можно доработать в Claude Code.
  • Figma: Не конкурент. Разная аудитория и задачи. Figma — для профессионального продакшн-дизайна с пиксельной точностью. Claude Design — для быстрого получения макета из текста.

✅ Плюсы Claude Design

  • Скорость итераций: Твики (вариации) дают десятки вариантов за минуты.
  • Интерактивный результат: Кнопки кликаются, страницы скролятся.
  • Экспорт в Claude Code: Один клик — и дизайн в вашем проекте.
  • Дизайн-система: Единый стиль для всех проектов.
  • Мультиплеер: Совместная работа, комментарии.
  • Расширенный Plan Mode: 10-14 вопросов для уточнения вместо догадок.
  • Экспорт в Canva: Редактируемое сотрудничество.

❌ Минусы Claude Design

  • Жёсткие недельные лимиты: Дизайн-система (20-25%), лендинг с твиками (до 17%). За неделю можно сделать 3-5 серьёзных проектов.
  • Только веб: Нет интеграции в Claude Code или десктопное приложение.
  • **Не для про-дизайнер
🎨 Claude Design: инструмент для фаундеров и продактов — конспект на EchoNote