От голосовой правки заказчика до коммита: авто-фикс вёрстки с Review Mode и Claude Code / Cursor

В классической заказной разработке согласование вёрстки и UI-деталей занимает до 30% времени спринта. Даже когда код пишется за минуты с помощью Cursor или Claude Code, этап приёмки работ заказчиком или арт-директором остаётся ручным и хаотичным:

1. Разработчик деплоит ветку на staging или открывает туннель.
2. Заказчик заходит со смартфона, делает скриншот, рисует поверх него стрелочку в мессенджере и записывает голосовое сообщение: «Вот тут на карточке тарифа кнопка сливается с фоном, и отступ сверху великоват».
3. Разработчик слушает аудио, пытается угадать страницу, разрешение экрана, находит нужный React/Vue-компонент, переписывает сообщение клиента в промпт для ИИ-агента и вручную отписывается в чат.

С выходом Review Mode и обновлённого MCP-сервера @tunnelhunt/mcp этот конвейер замыкается в единый автоматизированный цикл: от клика клиента на экране телефона до готового изменения в коде без ручного копирования контекста.

Архитектура замкнутого конвейера правок

Процесс объединяет три уровня инфраструктуры TunnelHunt:

┌─────────────────────────────────────────────────────────────────┐
│ 1. КЛИЕНТ (iPhone / Desktop браузер)                            │
│    Открывает https://demo.tunnelhunt.ru?__review=1              │
│    Ставит пин на элемент -> пишет текст или голос -> Отправить  │
└───────────────────────────────┬─────────────────────────────────┘
                                │ POST /__tunnelhunt/reviews
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│ 2. TUNNELHUNT EDGE & DASHBOARD                                  │
│    • Сохраняет скриншот вьюпорта с координатой пина             │
│    • Фиксирует селектор, роут, viewport и имя компонента        │
│    • Транслирует лог в открытый SSH-терминал разработчика       │
└───────────────────────────────┬─────────────────────────────────┘
                                │ MCP Protocol (@tunnelhunt/mcp)
                                ▼
┌─────────────────────────────────────────────────────────────────┐
│ 3. AI-АГЕНТ (Cursor / Claude Code / Windsurf)                   │
│    • Вызывает list_reviews(subdomain, status="open")            │
│    • Находит компонент в кодовой базе и правит вёрстку/логику   │
│    • Закрывает тикет через resolve_review(subdomain, reviewId)  │
└─────────────────────────────────────────────────────────────────┘

Никаких промежуточных таблиц в Notion, потерянных скриншотов в Telegram и вопросов «на какой это странице?».

Шаг 1. Поднимаем туннель с активным режимом ревью

Запустите ваш локальный dev-сервер (например, Next.js или Vite на порту 3000) и откройте туннель с флагом --review (или коротким -r):

ssh -p 2222 -R 80:localhost:3000 tunnelhunt.ru --review

Если у вас подключён тариф Pro и зарезервирован постоянный поддомен (например, agency-stage), укажите его при подключении:

ssh -p 2222 -R agency-stage:80:localhost:3000 tunnelhunt.ru --review

В терминале появится подтверждение:

  ▲ Tunnelhunt Online
  --------------------------------------------------
  Your tunnel has been successfully established:
  https://agency-stage.tunnelhunt.ru -> http://localhost:3000
  --------------------------------------------------
  Security & Features:
    Basic Auth:   Disabled
    IP Whitelist: Disabled (Public access)
    Review Mode:  Enabled (Visual & Voice Feedback active)
    Feedback URL: https://agency-stage.tunnelhunt.ru?__review=1
  --------------------------------------------------

Отправьте ссылку заказчику, дизайнеру или тестировщику.

Шаг 2. Что происходит на стороне заказчика

Когда клиент открывает ссылку, Edge-прокси TunnelHunt внедряет легковесный виджет обратной связи, изолированный внутри Shadow DOM. Это гарантирует, что:

• Стили вашего сайта (Tailwind, CSS Modules, Bootstrap) никак не конфликтуют с интерфейсом тулбара.
• Строгие политики безопасности (Content-Security-Policy) и блокировщики рекламы не блокируют отправку фидбека, так как запросы идут на служебный роут /__tunnelhunt/reviews того же самого домена.

Когда заказчик выбирает режим «Добавить правку» и нажимает на любой блок страницы, виджет за доли секунды собирает технический слепок:

