LazyWeb: 257 тысяч экранов реальных приложений как контекст для AI-агентов

от автора

Бесплатный MCP-сервер, который пытается решить главную боль AI-разработки UI — генерики и «AI-look» в каждом интерфейсе

Если вы хоть раз просили Claude Code, Cursor или Codex сделать вам интерфейс, то наверняка замечали одну и ту же проблему. Код модель пишет неплохо — React, Tailwind, всё на местах. Но визуальный результат всегда выглядит как «сайт, сгенерированный AI». Одинаковые карточки. Одинаковые градиенты. Одинаковый набор паттернов из верхней пятёрки результатов поиска по запросу «modern web design».

Причина простая: LLM училась на средних значениях своих обучающих данных. Без свежих визуальных референсов модель сходится к усреднённому решению — тому, которое чаще всего встречалось в датасете. Дизайнер-человек смотрит на конкретные продукты и черпает идеи оттуда. Агент работает по «памяти», и эта память усреднённая.

Несколько недель назад вышел проект LazyWeb, который пытается решить именно эту проблему. Это MCP-сервер, который даёт агенту доступ к 257 000 экранов реальных приложений из 25 000+ компаний, плюс шесть «opinionated skills» — структурированных рабочих процессов для дизайн-ресёрча. И самое интересное — сервис полностью бесплатен, без подписки и без регистрации.

Я установил, погонял на реальной задаче (pricing-страница для пет-проекта) и расскажу, что получилось.


Что это и кто за этим стоит

Проект запустил Али Абуэлатта — бывший продакт-лид Duolingo. Релиз состоялся 2 мая 2026 года, после чего проект разлетелся по сообществу Claude Code в Twitter и Discord.

Архитектурно это два слоя.

Слой 1: MCP-сервер. Хостится на https://www.lazyweb.com/mcp, говорит по streamable HTTP (не stdio). Работает по client-agnostic принципу — подключается к любому MCP-совместимому агенту: Claude Code, OpenAI Codex, Cursor, Cline, Continue.dev. Основные функции: поиск экранов, скачивание скриншотов локально, фильтрация по категории и паттернам, получение полного контекста по компании (логотип, цвета бренда, топовые экраны).

Слой 2: 6 opinionated skills. Это плагин для Claude Code, который ставится отдельно (репозиторий aboul3ata/lazyweb-skill, MIT-лицензия, ~180 звёзд на момент моего обзора). Это не код, а структурированные промпты-скиллы, которые превращают сырые MCP-вызовы в законченные дизайн-исследования.

Шесть скиллов такие:

Команда

Что делает

/lazyweb-design-research

Глубокий конкурентный анализ. Идентифицирует конкурентов, ищет в LazyWeb и веб, скачивает референсы, делает структурированный отчёт

/lazyweb-quick-references

Быстрый поиск референсов. Легче design-research — найти, сгруппировать, показать

/lazyweb-design-improve

Улучшение существующего интерфейса. Делает скриншот вашего экрана, ищет похожие у топов, предлагает 1-5 идей улучшения

/lazyweb-design-brainstorm

Кросс-категорийный брейнсторм. Целенаправленно ищет ВНЕ вашей категории. Если все в финтехе копируют друг друга — этот скилл смотрит на гейминг и социальные апы

/lazyweb-add-inspo-source

Подключение внешних библиотек — Mobbin, Savee, Dribbble, Behance

/lazyweb-remove-inspo-source

Отключение внешних библиотек

Скиллы работают локально — после установки они лежат у вас на диске и продолжают функционировать оффлайн (но без доступа к самой базе экранов, которая остаётся удалённой).


А правда ли «бесплатно без лимитов»

Это первый вопрос, который у меня возник. В мире SaaS «бесплатно без лимитов» обычно означает «бесплатно три дня, потом мы попросим email и подписку».

Я проверил. Это действительно бесплатно. Регистрация не требуется. Логина нет. Email не запрашивается. Token, который выдаётся при установке, — это просто bearer-ключ для авторизации MCP-вызовов, привязанный к ничему конкретному. В документации прямо написано, что этот токен авторизует только referenced design tools — без биллинга, без приватных данных, без destructive operations.

Что касается лимитов — я делал десятки запросов за вечер, ничего не сломалось и не упёрлось. По заявлениям автора в репозитории, ограничений по rate нет. Возможно, в случае массового злоупотребления ограничения появятся, но на момент тестирования всё открыто.

Бизнес-модель, насколько я понимаю — это сейчас investment phase. Автор открыто говорит, что цель проекта — заполнить пустоту, которую не закрывают коммерческие альтернативы (Mobbin стоит сотни долларов в год без API). На горизонте, видимо, либо paid tier для продвинутых функций, либо корпоративные интеграции.


Установка

Установка делается за две команды. Я работаю в Claude Code, поэтому показываю под него.

Шаг 1: получить токен. Простой curl-запрос к публичному эндпоинту:

