Промпти для Claude Code: як дизайнеру ставити задачі, щоб виходило з першого разу

Коротка відповідь: хороша задача для Claude Code складається з п'яти частин: контекст (де ми і що вже є), задача (що змінити), обмеження (чого не чіпати і що використовувати), перевірка (як зрозуміти, що готово) і формат результату (що показати після). Для великих задач спершу просіть план, а не код. Нижче формула і 10 шаблонів, які можна копіювати.

Я Дмитро Ніколаєнко, щодня ставлю задачі Claude Code: сайт UX Hero, платформа курсів, CRM, Figma-плагіни. Помітив, що дизайнери інтуїтивно пишуть агенту як у чат, коротко і без контексту, а потім розчаровуються. Хоча дизайнер вміє писати брифи краще за багатьох. Просто треба перенести цю навичку.

Чим задача для агента відрізняється від запиту в чат?

У чаті AI бачить тільки ваше повідомлення. Claude Code бачить весь проєкт: файли, структуру, CLAUDE.md, історію змін. Тому вам не треба пояснювати все з нуля, але треба вказати, на що дивитись. А ще агент діє: змінює файли і запускає команди. Розмита задача в чаті дає погану відповідь, розмита задача агенту дає зміни там, де ви не просили.

Друга відмінність: агент може перевірити свою роботу сам, якщо ви скажете як. «Запусти і переконайся, що сторінка відкривається без помилок» - дуже недооцінена фраза.

Формула: п'ять частин хорошої задачі

1. Контекст. Який файл, сторінка чи компонент. Що вже є і що не так.
2. Задача. Що саме змінити. Один результат, а не п'ять.
3. Обмеження. Використовувати токени з такого файлу, не додавати бібліотек, не чіпати інші сторінки.
4. Перевірка. Як агент зрозуміє, що готово: збірка без помилок, вигляд на трьох ширинах, стан focus видимий.
5. Формат результату. Що показати: список змінених файлів, скріншот, коротке пояснення.

Не кожна задача потребує всіх п'яти, але якщо результат вас розчарував, найчастіше бракувало обмежень або перевірки.

10 шаблонів задач для дизайнера

1. Старт проєкту: CLAUDE.md

Подивись на структуру проєкту і створи CLAUDE.md:
що це за проєкт, стек, де лежать токени і компоненти,
як запустити локально. Додай правила: кольори і відступи
тільки з токенів, нові компоненти тільки після перевірки,
що схожого ще немає. Покажи файл, перш ніж зберегти.

2. Компонент з макета

