LazyWeb: бесплатный MCP на 257 тысяч экранов, который чинит говнодизайн агентов и их хозяев

от автора

  • LazyWeb — бесплатный MCP-сервер дизайн-референсов: 257 тысяч реальных экранов приложений и сайтов, семантический поиск, работает с Claude Code, Codex, Cursor. Логин и токен не обязательны.

  • Главная идея — «design with evidence, not vibes». Агент по умолчанию рисует усреднённое из обучающих данных. LazyWeb заставляет его сначала найти, как это решили живые продукты.

  • Рабочий приём, ради которого всё затевалось: просишь агента сделать 3-5 вариантов экрана на базе разных референсов и тыкаешь в лучший. Дешевле, чем расписывать ТЗ словами.

  • Главная ценность — не картинки, а UX-паттерны. UI красивый бонусом; ценно то, что агент перенимает логику удачных экранов.

  • Где честно косячит: референсы прыгают по качеству (видел в одной выдаче релевантность 0.76 и 0.31 рядом), попадается устаревший мусор, перекос в US/западные приложения, 27 тысяч категорий — каша. Контролировать выдачу обязательно.

  • Бонус к статье — PDF с готовым промтом для агента и чек-листом «как выбирать референс». Ссылка в конце.


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

В этот раз я сказал агенту другое: сделай мне несколько вариантов на базе LazyWeb, я выберу. И он угадал с первого раза. Удобно, современно, функционально — я был готов к паре итераций, и они не понадобились. Я сидел и ловил странное чувство: вот это не должно было сработать настолько чисто.

Чтобы было понятно, почему я вообще так делаю, придётся начать с неприятного.

Почему дизайн «из головы» у агента — это усреднённый говнодизайн

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

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

Оговорка важная: с нуля имеет смысл, когда вы — опытный дизайнер с насмотренностью, когда у вас в голове уже лежат эти тысячи экранов и вы осознанно ломаете паттерн. Тогда да. Но если вы (или ваш агент) проектируете без этой базы — вы не «творите», вы выдаёте среднее. А LazyWeb как раз даёт ту самую насмотренность — только не вам в голову, а агенту в контекст.

Что это вообще такое

LazyWeb сделал Ali Abouelatta — бывший product lead в Duolingo. По его рассказу, собрал за 77 дней соло, во время добровольного отпуска, и выкатил 2 мая 2026-го. Мотивация была простая и злая: бесило, как плохо агенты делают дизайн и что у Codex нет доступа к нормальной базе референсов вроде Mobbin.

Технически это hosted MCP-сервер на https://www.lazyweb.com/mcp. Ставится плагином в Claude Code (или вручную в Codex/Cursor), внутри — база на 257 тысяч реальных экранов мобильных приложений и сайтов плюс набор skills под разные задачи. Документацию пересказывать не буду — она на GitHub, MIT. Дальше — то, чего в доке нет: что я увидел, когда полез внутрь.

Замерка: что там под капотом

Я не люблю верить на слово, поэтому первым делом дёрнул health-check — посмотреть, из чего инструмент собран:

{  "ok": true,  "checks": { "supabase": "ok", "openai": "ok", "voyage": "ok", "cohere": "ok" }}

И сразу всё встало на места. Это не теговый каталог, как Dribbble. Это семантический поиск: Supabase под хранилище, vision-модель описывает каждый скрин текстом, Voyage делает эмбеддинги, Cohere переранжирует выдачу. То есть вы ищете не по тегам «dashboard, dark», а по смыслу — «аналитический дашборд с графиками и боковой навигацией», и оно понимает.

Поиск работает на двух типах данных. Мобильные — отдельные экраны реальных аппов (в моих выдачах попадались bumble, partiful, craft). Десктоп — целые веб-страницы, причём с pageUrl на живой сайт (userlane, intercom, geckoboard). Удобно: нашёл паттерн — можешь сходить на оригинал.

Дальше пошли шероховатости. Запросил список категорий — сервер вернул 26 832 штуки. Двадцать семь тысяч. Там есть .NET CMS, 1:1 Personal Training App, 311 CRM Platform — гранулярность до абсурда. Как «браузилка» этот список бесполезен совершенно: пролистать невозможно, ориентироваться нельзя. Реальный интерфейс тут один — поиск. Кураторских коллекций, которые могли бы это спасти, пока всего одна (best-pricing-pages). Фича есть, наполнения нет.

И главное, что надо знать про выдачу: качество прыгает. В одном запросе про SaaS-дашборд я получил userlane с релевантностью 0.76 и тут же doordash с 0.31 — это вообще страница ресторана. У каждого результата есть поля similarity и matchCount, и фильтровать по ним приходится самому (или объяснить это агенту — об этом ниже). Ещё нюанс для тех, кто будет автоматизировать: ссылки на картинки — подписанные, живут около часа. Качать надо сразу, иначе через сессию получишь 404.

