Повний Курс
Claude AI + Figma
для Дизайнерів
Що таке Claude і чому не ChatGPT
Claude — AI від Anthropic. Не черговий чат-бот, а інструмент для системного мислення з довгим контекстом і глибоким аналізом. Для дизайнерів — особливо у фінтех і продуктових командах — він виграє там, де важлива точність.
Системне мислення
Тримає контекст великого проєкту, розуміє зв'язки між компонентами і задає уточнюючі питання — як досвідчений колега.
Довгий контекст
До 200 000 токенів в одній сесії. Можеш скинути цілий дизайн-документ або специфікацію — він не забуде деталі з початку.
Точність у деталях
Не «галюцинує» так часто як конкуренти в технічних задачах. Чітко каже коли не знає — не вигадує.
Який план брати дизайнеру
Коротко: для більшості — Pro за $20. Якщо автоматизуєш процеси або ведеш агентство — дивись на Max.
- Claude Sonnet (обмежено)
- Базові Projects
- Custom Instructions
- Пріоритет у навантаженні
- Cowork Desktop App
- Claude Sonnet — без ліміту
- Opus 4 — 5× більше
- Projects + Custom Instructions
- Cowork Desktop App
- Пріоритет у пікові години
- Все з Pro ×5
- Opus 4 без обмежень
- Пріоритетний доступ
- API інтеграції included
- Для агентств і команд
Інтерфейс: що де знаходиться
Перш ніж заглиблюватись у налаштування — розберись з базовою навігацією. Тут немає нічого зайвого.
Ліва панель — Projects і чати
Projects — твої налаштовані «режими» роботи (наприклад «Figma Assistant» або «UX Copywriter»). Нижче — всі твої попередні чати відсортовані по даті.
Вибір моделі
Клікаєш на назву моделі вгорі по центру. Sonnet — для щоденної роботи. Opus — для складного аналізу або де потрібна максимальна якість.
Прикріплення файлів
Іконка скрепки в рядку вводу. Кидай скріни Figma, PDF-документи, CSV-файли. Claude бачить зображення і читає тексти.
Регенерація відповіді
Якщо відповідь не влаштовує — клікни на іконку ↺ під повідомленням. Можна також редагувати свій запит і отримати нову відповідь.
Projects — твій AI-асистент з пам'яттю
Project — це окрема «копія» Claude з власними інструкціями, контекстом і файлами. Замість того щоб кожного разу пояснювати хто ти і як відповідати — налаштовуєш один раз і він пам'ятає.
Figma Assistant
Для роботи з компонентами, дизайн-системою, аудиту файлів і генерації контенту. Додай опис свого стеку і назв токенів.
UX Copywriter
Тон оф войс бренду, приклади мікрокопі, заборонені слова. Для написання текстів в інтерфейсах і онбордингах.
Research Analyst
Для аналізу UX-досліджень, конкурентного аналізу і синтезу результатів юзер-тестів. Завантаж транскрипти — і роби висновки.
Що писати в інструкціях
Custom Instructions — це системний промпт який завжди активний. Чим точніше ти його написав — тим менше часу витрачаєш на пояснення в кожному чаті. Ось реальний шаблон.
## Контекст Ти — Senior Product Designer з 10+ роками досвіду у Fintech і Crypto. Твоє ім'я: [ІМ'Я]. Твій стек: Figma, Claude Cowork, Cursor. ## Стиль відповідей - Відповідай коротко і конкретно. Без вступних фраз типу «Звичайно!» або «Чудове питання». - Давай рішення які можна одразу застосувати в Figma або коді. - Якщо питання неоднозначне — уточни одним питанням, не більше. - Формат: спочатку висновок, потім деталі. ## Figma контекст - Design System: [назва твоєї DS, наприклад "Atlas DS"] - Кольорові токени: [Primary/500, Neutral/200, Error/600...] - Компоненти: Auto-layout, Variants, Component Sets - Файли: [назви основних файлів в Figma] ## Термінологія - Використовуй терміни: auto-layout, variants, component set, token, frame, group - НЕ кажи «картинка» — кажи «frame» або «layer» - Відповідай українською якщо я пишу українською ## Клієнти та проєкти (якщо є) - Клієнт 1: [назва] — [опис продукту, стек] - Клієнт 2: [назва] — [опис продукту, стек]
## Роль Ти — UX копірайтер для продукту [назва продукту]. Аудиторія: [опис ЦА, наприклад "крипто-трейдери 25-40 років, технічно грамотні"] ## Тон оф войс - Стиль: прямий, впевнений, без корпоративного сленгу - НЕ використовуй: «Ласкаво просимо», «Будь ласка, зачекайте», «Оголошення» - Використовуй: активні дієслова, короткі речення, конкретні числа ## Правила мікрокопі - Кнопки: дієслово + об'єкт → «Додати картку», «Надіслати», «Підтвердити» - Помилки: пояснення + рішення → «Карта не прийнята. Перевір номер або спробуй іншу.» - Empty states: що зробити → «Додай першу транзакцію — натисни + вгорі» - Макс довжина label: 3 слова. Макс довжина body: 2 речення ## Заборонені слова [вписати свій список: "сталося", "виникла помилка", "здійснити", "даний"]
## Роль Ти — UX Researcher і аналітик. Синтезуєш дані з інтерв'ю, опитувань і тестів. ## Формат виводу Завжди структуруй за схемою: 1. Головний інсайт (1 речення) 2. Підтверджуючі дані (цитати або числа) 3. Рекомендація (що змінити в продукті) 4. Пріоритет: Critical / High / Medium / Low ## Правила аналізу - Не роби висновків без підтверджуючих даних - Розрізняй думки юзерів і їх реальну поведінку - Групуй схожі паттерни, не перелічуй окремо кожного респондента - Продукт: [назва], сегмент: [ЦА]
Готові промпти для щоденної роботи
Бери і використовуй. Замінюй текст у [дужках] на свої дані.
Що таке Cowork і чим відрізняється від чату
Cowork — це десктопний додаток де Claude не просто відповідає на питання, а виконує завдання на твоєму комп'ютері. Він бачить твій екран, відкриває файли і взаємодіє з додатками.
| Параметр | 💬 Claude Chat | 🖥 Claude Cowork |
|---|---|---|
| Взаємодія | Ти пишеш — він відповідає | Він сам виконує завдання |
| Платформа | Браузер + Mobile | Тільки Desktop (Mac/Win) |
| Доступ до файлів | Вручну (upload) | Бачить твій комп напряму |
| Figma | Скрін → аналіз тексту | Відкриває Figma і діє |
| Автоматизація | ❌ Неможлива | ✅ Повна автоматизація |
| Ідеально для | Питань, текстів, аналізу | Figma, файли, скрипти |
Як встановити і налаштувати Cowork
Потрібен Plan Pro або Max. Весь процес займає 5 хвилин.
Реальні кейси з Figma
Ось що Cowork вміє робити з Figma прямо зараз. Всі кейси перевірені в реальній роботі.
Аудит хардкодованих значень
Claude відкриває твій файл, сканує всі шари і знаходить кольори/відступи поза токенами.
Реалістичний контент
Заповнює компоненти реальними даними — імена, суми, транзакції, дати. Ніяких Lorem ipsum.
UX аналіз по скріну
Бачить активний екран Figma і дає структурований фідбек по пріоритетах.
Документація для dev
Читає компонент і пише технічну специфікацію — props, states, поведінка — у форматі Markdown.
- Самостійно малювати нові компоненти з нуля без прикладу
- Замінити дизайнера у прийнятті продуктових рішень
- Розуміти складні анімації (Figma Prototype flows)
- Гарантовано не помилитися у pixel-perfect завданнях
Підключення зовнішніх сервісів
MCP (Model Context Protocol) — стандарт підключення зовнішніх інструментів до Claude. Дозволяє йому читати Notion, писати в Slack, шукати в Google Drive і багато іншого.
# У полі MCP Server URL вставляєш: https://mcp.notion.so/connect # Або для локального сервера: http://localhost:3000 # Після підключення — авторизуєшся в Notion # і Claude отримує доступ до твоїх workspace
Що таке Plugin
Plugin = набір MCP-серверів + скіли (інструкції для Claude) + кастомні інструменти. Встановлюєш одним кліком — і Cowork одразу вміє більше.
Де знайти плагіни
Settings → Plugin Marketplace або напиши в Cowork «знайди плагін для [назва сервісу]». Є плагіни для дизайну, аналітики, продажів і продакт-менеджменту.
AI-стек дизайнера 2026
Не окремі інструменти — єдина система де кожен компонент підсилює інший. Автоматизує 70% рутини і дає час на реальну дизайн-роботу.
Claude Cowork
Центр автоматизації. Виконує задачі у Figma, пише документацію, аналізує файли. Замінює годинну ручну роботу.
Figma
Основний інструмент. З Cowork стає «розумним» — може отримувати команди і виконувати їх без ручних кліків.
Cursor
IDE з AI для написання скриптів автоматизації, Figma-плагінів і кастомних інструментів. Для дизайнерів хто хоче більше контролю.
Code Runner (Figma)
Плагін для запуску кастомних скриптів прямо у Figma. Генеруєш скрипт в Claude → запускаєш в Code Runner → автоматизація готова.
Notion + MCP
Документація дизайн-системи, дизайн-рішення (ADR), специфікації компонентів. Claude читає і пише туди напряму.
Claude Chat (Pro)
Для мобайлу, швидких питань, UX-аналізу скрінів, написання мікрокопі та підготовки до дизайн-рев'ю.
Тиждень 2: Встановлення Cowork, перші кейси з аудиту файлів.
Тиждень 3+: Підключення Notion MCP, перші скрипти через Code Runner.
Не намагайся впровадити все одразу. Одна звичка за раз.
Нові кейси щотижня в Telegram · uxhero.design
April 2026 · Claude Sonnet 4.5 · Figma + Cowork