1. Имя компонента фреймворка: парсер обходит дерево React Fiber (_reactFiber$...) или Vue VNode (__vueParentComponent) и извлекает точное название компонента в исходном коде — например, <CheckoutButton> или <PricingSection>.
2. Точный DOM-путь: уникальный CSS-селектор элемента.
3. Скриншот реального вьюпорта: снимается честный рендер текущей области просмотра с сохранением пропорций (aspect ratio), скролла и нанесённым поверх маркером клика.
4. Аудиозапись или комментарий: если клиенту неудобно печатать с телефона, он записывает голосовую заметку.

В этот же миг в вашем SSH-терминале появляется строка:

[16:05:19] [REVIEW #a91d4f] /checkout (<OrderSummary>) "Сделай итоговую сумму крупнее и выдели зелёным" by Марина

Шаг 3. Подключаем MCP-сервер к Cursor или Claude Code

Чтобы ваш AI-ассистент мог самостоятельно забирать замечания из TunnelHunt, добавьте официальный пакет @tunnelhunt/mcp в конфигурацию вашего редактора.

Настройка в Cursor (.cursor/mcp.json) или Claude Desktop:

{
  "mcpServers": {
    "tunnelhunt": {
      "command": "npx",
      "args": ["-y", "@tunnelhunt/mcp"],
      "env": {
        "TUNNELHUNT_API_KEY": "th_live_ваш_ключ_из_дашборда"
      }
    }
  }
}

Настройка в Claude Code (CLI):

claude mcp add tunnelhunt -- npx -y @tunnelhunt/mcp

Агенту становятся доступны два специализированных инструмента для работы с фидбеком:

• list_reviews — получение списка открытых или решённых замечаний по конкретному поддомену (или по всем вашим туннелям) вместе с путями страниц, именами компонентов, размерами экрана и комментариями.
• resolve_review — программное закрытие замечания после внесения исправлений в код.

Шаг 4. Автоматическое исправление по одному промпту

Когда клиент закончил смотреть сайт и оставил 5–10 пинов на разных страницах, вам не нужно открывать каждую карточку вручную. Достаточно написать в чат Cursor Composer или Claude Code:

«Забери все открытые ревью для поддомена agency-stage через TunnelHunt MCP, внеси правки в соответствующие компоненты и закрой выполненные задачи».

Как действует ИИ-агент:

1. Запрос списка задач: агент вызывает list_reviews({ subdomain: "agency-stage", status: "open" }) и получает структурированный JSON:

   [
     {
       "id": "a91d4f",
       "pagePath": "/checkout",
       "componentName": "OrderSummary",
       "selector": "aside.summary > div.total-row > span.amount",
       "viewport": "390x844",
       "comment": "Сделай итоговую сумму крупнее и выдели зелёным",
       "author": "Марина"
     }
   ]

2. Точечный поиск в коде: зная pagePath: "/checkout" и componentName: "OrderSummary", агент не тратит токены на сканирование всего репозитория, а сразу открывает src/components/checkout/OrderSummary.tsx.
3. Учёт мобильного контекста: видя viewport: "390x844" (экран iPhone), агент понимает, что нужно проверить мобильные брейкпоинты Tailwind (text-2xl sm:text-3xl text-emerald-400 font-bold).
4. Правка и закрытие: после сохранения файла агент вызывает resolve_review({ subdomain: "agency-stage", reviewId: "a91d4f" }).

В веб-панели управления app.tunnelhunt.ru/reviews карточка автоматически переходит в статус «Решено», а клиент на своём экране сразу видит обновлённый через HMR интерфейс.

Когда использовать веб-дашборд /reviews

Хотя текстовые комментарии агент разбирает полностью автономно, веб-раздел «Правки и фидбек» в дашборде незаменим в двух сценариях:

• Прослушивание голосовых заметок: если заказчик записал длинное аудио с обсуждением бизнес-логики, вы можете прослушать его во встроенном плеере прямо в карточке ревью.
• Визуальный контроль сложных багов вёрстки: в модальном окне предпросмотра скриншота можно открыть полноразмерное изображение во вкладке или скачать его в 1 клик, чтобы передать скриншот мультимодальной модели (Claude 3.7/4 Sonnet или GPT-4o) для визуального сравнения.

Резюме: экономия времени на каждом цикле приёмки

Попробуйте запустить этот пайплайн на текущем проекте: откройте туннель с флагом --review, поставьте пару тестовых пинов в браузере и поручите вашему AI-агенту закрыть их через MCP.