mkdir -p ~/.lazyweb curl -sS -X POST https://www.lazyweb.com/api/mcp/install-token \  -H "content-type: application/json" \  -d '{}' | node -e "    let s='';    process.stdin.on('data', d => s += d);    process.stdin.on('end', () =>       require('fs').writeFileSync(        process.env.HOME + '/.lazyweb/lazyweb_mcp_token',        JSON.parse(s).token      )    )  "

Это сохраняет токен в ~/.lazyweb/lazyweb_mcp_token. Никакого email и подтверждений по почте.

Шаг 2: установить плагин-маркетплейс и сам плагин:

claude plugin marketplace add https://github.com/aboul3ata/lazyweb-skillclaude plugin install lazyweb@lazyweb

Перезапуск Claude Code, и скиллы появляются в неймспейсе /lazyweb:*. Я сразу проверил, что всё подключилось:

/lazyweb:lazyweb-quick-references "modern pricing page"

Получил структурированный список референсов с миниатюрами в течение секунд тридцати. Работает.


Реальный кейс: pricing-страница для SaaS пет-проекта

Чтобы протестировать инструмент по-настоящему, я взял конкретную задачу. Я делаю небольшой SaaS для разработчиков (детали неважны), и мне нужна была pricing-страница. Три тарифа: Free, Pro, Team. Раньше я бы открыл DribbBle, полистал минут двадцать, потом попросил Claude Code «сверстай мне современную pricing-страницу с тремя тарифами». На выходе получил бы шаблонный pricing с одинаковыми карточками, которые я уже видел у тысячи стартапов.

Сейчас сделал по-другому. Запустил deep design research через LazyWeb:

/lazyweb:lazyweb-design-research Topic: pricing page for developer SaaSContext: Three-tier pricing (Free, Pro, Team), targeting indie developers and small teamsGoal: Find patterns that work, identify anti-patterns, get specific recommendations

Скилл начал работу. Это не моментальный ответ — реально занимает минут 5-7 на качественный анализ. По ходу процесса я видел, что делает Claude:

  1. Идентифицировал список конкурентов (Linear, Vercel, Railway, Supabase, PlanetScale и ещё штук десять).

  2. Сделал серию вызовов search_screenshots к LazyWeb для каждого конкурента.

  3. Скачал референсные скриншоты в локальную папку проекта.

  4. Прогнал визуальный анализ через vision_screenshots (это отдельный MCP-инструмент, который описывает экран в текстовой форме).

  5. Сформировал структурированный отчёт в report.md с inline-картинками. В итоге получил такую структуру в проекте:

.lazyweb/lazyweb-design-research/pricing-page-2026-05-09/├── report.md└── references/    ├── linear-pricing.png    ├── vercel-pricing.png    ├── railway-pricing.png    ├── supabase-pricing.png    ├── planetscale-pricing.png    ├── stripe-pricing.png    └── ...

Сам отчёт примерно на четыре экрана. Структура такая:

  • TL;DR — короткие выводы: какие паттерны работают, какие нет

  • Examples — список изученных конкурентов с описанием каждого

  • Findings — конкретные находки: что есть общее у всех, что отличает топов от середняков

  • Patterns — рабочие паттерны (например, «выделение Pro-плана через accent color и increased shadow»)

  • Anti-Patterns — то, что часто встречается, но снижает конверсию (например, «слишком много галочек в каждом плане без иерархии»)

  • Unique Angles — нестандартные ходы у конкретных компаний

  • Recommendations — конкретные рекомендации под мою задачу Самое полезное в отчёте — секция Findings. Например, там было замечание: «Из 12 проанализированных pricing-страниц 9 используют эффект “Pro-tier elevation” — выделение среднего тарифа через увеличенный shadow, accent border и слегка увеличенный размер. Linear использует это же, но более тонко — через цветовой индикатор сверху карточки. Это считается визуально менее агрессивным и работает лучше для технической аудитории.»

Это конкретный совет, привязанный к реальным примерам. Не абстрактное «выделите рекомендуемый тариф», а с обоснованием и сравнением подходов.


А что с самим интерфейсом

После отчёта я попросил Claude Code сгенерировать pricing-страницу с учётом этого ресёрча:

Now build the pricing page based on this research. Use Linear's tier-elevation pattern. Three tiers: Free, Pro ($19/mo), Team ($49/seat/mo).React + Tailwind.

Результат сравнивал с тем, что генерил Claude Code без LazyWeb на тот же промпт.

Без LazyWeb: дефолтный pricing с тремя одинаковыми карточками, центральная выделена через border-blue-500 и галочку «Most Popular». Стандартный shadcn/ui-look. Все галочки одного размера. Кнопки одного стиля.

С LazyWeb (после design-research):

  • Иерархия информации в карточках выстроена иначе — не «название тарифа сверху, цена ниже», а сначала выделенная цена крупным шрифтом, потом название тарифа и одной строкой описание use-case

  • Pro-tier elevated через цветовую полоску сверху карточки (вдохновение от Linear), а не через border всей карточки

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

  • Кнопки разные: Free — outline, Pro — filled accent, Team — filled но темнее. Контраст в CTA, как делает Vercel Разница не «небо и земля», но визуально интерфейс действительно стал ближе к тому, как оформляют свои продукты топовые SaaS, а не к шаблону «AI-сгенерированной страницы».


