Проверять интерфейс на глаз, читая код, - соблазн опытного разработчика: тут очевиден отступ, там сломается на узком экране. Наивно кажется, что визуальный результат можно вычислить в голове по исходнику. На нетривиальной верстке это самообман: то, что рисует браузер, зависит от слишком многих слоёв, чтобы держать их все в уме, и догадка расходится с картинкой.

Browser Preview закрывает этот разрыв, связывая картинку с кодом. Он открывает ваше локально запущенное приложение прямо в IDE рядом с кодом или в системном браузере. Дальше - главное: можно выбрать конкретный DOM-элемент и отправить его агенту как контекст, он появится в промпте как @-упоминание, и элементов может быть несколько, а console errors цепляются к сообщению агента автоматически. Визуальный дефект перестаёт быть словами и становится привязанным к элементу и ошибке.

Механизм работает как замкнутый цикл, и порядок в нём важен. Сначала вы сами запускаете dev server и записываете URL - preview проксирует именно ваш локальный сервер, а не воображаемый. Затем воспроизводите ошибку в самом preview. Передаёте агенту выбранный элемент и console output. Просите минимальный diff под конкретный дефект. И повторяете сценарий, проверяя заодно соседние viewport, где та же правка могла сломать другое.

Наивный ход - опишу баг словами и попрошу починить - ломается на неоднозначности описания. "Кнопка съезжает" не говорит агенту, какая именно кнопка, в каком состоянии, при какой ширине и с какой ошибкой в консоли. Агент честно чинит свою догадку о вашем описании, а не наблюдаемый дефект. Preview убирает этот зазор: вместо пересказа агент получает сам элемент и саму ошибку.

Почему это устроено как передача элемента и ошибки, а не как текстовый диалог. Точность починки не выше точности описания дефекта. Слова о верстке всегда беднее самой верстки: теряются состояние, контекст, соседи в DOM, реальное сообщение консоли. Отдавая агенту выбранный узел и console output, вы поднимаете точность входа до точности того, что видите, - и правка целится в настоящий дефект, а не в его словесную тень.

Границы инструмента стоит знать заранее. Preview работает со всеми типами агентов - Devin Local, облачными и ACP: агент проксирует ваш локальный сервер и получает переданные элементы и ошибки. Слушатели и передача элементов и ошибок лучше всего отлажены в Chrome, Arc и других браузерах на Chromium; в прочих поведение может быть урезано. Сам preview можно и выключить в настройках, чтобы агент не запускал этот инструмент.