Internal · CatalyX Blockchain Manager redesign

Як я переписав UI CatBM
за одну робочу сесію

Що робив, на чому AI допоміг, де він обмежений, і які звички довелось виробити. Це не магія. Якби не дедлайн, той самий обсяг розклався б на 3-4 дні без надзвичайного темпу. Все одно швидше за традиційний місяць.

Слава Гончаров · Marketing Manager · UX/UI Designer · No-code Developer

Відкрити live preview Читати метод
22год
загального часу, включно з ~4.5 год підготовки
25+
маршрутів у застосунку
43
snapshot-и реальних API
Метод

Три правила що тримали робочу сесію.

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

01

Змушуйте AI запитувати.

Дефолтна поведінка AI це почати робити одразу після вашого повідомлення. Йому простіше згенерувати півтори тисячі рядків коду на свій смак, ніж зупинитись і запитати "як ти бачиш цю секцію?". Якщо ви не змусите його запитувати, він не запитає.

Кожне непідтверджене припущення коштує годин правок. Кожні 30 секунд на уточнення зберігають ці години. Це не про обережність, це про економіку часу.

коли AI почав агресивно anonymize-ити CatalyX-бренд, прод-URL-и і IntellectEU footer (хоч я просив "просто довгі копіювані строчки"), я зразу сказав "ні, поверни назад, ти не правильно зрозумів". Це коштувало 30 хв revert-у. Якби я довірився і пішов далі, втратив би півдня переробок поверх неправильної бази.
02

Спочатку візуальні правки, потім технічні.

Без візуального референсу AI імпровізує. Він придумує власний layout, власні spacing-и, власну ієрархію. На вигляд "технічно ок", а на око трохи мимо.

Коли ви даєте візуал першим (Figma frame, скрін з референс-сайту, навіть деталі словами як де що стоїть), AI прив'язується до цього як до правди. Технічні правки після цього стають додатковою деталізацією. Без візуалу ви зливаєте час на пояснення того, що видно з першого погляду.

коли AI відрапортував "sidebar collapse працює", я перевірив у браузері і анімації width не було взагалі. Виявилось broken CSS-токен duration-normal, який не існував. AI написав "transition виглядає коректно", але реально transition резолвився до 0s бо токен undefined. Видно тільки в браузері і тільки на власні очі.
03

Слідкуй за роботою в реальному часі. Ctrl+C коли пішло не туди.

AI пише код стрімом. Видно кожен tool call, кожне рішення, кожен рядок. Не залишай його без нагляду на 5-10 хвилин: за цей час він встигне піти не в той бік і покласти кілька десятків правок поверх неправильної бази.

Коли помітив що іде не туди, тиснеш Ctrl+C. Без зайвої ввічливості, без "ну хай дороблю". Чим раніше зупиниш, тим менше треба відкочувати. Це працює саме у термінальній версії Claude Code зі stream-output. У IDE або веб-інтеграціях видно переважно "final result" коли вже пізно реагувати.

коли AI замість виправлення одного компонента почав рефакторити цілий блок layout-ів, я натиснув Ctrl+C і написав "ні, тільки цей файл, інші не чіпай". Це зекономило близько 40 хвилин відкочувань.
Чому це спрацювало

Чотири речі готові до того, як AI побачив проект.

Дивлячись на 22 години (включно з ~4.5 годинами підготовки в самому початку), легко подумати що AI зробив магію. Це не так. Без чотирьох речей я б не вклався у цей строк.

AI це інженер який щойно прийшов до команди: він пише код, але не знає вашого продукту, вашого досвіду, вашого дизайну. Все це треба покласти йому на стіл до того, як він почне писати.
01

Досвід з дашбордами і високонавантаженими інтерфейсами

Я раніше розробляв дашборди і admin-tools з нуля, плюс переробляв вже існуючі. Цей досвід дав мапу типових проблем UX в таких продуктах і інтуїцію коли AI пропонує "технічно правильне" але не те що працює у цьому контексті.

