Может ли LongCat-2.5 превратить скриншот в полноценную веб-страницу? Разбор возможностей визуального программирования и неудачных случаев по 5 критериям

Примечание автора: на основе официальных демонстраций и независимых тестов 智东西 и TOKRACE разбираем реальные возможности LongCat-2.5 в преобразовании скриншотов в веб-страницы, создании интерактивных страниц и 3D-генерации, а также типичные ошибки и границы применимости модели.

2026-11-02 компания Meituan официально представила LongCat-2.5. Одной из ключевых возможностей модели разработчики назвали Visual Coding (визуальное программирование) и показали несколько примеров: симуляцию жидкости в реальном времени, трёхмерную модель бронзового священного дерева из Саньсиндуя и создание страницы-приглашения на мероприятие по фотографии. У многих фронтенд-разработчиков сразу возник вопрос: можно ли просто загрузить в модель дизайн-макет или скриншот сайта и получить готовую к сдаче веб-страницу?

Эта статья — не пересказ рекламных материалов. В официальную демонстрацию отобрали удачные примеры, а в независимых тестах встречались как хорошо проработанные работы, так и проекты с ошибкой в размерах в 1000 раз. Мы сравним оба типа результатов и разберём, какие выводы подтверждены фактами, а какие — пока нет.

Что вы узнаете: на что способен LongCat-2.5 в визуальном программировании, по каким пяти критериям стоит принимать готовую веб-страницу и на каких этапах без проверки человеком не обойтись.

LongCat-2.5: главное о визуальном программировании

Для начала соберём в таблицу открытые сведения, связанные с визуальным программированием. Данные взяты из официального технического блога Meituan, документации API и публикаций о релизе. На момент выпуска веса модели ещё не были доступны для скачивания, поэтому «официальный API открыт» не означает «модель имеет открытый исходный код».

Важно: официальная документация говорит о поддержке понимания изображений и видео. Это не означает, что LongCat-2.5 предоставляет API для генерации изображений или видео. Картинки и видео в сторонних тестах были получены с помощью Blender, браузера и других инструментов, которые отрендерили код, написанный моделью.

Воссоздание по скриншоту и создание страницы по визуальному образцу — не одно и то же

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

Второй тип — точное воссоздание по скриншоту: модели дают скриншот готовой страницы и просят максимально точно воспроизвести расположение элементов, отступы, шрифты, интерактивность и адаптивное поведение. Критерии приёмки здесь гораздо строже: любое отклонение будет заметно. Официальный пример со страницей-приглашением на мероприятие относится к первому типу. Пока недостаточно независимых примеров, чтобы оценить, насколько точно LongCat-2.5 в целом справляется со вторым типом задач. Тем более нельзя утверждать, что она уже способна к попиксельному воспроизведению.

Как LongCat-2.5 работает с визуальными токенами

«Нативная мультимодальность» LongCat-2.5 связана с тем, как модель обрабатывает изображения. Согласно официальному описанию, сначала SAE (кодировщик семантического выравнивания) извлекает визуальные признаки, затем RVQ (остаточное векторное квантование) кодирует их в многоуровневые дискретные токены. После этого они поступают вместе с текстовыми токенами в основную модель для совместной обработки.

Эта архитектура также включает дискретизацию изображений с исходным разрешением, предварительное вычисление визуальных токенов в автономном режиме и совместное обучение эмбеддингов визуальной кодовой книги с основной моделью. Для разработчика это можно понимать так: изображение не «переводится в текстовое описание», прежде чем попасть в модель, а участвует в рассуждениях и написании кода в форме, близкой к исходной. Однако преимущества архитектуры лишь создают основу для таких возможностей и не означают, что любой скриншот можно воспроизвести точно.

Как оценивать результаты LongCat-2.5 в Vision2Web

Разработчики опубликовали результаты двух бенчмарков, напрямую связанных с визуальным программированием. Все данные взяты из таблицы оценок Meituan. Сравнение ограничено двумя другими моделями из этой таблицы и не охватывает все новейшие модели по состоянию на 2026-11-03.

