Як показати роботу з AI у портфоліо і на співбесіді, щоб це був плюс

Дизайнери, які почали кодити з Claude, питають мене одне й те саме: «Код писав агент. Це писати в портфоліо чи краще промовчати?» Я Дмитро Ніколаєнко, 15 років у продуктовому дизайні, вів дизайн восьми мобільних банків і щодня працюю в Claude Code. Як лід я дивлюсь на кейс з іншого боку столу, і мене не цікавить, хто набирав символи. Мене цікавить, хто приймав рішення і хто перевірив, що воно працює.

Що взагалі класти в портфоліо design engineer, я розбирав у статті про 4 артефакти. Там роботі з AI відведено один блок у шаблоні кейса. Тут тільки про неї: як написати, що показати і як не посипатись на співбесіді.

Чому ховати роботу з AI - погана ідея у 2026?

Бо воно однаково випливе. І випливе в найнезручніший момент.

Відкриваю репозиторій кандидата. У корені лежить CLAUDE.md, в історії комітів часто видно підпис Claude. А в кейсі написано «самостійно розробив фронтенд». Перше питання на співбесіді буде вже не про дизайн, і розмова піде зовсім не туди, куди ти планував.

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

Чому «AI зробив усе» звучить ще гірше?

Інша крайність. Кейс, де весь процес - скріншот промпту «зроби красивий дашборд» і фінальний екран. Іноді ще з гордим «за 15 хвилин».

Що я читаю між рядків:

• ти не знаєш, що всередині, і не зможеш це підтримувати;
• за результат ніхто не відповідає, бо «це AI так зробив»;
• тебе можна замінити підпискою.

Наймач не боїться, що ти користуєшся AI. Він боїться двох речей: що без агента ти нічого не вирішуєш, а з агентом не помічаєш, коли той помиляється. Обидві крайності, і ховати, і хвалитись «AI зробив усе», б'ють в одне місце: у кейсі не видно тебе. Чим вайб-кодинг відрізняється від нормальної роботи з агентом, я розбирав окремо.

Як написати блок «Як я працював з AI» в кейсі?

Окремий блок, 5-8 речень. Не розмазуй AI по всьому тексту кейса, збери в одне місце, щоб його можна було знайти за 10 секунд. Загальна структура кейса (проблема, процес, рішення, результат) лишається такою, як у гайді з UX-портфоліо. Блок про AI її доповнює.

Шаблон на 4 пункти:

1. Задача і контекст. Що треба було зробити і які були обмеження: токени дизайн-системи, доступність, стек, дедлайн.
2. CLAUDE.md і Skills. Які правила ти записав агенту і чому саме ці. Якщо зробив свій Skill, одним реченням: що він перевіряє.
3. Що виправив після агента. Дві-три конкретні правки з посиланням на коміт або PR. Це головний пункт, не скорочуй його.
4. Результат. Що поїхало в прод, посилання на деплой і що зробив би інакше наступного разу.

Ось як це виглядає заповненим. Проєкт умовний, підстав свій:

Як я працював з AI

Задача: дашборд витрат, 6 екранів. Тільки токени
нашої ДС, WCAG 2.2 AA, тиждень на все.

Налаштування: у CLAUDE.md заборонив хардкод кольорів
і нові компоненти без мого ОК. Зробив Skill
token-check і запускаю його перед кожним PR:
він шукає значення поза токенами.

