Открытая 8B vision-модель, развёрнутая за 20 минут, закрывает 70% разрыва до фронтира – и замыкает цикл тестирования для кодинг-агентов без единого вызова к облачному API.

Если у вас есть неограниченный доступ к фронтир моделям (Calude, Codex и т.д.), то эта статья не для вас.

Сегодня доступны отличные недорогие модели для кодинга и архитектуры. Например, GLM-5.1 (реферальная ссылка +10% бонус на пополнение) умеет генерировать, рефакторить, отлаживать код, строить архитектуру – в десятки раз дешевле фронтит моделей или вообще бесплатно при локальном развёртывании.

Но у всех таких моделей часто есть общая слепая зона: они не видят результат своей работы. Кодинг-агент лего может:

• сгенерировать HTML-страницу

• запустить Playwright и снять скриншот

• …и на этом всё. Скриншот лежит на диске, а модель понятия не имеет, что на нём изображено

GLM 5.1 слепая

Без обратной связи невозможно замкнуть цикл «агент написал код → агент посмотрел результат → агент исправил → агент посмотрел убедился, что исправил». Человек должен вмешиваться вручную: «нет, кнопка уехала влево», «таблица обрезана на мобильном». Это убивает автономность и делает vibe-coding полуавтоматическим и утомительным. Вместо того чтобы ставить задачи и принимать результат, творец превращается в младшего QA-тестера.

Идея простая: создать 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 (десктоп).

Оценка качества локальной Qwen3-vl:8B c Claude Opus 4.7 средствами Opus 4.7

Важно: тюнинг был исключительно на уровне промптов и параметров inference. Никакого fine-tuning весов, никаких дополнительных данных. Чисто инженерная работа над промптом, схемой ответа и конфигурацией Ollama. Тюнинг весов – отдельная, вполне выполнимая задача, которая может ещё сократить разрыв.

Каждый скриншот оценивался по 9 измерениям (0–5 баллов):

                    Baseline    Tuned v0.2.2    Opus 4.7
                    ────────    ────────────    ────────
Средний балл:         3.99         4.70          5.00
Gap до фронтира:      1.01         0.30            –
Gap закрыт:             –           70%             –

                  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         ✓ Почти паритет

  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

Детерминированный seed убрал run-to-run variance. Tighter sampling (top_p/top_k) убрал «творчество» при извлечении – extraction-задача требует discipline, не creativity.

Результат: байт-идентичные скриншоты 03/04 теперь дают структурно идентичный output. Regression-тестирование стало возможным.

Выделенное поле 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 существуют не первый день. Вполне возможно кто-то уже решал аналогичную задачу и может даже решил ее более изящно. Ценность этой статьи в другом: от идеи до работающего решения с измеримым результатом за один вайб-спринт. Создал, развернул, протестировал, замерил, сравнил с фронтиром, получил конкретные цифры и отдал команде фронт-энда для внедрения в практики.