Как показывать сайт заказчику до деплоя: почему скриншоты в чатах убивают бюджет и как собирать правки на localhost

В работе любого фрилансера, фронтенд-разработчика или веб-студии есть критический момент, на котором чаще всего сгорают нервы и часы бюджета — промежуточная демонстрация проекта заказчику.

Обычно у команды есть два сценария, и оба далеки от идеала:

1. Тяжёлый staging-пайплайн ради каждой мелочи: чтобы показать клиенту новую форму заказа или перевёрстанный хедер, разработчик пушит недоделанную ветку, ждёт 10 минут пайплайн в GitLab CI / GitHub Actions, ловит упавшую сборку из-за строгого линтера, чинит её, а затем во время звонка в Zoom не может поправить опечатку вживую — нужно снова ждать билд.
2. Хаос со скриншотами и кружочками в Telegram: когда клиент получает ссылку, он открывает её со своего телефона и начинает присылать в рабочий чат десятки обрезанных скриншотов без адресной строки, видео экрана с трясущимся пальцем и пятиминутные голосовые сообщения: «Там ниже на второй плашке шрифт какой-то мелкий, а кнопка при нажатии уезжает».

Разберём, как выстроить профессиональный процесс демо прямо с localhost с помощью TunnelHunt и встроенного режима Review Mode, превратив приёмку правок из боли в управляемый процесс.

Сколько на самом деле стоит «бесплатный» сбор правок в мессенджере

Посчитаем реальные трудозатраты разработчика и менеджера на 1 раунд из 15 правок, присланных клиентом в Telegram или WhatsApp:

• Расшифровка контекста (30–45 минут): понять, на какой именно странице (/catalog, /catalog/item-42 или в корзине) сделан обрезанный скриншот, на каком устройстве смотрел клиент (iPhone 13 mini с шириной 375px или десктоп с масштабом 125% в Windows) и в каком состоянии находился компонент.
• Перенос в таск-трекер (20–30 минут): менеджер или сам разработчик слушает голосовые, переводит их в текст и создаёт задачи.
• Поиск элементов в коде (20 минут): поиск нужного шаблона или React/Vue-компонента по тексту кнопки.

В итоге на 15 мелких правок по вёрстке, которые в коде делаются за 20 минут, команда тратит больше 1,5 часов чистого времени только на коммуникацию.

Идеальный сценарий сдачи этапа: Live Demo + Review Mode

С TunnelHunt вы разделяете показ на две быстрые фазы: живой интерактив на созвоне и асинхронный сбор точечных пинов.

Фаза 1. Постоянный именной адрес и защита паролем

Клиенты не любят, когда вчера сайт открывался по одной ссылке, а сегодня она перестала работать. На тарифе Pro зарезервируйте в дашборде понятный поддомен под проект (например, acme-redesign) и запустите туннель с защитой Basic Auth и режимом ревью:

ssh -p 2222 -R acme-redesign:80:localhost:3000 tunnelhunt.ru \
  --auth client:secret2026 \
  --review

Что это даёт:

• Красивый постоянный URL: https://acme-redesign.tunnelhunt.ru можно закрепить в описании рабочего чата с клиентом на всё время разработки.
• Конфиденциальность (NDA): случайные посетители и боты увидят стандартное окно ввода логина и пароля браузера.
• Правки в реальном времени на созвоне: во время демонстрации клиент говорит: «А давай попробуем сделать шапку тёмно-синей». Вы меняете класс в редакторе на своём ноутбуке, нажимаете Cmd + S, и через секунду (благодаря HMR) экран на компьютере и смартфоне клиента обновляется без перезагрузки.

Фаза 2. Клиент оставляет пины и голосовые прямо поверх вёрстки

После звонка клиент хочет спокойно посмотреть сайт сам или показать его коллегам. Вместо того чтобы писать простыню текста в мессенджер, он пользуется плавающей панелью Review Mode внизу вашей страницы:

┌──────────────────────────────────────────────────────────────┐
│  🚀 Review   │  📌 Добавить правку   │  3 открыто            │
└──────────────────────────────────────────────────────────────┘

Как это выглядит глазами заказчика:

1. Он нажимает «Добавить правку» и кликает пальцем или мышкой прямо в тот блок, который нужно изменить (например, в карточку товара или заголовок).
2. Открывается компактное аккуратное окно поверх страницы (изолированное в Shadow DOM, поэтому оно выглядит одинаково опрятно на любом сайте).
3. Клиент либо вводит короткий текст, либо нажимает на иконку микрофона и за 5 секунд наговаривает голосом, что нужно поправить.
4. Нажимает «Отправить».

Никакой регистрации, ввода email или установки расширений от клиента не требуется.

Фаза 3. Что получает разработчик вместо загадок

В момент нажатия кнопки «Отправить» система автоматически прикрепляет к замечанию клиента полный технический паспорт проблемы:

Если вы используете Cursor или Claude Code с подключённым MCP-сервером @tunnelhunt/mcp, вам даже не нужно открывать файлы вручную — просто попросите агента:

«Проверь новые ревью по поддомену acme-redesign и исправь их в коде».

Чек-лист перед отправкой демо-ссылки клиенту

1. Включите allowedHosts в сборщике (если используете Vite 6+): добавьте .tunnelhunt.ru в server.allowedHosts в vite.config.ts, чтобы dev-сервер разрешал внешние обращения.
2. Активируйте Review Mode без перезапуска: если туннель уже запущен без флага --review, вы можете просто переключить тумблер в разделе «Туннели» веб-панели управления или добавить к ссылке суффикс ?__review=1.
3. Проверьте закрытие задач: по мере исправления замечаний отмечайте их решёнными в разделе app.tunnelhunt.ru/reviews (или через MCP) — клиент вживую увидит, как счётчик открытых правок на тулбаре уменьшается до нуля.