Блогер разнёс «слоповый» UI: 10 признаков, что интерфейс сгенерировала нейросеть
10 Tells of a Slop UI
Автор разбирает обновление своего вузовского приложения и на примерах показывает, как распознать интерфейс, сгенерированный ИИ. Среди признаков — градиенты повсюду, пульсирующие бейджи, бессмысленные эмодзи, карточки-ноготки, стеклянные панели и шаблонные слоганы вроде «Elevate» и «Seamless». Он подчёркивает, что проблема не в вайб-кодинге как таковом, а в отсутствии усилий сделать интерфейс осмысленным.
И в том же интерфейсе цифрового удостоверения он добавил маленький бейдж «verified» рядом с логотипом колледжа. ЗАЧЕМ. Ведь это не то чтобы делает какой-то API-запрос и говорит: «о да, этот парень верифицирован». И ДАЖЕ ЕСЛИ БЫ ДЕЛАЛ, ЭТО НИЧЕГО НЕ ЗНАЧИТ. Если бы я подделывал своё цифровое удостоверение, я бы что, специально добавил «unverified»????
- tlahtinen
В начале этого года я использовал Claude, чтобы спроектировать экран для игры на Unreal, над которой работаю. Сначала я подумал: вау, какой отличный макет, это меняет правила игры и даёт мне огромное преимущество.
Меньше чем через год мне стыдно, насколько это выглядит по-клодовски — мигающая точка в углу, двойные //, разделяющие текст заголовка, выбор шрифтов... теперь я вижу те же паттерны повсюду и уверен, что аудитория тоже это замечает.
Я всё ещё использую Claude в работе, но гораздо более сдержанно; я прошу предложить цветовую схему и шрифты (только не Rajdhani или Share Tech Mono!), но в основном для вдохновения, и я не копирую их слепо. Кажется, я стал умнее в этом, но, может, через год пойму, что всё ещё не выбрался из ловушки :)
- weakfish
Я пытался сформулировать, что именно происходит, когда робот пишет что-то вроде примера «3 campuses, one app», и я рад, что автор смог определить это как утечку контекста чата.
Другая версия этого — когда робот чрезмерно зацикливается на какой-то части промпта и оставляет комментарии где попало. Пример: я прошу его предпочитать интеграционные тесты с использованием TestContainers, и он начинает добавлять комментарии к каждому новому тесту вроде «Real services, no mocks» или что-то такое.
И да, у меня есть строка в моём *.MD, где сказано так не делать.
- czhu12
По крайней мере, некоторые из них — просто из-за недостатка внимания. Я недавно вайб-кодил эту лендинг-страницу https://tui2web.com/ и после нескольких часов итераций отбился от многих дефолтов, которые предлагала LLM. Можете смело её разнести, я не особо привязан, но, думаю, она получилась довольно неплохой.
- vallerie
Обожаю этот блог за упоминание проблемы деталей реализации в тексте. Пожалуй, это моя самая большая претензия к вайб-кодированным приложениям.
Во многом это простая задача — просто скажите агенту на выбор: «Помести весь видимый пользователю текст в файл переводов для i10n», а затем пройдитесь и отредактируйте этот текст как человек.
- zinoc
Это похоже на быстрое раннее принятие CSS-фреймворка Bootstrap. Многих раздражал внезапный всплеск сайтов, которые выглядели и ощущались одинаково, но я считаю, что это был огромный шаг вперёд в удобстве использования и доступности, и он вполне стоил первой волны однотипных сайтов.
- jph
Я начинаю с этих правил, а потом корректирую по желанию...
ПОДЧЁРКИВАЙ:
- *Резюме.* Первый абзац как в газете (кто, что, где, когда, как, почему).
- *Преимущества.* Сосредоточься на преимуществах для читателя.
- *Почему это важно* Сосредоточься на том, что это даёт читателю.
НЕ:
- *Никакого техстека.* Не упоминай техническую реализацию; это описано в другом месте.
- *Никаких подсчётов.* Не говори количество страниц, частей, глав и т.д.
- *Никакого особого форматирования.* Не используй жирный, курсив, маркированные списки.
- *Никаких «если».* Не говори «Если сделаешь X, то Y»; вместо этого используй утвердительную форму.
- *Никаких длинных предложений.* Не используй много придаточных и слишком много слов.
- *Никакого пассивного залога.* Не используй пассивные или безличные предложения.
- mjr00
Самое важное, что я усвоил, переходя от «плохого музыканта» к «сносному музыканту» (достаточно сносному, чтобы иметь слушателей и фанатов, по крайней мере), — это то, что нет одного большого трюка, который превращает песню из плохой в хорошую: есть 100 крошечных трюков, которые складываются. И нужен опыт, чтобы знать, какие они. Обученный слушатель может сказать: «середина слишком сжата», «слишком много верхов», «атаки барабанов не пробиваются», но обычный, случайный слушатель просто скажет: «Не знаю, просто звучит неправильно».
Этот UI-слоп — то же самое. Немного смещённая точка на таймлайне, выбор цветов, который не очень-то логичен для сайта в целом, использование текста в стиле LLM. Ничто из этого по отдельности не является очевидной серьёзной проблемой. Но когда вы складываете 50 таких на сайте, пользователи получают это ощущение «это слоп».
Детали важны. В изоляции они кажутся неважными, но в целом именно они поднимают что-то из мусорной кучи AI-слопа до чего-то действительно хорошего.
- tptacek
«Неактивный» студент — это тот, кто зачислен, но в настоящее время не посещает занятия.
Это очень полезная статья, но многие из этих жалоб на такие вещи, как выравнивание, — также естественный результат того, что я, не фронтендер, вообще строю какой-либо веб-фронтенд. Так что я бы не стал слишком из-за этого переживать.