Ось скріншот картки товару з Figma [вставити].
Зроби компонент ProductCard у /components.
Використовуй токени з styles/tokens.css, без сирих hex і px.
Пропси: зображення, назва, ціна, бейдж (необов'язковий).
Додай story в Storybook з усіма варіантами.
Перевір, що Storybook запускається без помилок.

3. Токени з Figma у код

У файлі tokens.json експорт змінних з Figma.
Онови styles/tokens.css, щоб CSS-змінні відповідали
JSON. Нічого не видаляй без питання: якщо змінна є в CSS,
але немає в JSON, виведи список таких змінних окремо.

4. Стани компонента

Кнопка Button зараз має тільки default і hover.
Додай focus-visible, active, disabled і loading.
Focus має бути видимим на світлій і темній темі.
Loading блокує повторне натискання.
Покажи всі стани окремими stories.

5. Адаптив

Сторінка /pricing ламається на мобільному: картки
вилазять за екран. Виправ, щоб на ширині 360px картки
йшли в одну колонку, від 768px у дві, від 1200px у три.
Нічого не змінюй на інших сторінках.
Перевір на 360, 768 і 1440 і скажи, що змінив.

6. Точкова правка UI

У хедері відступ між пунктами меню 12px, а в макеті 16px.
Знайди, звідки береться значення, і заміни на токен
space-4. Покажи diff, перш ніж комітити.

7. Помилка, яку ви не розумієте

Ось помилка після запуску [вставити текст].
Знайди причину і виправ. Поясни одним-двома реченнями
простими словами, що сталося і чому, без жаргону.

8. Великий шматок роботи: спершу план

Хочу додати темну тему на весь сайт через токени.
Код поки не пиши. Склади план: які файли зміниш,
як перемикатиметься тема, що може зламатись.
Після мого «ок» роби по кроках і коміть після кожного.

9. Деплой

Закоміть зміни з коротким описом українською,
створи гілку fix/header-spacing і запуш її.
Відкрий pull request з описом: що змінено, навіщо,
як перевірити. У main напряму не пуш.

10. Рев'ю перед pull request

Подивись на всі зміни в цій гілці очима рев'юера
дизайн-системи: сирі кольори і відступи, відсутні стани,
контраст, дублікати компонентів, зайві файли.
Нічого не виправляй, тільки список проблем.

Шаблони 2, 4 і 10 особливо добре працюють у зв'язці з дизайн-системою. Як переносити компонент зі станами з Figma в код, є окремий розбір Компонент зі станами: з Figma у React і Storybook.

Як працювати ітераціями, а не одним великим промптом

Найкращий результат дає короткий цикл: задача, перегляд у браузері, конкретна правка, знову перегляд. Не намагайтесь описати весь сайт одним повідомленням на дві сторінки. Агент виконає, але ви не зможете перевірити все одразу, і помилки накладаються.

Правки давайте так, як дали б розробнику на дизайн-рев'ю: конкретно, з посиланням на макет або токен. «Зроби краще» майже ніколи не працює. «Заголовок на мобільному 28px замість 36px, міжрядковий 1.2» працює завжди.

Скріншоти - ваш найсильніший інструмент. Claude добре читає зображення, тому скріншот макета поруч зі скріншотом поточного результату часто пояснює більше, ніж абзац тексту.

Типові помилки в задачах

• Немає обмежень. Агент «покращує» сусідні файли, бо ніхто не сказав їх не чіпати.
• Кілька задач в одному повідомленні. Виходить посередньо все. Розбивайте.
• Немає перевірки. Агент каже «готово», а сторінка не відкривається. Просіть запускати і перевіряти.
• Немає Git. Без комітів невдалу зміну важко відкотити. Попросіть комітити після кожного робочого кроку.
• Повторення одних і тих самих правил. Якщо ви втретє пишете «використовуй токени», перенесіть це в CLAUDE.md або в Skill.

Про те, як оформити повторювані інструкції в Skills, є матеріал Claude Skills для дизайнера. А готові скрипти для рутини у Figma зібрані в статті Claude для дизайнера: 7 скриптів.

Де зберігати свої промпти

Хороші задачі варто не писати щоразу з нуля, а збирати. Є три рівні:

• Нотатки. Файл prompts.md у проєкті або в Notion з шаблонами, які спрацювали. Найпростіший старт.
• CLAUDE.md. Правила, які мають діяти завжди: токени, мова комітів, заборонені дії. Їх більше не треба повторювати в задачах.
• Skills і агенти. Повторювані процеси з чеклістом, наприклад рев'ю перед pull request або оформлення Storybook. Ви пишете одне слово, а агент знає всю процедуру.

Через місяць такої практики ваші задачі стають коротшими, а результат стабільнішим, бо більша частина контексту вже живе в проєкті.

Де зберігати свої промпти

Хороші задачі варто не писати щоразу з нуля, а збирати. Є три рівні:

• Нотатки. Файл prompts.md у проєкті або в Notion з шаблонами, які спрацювали. Найпростіший старт.
• CLAUDE.md. Правила, які мають діяти завжди: токени, мова комітів, заборонені дії. Їх більше не треба повторювати в задачах.
• Skills і агенти. Повторювані процеси з чеклістом, наприклад рев'ю перед pull request або оформлення Storybook. Ви пишете одне слово, а агент знає всю процедуру.

Через місяць такої практики ваші задачі стають коротшими, а результат стабільнішим, бо більша частина контексту вже живе в проєкті.

Часті питання

Як правильно писати промпти для Claude Code?

Використовуйте п'ять частин: контекст (який файл чи компонент і що вже є), задача (одна конкретна зміна), обмеження (токени, без нових бібліотек, не чіпати інше), перевірка (як переконатись, що готово) і формат результату (список файлів, скріншот, пояснення). Для великих задач спершу просіть план без коду.

Чи потрібно писати промпти англійською для Claude Code?

Ні. Claude Code добре розуміє задачі українською. Назви файлів, компонентів і токенів залишайте як у проєкті, щоб агент точно знайшов, що ви маєте на увазі.

Що робити, якщо Claude Code змінив не те, що просили?

Відкотіть зміну через Git або попросіть Claude Code повернути попередній стан, а в наступній задачі додайте обмеження: які файли можна змінювати і що не чіпати. Якщо правило повторюється, перенесіть його в CLAUDE.md проєкту.

Чи можна давати Claude Code скріншоти макетів?

Так, і це один з найефективніших способів. Скріншот макета поруч зі скріншотом поточного результату часто пояснює різницю краще, ніж текстовий опис. Для точних значень додайте назви токенів або підключіть Figma через MCP.

---

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