Що виправив: агент зробив картку як div з onClick,
переробив на button, щоб працював фокус з клавіатури.
Він же продублював Badge замість нового варіанту,
дубль прибрав (PR #14).

Результат: у проді, посилання нижче. Наступного разу
почав би зі станів, а не з верстки.

Зверни увагу: тут нема «AI допоміг зробити в 5 разів швидше». Швидкість ніхто не перевірить. Правки перевірить кожен, хто відкриє PR.

Які артефакти доводять, що AI працював під твоїм контролем?

Текст у кейсі - це заява. Артефакт - доказ. Ось чотири, які я відкриваю першими.

1. CLAUDE.md

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

# Правила проєкту
- Кольори, відступи, радіуси тільки з tokens.css
- Новий компонент тільки після мого підтвердження
- Кожен інтерактивний елемент: hover, focus, disabled
- Після правки перевір 375 і 1440px

2. Власний Skill

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

3. PR з твоїми коментарями

Найсильніший з чотирьох. Pull request зі змінами від агента, де ти залишив коментарі до рядків: «тут хардкод #1A1A1A, заміни на color.text.primary», «нема focus-стану», «це вже є в Button, не дублюй». Одразу видно, що ти читаєш код і маєш думку. Як читати код від AI, щоб було що коментувати, є в чеклісті з 10 пунктів.

4. До і після правок коду від агента

Два фрагменти поруч: що згенерував агент і що лишилось після тебе. Можна diff з GitHub, можна просто два блоки коду в кейсі.

Було, від агента:

<div className="card" onClick={openDetails}>
  <span>Витрати за жовтень</span>
</div>

Стало, після мене:

<button type="button" className="card" onClick={openDetails}>
  <span>Витрати за жовтень</span>
</button>

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

Які питання про AI поставлять на співбесіді?

Статистики тут не буде. Це питання, які я сам поставив би кандидату з AI у кейсі, і що я хочу почути у відповідь.

1. «Покажи свій CLAUDE.md. Чому там саме ці правила?» Хочу почути історію: це правило з'явилось, бо агент двічі зробив одну й ту саму помилку. Погана відповідь: «Claude сам його написав».
2. «Де агент помилився і як ти це помітив?» Назви конкретний випадок. Якщо скажеш «він не помилявся», я не повірю.
3. «Що ти відкинув із запропонованого?» Рішення видно саме по тому, чого ти не взяв: компонент, бібліотеку, цілий підхід.
4. «Як ти перевіряєш результат?» Стани, ширини екрана, контраст, рев'ю диффу, свій Skill. Будь-яка система краща за «дивлюсь, чи гарно».
5. «Що буде, якщо завтра Claude недоступний?» Чесна відповідь звучить так: «Маленьку правку зроблю руками, бо знаю, де що лежить. Велику фічу зроблю повільніше». Це нормально. Ненормально, коли відповідь «нічого».

Як пройти live-завдання з кодом, якщо код писав Claude?

Тут перевіряють одне: чи розумієш ти, що лежить у твоєму репо. Підготовка займає один вечір.

1. Пройди кожен файл. Попроси Claude: «Поясни структуру цього репо дизайнеру, по рядку на файл». Потім закрий відповідь і перекажи сам. Де запинаєшся, туди і копай.
2. Знай три місця напам'ять. Де лежать токени, де живе компонент, де збирається сторінка. Майже всі питання на таких завданнях крутяться навколо них.
3. Потренуй три правки руками. Поміняти колір через токен, додати кнопці стан disabled, змінити відступ у картці. Без агента.
4. Уточни правила гри. На початку спитай, чи можна користуватись AI. Можна - показуй процес: план, промпт, перевірку. Не можна - роби маленьку правку сам.
5. Думай вголос. «Шукаю, звідки береться цей колір» звучить краще за дві хвилини мовчання. Навіть якщо шукаєш довго.

Як формулювати роботу з AI в кейсі: погано і добре

Цифри в прикладах умовні, підстав свої.

Де розібрати портфоліо з кодом наживо?

У четвер 5 листопада о 19:00 за Києвом безкоштовний ефір #6 «Портфоліо дизайнера 2026: чому з кодом наймають швидше». Покажу на екрані, як зібрати кейс з кодом і AI, щоб лід дочитав його до кінця, і пройдемося по артефактах з цієї статті наживо. Реєстрація в Telegram-боті @uxhero_bot: бот нагадає перед стартом, а після ефіру надішле запис.

Де зібрати такі артефакти, якщо їх поки нема?

Якщо зараз у портфоліо тільки Figma, CLAUDE.md, Skill і PR з коментарями з повітря не з'являться. Їх треба зробити на реальному проєкті, і бажано не в ніч перед співбесідою.

Саме так побудований курс «Design Engineer»: 10 лекцій від Git і першого PR до Claude Code і деплою. На виході GitHub-портфоліо, задеплоєний PR і власні Claude Skills, тобто рівно те, що лягає в блок «Як я працював з AI». Курс зроблений як воркбук: кожен крок, промпт і перевірка записані. Тож на співбесіді ти розповідаєш свій процес і можеш повторити його з будь-якого кроку.

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

Чи писати в портфоліо, що використовував AI?

Так. Ховати роботу з AI немає сенсу: CLAUDE.md у репозиторії, історія комітів і перше ж уточнювальне питання на співбесіді однаково це покажуть. Пиши окремим блоком «Як я працював з AI»: задача і контекст, які правила ти дав агенту через CLAUDE.md і Skills, що виправив після нього і який результат вийшов у прод.

Чи називати конкретні AI-інструменти в кейсі?

Так, але коротко і в ролі: «Claude Code для коду, Figma MCP, щоб агент читав макет». Список з десяти логотипів нічого не доводить. Інструменти міняються швидко, а підхід до постановки задачі і перевірки лишається, тому акцент роби на ньому.

Чи можна показувати в портфоліо навчальний проєкт з курсу?

Можна, якщо чесно позначити, що це навчальний проєкт, і додати своє: інший продукт, свої токени, свої правила в CLAUDE.md, свій Skill. Однакові проєкти з одного курсу лід впізнає швидко, тому цінність у тому, чим твій відрізняється. На курсі «Design Engineer» від UX Hero кожна лекція закінчується артефактом у твоєму репозиторії, тож є що доробити під себе.

Що робити, якщо в компанії AI заборонений або все під NDA?

Робочий код не показуй, а перед тим, як класти щось у портфоліо, перевір свій договір. Процес показати можна: перепиши CLAUDE.md і Skill під вигаданий продукт або збери невеликий pet-проєкт на тих самих принципах і покажи його повністю. Якщо AI на роботі заборонений, так і скажи на співбесіді, а роботу з агентом покажи на особистому проєкті.

Як захистити на співбесіді код, який писав Claude?

Розкажи, які рішення приймав ти: структура компонентів, токени, стани, обмеження доступності. Покажи PR зі своїми коментарями і пару «до і після» правок коду від агента. Перед співбесідою пройди кожен файл репозиторію і потренуй 2-3 маленькі правки руками, щоб на live-завданні спокійно пояснити код і змінити його без агента.

---

AI у портфоліо - плюс рівно настільки, наскільки в кейсі видно тебе. Твої правила для агента і твої правки після нього. Відкрий свій найсвіжіший кейс і допиши блок на 4 пункти. Це один вечір, а на співбесіді він закриє найнезручніші питання ще до того, як їх поставлять.