Главный приём: «сделай 3-5 вариантов»

Теперь то, ради чего всё и затевалось. Магия не в том, что агент посмотрел один красивый экран. Магия в связке с приёмом, про который я уже писал в разборе claude-code-best-practice: стоимость генерации упала настолько, что дешевле попросить 3-4 живых варианта и выбрать лучший, чем расписывать словами, чего ты хочешь. Особенно на UI и UX.

LazyWeb превращает этот приём из лотереи в инструмент. Раньше «сделай мне 5 вариантов дашборда» давало пять оттенков одного и того же усреднённого экрана. Теперь команда звучит так: найди в LazyWeb пять разных подходов к этому экрану и собери пять вариантов на их основе. И варианты получаются действительно разные, потому что под каждым лежит решение реального продукта, а не фантазия модели.

И вот тут поправлю сам себя. Сначала я думал, что ценность LazyWeb — в красивом UI. Нет. Точнее — да, картинка выходит симпатичная, но это бонус. По-настоящему ценны UX-паттерны: как люди раскладывают сложный экран, куда прячут второстепенное, как ведут через многошаговый флоу. Эту логику агент перенимает гораздо охотнее, чем просто палитру. Админка, с которой я начал, получилась удобной именно по UX — и это заслуга не моя и не модели, а тех продуктов, чьи паттерны она подсмотрела.

Где косячит

Идиллии не будет. Референсы LazyWeb надо контролировать. Периодически выдаёт совершенно непонятные варианты — устаревшие, кривые, откровенно плохие. Если слепо скормить агенту первый результат, получишь дизайн из 2018-го с гордым видом.

Спасает та же связка «3-5 вариантов». Когда просишь несколько, хотя бы один почти всегда выходит хорошим — ну, практически всегда. Это и есть правильный режим работы: не «дай мне идеальный референс», а «дай несколько, я отбракую мусор». Фильтрация — твоя работа.

Ещё две честные оговорки, важные именно для нас. Первая: по объёму база меньше, чем у Mobbin (там 400 тысяч+ экранов). Но тут важная оговорка в пользу LazyWeb — Mobbin фактически платный: на бесплатном тарифе там почти пусто, реальная база открывается за деньги. А LazyWeb бесплатен целиком, без логина и лимитов. Так что «меньше» не равно «менее доступно». Вторая оговорка, и для русскоязычного продукта более чувствительная: сильный перекос в US и западные приложения. Если вы делаете что-то под российский рынок с его привычками — учитывайте, что насмотренность у агента будет западная. Паттерны раскладки универсальны, а вот конкретные сценарии (оплаты, документы, госуслуги) — нет.

И маленькая ирония напоследок. В одной из предыдущих статей я разбирал, как Anthropic выбрал архитектуру поиска для Claude Code «по ощущениям, по внутренним vibes». А весь пафос LazyWeb — ровно противоположный: design with evidence, not vibes. Приятно, когда инструмент чинит именно ту болезнь, на которую сам и показывает пальцем.

Два режима работы

Пользоваться можно по-разному, и оба способа рабочие.

Ручной — для тех, кто хочет сам посмотреть. Это slash-команды-skills, которые идут в комплекте с самим плагином LazyWeb (не я их написал, это их готовые скиллы): /lazyweb-design-research (глубокий разбор с отчётом), /lazyweb-quick-references (быстро накидать примеров), /lazyweb-design-improve (скормить свой текущий экран и получить, что улучшить), /lazyweb-design-brainstorm (нарочно поискать в чужих категориях — «zig when others zag»). Они генерируют HTML-отчёт со скачанными скринами, который открываешь в браузере.

Агентный — для тех, кто хочет результат, а не процесс. Ты просто ставишь задачу: «спроектируй этот экран, перед этим найди референсы в LazyWeb, сделай 3-5 вариантов». Агент сам решает, что искать, сам фильтрует, сам собирает. Я живу в основном в этом режиме — и именно для него собрал готовый промт (см. бонус).

Бонус: промт и чек-лист для агента

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

Я полез ещё и в сообщества — собрать чужие приёмы. На Reddit по LazyWeb пока тишина, основное живёт в X и на GitHub, так что в памятку вошло то, что нашёл там, плюс мой собственный опыт. Упаковал всё в один PDF — лежит в моём Telegram-канале, забирайте.

А если уже гоняли LazyWeb (или Mobbin MCP) на реальных задачах — расскажите в личке, что вышло с качеством референсов. Мне интересно, у всех ли так прыгает выдача или мне просто везёт на мусор. Инструменты, которыми оркеструю агентов, — на GitHub.

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