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

Деякі інструменти штучного інтелекту (ШІ) пропонують швидке створення візуальних прототипів чи привабливих макетів, але вони часто обходять найскладніший етап — розуміння проблеми. Автор цієї статті, дизайнер з багаторічним досвідом, запропонував інноваційний підхід: використовувати ШІ не для візуалізації, а як партнера у мисленні — той, хто зберігає контекст проекту та витягує потрібну інформацію саме в тому моменті, коли вона необхідна. Такий підхід нагадує пам'ятник (mind palace), де всі дані структуровані так, щоб їх легко було знайти й використати.

Як ШІ стає партнером у вирішенні дизайнерських завдань

Автор описує процес, де штучний інтелект не просто генерує візуальний контент, а допомагає структурувати думки, аналізувати дані та перетворювати абстрактні проблеми в прототипи на основі реальних даних. Для цього він використовує AI-інструмент Claude Code (частина платформи Anthropic) для створення функціональних HTML-програмованих прототипів, а не просто макетів.

Приклад: локальна додаткова програма "Beacon"

Для ілюстрації методу автор створив уявний проект — мобільну програму для відкриття місцевого контенту (наприклад, ресторанів чи подій). Основне завдання: розв'язувати проблему випадіння користувачів до завантаження даних. Хоча дані та дослідження вигадані, саме структурування контексту і процес роботи з ШІ є реальними.

Створення "пам'ятника" для проекту: як організувати контекст

Контекст будь-якого дизайнерського проєкту розкиданий по різних джерелах:
- Дослідження зберігається в одній тека;
- Метрики продукту — в іншій;
- Зворотний зв'язок від стейкхолдерів розсипаний по Slack-чатах, які легко пропустити.

Автор вирішив систематизувати цю інформацію, створивши структуру тека з такими блоками:

my-project/
├── claude/          ← *Навички* (Skills) для Claude Code
├── data/            ← Синтезоване дослідження та метрики
├── design/          ← Папки за функціями (round-1/, round-2/ тощо)
├── project-context/ ← Статичні деталі проєкту (PRD, цілі)
├── handoffs/        ← Технічні специфікації для розробників
├── prototypes/      ← Робочі HTML-програмовані прототипи
└── design-system/   ← Дизайн-токени (відстані, кольори, шрифти)

Ключові файли:
- CLAUDE.md — інструкції для Claude Code, адаптовані під цей конкретний проект.
- MEMORY.md — динамічний каталог усіх контекстів, даних та рішень. Це як змістовний план, який постійно оновлюється.

Чому важлива структурованість?

Автор зберігає всі дані у форматі Markdown, оскільки це дозволяє ШІ краще їх індексувати та витягувати. Наприклад:
- Сирі нотатки можна вводити без обробки — AI допомагає їх структурувати.
- Конфіденційні дані замасковані (конфісковані) перед введенням.

Технології та інструменти: як працювати з Claude Code

Автор використовує Claude Code через термінал у редакторі коду Cursor. Це дозволяє:
- Бачити, які файли торкається ШІ (щоб уникнути галюцинацій).
- Відкривати нові вкладки термінала для паралельної роботи з декількома інстанціями Claude.
- Отримувати результати в режимі реального часу.

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

Автоматизація процесу: навички (Skills) для ШІ

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

Тому він автоматизував цей процес за допомогою вправність (Skills) — документаційних робочих процедур, які перетворюються на однокліткові команди. Ось як це працює:

Приклад навички: "explore"

Ця команда допомагає пройти повний дизайнерський цикл ітерації:
1. Вводиш проблему (етикет, бриг або описову заяву).
2. ШІ перевіряє доступні дані та генерує кодовий прототип, який ґрунтується на реальному контексті проекту.

Чому цей підхід працює

• Швидкість: Не потрібно вручну збирати інформацію з різних джерел.
• Точність: AI не просто генерує макети, а розуміє проблему та пропонує рішення на основі даних.
• Гидкість: Можна легко оновлювати контекст у MEMORY.md і отримувати актуальні результати.

Чого можна досягти за допомогою такого підходу

Автор переконаний, що ШІ може стати не просто інструментом для візуалізації, а партнером у мисленні. Він дозволяє:
- Зберігати та структурувати величезний обсяг інформації.
- Прискорювати ітераційний процес без втрати якості рішень.
- Фокусуватись на реальних проблемах, а не на візуальному оформленні.