У вчорашній статті я розповідала вам про Claude Design та базові принципи роботи з ним. Але знати, як Claude Design працює, — мало, бо треба ще знати, де він вартує своїх токенів, а де просто їх їсть без користі.

Три сценарії, які використовуються в Projector регулярно: дизайн-системи, лендинги, презентації. Перший дає фундамент для всіх наступних. Другий — найсильніший сценарій взагалі. Третій — корисний, але з обмеженнями.

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

Design System у Claude — бренд-конфіг для AI-агента. Модель один раз створює зрозумілі для себе правила бренду і потім автоматично додає їх до кожного нового чату, що ви починаєте — без повторного брифа.

Як це працює

Ти завантажуєш у Claude Design одне або кілька джерел, і модель витягує з них правила бренду. Чотири типи джерел:

• Codebase — React-компоненти, Tailwind config, CSS-змінні з реального репозиторію. Найточніше джерело, бо модель парсить живий код. Примітка: копіює тільки обрані файли, а не весь репозиторій.
• Дизайн-файли і скриншоти — Figma (.fig) або скріншоти екранів продукту. Платні шрифти Claude замінить Google Fonts-аналогами.
• Брендові документи — PDF, PPTX, DOCX з гайдлайнами, презентації, брендбуки.
• Web capture — URL існуючого сайту, з якого Claude деконструює візуальну логіку.

З цих джерел Claude витягує чотири шари: кольори і семантичні токени, типографічну шкалу, бібліотеку компонентів і spacing-систему. Після цього кожен новий лендинг, презентація чи прототип одразу береться в правильному стилі — без ручного брифа щоразу.

Одна система — один формат

Найбільша помилка на старті — спокуса зробити одну «головну» дизайн-систему на весь бренд. Логіка наче розумна: бренд Projector один, зробимо одну систему, заллємо в Claude, все буде консистентним. Не буде.

Claude застосовує систему жорстко: токени, типографіка, патерни. Якщо в одній системі змішати лендинги курсів, Instagram-креативи і email-шаблони — кожен output буде посереднім компромісом. Лендинг виглядатиме як банер, банер — як фрагмент лендинга. Три різні мови, навіть якщо за ними стоїть один бренд.

Краще розділити по форматах:

• Особистий кабінет студента — compact density, багато станів компонентів, мінімум ілюстрацій.
• Лендинги курсів — великі заголовки, hero-секція, один CTA, багато повітря.
• Соцмережі — жирний шрифт, мінімум тексту, яскравий акцент.

Brand voice і кольорова палітра спільні між трьома форматами. Типографічна шкала, щільність і layout-логіка — ні.

Як зберігати між сесіями

Claude не пам'ятає попередніх розмов. Кожна нова сесія — чистий аркуш. Три способи зберегти контекст системи:

• Projects (рекомендовано) — система зберігається на рівні проекту і автоматично підтягується при кожній сесії. Найнадійніший варіант для командної роботи.
• SKILL.md — портативний файл із ключовими параметрами системи, 50–100 рядків критичних обмежень. Зберігається локально або в Notion, завантажується на початку нової сесії.
• Ручна передача контексту — копіпаст DESIGN.md у перший промпт нової сесії. Спрацьовує, але незручно для повторюваної роботи.

Окремо про вартість: створення дизайн-системи — найдорожча операція в лінійці. Одна повноцінна система може з'їсти 20–25% тижневого ліміту Opus. Не запускайте аналіз «на пробу» без чіткого плану — кожна спроба коштує реальних токенів.

Лендинги

Лендинги — найсильніший сценарій Claude Design. Цикл від брифа до живого URL стискається з кількох тижнів у один день. Але реальна економія залежить від двох речей: як ви правите результат після першого варіанта і куди йде дизайн після Claude.

Чому лендинги виграють найбільше

• Результат живе в браузері. Claude генерує HTML/React, який можна відкрити, клацнути, прокрутити. Прототип лендинга нового курсу існує ще до того, як учасники наради розійшлись.
• Цикл «ідея → живий URL» за один день. Воркфлоу, який вже використовують команди в Mercury і Datadog: Claude Design → ітерація через Tweaks → Hand off to Claude Code → деплой на Vercel.
• A/B без розробника. Окремі лендинги під різні сегменти аудиторії з однаковим брендом, але різним брифом — раніше тижні роботи, тепер кілька годин.

