Дизайн 2026-05-13

Як ШІ допомагає вирішувати складні дизайн-задачі 💡

Як ШІ допомагає вирішувати складні дизайн-задачі 💡

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

Автор цієї статті пропонує радикально інший підхід. Замість того щоб використовувати ШІ лише як генератор візуальних ідей, він інтегрує його у свій робочий процес як AI-партнера, який допомагає думати над проблемою. Мета — створити систему, яка зберігає весь контекст проєкту протягом його життєвого циклу, діючи ніби «палац розуму».

Цей підхід дозволяє швидко переходити від чітко визначеної проблеми до кількох прототипів коду, які ґрунтуються на реальних даних та контексті проєкту, а не лише на візуальному настрої. Це історія про те, як побудувати «банк пам'яті» для ШІ, щоб він став справжнім інтелектуальним помічником у процесі дизайну.

Проблема розсіяного контексту в дизайн-процесах

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

Щоб подолати цю проблему, автор створив централізований «банк пам'яті» і навчив модель Claude Code його використовувати. Ця система дозволяє ШІ отримувати необхідну інформацію саме тоді, коли вона потрібна.

Структура проєкту виглядає наступним чином:
* my-project/: Основна директорія проєкту.
* .claude/: Тут зберігаються навички (skills) для Claude.
* data/: Містить синтез досліджень та метрики. Це була перша тека, яку він заповнив.
* design/: Тека для кожного функціоналу з підрозділами (round-1/, round-2/) для експериментів та зворотного зв'язку.
* project-context/: «Заморожені» деталі проєкту (PRD, цілі тощо).
* handoffs/: Технічні специфікації для розробників.
* prototypes/: Робочі HTML-прототипи.
* design-system/: Токени та компоненти дизайну.

Як працює «банк пам'яті» ШІ

Ключовими елементами системи є два файли: CLAUDE.md та MEMORY.md.

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

Для забезпечення відчуття реального продукту, автор використовує дизайн-токени (відступи, кольори, типографіка) як CSS-змінні у своїй системі дизайну. На цьому етапі головна мета — валідація UX та робочих потоків, а не візуальна ідеальність.

Технічна реалізація та безпека

Усі проєктні дані зберігаються у форматі Markdown. Це забезпечує послідовне форматування, що допомагає ШІ краще їх отримувати. Хоча сирі нотатки підходять для введення, Claude може допомогти їх структурувати. Будь-яку конфіденційну інформацію автор спочатку затуляє (obfuscate).

Робота з моделями відбувається через Термінал у середовищі розробки (IDE), наприклад, VS Code. Це критично важливо: він повинен бачити файли, до яких ШІ звертається. Така прозорість запобігає «галюцинаціям» — вигадкам моделі. Хоча використання десктопного застосунку Claude також можливе, автор віддає перевагу Термінала, який дозволяє відкрити нову вкладку та запустити інший екземпляр Claude для паралельних завдань.

Автоматизація робочих процесів за допомогою Skills

Після того як проєкт отримав повний контекст, виникла нова проблема: автор постійно повторював ШІ ті самі інструкції — «Прочитай завдання, перевір дослідження, запропонуй 3 напрямки». Щоб усунути цю рутину, він автоматизував ці робочі процеси за допомогою Skills.

Навички — це задокументовані робочі потоки, які перетворюються на єдині команди. Хоча існують загальні можливості від Anthropic та інших платформ, найкращим рішенням виявилося створення власних навичок, адаптованих під його потреби.

Наприклад, команда explore допомагає пройти повну дизайн-ітерацію. Автор вводить проблему — завдання, гриф чи твердження — і система запускає ітерацію, перехресно звіряючи доступні дані та генеруючи код. Цей механізм значно прискорює цикл розробки, дозволяючи фахівцю зосередитися на стратегічному мисленні, а не на рутинному зборі даних.

Telegram Logo Читайте нас у Telegram: @prodesignandevenmore