Открытая 8B vision-модель, развёрнутая за 20 минут, закрывает 70% разрыва до фронтира – и замыкает цикл тестирования для кодинг-агентов без единого вызова к облачному API.
Проблема: мощный кодер, который работает вслепую
Если у вас есть неограниченный доступ к фронтир моделям (Calude, Codex и т.д.), то эта статья не для вас.
Сегодня доступны отличные недорогие модели для кодинга и архитектуры. Например,GLM-5.1(реферальная ссылка +10% бонус на пополнение) умеет генерировать, рефакторить, отлаживать код, строить архитектуру – в десятки раз дешевле фронтит моделей или вообще бесплатно при локальном развёртывании.
Но у всех таких моделей часто есть общая слепая зона:они не видят результат своей работы. Кодинг-агент лего может:
- сгенерировать HTML-страницу
- запустить Playwright и снять скриншот
- …и на этом всё. Скриншот лежит на диске, а модель понятия не имеет, что на нём изображено
Без обратной связи невозможно замкнуть цикл «агент написал код → агент посмотрел результат → агент исправил → агент посмотрел убедился, что исправил». Человек должен вмешиваться вручную: «нет, кнопка уехала влево», «таблица обрезана на мобильном». Это убивает автономность и делает vibe-coding полуавтоматическим и утомительным. Вместо того чтобы ставить задачи и принимать результат, творец превращается в младшего QA-тестера.
Решение: MCP-сервер с локальной vision-моделью
Идея простая: создатьMCP-сервер(Model Context Protocol), который принимает скриншот и возвращает структурированное описание того, что на нём изображено. Внутри – вызов vision-модели.
Ключевой инсайт:для «зрения» на скриншотах не нужен большой ум. Задача – извлечение: OCR текста, перечисление кнопок, определение layout, детекция обрезки, а значит, для этого скорее всего достаточно компактной открытой модели. Такова была гипотеза и я ее успешно подтвердил.
Модель:qwen3-vl:8b– взята навскидку по советам Gemini/Grok – открытая, 8 миллиардов параметров, из коробки понимает изображения. Развёртывание через Ollama (для простоты, но для многопоточности и продавлена лучше API от vllm или llama.cpp), буквальноollama pull qwen3-vl:8bи готово! На GPU класса RTX 3090 / 4090 или даже Apple Silicon M-серии с 16+ GB RAM.
MCP-серверvision-sidecar-mcpпока качалась модель я сгенерировал Grok-ом:https://github.com/xronocode/vision-sidecar-mcp
- analyze_image– общий анализ скриншота (нейтральный промпт)
- analyze_structured– структурированная извлечение в JSON-схему
- extract_table– специализированная таблица-экстракция
Время развёртывания:~20 минут от нуля до работающего пайплайна.
Замкнутый цикл
Теперь агент может:
Кодер-модель получает текстовое описание результата и может итерироватьбез участия человека. Цикл замкнут.
Пример сырого JSON-ответа от vision-sidecar_analyze_image дляскриншота вебсайта:
А что с качеством? Вот тут начинается интересное
Естественный вопрос: «Окей, 8B-модель видит. Но насколько хорошо?»
Я провел трёхэтапную оценку на 10 скриншотах реального веб-приложения (kombo– детская математическая RPG, мой пет-проект в разработке) во вьюпортах от 320×568 (маленький мобильный) до 1440×900 (десктоп).
Три слоя сравнения
qwen3-vl:8b v0.1.0
Модель из коробки, базовый промпт
qwen3-vl:8b v0.2.2
Та же модель + тюнинг промптов и параметров сэмплинга
Claude Opus 4.7
Фронтирная мультимодальная модель (потолок)
Важно:тюнинг был исключительно на уровне промптов и параметров inference. Никакого fine-tuning весов, никаких дополнительных данных. Чисто инженерная работа над промптом, схемой ответа и конфигурацией Ollama. Тюнинг весов – отдельная, вполне выполнимая задача, которая может ещё сократить разрыв.
9 измерений оценки
Каждый скриншот оценивался по 9 измерениям (0–5 баллов):
Что проверяет
OCR / извлечение текста
Точность посимвольного копирования
Детекция UI-элементов
Карточки, иконки, декоративные формы
Понимание layout
Колонки, сетка, responsive-адаптация
Детекция CTA/кнопок
Кнопки, ссылки, их иерархия
Семантическое понимание
Роли секций, аудиторная сегментация
Извлечение таблиц
Ячейки, заголовки, структура
Контроль галлюцинаций
Отсутствие выдумок (цвета, тексты)
Обработка неопределённости
Детекция обрезки, below-fold контента
Полезность для downstream
Пригодность для дальнейшей обработки
Результаты
Headline numbers
Gap по измерениям (до и после тюнинга)
Per-screenshot (10 скриншотов)
Что конкретно помогло (тюнинг без fine-tuning)
1. Sampling discipline: seed=42 + top_p=0.9 + top_k=20
Детерминированный seed убрал run-to-run variance. Tighter sampling (top_p/top_k) убрал «творчество» при извлечении – extraction-задача требует discipline, не creativity.
Результат:байт-идентичные скриншоты 03/04 теперь дают структурно идентичный output. Regression-тестирование стало возможным.
2. Structured JSON schema + glyphs_and_icons
Выделенное полеglyphs_and_iconsв схеме заставляет модель эксплицитно перечислять спецсимволы. Символ ✦ (sparkle) читался как+в 100% базовых прогонов. После добавления поля – 100% корректно в structured mode.
Принцип:если модель не видит символ правильно «на автомате», заставь её назвать его явно.
Что остаётся фронтиру
Три вещи, которые 8B-модель системно не берёт:
Цветовая дифференциация.Eyebrow «FOR TEACHERS» рендерится серым (не фиолетовым) – это визуальный сигнал «на roadmap». Opus видит разницу, qwen3-vl упорно называет оба eyebrow фиолетовыми. В целом уступает в точности и мелочах.
Но вот что критично:для задачи замыкания цикла тестирования это не нужно. Кодер-агенту нужно знать: «кнопка обрезана», «текст таблицы корректен», «CTA на месте». А не «какой оттенок серого у eyebrow».
Итого, локальная VLM –high-recall, medium-precision экстрактор. Фронтир –low-volume, high-fidelity backstop. Оба слоя нужны, но 80% работы делает бесплатный локальный.
Что дальше
Средний горизонт:
- Fine-tuning на размеченных парах (скриншот, ground-truth JSON) – qwen3-vl поддерживает LoRA - имеет смысл если задачи серьезные, а доступ к фронтиру или бюджет жестко ограничен.
- Тесты других моделей и/или использование ансамбля из двух локальных моделей
- Внедрение классификатора и автоматический routing: "простые" скриншоты → локально, сложные → фронтир
Длинный горизонт:
- Мультимодальный MCP-хаб: vision + audio + document extraction в одном сервере
- Integration с CI/CD: скриншот-тесты как часть pipeline, с автоматическим fallback на фронтир при низком confidence
Открытая 8B-модель, развёрнутая за 20 минут на обычном GPU, после базового промпт-тюнинга (без обучения весов!) работает на ~70% от фронтирана задаче vision-extraction для UI-скриншотов.
Для 80% практических задач кодинг-агента – OCR, таблицы, кнопки, clipping – это полный паритет с Claude Opus 4.7.
Для оставшихся 20% (тонкие цвета, дизайн-интент, подсчёт строк) – отправляем на фронтир или человеку.
Цикл тестирования замкнут. Модель больше не слепая.
Код MCP-сервера,eval-скрипты, идатасетв репоhttps://github.com/xronocode/
Дисклеймер.Не претендую на новаторство или уникальность подхода: MCP-серверы, vision-модели и Ollama существуют не первый день. Вполне возможно кто-то уже решал аналогичную задачу и может даже решил ее более изящно. Ценность этой статьи в другом: от идеи до работающего решения с измеримым результатом за один вайб-спринт. Создал, развернул, протестировал, замерил, сравнил с фронтиром, получил конкретные цифры и отдал команде фронт-энда для внедрения в практики.