Наприклад, AI дефолтом пропонував tabs для 12+ розділів у Validator detail. Я знав що тут потрібна групована sub-nav, бо після сьомого табу патерн ламається. AI не запропонував би це сам. Без досвіду я б повірив у "сучасні таби".

Що це дало: десятки зекономлених "ні, не так". Я ловив дефолтні промахи AI ще до того, як він встигав їх закодити.
02

Готова система. Продукт був гарно продуманий.

Backend CatBM був чистим: 14 GET-ендпоінтів з послідовним URL-design, JSON структура з Kubernetes-style apiVersion/kind, чіткі сутності (Validator, Application, User, Right, Party). Я не reverse-engineer-ив бекенд, не вгадував які поля що означають. Просто читав JSON-и і domain model сам себе пояснював.

Якщо API хаотичний, перші 4-6 годин йдуть на reverse engineering. Тут я витратив на це нуль.

Без чого було б важче: якби домейн-модель була розкидана між endpoint-ами без зрозумілої структури, AI почав би вигадувати свої сутності.
03

Готовий дизайн. Кілька сторінок і дизайн-система.

В Figma вже лежала CatalyX Design System від дизайнера: токени (cobalt, gray ramp, success/warning/error), типографічна шкала Inter плюс Space Grotesk wordmark, готова Validator details сторінка як reference frame. Я не вибирав кольори, не сидів над "розмір 11 чи 12, line-height 1.4 чи 1.5". Все було.

Я брав tokens, передавав AI разом зі screenshot-ом через Figma MCP, і він застосовував. На lookalike-копії UX-paradigm-у пішло близько 2 годин замість 2 днів.

Без чого було б важче: з нуля треба вигадувати tokens, ієрархію, типографіку, це окремий проект на тиждень як мінімум.
04

~4.5 години підготовки на самому початку

Перші ~4.5 години (всередині тих 22 годин) я витратив на чорнову роботу до того, як AI взагалі почав щось писати. Скрапнув живий dev-сайт через cURL з реальним Bearer-токеном, зберіг 43 JSON-snapshot-и всіх GET-ендпоінтів, підняв локальний python-мок який віддавав UI плюс mock API з SPA fallback, pretty-print-ив оригінальні JS і CSS bundle для читання.

Паралельно дістав tokens і screenshots з Figma через MCP, написав три документи в Obsidian: повний UI inventory, 4-шаровий UX-аудит і ТЗ на Phase 1 з sitemap і milestones. Після цих 4.5 годин AI отримав живий мок API з реальними даними, дизайн-tokens перед очима і документ "що саме треба зробити".

Без чого було б важче: без цієї підготовки AI пішов би в random напрямок і вигадував. З нею контекст став таким, що 22 години стали реалістичним строком.
Інструменти

Що під рукою прискорювало цикл.

Окрім самого Claude Code, в роботі реально допомагали три речі. Без них цикл був би значно повільнішим, а декоративні і UX-деталі довелось би вигадувати з повітря.

Claude Code skill

ui-ux-pro-max

Готова база на 67 стилів, 96 палітр, 57 шрифтових пар, 25 типів графіків. Замість "AI вигадай" я просив "знайди палітру і шрифтову пару під CatBM tone". Конкретні референси, не імпровізація.

Де допоміг: вибір типографічної ієрархії, accent-кольорів для статусів, шрифтової пари Inter + Space Grotesk.
Claude Code skill

emil-design-engineering

Скіл по правилах анімації від Emil Kowalski: frequency-principle, ease-out для входу, ніяких transition:all, respect prefers-reduced-motion. Замість "додай гарних анімацій" це чотири точкові правки на готовій базі.

Де допоміг: sidebar collapse, button-hover transforms, theme-switch transitions, reveal-on-scroll. Без вибуху декоративних effects.
Voice tool

Голосовий ввід

