Від коду до дизайну: мій процес зі скілами для Claude Code

02Крок 1

Design DNA

Розібрати референси на правила, а не «зробити так само»

Найслабший запит у дизайні з AI — «зроби дорожче» або «зроби як на цьому сайті». Модель мусить здогадуватися, що саме мені подобається. Design DNA розкладає референс на систему: кольори, шрифти, відступи, форми, ефекти.

Я дала йому сім своїх референсів — темні технологічні схеми. Найцінніше, що кольори він не вгадує «на око», а міряє скриптом по пікселях. Ось що вийшло:

Правила, які я забрала з референсів:

• майже чорний фон займає 60–86% кадру;
• кожен яскравий колір — не більше 2% кадру, і лише в лініях, точках і світінні, без заливок;
• одна схема — головний герой, тексту близько 1%;
• підписи дрібні й прості, жодних великих декоративних цифр.

Тестовий варіант кільця збігся з референсами за фоном майже ідеально: різниця кольору 1,45 — оком її не видно.

Проаналізуй ці референси і витягни їхню Design DNA: кольори (виміряй по пікселях), шрифти, відступи, форми, ефекти.
Не копіюй. Сформулюй 4–5 правил, які я застосую до свого блоку з брендовими кольорами GENTERRA.

Репозиторій: github.com/zanwei/design-dna

03Крок 2

Impeccable

Не анімуйте слабкий дизайн. Спершу виправте структуру

Impeccable — скіл для критики й шліфування інтерфейсу. Я попросила його розібрати старий блок: сітку з дев'яти плиток. Він запустив дві незалежні перевірки — дизайнерський огляд і автоматичний детектор — і повернув звіт.

Головна знахідка була позначена як серйозна (P1): форма не відповідає змісту. Контент — це цикл, де аналітика повертається в дослідження. А сітка-«змійка» закінчується на останній плитці й нікуди не повертається. Ще він знайшов:

• дев'ять однакових плиток без головного елемента;
• нумерацію зигзагом — око стрибає;
• текст 10–12 px, який ледве читається;
• градієнтні цифри, які детектор позначив як шаблонний прийом.

Тобто скіл незалежно прийшов до тієї ж ідеї, що і я: цикл можна показати кільцем.

ДоПісля

Переглянь цей блок як арт-директор. Анімацію поки не додавай.
Перевір ієрархію, шрифти, відступи, композицію, зайві рамки, повтори і головний фокус.
Чи відповідає форма змісту? Спершу структурні зміни, потім деталі стилю.

Репозиторій: github.com/pbakaus/impeccable

04Крок 3

Three.js

3D — лише коли воно додає сенс

Скіли Three.js потрібні не кожному сайту. Я перевірила їх на окремому концепті — 3D-банці напою для портфоліо: метал, світло, обертання на скролі. Там простір і є ідеєю, тож 3D виправдане.

Для схеми цехів я Three.js не підключала. Кільце, лінії й світіння зроблені звичайною векторною графікою (SVG) — легко, швидко й чітко. 3D тут додало б лише вагу сторінці.

Хороший процес — це не лише вибір потрібного скіла, а й відмова від зайвого.

Репозиторій: github.com/CloudAI-X/threejs-skills

05Крок 4

GSAP

Не набір ефектів, а один режисований сценарій

Коли блок працює статично, можна додавати рух. Скіли GSAP — від авторів цієї бібліотеки — дають методику: часові шкали, запуск від скролу, почергову появу елементів, повагу до налаштування «зменшити рух».

Порівняйте самі. Ліворуч усе з'являється разом, як буває без сценарію. Праворуч — одна послідовність: заголовок, потім кільце, потім цехи по черзі, і сигнал біжить по колу.

Зроби стриману систему руху для цього блоку на GSAP.
Одна часова шкала: заголовок → кільце → цехи по черзі → сигнал по колу.
Запуск, коли блок на екрані. Врахуй налаштування «зменшити рух».

Репозиторій: github.com/greensock/gsap-skills

06Крок 5

Motion Design

Як рух має відчуватися

GSAP відповідає на питання «як це технічно анімувати». Motion Design від LottieFiles — на питання «яким має бути характер руху»: темп, плавність, зайвий відскок, вага.

Репозиторій: github.com/LottieFiles/motion-design-skill

07Крок 6

Genjutsu

Дрібні взаємодії, які пояснюють, а не прикрашають

Genjutsu дивиться на взаємодії як на систему: наведення, натискання, фокус, зміна стану. Перед кодом він вимагає одне речення-задум, яке я маю затвердити. Я затвердила — і ось що з’явилося в кільці:

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

Усе на коротких переходах 150–200 мс і з повагою до налаштування «зменшити рух». Спробуйте самі в живій версії блоку ↗.

Репозиторій: github.com/AThevon/genjutsu