По этим данным LongCat-2.5 лидирует в Text→3D среди моделей из официальной таблицы. В Vision2Web она опережает GPT-5.6-Sol на 5.1 балла, но уступает Claude Opus 5 на 1.6 балла. Результат DeepSWE полезен для сравнения: визуальное программирование в конечном счёте тоже связано с работой над кодом, а в исправлении проблем реальных программных репозиториев LongCat-2.5 отстаёт от GPT-5.6-Sol на 8.1 балла.

Что ещё важнее, баллы бенчмарка не означают ни попиксельной точности воспроизведения, ни доли проектов, прошедших приёмку. По умолчанию LongCat-2.5 тестировалась с включённым режимом рассуждений, temperature=1.0 и top_p=0.95. Часть результатов других моделей взята из публичных отчётов, а часть получена в ходе собственных тестов Meituan, поэтому условия не были полностью одинаковыми.

💡 Совет по выбору: публичные рейтинги — лишь ориентир. По-настоящему полезно проверить модели на собственных скриншотах и требованиях. Через агрегирующий интерфейс, совместимый с OpenAI, например APIYI apiyi.com, можно сравнить результаты нескольких визуальных моделей с помощью одного тестового скрипта и затем выбрать основную.

Визуальное программирование с LongCat-2.5: успешные и неудачные примеры

Ниже собраны примеры из трёх источников. В официальной демонстрации показаны отобранные успешные результаты, а 智东西 и TOKRACE провели независимые тесты на небольшом числе задач. Убедительность этих примеров различается — это стоит учитывать при сравнении.

Примеры от разработчиков: визуальные ориентиры и интерактивная логика

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

Эти примеры показывают, что LongCat-2.5 умеет превращать визуальные требования в работающий код фронтенда. Но они не доказывают, что «любую интерактивную страницу можно создать с первой попытки», или что производительность полученных страниц уже соответствует требованиям коммерческого запуска.

Тестирование 智东西: результат в целом хорош, но детали требуют доработки

2026-11-02 издание 智东西 попросило LongCat-2.5 создать HTML-анимацию пеликана на велосипеде. По наблюдениям журналиста, анимация получилась проработанной: главный персонаж хорошо различим, стиль выдержан, деталей много. Однако шарф местами расположен не совсем точно.

В другой задаче модель создавала презентацию PowerPoint по финансовому отчёту Amazon за третий квартал. Структура анализа оказалась полной: в презентации были графики динамики, структурные диаграммы и предупреждения о рисках. При предварительной проверке журналист не обнаружил явных ошибок в данных. Проблемы касались в основном подачи: на некоторых слайдах было слишком много информации и слишком мелкий шрифт, а отдельные выводы звучали чересчур категорично. Это важно и для веб-разработки: то, что содержание в целом верно, ещё не означает, что оно хорошо читается и удачно размещено.

Тест TOKRACE: чем чётче ограничения, тем выше вероятность успеха

TOKRACE подключил LongCat-2.5 к Claude Code и с помощью Blender и браузера выполнил 15 творческих задач: 6 задач с 3D, 4 познавательных видео, 4 статичных SVG и 1 анимацию. У успешных примеров была общая черта: чёткие ограничения и простая структура.

• Параметрическая книжная полка: размеры версии с тремя секциями шириной 0,8 м и версии с четырьмя секциями шириной 1,0 м оказались правильными, толщина плит составила 18 мм, как и требовалось. Все шесть изображений с разных ракурсов были представлены. Работа заняла около 36 минут и 47 запросов, модель вывела 69 708 токенов.
• Китайский постер мероприятия: работа заняла около 3 минут и 10 запросов. Все шесть фрагментов китайского текста сохранились без ошибок, а иконки не вытесняли основной текст.
• Четырёхсекундная анимация велосипедиста: колёса, педали и ноги двигались синхронно. Проверяющие выборочно оценили 40 моментов: максимальное отклонение ступни от педали составило около 0,19 пикселя, но контраст светлого персонажа оказался слабым.