Monologue або вбудований метод вводу в Claude. Голосом легше і швидше пояснити "хочеться по лого клікнути щоб перейти на дашборд", ніж набирати. Опис намірів через voice прискорює цикл значно.

Де допоміг: довгі описи UX-намірів, корекції "не так, я мав на увазі", обговорення structure без typing-fatigue.
Результат

Що було наступного дня.

Не презентація, не Figma-файл, не "майже готово". Робочий продукт з посиланням, паролем, реальними даними і документом по якому інженер з команди підніме проект локально без зайвої комунікації.

Повний redesign UI

25+ маршрутів, dark/light/system теми, mobile-responsive, a11y. React 19 + TypeScript + Vite, vanilla CSS на токенах з Figma design system.

Mock-API з реальних даних

43 snapshot-и з прод-середовища canton2.dev.catalyx.solutions. Cloudflare Pages Functions дзеркалить роутінг локального serve.py.

HMAC login-gate

Username/password захист preview-середовища, HMAC-підписана сесійна cookie на 7 днів. Secret-и не торкалися чату з AI, заїхали через wrangler CLI напряму у Cloudflare.

Collapsible sidebar з shortcut

Тонкий рівень UX-поліровки: keyboard shortcut ⌘\\, tooltip, плавна анімація width. Те що зазвичай випадає при швидкому циклі, тут залишилось в обсязі.

HANDOFF документ

Опис стеку, deploy-флоу, secret-ів, auth-архітектури, mock-API маппінгу і процедури ротації паролів. Команда піднімає проект без зайвих питань.

Live URL на free tier

Cloudflare Pages, без рахунка за хостинг. Preview доступне команді IntellectEU за паролем, прод-дані не індексуються пошуковиками.

Контекст

Розробники сказали: якби це були просто Figma-файли, розробка зайняла б близько місяця.

22 години моєї роботи (з підготовкою всередині) проти ~30 днів традиційного шляху Figma → передача → розробка. Якби не дедлайн, той самий обсяг розклався б на 3-4 робочих дні без надзвичайного темпу. Все одно швидше за місяць команди.

А як же Figma?

Цей результат не означає що Figma не потрібна. Дизайн-процес у Figma залишається незамінним. Без CatalyX Design System і кількох еталонних сторінок я б не вийшов на цей рівень якості. AI прискорює перетворення дизайну на код, не сам дизайн-процес. Дизайнер не зникає, його робота стає основою для швидкої реалізації.

Для команди

Що з цього можна взяти.

Це не одно-разова історія. Підхід працює на будь-якому продукті де є готова домен-модель і дизайн-система. Internal-зміни що чекають кварталами можна закривати днями, не "замість" розробників а до того як вони отримують вже-чорнову Figma.

Швидкість delivery

Внутрішні UI-зміни що чекають через bandwidth dev-команди, тепер можна закривати днями. Especially для preview і user-testing версій, які не потребують прод-якості з першого разу.

Cost economics

Хостинг $0. Backend $0. Інфраструктура $0. Все на Cloudflare free tier. Бюджет потрібен тільки коли продукт пройде валідацію і поїде в прод. Internal showcase і user testing не потребують жодного інженера інфри.

Repeatability

Той самий підхід працює на будь-якому Catalyst продукті де треба швидко перевірити UX-гіпотезу, зробити redesign або підняти preview. Snapshot-based mock API працює універсально, якщо API чистий.

Безпека по дизайну

Чутливі secret-и ніколи не з'являються в чаті з AI. Pattern з wrangler pages secret put технічно не дає моделі бачити значення. Pre-production preview noindex і за паролем.

AI як інженерний партнер працює тільки тоді, коли він знає що ви хочете побачити. Без візуалу імпровізує, без чесних факторів (досвід, продукт, дизайн, підготовка, інструменти) не виграє часу. З цим він закриває роботу яка раніше їла квартал. Решта це дисципліна: запитуй, слідкуй, зупиняй коли пішло не туди.