Где это работает хорошо, где спорно

После двух недель использования у меня сложилась более полная картина.

Работает хорошо

Конкурентный анализ конкретной фичи. Если вам нужна референсная подложка под решение конкретной задачи (онбординг, settings page, paywall, dashboard) — LazyWeb отрабатывает на ура. Это, по сути, замена двадцати минут листания DribbBle.

Кросс-категорийный брейнсторм. Скилл /lazyweb-design-brainstorm действительно находит интересные паттерны из других категорий. Я попросил поискать вне финтеха для своего fintech-проекта, и получил неожиданные референсы из gaming и productivity-tools. Несколько идей оттуда я взял в работу.

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

Где спорно

Качество базы экранов неоднородное. 257 тысяч экранов — это много, но среди них есть скриншоты, которые видно сделаны автоматически и невысокого разрешения. Не всё одинаково годно для референса. У Mobbin на сегодня качество выше, но и доступа без подписки нет.

Категории и фильтры не идеальны. Некоторые мои поисковые запросы возвращали странные результаты — например, на запрос «settings page for developer tools» в выдаче попадались settings-экраны мобильных игр. Релевантность можно улучшать.

Без визуальной модели качество ниже. Если ваш агент не имеет vision-возможностей (то есть не может «смотреть» на скриншоты), большая часть ценности LazyWeb теряется. Claude 3.5 Sonnet и старше — норм. Codex поддерживает vision частично. Cursor — зависит от настроек модели.

Зависимость от удалённого сервиса. Если LazyWeb упадёт, ваши уже скачанные референсы останутся, но новые поисковые запросы не пойдут. Это нормальный риск для бесплатного сервиса в фазе early-stage. Для критичных проектов имеет смысл сразу скачивать всё нужное локально.

Не подойдёт для брендовых задач. LazyWeb даёт паттерны и идеи, но не делает за вас брендинг. Если задача стояла «сделай нам уникальный визуальный язык» — это не сюда.

Что в маркетинге не соответствует

В телеграм-постах, которые анонсировали проект, я встречал формулировки в духе «делает интерфейс — результат выходит идеальный». Это сильное преувеличение. LazyWeb не делает интерфейс. Он даёт референсы и анализ, на основе которых интерфейс делает уже агент (или вы сами). Без хорошего промпта и без понимания, что вы строите, ни LazyWeb, ни Claude Code не выдадут «идеальный результат».

«Сервис собирает 250 тысяч экранов, ищет схожие паттерны и рефы» — это правда. «Прога делает интерфейс — идеальный» — это маркетинг.

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


Что я взял для своей практики

Несколько архитектурных уроков, которые я вытащил из этого проекта.

MCP — это удачный уровень абстракции для контекстных сервисов. LazyWeb не пишет код за вас, не запускает агента. Он просто даёт API, через которое агент может получить нужные данные. Это правильный паттерн для всего класса задач «дать LLM специфический контекст»: документация, дизайн-референсы, корпоративные знания, бенчмарки.

Skills + MCP — продуктивная комбинация. Сырой MCP-сервер бесполезен без правильного workflow. Скиллы превращают набор инструментов в готовый рабочий процесс. То же самое мы видим в book-to-skill, claude-skills и других проектах — это становится стандартным паттерном для AI-tooling.

Бесплатность как стратегия distribution. Mobbin не предоставил API и потерял весь сегмент AI-агентов. LazyWeb сделал API и при этом убрал даже регистрацию — и за две недели набрал репутацию в сообществе. Это работает, но дорого в content costs (хостинг 257k картинок не бесплатен).

Отсутствие моментального решения — это нормально. Design-research через LazyWeb занимает 5-7 минут. Многим хочется «один промпт — готовый интерфейс». Но качественный ресёрч требует времени, и это правильный компромисс.


Итог

LazyWeb решает реальную проблему — отсутствие визуальных референсов у AI-агентов при работе над интерфейсами. Он не превращает Claude Code в дизайнера, но даёт агенту контекст, без которого тот скатывается в усреднённые шаблоны.

Если вы регулярно генерите UI через AI-агентов — стоит попробовать. Установка занимает две минуты, риск — нулевой, ценность ощутима уже на первой задаче.

Если вы делаете один лендинг в полгода — возможно, это избыточно. Откройте Mobbin trial, посмотрите 30 экранов руками, и этого хватит.

Если вы дизайнер-человек, не работающий с AI-агентами — LazyWeb для вас тоже доступен. На сайте есть веб-каталог в /canvas/flows и /canvas/companies, где можно листать те же 257k экранов без всяких MCP. Это не Mobbin по уровню курации, но в качестве дополнительной библиотеки референсов вполне рабочая штука.

В любом случае это интересный пример проекта, где открытость (open source плагины, бесплатный API без логина) использована как осознанная стратегия. И решение в этом подходе намного более здоровое, чем в большинстве «AI-pro» сервисов с месячной подпиской за функцию, которая решается одним промптом.


Ссылки:

ссылка на оригинал статьи https://habr.com/ru/articles/1033376/