Неудачные примеры выявили проблемы, которые легко упустить из виду при программном создании визуального контента. В задаче с планетарным редуктором три планетарные шестерни были расположены в целом правильно, но вместо 140 мм модель указала 140 м — ошибка в единицах измерения на три порядка. Запрошенное видео также не было предоставлено. Модель двухкомнатной квартиры «выглядела как гостиная», но содержала структурные ошибки: дверные и оконные проёмы не были вырезаны, кровать пересекалась с перегородкой, а некоторые ракурсы закрывали стены. В SVG с часами стрелки на 9:41 располагались под правильным углом, но цифры перекрывались с толстыми делениями.

TOKRACE также сравнил результаты с включённым и выключенным режимом размышлений. С включённым режимом компоновка некоторых изображений стала чище, но затраты на рассуждения и запросы могли заметно вырасти. При создании SVG с пеликаном на велосипеде без размышлений изображение получилось с первого запроса, а с включёнными размышлениями — только с пятого. Это наблюдение по одной задаче: по нему нельзя судить о средней доле успешных результатов при включённом или выключенном режиме.

Пять критериев приёмки результатов визуального программирования с LongCat-2.5

Как показывают примеры выше, между «выглядит правильно» и «готово к сдаче» лежит как минимум четыре этапа проверки. Этот чек-лист составлен на основе рассмотренных случаев и не является официальным стандартом оценки LongCat.

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

Как протестировать преобразование скриншота в веб-страницу с помощью API LongCat-2.5

Если вы хотите проверить LongCat-2.5 на собственном дизайн-макете, отправьте изображение и текстовое описание задачи в формате, совместимом с OpenAI. Изображения можно передавать в формате Base64 или по общедоступному URL. Максимальный размер одного изображения — 10 МБ, в одном запросе можно отправить до 50 изображений. Если исходное соотношение сторон превышает 200:1, возникнет ошибка, поэтому длинные скриншоты нужно предварительно разрезать.

Обратите внимание: на дату проверки информации для этой статьи (2026-11-03) запуск LongCat-2.5 на платформе APIYI не подтверждён. Проверить доступность модели можно в списке моделей APIYI. Приведённый ниже скрипт использует стандартный формат OpenAI: с его помощью можно сначала проверить процесс на уже доступной на платформе модели с поддержкой изображений, а после появления LongCat-2.5 просто заменить название модели.

Минимальный пример

import base64, openai

client = openai.OpenAI(api_key="YOUR_API_KEY", base_url="https://api.apiyi.com/v1")
img = base64.b64encode(open("screenshot.png", "rb").read()).decode()

