Открытая 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 для скриншота вебсайта :
{
"image": {
"path": "/Users/myevdokimov/prj/kompakt/full-page.png",
"size_bytes": 106900,
"size_mb": 0.1,
"mime": "image/png",
"modified": "2026-04-11T07:24:25.613414+00:00"
},
"model": "qwen3-vl:8b",
"preprocess": {
"original_size": [1200, 3815],
"upscaled": false
},
"viewport_hint": null,
"analysis": "- Top bar:\n - Left: \"pdf-kompakt\" (light blue text)\n - Right: \"EN\" (dropdown indicator), \"Support the project\" (orange button with shield icon), and a question mark icon (gray)\n\n- Main content area (black background):\n - Logo: \"kompakt\" (green and blue gradient text)\n - Tagline: \"50–90% smaller. 100% private.\" (white text)\n - Description: \"Free, open-source PDF compression. Desktop CLI gets 50–90% savings. Chrome extension for quick jobs. Files never leave your device.\" (white text)\n - Buttons:\n - \"Download Desktop\" (blue button with download icon)\n - \"Chrome Extension\" (gray button with Chrome icon)\n - Code snippet: \"brew tap xronocode/tools && brew install pd...\" (green text with \"Copy\" button on the right)\n - \"Product Hunt\" badge: \"Product Hunt\" (white text on dark background with \"???\" icon)\n - \"Support me\" button (red button with shield icon)\n\n- Bottom bar:\n - Links: \"GitHub\", \"Releases\", \"Issues\", \"MIT License\", \"Privacy Policy\", \"Newsletter\" (white text)\n - \"Support the project\" button (orange button with shield icon)\n - Footer text: \"pdf-kompakt — open-source PDF compression\" (white text)\n\n- Layout:\n - Top bar: horizontal, left-aligned text, right-aligned buttons/icons\n - Main content: centered elements (logo, tagline, description, buttons, code snippet, badge)\n - Bottom bar: horizontal, centered links, centered button, centered footer text\n\n- Clipping: Content appears unclipped at the bottom edge (no visible content below the footer text)."
}А что с качеством? Вот тут начинается интересное
Естественный вопрос: «Окей, 8B-модель видит. Но насколько хорошо?»
Я провел трёхэтапную оценку на 10 скриншотах реального веб-приложения (kombo – детская математическая RPG, мой пет-проект в разработке) во вьюпортах от 320×568 (маленький мобильный) до 1440×900 (десктоп).
Три слоя сравнения
Слой | Модель | Описание |
|---|---|---|
Baseline | qwen3-vl:8b v0.1.0 | Модель из коробки, базовый промпт |
Tuned | qwen3-vl:8b v0.2.2 | Та же модель + тюнинг промптов и параметров сэмплинга |
Frontier | Claude Opus 4.7 | Фронтирная мультимодальная модель (потолок) |
Важно: тюнинг был исключительно на уровне промптов и параметров inference. Никакого fine-tuning весов, никаких дополнительных данных. Чисто инженерная работа над промптом, схемой ответа и конфигурацией Ollama. Тюнинг весов – отдельная, вполне выполнимая задача, которая может ещё сократить разрыв.
9 измерений оценки
Каждый скриншот оценивался по 9 измерениям (0–5 баллов):
Измерение | Что проверяет |
|---|---|
OCR / извлечение текста | Точность посимвольного копирования |
Детекция UI-элементов | Карточки, иконки, декоративные формы |
Понимание layout | Колонки, сетка, responsive-адаптация |
Детекция CTA/кнопок | Кнопки, ссылки, их иерархия |
Семантическое понимание | Роли секций, аудиторная сегментация |
Извлечение таблиц | Ячейки, заголовки, структура |
Контроль галлюцинаций | Отсутствие выдумок (цвета, тексты) |
Обработка неопределённости | Детекция обрезки, below-fold контента |
Полезность для downstream | Пригодность для дальнейшей обработки |
Результаты
Headline numbers
Baseline Tuned v0.2.2 Opus 4.7
──────── ──────────── ────────
Средний балл: 3.99 4.70 5.00
Gap до фронтира: 1.01 0.30 –
Gap закрыт: – 70% –
Gap по измерениям (до и после тюнинга)
Baseline gap │ After tuning
│
OCR ████░░░░░ 0.7 │ ░ 0.0 ✓ Паритет
UI detect ██░░░░░░░ 0.3 │ ░ 0.0 ✓ Паритет
Layout ████████░ 1.2 │ ██░ 0.3 ~ Близко
CTA ░░░░░░░░░ 0.0 │ ░ 0.0 ✓ Паритет
Semantic ███░░░░░░ 0.4 │ ░ 0.0 ✓ Паритет
Table ██░░░░░░░ 0.3 │ ░ 0.0 ✓ Паритет
Hallucination █████████ 1.4 │ ████████░ 1.2 ✗ Главный gap
Uncertainty █████████ 2.3 │ ███░ 0.5 ~ Близко
Downstream █████████ 1.4 │ █░ 0.1 ✓ Почти паритет
Per-screenshot (10 скриншотов)
Screenshot Opus Baseline Tuned Δ improved
────────────── ──── ──────── ───── ──────────
01 desktop hero 5.0 4.0 4.7 +0.7
02 audience cards 5.0 4.3 4.7 +0.4
03 how it works 5.0 4.3 4.9 +0.6
04 comparison tbl 5.0 4.4 4.9 +0.5
05 tablet hero 5.0 4.2 4.7 +0.5
06 tablet sections 5.0 4.4 4.8 +0.4
07 mobile hero 5.0 3.4 4.6 +1.2 ← biggest
08 mobile cards 5.0 4.2 4.7 +0.5
09 mobile table 5.0 4.4 4.6 +0.2
10 320px stress 5.0 3.1 4.7 +1.6 ← biggest
────────────── ──── ──────── ───── ──────────
avg 5.00 3.99 4.70 +0.71
Что конкретно помогло (тюнинг без 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 существуют не первый день. Вполне возможно кто-то уже решал аналогичную задачу и может даже решил ее более изящно. Ценность этой статьи в другом: от идеи до работающего решения с измеримым результатом за один вайб-спринт. Создал, развернул, протестировал, замерил, сравнил с фронтиром, получил конкретные цифры и отдал команде фронт-энда для внедрения в практики.