Bento‑тест для агентов

Работая над очередным проектом, я хотел сделать его визуально интересным. Работаю в соло от момента идеи до выкладки на продакшен. Я не разработчик, не верстальщик, не дизайнер, не бэкендер, не системный аналитик, но всё равно создаю свои продакшен‑реди проекты. Я обычный пользователь нейро‑агентов.

В этом есть своя прелесть и свои ограничения. С которыми я прямо столкнулся во время решения задачи.

Агент несколько раз писал «готово» или «да, теперь идеально!», но на экране оставались углы в воздухе, узкая колонка по центру и сетка вместо одной формы. По итогу у меня получился стресс‑тест для моделей, с которыми они так и не справились.

На главной странице у меня присутствовали карточки после первого прогона агента — он их отрисовал согласно поставленной задаче. Всего их было 15. Однотипные карточки посвящённые работе сервиса. Но это смотрелось скучно и не интересно, плюс страница разрослась в высоту. Пользователю было бы сложно воспринимать информацию, и тут я вспомнил про компоновку бенто или бенто‑блок.

Бенто‑блок это элемент дизайна в стиле Bento UI, вдохновлённый японскими коробочками с едой, разделенными на секции. Это звучало идеально для моей задачи — много карточек, но сгруппированных.

Классический бенто и бенто в UI

Но делать только прямоугольники я не хотел, это как‑то негативно ассоциировалось с Windows Mobile и их плиткой. Поэтому решил найти какие‑то другие решения для компоновки.

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

Бенто с Шаттерстока

И то, что я столкнусь с такими трудностями при реализации, для меня было удивительно. Ведь это были просто блоки с углами, которые можно было, по моему мнению, нарисовать и заверстать на раз‑два. Ага.

Приложил картинку с Шатерстока и пишу

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

Это было совсем не то, что я ожила увидеть. Вроде бы то, но совсем не то.

Одна из реализация была близка

Определённые навыки работы в Фигме у меня есть, поэтому я решил, что возможно дело в картинке из интернета и её не применимости для модели. С этими мыслями я нарисовал блок уже в макете:

Вот такой результат я и хотел получить

И снова полнейший провал. Никакие уточнения — сделай пиксель в пиксель и тому подобное — не работало.

Отмечал углы буквами A и B, где должна быть прямая, где вогнутый угол, где скругление в другую сторону. Агент перебирал mask, g-top / g-main / g-foot, SVG с preserveAspectRatio="none". Всё было бесполезно.

Цитаты из чата от меня:

Я не понимаю, я нарисовал как должно быть. Почему не получается сделать также?

Я ещё раз задаю вопрос — почему не получается повторить то, что я нарисовал?

Сам то проверил? Забудь ты про сетку, рисуй как я тебе показал

Я же сказал — повтори в точности

Мы уже 10 раз пытались сделать то, что мне нужно

И таким не хитрым образом я дошёл до первого искреннего мата в чате с агентом. Приводить цитату не буду, но она была.

Где‑то близко, но далеко

Я проверил гипотезу с моделью, вдруг в ней дело? Но нет. Любая из тестируемых моделей, Composer 2.5, Cursor Grok 4.6, Codex 5.3, Gemini, не справились с задачей. Точнее почти одинаково её провалили. Выдавая реализованный html и css за готовую задачу.

Другие модели ломали вёрстку ещё больше

Поискал готовые конструкторы для бенто‑блоков. Попробовал парочку. Но опять же, кроме стандартных прямоугольников с четырьмя углами углами, конструкторы ничего предложить не могли.

Я не оставлял попыток

По словам самого же агента, он пытался делать сетку с зазорами, CSS grid, менял бордер‑радиус, использовал подход с mask, clip‑path или SVG. Но заветный результат отсутствовал.

Я рисовал поверх скриншотов прямые указания, называл углы, говорил как их надо исправить. Но всё было тщетно.

Парочка цитат с объяснениями:

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

Вы нарисовали геометрию; мы верстали таблицу с отступами.

Агент писал «совпадает», когда path стыковался с getBoundingClientRect() панелей B и C. Я смотрел на картинку — пропорции B, ширина блока 945px в центре вместо full bleed, углы висящие в воздухе.

Кстати, Gemini оказался самым бесячим — он в каждый раз говорил «вот теперь идеально!», «смотри как круто получилось!» и тому подобное. Бррр...

Параллельно тот же референс ушёл в AI software factory в репозитории проекта — кастомный пайплайн с постановкой задачи и проверяющим агентом. Ушло в новый диалог, то есть чистый контекст.

Запрос в factory звучал буквально:

Требуется создать новую страницу сайта и реализовать на ней бенто‑блок по предоставленному скриншоту
Проанализировать скриншот, составить детальное техническое задание для верстки на чистом HTML/CSS с учетом адаптивности
Не ориентироваться на прошлые реализации

Designer собрал ТЗ в markdown. Implementer сделал страницу. Наш спор с агентом, продолжился в основном чате по вёрстке, где правили компонент bento‑блока. Но чуда снова не случилось. Я бился над задачей уже второй день.

Ничего. Ничего не сработало. Никакие правки кода, вёрстки, css, html — ничего из этого не давало нужный мне результат.

Агент рекомендовал приёмку:

Готово, когда на 1920×1080 overlay с Frame совпадает силуэт зелёного.

Даже писал проценты на сколько совпадает то, что сделал он и то, что я прикладывал как референс. Но никакой процент не описывал отсутствие нужного мне результата.

По моей задаче, я так его и не нашёл

1. Используя только картинку — это не реально, какие бы указания и скиллы я не использовал

2. Можно упростить до типичных прямоугольных блоков, но это скучно

3. Для полноценной реализации нужен дизайнер, который сделает готовый макет для вёрстки в Figma

4. Самое интересное решение предложили коллеги в чате, для реализации сложной вёрстки — использование разработчика

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

А вот вы мне и скажите, у меня нет ответа.

Шаг 1 — Взять картинку с Shutterstock
Шаг 2 — Получить готовую реализацию блока для десктопа

Да‑да, та самая ступенька — обязательно нужна. Затем расскажите, какой путь лежит между шагами 1 и 2.

Человека не используйте для вёрстки, это будет слишком просто. Ведь это тест для агентов.

А как вы решаете задачу сложной/не типичной вёрстки агентами?

Мой канал в ТГ
Велком!