TL;DR
WebViSE — это способ превратить готовые сайты в библиотеку «визуальных навыков» (Visual Skills): короткие документы, каждый из которых описывает один механизм — например, анимацию героя при прокрутке или раскрывающиеся карточки возле маркеров на карте — вместе с условиями, когда он уместен. Перед генерацией сайта к вашему запросу добавляют 3–4 подходящих навыка, и модель пишет страницу уже с этими приёмами.
Боль знакомая: просишь модель сделать сайт, а она выдаёт усреднённую, одинаковую страницу — привычные блоки, привычные цвета. Описать словами «хочу, чтобы при прокрутке шапка плавно превращалась в карту» новичок не может: нет слов и опыта. Общие советы вроде «сделай красиво и современно» сильным моделям почти ничего не добавляют: в тесте авторов страницы с общим набором дизайн-правил и совсем без правил получились похожими. Конкретный механизм, снятый с реального сайта, добавил то, чего не было в запросе.
Метод в три шага: (1) из исходного кода и поведения каждого сайта вытаскивают механизм и записывают навык без привязки к бренду и контенту; (2) навыки раскладывают по каталогу, где у одного навыка может быть несколько «родителей», и каталог сам правят на пробных запросах; (3) к вашему запросу подбирают подходящие навыки, проверяют, что они действительно применимы, и дают модели вместе с исходной задачей.
Схема метода
ШАГ 1 ИЗВЛЕЧЕНИЕ: сайт → «цель» (зачем он нужен) + «поведение» (что видит и делает пользователь) → кандидаты → навык по коду (механизм без бренда и контента)
ШАГ 2 КАТАЛОГ: навыки → категории (навык может лежать в нескольких) → правка описаний и структуры по пробным запросам
ШАГ 3 ПОДБОР: запрос → обход по ветвям каталога → ревью применимости (отбросить неподходящее, оставить топ-K, в среднем 4)
ШАГ 4 ГЕНЕРАЦИЯ: исходный запрос + выбранные навыки → сайт
Шаги 1–3 в статье выполняет код и модель-ревьюер; шаг 4 — один обычный запрос.
Пример применения
Задача: Антон запускает лендинг онлайн-курса «Как продавать на Wildberries с нуля». Агентство просит 200 тысяч рублей, поэтому он просит Claude Code собрать страницу сам, но пробные варианты выглядят как все остальные.
Промпт:
Сделай одностраничный сайт курса «Как продавать на Wildberries с нуля»: герой-блок, программа курса, отзывы выпускников, тарифы, форма заявки.
Используй только эти приёмы (по одному на блок, не смешивай их друг с другом без нужды):
Приём 1. Герой при прокрутке.
Когда применять: открывающий блок, где нужно показать путь «от нуля до первых продаж».
Механизм: при прокрутке большой заголовок уменьшается и уходит в шапку, а на его месте плавно появляется лента из шагов пути; прокрутка управляет состоянием, а не просто двигает блоки.
Не переносить из исходника: названия, тексты, картинки, бренд.
Приём 2. Программа по этапам.
Когда применять: блок «Программа курса», когда в нём больше пяти модулей.
Механизм: хронологическая лента; каждый этап раскрывается по клику и показывает подробности (темы, результат, длительность), остальные сворачиваются.
Не переносить из исходника: названия, тексты, картинки, бренд.
Если приём не подходит блоку, пропусти его и напиши, почему. Текст и цифры бери только из моего описания курса: {описание_курса}.
Результат: модель соберёт страницу с анимированным открывающим блоком и интерактивной программой вместо статичного списка. В ответе она отметит блоки, где приём применён, и блоки, где его пропустила, и объяснит почему. Дизайн получится более выраженным, чем при запросе «сделай красивый лендинг», но качество исполнения зависит от модели: слабая модель может реализовать приём частично.
Почему это работает
Слабость модели. Если в запросе нет конкретных визуальных требований, модель выбирает самое привычное решение. Общие правила дизайна («соблюдай иерархию, контраст, отступы») сильная модель и так знает: в тесте они почти ничего не добавили, а на Claude Opus 5 даже ухудшили часть показателей.
Сильная сторона модели. Если дать ей точное описание механизма (что происходит при прокрутке, какие объекты меняются, какая обратная связь), она хорошо воспроизводит его в коде. Ей не нужно изобретать: нужно реализовать.
Как метод использует это. Вместо советов «как красиво» он даёт механизм + условия применимости, очищенный от чужого контента. Рычаги управления: - Число навыков: в среднем 4. Больше — риск конфликтов в стиле; на модели с сильным собственным вкусом (в тесте это Kimi K3) эстетика даже просела. - Ревью применимости: отсеивает навыки, механизм которых не поддерживает нужный результат. Это защита от главной ловушки. - Условия «когда применять»: превращают приём из украшения в решение под конкретный блок. - Что не переносить: названия, бренд, тексты, картинки источника.
Главное предупреждение: случайные, неподходящие навыки вредят. Четыре случайных навыка снизили точность на тесте функциональности на 6 пунктов у Claude Opus 5, а динамику в MiniAppBench на 13. Подбор важнее самой библиотеки.
Шаблон промпта
Статья не приводит формат документа одного навыка в виде готового текста, а описывает его содержание: механизм, условия применимости и отвязка от источника. Ниже — реконструкция по этому описанию, а не дословный шаблон авторов.
1. Превратить понравившийся сайт в навык (отдельный запрос, нужен исходный код страницы):
Ниже HTML/CSS/JS страницы {адрес_или_код}. Выдели из неё до трёх отдельных визуальных или интерактивных механизмов и для каждого запиши навык в формате:
Название: {короткое название механизма}
Где применять: {для какого блока и какой цели страницы}
Что видит и делает пользователь: {наблюдаемое поведение, входы и обратная связь}
Механизм реализации: {как это устроено: какие объекты, какие состояния и переходы, чем запускается}
Что нельзя переносить: {бренд, тексты, изображения, конкретная раскладка источника}
Когда не подходит: {условия, при которых приём вредит}
Опиши механизм, а не внешний вид, чтобы его можно было применить на странице другой тематики.
2. Применить навыки к новой странице:
Задача: {задача_по_сайту}
Подходящие навыки (отбери из списка только те, механизм которых помогает именно этой задаче, и отбрось остальные; максимум {число_4}):
{список_навыков}
Сначала напиши, какие навыки выбраны, для каких блоков и почему остальные отброшены. Затем сделай страницу. Контент бери только из задачи.
Подставляйте: {задача_по_сайту} — описание вашего сайта, {список_навыков} — навыки из шага 1 (свои или из репозитория авторов), {число_4} — сколько навыков допустить (в статье в среднем 4).
🚀 Быстрый старт — вставь в чат:
Вот шаблон «визуальных навыков» (Visual Skills) для генерации сайтов. Адаптируй под мою задачу: [твоя задача по сайту].
Задавай вопросы, чтобы заполнить поля.
[вставить шаблон выше]
LLM спросит, какие блоки нужны, кто аудитория и какие сайты вам нравятся — потому что навык привязывается к блоку и цели страницы, а не к «красоте вообще». Она возьмёт структуру навыка из шаблона и соберёт для вашей задачи свой набор.
Ограничения
⚠️ Прирост небольшой: на готовых наборах тестов улучшения измеряются единицами пунктов (у Claude Opus 5 +3,25 по точности функциональности, на эстетике около +1). Это не «сайт в разы лучше».
⚠️ Вредит при несовпадении: случайные навыки заметно портят результат. Если подбор плохой, лучше не подсовывать навыки вовсе.
⚠️ Неравномерно по моделям: у части моделей точность функциональности упала, у Kimi K3 эстетика просела. Сильная собственная манера модели конфликтует с чужими приёмами.
⚠️ Слабой модели трудно реализовать сложный приём: маленькая модель лучше выигрывает от общих правил, чем от узких механизмов.
⚠️ Полный метод — это инженерия: извлечение, каталог из многих «родителей», самоисправление по пробным запросам и дообучение требуют кода и обучения моделей. Читатель в чате воспроизведёт только последний шаг: взять готовые навыки и дать их модели.
Как исследовали
Авторы начали с простого вопроса: переносится ли механизм с чужого сайта на новую задачу? Взяли одну и ту же инструкцию про сайт чемпионата мира и сравнили три варианта: без навыков, с популярным набором общих дизайн-правил, с навыками из реальных сайтов. Первые два дали похожие страницы, третий добавил переход героя при прокрутке, которого в инструкции не было. Это и стало отправной точкой.
Дальше собрали 864 навыка с 850 публичных сайтов и проверяли систему на трёх наборах задач: функциональность сайтов (101 инструкция), открытые HTML-приложения (100 заданий) и 844 задачи с оценкой функциональности и эстетики. Сравнивали «как было» и «как стало» на семи моделях: от открытой модели на 27 млрд параметров до закрытых. Результат вырос по большинству показателей и стал лучшим в шести из семи метрик; у двух моделей (GPT-5.6-Sol и Qwen3.8-27B) вырос каждый показатель, у других были и небольшие падения. Слепое сравнение людьми тоже предпочло версию с навыками для каждой модели с отрывом 12–34 процентных пункта.
Любопытная деталь: общий дизайн-набор лучше помогал маленькой модели (там он дал рост функциональности сильнее, чем WebViSE), а специализированные навыки — сильной. Отсюда практический вывод: чем слабее модель, тем проще и общее должна быть подсказка. Отдельно авторы проверили, можно ли «вшить» навыки в маленькую модель обучением на 10 000 сгенерированных с навыками сайтов; это уже работа для тех, кто обучает модели, и читателю в чате она не нужна.
Адаптации и экстраполяции
🔧 Техника: добавить ревью применимости → меньше случайных навыков
Перед генерацией попросите модель отдельным шагом отобрать из вашей коллекции навыков только подходящие и обосновать отбор. Это воспроизводит шаг «проверка применимости» из статьи и защищает от главного вреда (неподходящих навыков).
Экстраполяция: тот же принцип «механизм + условия применимости + что не переносить» можно использовать не только для сайтов. Складывайте в файл инструкций агента (CLAUDE.md, скилы) короткие описания рабочих приёмов с указанием, когда они уместны и когда нет. Авторы проверяли это на веб-дизайне, перенос на другие задачи — гипотеза.
Ресурсы
Yifei Sun, Peng Zhao, Le Zhang, Bingjin Chen, Zhengfan Wu. WebViSE: Scaling Visual Design Intelligence from the Open Web for LLM Website Generation (препринт). Пекинский университет и Baidu Inc., Пекин. Код, навыки и граф навыков: https://github.com/YifeiSun-0710/WebViSE. Бенчмарки: WebGen-Bench, MiniAppBench, Cookie-Bench. Сравнительный набор общих правил дизайна: UI/UX Pro Max Skill (nextlevelbuilder).