Якщо лендинги — щотижнева задача, інструмент дає найбільший приріст.

Чотири методи редагування

Після першої генерації починаються ітерації — і тут найбільше людей спалюють бюджет даремно. Чотири методи редагування з різною ціною в токенах:

• Chat (ліва панель) — структурні зміни: нові секції, перегляд тону, реструктуризація hero. Найдорожчий за токенами.
• Tweaks-панель — слайдери для кольорів, відступів, шрифтів і щільності. Не споживає токенів узагалі. Найважливіший інструмент для економії ліміту.
• Inline comments — точкові правки на конкретних компонентах. Клікаєш на блок, лишаєш коментар як у Google Docs review mode. Середня вартість.
• Direct text edit — клік по тексту, одразу редагуєш. Для placeholder-копії, цифр, тексту CTA. Без токенів.
• Draw/Sketch — можна намалювати від руки прямо на канвасі або завантажити скетч, і Claude інтерпретує у дизайн.

Шлях до продакшну

Claude Code додає поверх Claude Design backend-логіку (форми, що реально надсилають листи), аутентифікацію, базу даних, інтеграцію зі Stripe. Все, чого статичний HTML не вміє.

Альтернативні шляхи для простіших задач: Standalone HTML — для промо-сторінок без backend; хостинг на Cloudflare Pages або GitHub Pages. Share URL — для збору фідбеку команди до деплою; інтерактивний прототип дає кращий фідбек, ніж статичні скриншоти. Експорт у Canva, PPTX або PDF — коли результат треба показати партнерам без технічної інтеграції.

Вибір залежить від того, де живе фінальний результат: окремий лендинг — Vercel, додаткова сторінка існуючого сайту — HTML-експорт, документ для презентації — PDF.

Презентації

Презентації в Claude Design працюють. Але спочатку варто визначити, куди дек іде після генерації — від цього залежить і метод, і формат експорту. Внутрішній дек для 20-хвилинної робочої сесії і інвесторський, який команда редагуватиме в Google Slides, — це різні задачі з різними вимогами.

Для яких задач підходить

Claude Design добре підходить для внутрішніх деків, продуктових презентацій з живими прототипами і ранніх ітерацій — там, де важлива швидкість і немає вимоги до multiplayer-редакції в Google Slides.

Для інвесторських, клієнтських і борд-деків — складніше. Причина в PPTX-експорті. При конвертації шрифти замінюються на найближчі доступні, кольорові токени стають hardcoded hex-значеннями замість master-slide theme colors, частина тексту може перетворитися на нередагований image box. На executive review, де всі правитимуть у Google Slides, — закладайте 10–20 хвилин cleanup після експорту. Або готуйте напряму в Google Slides.

Як вибрати метод генерації

Два основні шляхи, вибір за кінцевим форматом:

• Claude Design slide deck — генерація прямо в Claude Design. Перед стартом задає Q&A про тривалість, тон, аудиторію. Повільніше до першого слайда, дизайн якісніший. Підходить, коли важливі бренд і живі прототипи.
• Claude + Code Execution → PPTX-файл — звичайний Claude з увімкненим Code Execution створює .pptx напряму. Текст залишається редагованим у PowerPoint і Google Slides. Простіший дизайн, краще для документів, які команда редагуватиме спільно.

Є третій варіант — Claude PowerPoint add-in. Дизайн найслабший із трьох, але єдиний поважає структуру корпоративного шаблону.

Структура перед дизайном

Деки, які починаються з дизайну до структури, стають дезорганізованими — навіть якщо виглядають гарно. Один тест для наративу: чи можна пояснити весь arc у трьох реченнях? Якщо ні, він занадто складний.

Перш ніж відкривати Claude Design, визначте: що аудиторія повинна думати, відчувати або робити після? Яке одне речення залишиться в пам'яті? Чого ви НЕ будете показувати — антицілі слайдів?

Для повторюваних форматів — Skill у Projects. Налаштуйте один раз під усі наступні деки в цьому форматі — потребують тільки брифа.

Спільна точка для всіх трьох сценаріїв: час від ідеї до першого варіанта скорочується різко. Фінальний polish — копія, PPTX-cleanup, мобільна перевірка — все одно лягає на людські руки. Інструмент зсуває момент, де починається справжня робота, а не замінює її.