16 лет работы с MS SQL Server сформировали у Дмитрия из Тантор Лабс чёткое представление о том, каким должен быть профайлер баз данных. Переход на PostgreSQL обнажил очевидный пробел: аналога MS SQL Profiler или Extended Events в экосистеме Postgres попросту не существовало. Команда закрыла программную часть, разработав расширение pg_trace для собственной СУБД Tantor Postgres, — но визуального интерфейса к нему не было.
Раньше путь от идеи до прототипа выглядел так: задача в Jira, макет в Figma, согласование с дизайнерами и разработчиками, презентация стейкхолдерам. Теперь тот же путь занял одни сутки. Инструментом стал связка Claude Design и Claude Code — ИИ-ассистент сначала спроектировал интерфейс по текстовому описанию и визуальным референсам, затем сгенерировал работающее приложение.
| # | Что | Кол-во шагов |
|---|---|---|
| 1 | Repo scaffold (Makefile, backend/frontend skeletons) | 11 |
| 2 | /api/health + первый тест | 5 |
| 3 | Error codes + protocol types | 6 |
| 4 | PgClient.check_extension (3-state) | 5 |
| 5 | PgClient.resolve_base/fetch_db_map/set_session_guc | 5 |
| 6 | PgClient.start_trace/stop_trace | 5 |
| 7 | Copy pg_trace_client.py в backend | 5 |
| 8 | TraceReader (subprocess + JSON parser) | 5 |
| 9 | SessionManager (state machine) | 5 |
| 10 | /ws endpoint + session_busy | 6 |
| 11 | Design tokens + globals.css | 6 |
| 12 | TS types (TraceEvent, messages) | 3 |
| 13 | WebSocketClient (3-try reconnect) | 5 |
| 14 | Zustand store | 5 |
| 15 | ConnectionDialog | 5 |
| 16 | Header + ParamsStrip | 3 |
| 17 | CommandPanel + EventTable | 3 |
| 18 | Inspector (Details + Query Plan) | 5 |
| 19 | App.tsx + Toaster + Footer | 5 |
| 20 | End-to-end smoke test против реального pg_trace | 10 |
Проектирование началось с детального промта: автор описал параметры трассировки (база данных, backend_pid, duration, query_like, plan, timeout), структуру командной панели с кнопками управления и двухпанельную компоновку — таблица трассировки сверху, детализация строки снизу. В качестве референсов он приложил скриншоты из MS SQL Management Studio и скриншоты платформы Tantor, чтобы выдержать фирменный стиль. Claude задал уточняющие вопросы и через 10 минут предложил три варианта цветовой схемы: тёплый кремовый Tantor Native, холодный Studio Classic в духе SSMS и тёмный Pro Dark для долгих сессий. Выбран был первый вариант.
Визуальный интерфейс профайлера спроектирован в Claude Design по референсам из MS SQL Management Studio и платформы Tantor.
Далее дизайн дорабатывался в режиме чата: объединили кнопки группировки и агрегации в одну, убрали поле EVENT (в отличие от MS SQL в pg_trace пока одно событие — выполнение запроса), добавили кнопку подключения к серверу. Автор передал Claude спецификацию полей файла трассировки pg_trace и документацию по утилите — модель перерисовала вкладку Details и проверила соответствие командной панели программному интерфейсу расширения. Для отображения планов запросов решили использовать API explain.tensor.ru: по умолчанию план показывается в текстовом JSON-формате, кнопка «Visualize plan» открывает графическое представление.
Передача артефактов из Claude Design в Claude Code выполняется одной командой — «Запусти Handoff to Claude Code». Модель упаковывает все результаты проектирования в архив, который загружается в среду разработки. Это позволяет не переспрашивать по ходу написания кода: вся техническая картина — структура данных, API, логика интерфейса — уже зафиксирована.
Практический смысл подхода выходит за рамки конкретного профайлера. Product owner, аналитик или DBA, который глубоко знает предметную область, может самостоятельно довести идею до работающего MVP и показать команде не абстрактное ТЗ, а живой прототип с реальной механикой. Это сокращает итерации согласования и снижает риск потери экспертного знания при передаче задачи разработчикам.