resp = client.chat.completions.create(
    model="LongCat-2.5",  # Используйте актуальное имя из списка моделей APIYI
    messages=[{"role": "user", "content": [
        {"type": "text", "text": "按截图复刻为单文件 HTML,只用截图中出现的文字,不要补充任何数据"},
        {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{img}"}}
    ]}],
)
print(resp.choices[0].message.content)

import base64
import time
import openai
from pathlib import Path

client = openai.OpenAI(
    api_key="YOUR_API_KEY",
    base_url="https://api.apiyi.com/v1"  # OpenAI-совместимый интерфейс APIYI
)

SYSTEM_PROMPT = """你是前端工程师。根据截图生成单文件 HTML(内联 CSS/JS)。
硬性要求:
1. 只使用截图中可见的文字,禁止补充数据、单位、来源或年份
2. 无法辨认的文字用 [待确认] 占位
3. 支持 375px / 768px / 1440px 三个断点
4. 代码末尾用注释列出:你做的假设、未实现的交互"""

def encode_image(path: str) -> str:
    data = Path(path).read_bytes()
    if len(data) > 10 * 1024 * 1024:
        raise ValueError("单张图片超过 10MB,请压缩后再试")
    return base64.b64encode(data).decode()

def screenshot_to_html(path: str, model: str = "LongCat-2.5",
                       retries: int = 3) -> str:
    img = encode_image(path)
    messages = [
        {"role": "system", "content": SYSTEM_PROMPT},
        {"role": "user", "content": [
            {"type": "text", "text": "请复刻这张网页截图。"},
            {"type": "image_url",
             "image_url": {"url": f"data:image/png;base64,{img}"}},
        ]},
    ]
    for i in range(retries):
        try:
            resp = client.chat.completions.create(
                model=model, messages=messages, max_tokens=16000
            )
            return resp.choices[0].message.content
        except openai.RateLimitError:
            time.sleep(2 ** i)  # Экспоненциальная задержка при ограничении запросов (429)
    raise RuntimeError("多次重试失败")

if __name__ == "__main__":
    html = screenshot_to_html("screenshot.png")
    Path("output.html").write_text(html, encoding="utf-8")
    print("已生成 output.html,请按五维清单验收")

В этом коде стоит обратить внимание на два решения. Во-первых, системный промпт прямо запрещает дополнять данные, единицы измерения и источники — это защита от проблемы, которая возникла в примере с графиком TOKRACE, где модель выдумала финансовые годы и источники данных. Во-вторых, модель должна перечислить свои предположения в конце кода, чтобы при ручной проверке было проще найти то, что она «додумала». Структуру запроса для режима рассуждений уточняйте в официальной документации параметров LongCat — не стоит напрямую применять параметры reasoning других моделей.

🚀 Быстрый старт: рекомендуем сначала получить бесплатный тестовый лимит для новых пользователей через APIYI apiyi.com и пройти весь процесс на 3–5 скриншотах разной сложности: лендинге, странице с формой и дашборде. Оцените результаты по контрольному списку из пяти критериев, прежде чем решать, включать ли инструмент в рабочий процесс.

Анализ влияния LongCat-2.5 на визуальное программирование

Влияние на фронтенд-разработчиков

• Заметное ускорение на этапе прототипирования: по визуальному образцу можно быстро создать интерактивную страницу. Это удобно для демонстрации концепций, первых версий промостраниц и внутренних инструментов. Официальная страница-приглашение на мероприятие и постер TOKRACE — примеры таких задач.
• Проверять результат всё равно придётся: модель может написать страницу, которая «выглядит правильно», но ошибки в единицах измерения, тексте и связях между элементами структуры заметить сложнее. Роль разработчика частично смещается от написания кода к заданию ограничений и приёмке результата.
• Чем точнее ограничения, тем лучше: в примере с книжной полкой модель хорошо справилась, когда получила точные размеры и список ожидаемых результатов. При размытых требованиях она чаще позволяет себе вольные интерпретации.

Влияние на рабочий процесс AI Coding

В официальной документации LongCat-2.5 есть инструкции по подключению Claude Code, Codex, OpenCode, Cline и других инструментов. Обычно достаточно изменить Base URL, API-ключ и название модели. Это значит, что визуальное программирование можно встроить в существующий рабочий процесс с агентами, а не открывать для него отдельное окно чата. Однако совместимый формат API не означает, что все функции и параметры инструментов работают одинаково. Кроме того, длительные задачи могут прерываться или завершаться по тайм-ауту: именно поэтому часть задач TOKRACE по созданию видео не была выполнена.

Что касается стоимости, сейчас в официальной документации указаны временные льготные тарифы: ¥2.00 за входные токены без попадания в кэш, ¥0.04 за входные токены при попадании в кэш и ¥8.00 за выходные токены — за миллион токенов. Фактические цены уточняйте на официальной платформе и в счёте. В многошаговых задачах вроде примера с книжной полкой объём выходных данных приближается к 70 тысячам токенов. Поэтому при планировании пакетных задач визуального программирования стоит обращать больше внимания на количество запросов и длину ответов, чем на цену за единицу.

Ограничения LongCat-2.5 при создании веб-страниц по скриншотам

С учётом всех доступных данных сценарии использования можно разделить на три категории:

💰 Совет по расходам: визуальное программирование часто требует нескольких итераций. Для начала возьмите небольшую партию скриншотов и рассчитайте средний расход токенов на страницу. APIYI apiyi.com предлагает оплату по фактическому использованию и единый счёт — это удобно для сравнения стоимости одной страницы между разными моделями.

Частые вопросы FAQ

LongCat-2.5 для визуального программирования: главное

• Возможности: LongCat-2.5 умеет превращать эталонные изображения в работающий код веб-страниц, но не гарантирует попиксельного воспроизведения скриншота.
• Официальные результаты: 78.6 в Vision2Web — немного ниже Claude Opus 5; 55.4 в Text→3D — лучший результат в официальной сравнительной таблице.
• Что получается хорошо: задачи с чёткими ограничениями и простой структурой, например SVG-постеры и параметрические книжные полки.
• Где возникают ошибки: основные риски связаны с единицами измерения, расположением элементов, выдуманным содержимым и полнотой результата.
• Как проверять результат: последовательно оценивать визуальное сходство, функциональность, адаптивность, точность содержания и готовность к передаче в работу.
• Как начать: в APIYI apiyi.com можно настроить тестирование с помощью скрипта, совместимого с OpenAI API. Наличие LongCat-2.5 следует проверять в списке моделей.

Итоги

Главные выводы о способности LongCat-2.5 превращать скриншоты в веб-страницы:

1. Прототип — не готовый продукт: официальные примеры и независимые тесты подтверждают возможности модели в визуальном программировании, но между скриншотом и готовой к публикации страницей всё ещё есть заметный разрыв.
2. Визуальное сходство — только первый шаг: интерактивность, адаптивность, точность содержания и полноту реализации нужно проверять отдельно. При этом особенно легко упустить то, что модель добавила от себя.
3. Чёткие ограничения повышают стабильность: укажите размеры, тексты, точки перехода для адаптивной вёрстки и список ожидаемых результатов, а также запретите в промпте добавлять данные от себя. Это заметно сократит количество ошибок из-за свободной интерпретации.

Если планируете использовать визуальное программирование в повседневной разработке, сначала протестируйте модель на небольшой выборке собственных скриншотов, а затем определите область применения по трём уровням границ, описанным в этой статье. С помощью единого интерфейса APIYI apiyi.com можно сравнить реальные результаты нескольких моделей с поддержкой изображений. Платформа предоставляет бесплатный лимит новым пользователям, что позволяет провести проверку с минимальными затратами.

📚 Источники

1. Официальный технический блог LongCat-2.5: архитектура модели, бенчмарки и официальные примеры
2. Ссылка: longcat.ai/blog/longcat-2.5

3. Описание: первоисточник результатов Vision2Web и 3DCodeBench и условий тестирования

4. Блог технической команды Meituan: описание технологии визуальных токенов LongCat-2.5

5. Ссылка: tech.meituan.com/2026/11/02/Meituan-LongCat-2.5.html

6. Описание: обзор механизмов визуального кодирования SAE, RVQ и других

7. Документация LongCat по API визуального понимания: ограничения на входные изображения и видео

8. Ссылка: longcat.ai/platform/docs/image-video-understanding

9. Описание: ограничения на формат, размер, количество и соотношение сторон изображений

10. Практический обзор Zhidx: тесты с анимацией пеликана и презентацией PPT по финансовой отчётности

11. Ссылка: tech.ifeng.com/c/8xjHpT7wJEN

12. Описание: опыт использования релизной версии с точки зрения СМИ

13. Тестирование релизной версии от TOKRACE: результаты 15 творческих заданий

14. Ссылка: www.tokrace.com/zh-CN/guides/longcat-2-5-release
15. Описание: исходные изображения, проекты и записи выполнения, включая успешные и неудачные примеры

Автор: техническая команда APIYI
Технические вопросы: свяжитесь с нами через главную страницу APIYI apiyi.com. Дополнительные материалы по подключению доступны в центре документации docs.apiyi.com