10 Tells of a Slop UI
🇬🇧 English
Recently my college app was updated with "minor UI improvements", and it was the most slop-coded user interface I have seen. The old UI was clunky, but I would’ve preferred that over the slop cannon their AI agent produced. What Is Slop? Slop UI is the UI that AI cooks up that looks off, where it’s not supposed to be, doesn’t serve a purpose or when a UI is too generic.
This is seen in vibe-coded UI without a vision. Vibe-coded UI can look great when done right, but most don’t. And it makes the apps look cheap and unappealing to use.
Examples of Slop-Coded Websites: Cloudflare recently slop-coded a website. And also websites like this, you just know it when you see it. It’s like the AI videos these days:anyhow.
The following are the things that make up the slop. Gradients. Gradients Everywhere.
The biggest and most noticeable sign is gradients. Gradients anywhere, gradients any time, gradients at every single thing. You’ll see them on buttons, in the background, basically anywhere where it could stuff it.
Slop Cannons LOVE purple for some reason Rainbow Vomit. AI loves using colours that mean nothing and are just different colours. You just get this, just a screen of a bunch of colours that don’t go well together but are coloured that way.
Because there is some distinction in fields when making the UI or whatever. It doesn’t follow the 70-30-10 rule. It just adds colours all over the place.
Pulsing Badges I have no clue why it adds these, but it just does. It is in the training data, I guess. But it adds these pulsing badges on everything.
In the """upgrade""" my college app had. They have this thing called a digital ID, which just shows, like, a QR code and your face. It has this pulsing badge which says it’s "active".
The problem is. IT IS JUST NEVER INACT IVE. IF IT IS INACT IVE, THE APP JUST LOGS YOU OUT.
It’s just redundant information. And my profile has an "active student" badge. CAN SOMEONE TELL ME WHAT AN INACT IVE STUDENT LOOKS LIKE?? Also in the same digital ID interface.
It added a little "verified" badge next to my college logo. WHY THO. Because it’s not like it’s doing some api call and going, "oh yeah, this guy is verified".
And EVEN IF IT WAS, IT DOESN’T MEAN ANYTHING, like. If I were forging my digital ID, would I deliberately add "unverified"???? Finger Nail Cards. I see these things in literally every vibecoded ui and it pisses me off every time.
You see these everywhere, dude. It’s not even that it’s bad; it’s just so overused by literally every LLM in every single place that it just looks bad now. The thing is.
I don’t think anyone has EVER consciously sat down and thought, "you know what would improve this? a fingernail"Emoji Slop AI LOVES emojis for whatever reason. It loves them more than Sam Altman loves to pretend that they are pacing the frontier. Misaligned Stuff.
If you have SVGs or ASCII art or some kind of element that isn’t in a box, it is almost always off its alignment. Like this list in the timetable of my college app. Font Selection These websites don’t usually go for more interesting font selections.
It’s usually Inter, or if you have a website even remotely programming-related, you get Jet Brains Mono.and this thing: It adds these // whenever anything close to tech is mentioned. Redundant Text Due To Chat Context. To Chat Context.
It just adds a bunch of redundant text just because of the chat context. For example. I was making my previous blogging website, and I told it, "Okay, I don’t wanna be writing any HTML; I will write in my comfy Neovim, and I don’t wanna do any web-related stuff."It added text saying "Built with Hugo.
Written from Neovim"No, because no one gives a shit where I write it from. AI does this thing in readmes as well. It goes "Built with Modern CPP 20 features" BRO WHO CARES.
My college app has this on its startup screen. The thing with this is. YOU CAN PRACT ICALLY SMELL THE PROMPT THAT TRIGGERED THIS FROM THIS ONE.
Like "one campus. one app." Yup. Most definitely some management guy said,...
🇸🇦 العربية
10 علامات لواجهة سلوب
récemment تم تحديث تطبيق الكلية الخاص بي بـ 'تحسينات طفيفة في واجهة المستخدم'، و оказалось أنه أسوأ واجهة مستخدم تم إنشاؤها بواسطة الذكاء الاصطناعي رأيتها على الإطلاق. كانت الواجهة القديمة غير مريحة، لكنني كنت أفضلها على 'مدفع السلوب' الذي أنتجه وكيل الذكاء الاصطناعي الخاص بهم. ما هو سلوب؟ واجهة سلوب هي واجهة المستخدم التي يطهوها الذكاء الاصطناعي وتبدو غير صحيحة، حيث لا ينبغي أن تكون، لا تخدم غرضًا أو عندما تكون واجهة المستخدم слишком عامة. هذا يُرى في واجهة المستخدم المشفرة بالحسّ (vibe-coded) دون رؤية. يمكن لواجهة المستخدم المشفرة بالحسّ أن تبدو رائعة عندما تُنفّذ بشكل صحيح، لكن معظم الأحيان لا تكون كذلك. وتجعل التطبيقات تبدو رخيصة وغير جذابة للاستخدام. أمثلة على مواقع الويب المشفرة بالسلوب: قام كلاودفلير مؤخرًا بتشفير موقع ويب بالسلوب. وكذلك مواقع ويب مثل هذه، أنت تعرفها ببساطة عندما تراها. إنها مثل مقاطع فيديو الذكاء الاصطناعي هذه الأيام: بأي طريقة. ما يلي هي الأشياء التي تشكل السلوب. التدرجات. التدرجات في كل مكان. أكبر وأوضح علامة هي التدرجات. التدرجات في أي مكان، التدرجات في أي وقت، التدرجات في كل شيء منفرد. سترى التدرجات على الأزرار، في الخلفية، Basically في أي مكان يمكن أن تضعه فيه. يحب مدافع السلوب اللون الأرجواني لسبب ما. قيء قوس قزح. يحب الذكاء الاصطناعي استخدام الألوان التي لا تعني شيئًا وهي مجرد ألوان مختلفة. تحصل على هذا: شاشة مليئة بألوان لا تتناسب جيدًا ولكنها ملونة بهذه الطريقة. لأن هناك بعض التمييز في الحقول عند صنع واجهة المستخدم أو أي شيء آخر. لا تتبع قاعدة 70-30-10. إنها مجرد إضافة ألوان في كل مكان. الشارات النابضة. ليس لدي أي فكرة لماذا تضيف هذه، لكنها تفعل ذلك على أي حال. أعتقد أنها في بيانات التدريب. لكنها تضيف هذه الشارات النابضة على كل شيء. في 'التحديث' الذي كان لدى تطبيق الكلية الخاص بي. لديهم شيء يُسمى الهوية الرقمية، والذي يُظهر فقط، مثل، رمز الاستجابة السريعة ووجهك. لديه هذه الشارة النابضة التي تقول إنها 'نشطة'. المشكلة هي. إنها ببساطة لن تكون أبدًا غير نشطة. إذا كانت غير نشطة، فإن التطبيق سيقوم بتسجيل خروجك. إنها مجرد معلومات زائدة. ولدي أيضًا شارة 'طالب نشط' على ملفي الشخصي. هل يمكن لأحد أن يخبرني كيف يبدو الطالب غير النشط?? أيضًا في نفس واجهة الهوية الرقمية. أضافت شارة 'مُحقق' صغيرة بجانب شعار كليتي. لماذا؟ لأنها ليست تقوم بإجراء استدعاء API وتقول، 'أوه نعم، هذا الشخص مُحقق'. وحتى لو كانت تفعل ذلك، فإنها لا تعني شيئًا، مثل. إذا كنت سأزور هويتي الرقمية، هل سأضيف عمدًا 'غير مُحقق'???? بطاقات أظافر الأصابع. أرى هذه الأشياء في حرفيًا كل واجهة مستخدم مشفرة بالحسّ، وتغضبني كل مرة. تراها في كل مكان، يا رجل. ليس لأنها سيئة؛ بل لأنها مفرطة في الاستخدام من قبل كل نموذج لغة كبير في كل مكان واحد، بحيث أصبحت تبدو سيئة الآن. الأمر هو. لا أعتقد أن أحدًا جلس بوعي وفكر، 'هل تعلم ما الذي سيحسن هذا؟ أظفر'. سلوب الإيموجي. يحب الذكاء الاصطناعي الإيموجي لأي سبب. يحبه أكثر مما يحب سام ألتمان التظاهر بأنه يقود frontier. التموضع الخاطئ. إذا كان لديك SVGs أو فن ASCII أو نوع من العنصر الذي ليس داخل صندوق، فهو تقريبًا دائمًا غير محاذٍ. مثل هذه القائمة في جدول زمني تطبيق الكلية الخاص بي. اختيار الخط. هذه المواقع لا تذهب عادةً لاختيارات خط أكثر إثارة للاهتمام. عادة ما تكون Inter، أو إذا كان لديك موقع ويب حتى remotely связан с программированием، تحصل على Jet Brains Mono. و هذا الشيء: يضيف هذه // كلما تم ذكر أي شيء قريب من التكنولوجيا. النص الزائد بسبب سياق الدردشة. بسبب سياق الدردشة. إنه يضيف مجرد نص زائد فقط بسبب سياق الدردشة. على سبيل المثال. كنت أصنع موقع الويب الخاص بالمدونة السابق، وقلت له: 'حسنًا، لا أريد كتابة أي HTML؛ سأكتب في محرري المريح Neovim، ولا أريد القيام بأي شيء متعلق بالويب.' ثم أضاف نصًا يقول: 'Built with Hugo. Written from Neovim'. لا، لأن لا أحد يهتم بمكان كتابتي من. يفعل الذكاء الاصطناعي هذا الشيء في ملفات readme أيضًا. يذهب ليقول: 'Built with Modern CPP 20 features' يا אח، من يهتم بذلك؟. يحتوي تطبيق الكلية الخاص بي على هذا على شاشة بدء التشغيل. والشيء في هذا هو. يمكنك عمليًا شمّ المحفّز الذي أدى إلى هذا من هذا واحد. مثل 'حرم جامعي واحد. تطبيق واحد.' نعم. most definitely some man...
ما هو واجهة سلوب؟
واجهة سلوب هي واجهة المستخدم التي يطهوها الذكاء الاصطناعي وتبدو غير صحيحة، حيث لا ينبغي أن تكون، لا تخدم غرضًا أو عندما تكون واجهة المستخدم слишком عامة.
🇧🇩 বাংলা
স্লপ UI-এর 10 লক্ষণ
হाल ही में আমার কলেজ অ্যাপটি 'সামান্য UI উন্নয়ন' দিয়ে আপডেট করা হয়েছিল, এবং এটি যে AI-উৎপন্ন ব্যবহারকারী ইন্টারফেস আমি কখনো দেখেছি তার সবচেয়ে খারাপ ছিল। পুরানো UI ক্লামকি ছিল, কিন্তু আমি তার চেয়ে তাদের AI এজেন্ট দ্বারা তৈরি 'স্লপ ক্যানন' এর risultato পছন্দ করতাম। স্লপ কি? স্লপ UI হলো AI যে UI তৈরি করে যা দেখতে ভুল লাগে, যেখানে এটি থাকা উচিত না, কোনো উদ্দেশ্য পরিষ্কার করে না বা যখন UI খুব সাধারণ হয়ে যায়। এটি ভাইব-কোডেড UI-এ দেখা যায় যেখানে কোনো দৃষ্টিভঙ্গি নেই। ভাইব-কোডেড UI সঠিকভাবে করা হলে ভাল দেখতে পারে, কিন্তু অধিকাংশ ক্ষেত্রে এটা হয় না। এবং এটি অ্যাপসকে সস্তা এবং ব্যবহার করার জন্য আকর্ষণহীন করে তোলে। স্লপ-কোডেড ওয়েবসাইটের উদাহরণ: ক্লাউডফ্লেয়ার récemment একটি ওয়েবসাইটকে স্লপ-কোডেড করে। এবং এই rodzের ওয়েবসাইটও যেমন এই, আপনি শুধু দেখলে বুঝতে পারবেন। এটি এই দিনের AI ভিডিও-এর মতো: যেকোনোভাবে। নিম্নলিখিতগুলো স্লপের উপাদান। গ্রেডিয়েন্ট। সব জায়গায় গ্রেডিয়েন্ট। সবচেয়ে বড় এবং সবচেয়ে লক্ষ্যযোগ্য চিহ্ন হলো গ্রেডিয়েন্ট। গ্রেডিয়েন্ট যেকোনো জায়গায়, গ্রেডিয়েন্ট যেকোনো সময়, প্রতিটি একক জিনিসে গ্রেডিয়েন্ট। আপনি এগুলো বোতামে, পটভূমিতে, মৌলিকভাবে যেকোনো জায়গায় দেখবেন যেখানে এগুলো রাখা যায়। স্লপ ক্যানন কিছু কারণে বেগুনি রঙকে পছন্দ করে। ইন্ড্রধনুশি উবমি। AI এমন রঙ পছন্দ করে যা কোনো অর্থ নেই এবং শুধু আলাদা আলাদা রঙ। আপনি শুধু পাবেন: একটি স্ক্রিনে একে একে রঙ যা ভালভাবে মেলে না কিন্তু এভাবে Rang দেওয়া হয়েছে। কারণ UI তৈরি করার সময় বা কিছুই করার সময় ক্ষেত্রগুলো মধ্যে কিছু পার্থক্য থাকে। এটি 70-30-10 নিয়ম অনুসরণ করে না। এটি শুধু জায়গায় জায়গায় রঙ যোগ করে। পলসিং ব্যাজ। আমি কোনো ধারণা নেই যে কেন এটি এইগুলো যোগ করে, কিন্তু এটি শুধু এভাবে করে। মনে হয় এটি প্রশিক্ষণ ডেটায় আছে। কিন্তু এটি সব জায়গায় এই পলসিং ব্যাজ যোগ করে। আমার কলেজ অ্যাপের সেই 'আপগ্রেড'-এ। তাদের কাছে একটি জিনিস আছে যা ডিজিটাল আইডি বলা হয়, যা শুধু দেখায়, যেমন, একটি QR কোড এবং আপনার মুখ। এতে একটি পলসিং ব্যাজ আছে যা বলে যে এটি 'সক্রিয়'। সমস্যা হল। এটি কখনো নিষ্ক্রিয় হয় না। যদি এটি নিষ্ক্রিয় হয়, তাহলে অ্যাপ আপনাকে লগ আউট করে দেবে। এটি শুধু অতিরিক্ত তথ্য। এবং আমার প্রোফাইলে একটি 'সক্রিয় ছাত্র' ব্যাজও আছে। কেউ বলতে পারেন কি একটি নিষ্ক্রিয় ছাত্র কেমন দেখায়?? সেই ডিজিটাল আইডি ইন্টারফেসের একই অংশে। এতে আমার কলেজের লোগোর পাশে একটি ছোট ' যাচাইকৃত ' ব্যাজ যোগ করা হয়েছে। কেন? কারণ এটি কোনো API কল করছে না এবং বলছে না, 'ও হ্যাঁ, এই পুরুষটি যাচাইকৃত'। এবং যদি এটি এমন করে থাকতেও, এর কোনো অর্থ নেই, যেমন। যদি আমি আমার ডিজিটাল আইডি জালসাজি করত, তাহলে আমি ইচ্ছাকৃতভাবে 'অযাচাইকৃত' যোগ করতাম???? নখের কার্ড। আমি লিটারালি প্রতিটি ভাইব-কোডেড UI-এ এই জিনিসগুলো দেখি, এবং প্রতিটি বার এটি আমাকে রাগে দেয়। আপনি এগুলো কোথাও দেখবেন, ড্যুদ। এগুলো খারাপ না হওয়ায় নয়; এগুলো শুধু এভাবে অত্যধিকভাবে ব্যবহার করা হচ্ছে প্রতিটি LLM প্রতিটি জায়গায়, ফলে এগুলো এখন খারাপ দেখতে পায়। বিষয়টি হল। আমি মনে করি যে কেউ কখনো সচেতনভাবে বসেছে এবং চিন্তা করেছে যে, 'তুমি জানো কি এটাকে উন্নত করবে? একটি নখ'। ইমোজি স্লপ। AI কোনো কারণে ইমোজি থেকে ভালোবাসে। এটি স্যাম আল্টম্যানের চেয়ে বেশি ইমোজি পছন্দ করে যিনি মনে করেন যে তারা ফ্রন্টিয়ারের अगुआ করছেন। ভুলভাবে সংযুক্ত জিনিস। যদি আপনার কাছে SVG, ASCII আর্ট বা কোনো উপাদান থাকে যা বক্সের মধ্যে না থাকে, তবে এটি تقریباً সর্বদা তার সংযোজন থেকে বের হয়ে যায়। যেমন আমার কলেজ অ্যাপের টাইমটেবলের এই তালিকা। ফন্ট বাছাই। এই ওয়েবসাইটগুলো সাধারণত আরও আকর্ষণীয় ফন্ট বাছাইয়ের জন্য যায় না। এটা সাধারণত Inter, বা যদি আপনার কাছে এমন একটি ওয়েবসایت থাকে যা প্রোগ্রামিং থেকে zelfs দূরভাবে সম্পর্কিত থাকে, তাহলে আপনি Jet Brains Mono পাবেন। এবং এই বিষয়টি: যখন কোনো প্রযুক্তি সম্পর্কিত কিছু উল্লেখ করা হয়, তখন এটি এই // যোগ করে। চ্যাট কনটেক্সটের কারণে অতিরিক্ত পাঠ্য। চ্যাট কনটেক্সটের কারণে। এটি শুধু চ্যাট কনটেক্সটের কারণে অতিরিক্ত পাঠ্য যোগ করে। উদাহরণস্বরূপ। আমি আমার আগের ব্লগ ওয়েবসাইট তৈরি করছিলাম, এবং আমি তাকে বলেছিলাম, 'ঠিক আছে, আমি কোনো HTML লিখব না; আমি আমার আরামদায়ক Neovim-এ লিখব এবং কোনো ওয়েব-সম্পর্কিত কাজ করব না।' তারপর এটি পাঠ্য যোগ করেছিল: 'Built with Hugo. Written from Neovim'। না, কারণ কোনোও কেউ আমি কোথায় থেকে লিখছি তা খেয়াল না করে। AI এই কাজটি readmes-এও করে। এটি বলে: 'Built with Modern CPP 20 features' ভাই কেউ খেয়াল না করে। আমার কলেজ অ্যাপের স্টার্ট স্ক্রিনে এই আছে। এই বিষয়টির সাথে। আপনি বাস্তবভাবে এই এক থেকে প্রম্পটের গন্ধ সूंধতে পারবেন যা এটিকে ট্রিগার করেছে। যেমন 'একটি ক্যাম্পাস। একটি অ্যাপ।' হ্যাঁ। নিশ্চয়তavasti কিছু মানুষ...
স্লপ UI কি?
স্লপ UI হলো AI যে UI তৈরি করে যা দেখতে ভুল লাগে, যেখানে এটি থাকা উচিত না, কোনো উদ্দেশ্য পরিষ্কার করে না বা যখন UI খুব সাধারণ হয়ে যায়।
🇩🇪 Deutsch
10 Anzeichen einer Slop-UI
Kürzlich wurde meine Hochschul-App mit 'kleinen UI-Verbesserungen' aktualisiert, und es stellte sich heraus, dass dies die schlechteste KI-generierte Benutzeroberfläche ist, die ich je gesehen habe. Die alte UI war zwar unhandlich, aber ich hätte sie dem 'Slop-Kanone' vorgezogen, das ihr KI-Agent produziert hat. Was ist Slop? Eine Slop-UI ist eine Benutzeroberfläche, die die KI 'kocht', die fehl am Platz wirkt, wo sie nicht hingehört, keinen Zweck erfüllt oder wenn eine UI zu generisch ist.
Dies zeigt sich in vibe-gecodeten UIs ohne Vision. Vibe-gecodete UIs können bei richtiger Umsetzung gut aussehen, aber meistens tun sie das nicht. Und sie lassen Anwendungen billig und unattraktiv erscheinen.
Beispiele für Slop-gecodete Websites: Cloudflare hat kürzlich eine Website slop-gecodet erstellt. Und auch Websites wie diese, du weißt es einfach, wenn du sie siehst. Es ist wie die KI-Videos dieser Tage: auf irgendeine Weise.
Das Folgende sind die Dinge, die den Slop ausmachen. Verläufe. Verläufe überall.
Das größte und auffälligste Zeichen sind Verläufe. Verläufe überall, Verläufe zu jeder Zeit, Verläufe auf jedem einzelnen Ding. Du wirst sie auf Knöpfen, im Hintergrund sehen, grundsätzlich überall, wo sie hineingepasst werden könnten.
Slop-Kanonen lieben aus irgendeinem Grund Lila. Regenbogen-Erbrechen. Die KI liebt es, Farben zu verwenden, die nichts bedeuten und einfach nur verschiedene Farben sind.
Du bekommst einfach dies: Einen Bildschirm voller Farben, die nicht gut zusammenpassen, aber so gefärbt sind. Weil es bei der Erstellung der UI oder was auch immer irgendwelche Unterscheidungen in den Feldern gibt. Sie folgt nicht der 70-30-10-Regel.
Sie fügt einfach überall Farben hinzu. Pulsierende Abzeichen. Ich habe keine Ahnung, warum sie diese hinzufügt, aber sie tut es einfach.
Ich vermute, es steht in den Trainingsdaten. Aber sie fügt diese pulsierenden Abzeichen überall hinzu. Beim 'Upgrade' meiner Hochschul-App hatten sie etwas namens digitale ID, das einfach nur einen QR-Code und dein Gesicht zeigt, wie gesagt.
Dazu kommt dieses pulsierende Abzeichen, das besagt, dass es 'aktiv' ist. Das Problem ist. ES WIRD EINFACH NIE INAKTIV.
WENN ES INAKTIV IST, LOGGT DIE APP DICH AUS. Es ist nur redundante Information. Und mein Profil hat ein Abzeichen 'aktiver Student'.
KANN JEMAND MIR SAGEN, WIE EIN INAKTIVER STUDENT AUSSEHT?? Auch in derselben digitalen ID-Schnittstelle. Dort fügte sie ein kleines 'verifiziert'-Abzeichen neben dem Logo meiner Hochschule hinzu. WARUM.
Weil sie keinen API-Aufruf tätigt und sagt: 'ach ja, dieser Typ ist verifiziert'. Und SELBST WENN SIE ES TÄTE, HÄTTE ES KEINE BEDEUTUNG, wie. Wenn ich meine digitale ID fälschen würde, würde ich absichtlich 'nicht verifiziert' hinzufügen???? Fingernagel-Karten.
Ich sehe diese Dinge in buchstäblich jeder vibe-gecodeten UI, und jedes Mal macht es mich wütend. Du siehst sie überall, Mann. Es liegt nicht daran, dass sie schlecht sind; es liegt einfach daran, dass sie von buchstäblich jedem LLM an jedem einzelnen Ort übermäßig verwendet werden, sodass sie jetzt schlecht aussehen.
Das Ding ist. Ich glaube nicht, dass jemand jemals bewusst hingesetzt und gedacht hat: 'weißt du, was dies verbessern würde? ein Fingernagel'. Emoji-Slop.
Die KI liebt Emojis aus irgendeinem Grund. Sie liebt sie mehr als Sam Altman vorgibt, dass sie die Frontier anführen. Falsch ausgerichtete Elemente.
Wenn du SVGs, ASCII-Kunst oder irgendein Element hast, das nicht in einer Box ist, ist es fast immer falsch ausgerichtet. Wie diese Liste im Stundenplan meiner Hochschul-App. Schriftauswahl.
Diese Websites gehen normalerweise nicht auf interessantere Schriftauswahlen ein. Es ist meistens Inter, oder wenn du eine Website hast, die auch nur entfernt mit Programmierung zu tun hat, bekommst du Jet Brains Mono. und dies: Sie fügt diese // hinzu, sobald etwas in der Nähe von Technik erwähnt wird. Redundanter Text aufgrund des Chat-Kontexts.
Aufgrund des Chat-Kontexts. Sie fügt einfach einen Haufen redundanten Text hinzu, nur aufgrund des Chat-Kontexts. Zum Beispiel.
Ich erstellte meine vorherige Blog-Website, und ich sagte ihr: 'Okay, ich möchte kein HTML schreiben; ich werde in meinem gemütlichen Neovim schreiben und nichts Web-bezogenes tun.' Dann fügte sie den Text hinzu: 'Built with Hugo. Written from Neovim'. Nein, weil niemand sich dafür interessiert, wo ich es schreibe.
Die KI macht das auch in Readmes. Sie sagt 'Built with Modern CPP 20 features' BRUDER, WER KÜMMERT SICH?. Meine Hochschul-App hat dies auf ihrem Startbildschirm.
Und das daran ist. DU KANNST FÖRMLICH DEN PROMPT RIECHEN, DIESES EINE AUSLÖST HAT. Wie 'ein Campus. eine App.' Ja. most definitely some man...
Was ist eine Slop-UI?
Eine Slop-UI ist eine Benutzeroberfläche, die die KI 'kocht', die fehl am Platz wirkt, wo sie nicht hingehört, keinen Zweck erfüllt oder wenn eine UI zu generisch ist.
🇪🇸 Español
10 Señales de una Interfaz Slop
Recientemente mi aplicación de la universidad se actualizó con 'mejoras menores de la UI', y resultó ser la interfaz de usuario generada por IA más descuidada que he visto. La antigua UI era torpe, pero habría preferido esa sobre el 'cañón de slop' que produjo su agente de IA. ¿Qué es Slop? Una Interfaz Slop es la UI que la IA cocina que se ve fuera de lugar, donde no debería estar, no sirve para nada o cuando una UI es demasiado genérica. Esto se ve en la UI codificada por 'vibe' sin una visión.
La UI codificada por 'vibe' puede verse bien cuando se hace correctamente, pero la mayoría de las veces no lo hace. Y hace que las aplicaciones se vean baratas y poco atractivas de usar. Ejemplos de Sitios Web Codificados como Slop: Cloudflare recientemente codificó como slop un sitio web.
Y también sitios web como este, tú simplemente lo sabes cuando lo ves. Es como los videos de IA de estos días: de cualquier manera. Lo siguiente son las cosas que componen el slop.
Degradados. Degradados en todas partes. El signo más grande y más notorio son los degradados.
Degradados en cualquier lugar, degradados en cualquier momento, degradados en cada cosa individual. Los verás en los botones, en el fondo, básicamente en cualquier lugar donde pudiera meterlos. Los Cañones de Slop AMAN el púrpura por alguna razón.
Vómito de Arcoíris. La IA ama usar colores que no significan nada y son simplemente diferentes colores. Solo obtienes esto: una pantalla llena de un montón de colores que no combinan bien pero están coloreados así.
Porque hay alguna distinción en los campos al hacer la UI o lo que sea. No sigue la regla 70-30-10. Simplemente agrega colores por todas partes.
Insignias Parpadeantes. No tengo idea de por qué agrega estas, pero simplemente lo hace. Está en los datos de entrenamiento, supongo.
Pero agrega estas insignias parpadeantes en todo. En la 'actualización' que tuvo mi aplicación de la universidad. Tienen algo llamado identificación digital, que simplemente muestra, como, un código QR y tu rostro.
Tiene esta insignia parpadeante que dice que está 'activa'. El problema es. ES SOLAMENTE NUNCA INACTIVA.
SI ESTÁ INACTIVA, LA APLICACIÓN TE CIERRA LA SESIÓN. Es solo información redundante. Y mi perfil tiene una insignia de 'estudiante activo'. ¿ALGUIEN PUEDE DECIRME CÓMO SE VE UN ESTUDIANTE INACTIVO?? También en la misma interfaz de identificación digital.
Añadió un pequeño distintivo 'verificado' junto al logo de mi universidad. ¿POR QUÉ. Porque no está haciendo alguna llamada a una API y diciendo, 'oh sí, este tipo está verificado'. Y AUN ASÍ, SI LO ESTUVIERA HACIENDO, NO SIGNIFICA NADA, como.
Si yo estuviera falsificando mi identificación digital, ¿iría a añadir deliberadamente 'no verificado'???? Tarjetas de Uña. Veo estas cosas en literalmente cada UI codificada por 'vibe' y me enfadan cada vez. Las ves por todas partes, hombre.
No es que sean malas; es simplemente que están tan sobreutilizadas por literalmente cada LLM en cada singolo lugar que ahora se ven mal. La cosa es. No creo que nadie se haya sentado conscientemente alguna vez y pensado, 'sabes qué mejorarían esto? una uña'.
Emoji Slop. A la IA le ENCANTAN los emojis por alguna razón. Los ama más de lo que Sam Altman ama fingir que están liderando la frontera.
Elementos Desalineados. Si tienes SVGs o arte ASCII o algún tipo de elemento que no está dentro de un cuadro, casi siempre está desalineado. Como esta lista en el horario de mi aplicación de la universidad.
Selección de Fuente. Estos sitios web normalmente no optan por selecciones de fuentes más interesantes. Suele ser Inter, o si tienes un sitio web incluso remotamente relacionado con programación, obtienes Jet Brains Mono. y esto: Añade estos // siempre que se mencione algo cercano a la tecnología.
Texto Redundante Debido al Contexto de Chat. Debido al Contexto de Chat. Simplemente agrega un montón de texto redundante solo por el contexto de chat.
Por ejemplo. Estaba haciendo mi sitio web de blogs anterior, y le dije: 'De acuerdo, no quiero escribir ningún HTML; escribiré en mi cómodo Neovim y no quiero hacer nada relacionado con la web.' Entonces agregó texto diciendo 'Built with Hugo. Written from Neovim'.
No, porque nadie se importa de dónde lo escribo. La IA hace esto en los readmes también. Dice 'Built with Modern CPP 20 features' HERMANO, ¿QUIÉN SE IMPORTA?.
Mi aplicación de la universidad tiene esto en su pantalla de inicio. Lo que tiene esto es. REALMENTE PUEDES OLER EL PROMPT QUE ACTIVÓ ESTO DESDE ESTA UNO.
Como 'un campus. una aplicación.' Sí. Definitivamente fue algún hombre...
¿Qué es una Interfaz Slop?
Una Interfaz Slop es la UI que la IA cocina que se ve fuera de lugar, donde no debería estar, no sirve para nada o cuando una UI es demasiado genérica.
🇫🇷 Français
10 signes d'une interface Slop
Récemment, mon application universitaire a été mise à jour avec des « améliorations mineures de l'interface utilisateur », et c'était l'interface utilisateur générée par l'IA la plus bâclée que j'aie jamais vue. L'ancienne interface utilisateur était maladroite, mais je l'aurais préférée à celle produite par l'agent IA de leur « canon à slop ». Qu'est-ce que le slop ? Une interface slop est l'interface utilisateur que l'IA conçoit qui semble étrange, où elle ne devrait pas être, qui ne sert à rien ou lorsque l'interface utilisateur est trop générique.
Cela se voit dans les interfaces utilisateur codées au « vibe » sans vision. Une interface utilisateur codée au « vibe » peut avoir un bel aspect lorsqu'elle est bien faite, mais la plupart du temps ce n'est pas le cas. Et cela donne aux applications un aspect bon marché et peu attrayant à utiliser.
Exemples de sites web codés en slop : Cloudflare a récemment codé un site web en slop. Et aussi des sites web comme celui-ci, vous le savez simplement quand vous le voyez. C'est comme les vidéos IA de ces jours-ci : de quelque manière que ce soit.
Ce qui suit sont les éléments qui constituent le slop. Dégradés. Dégradés partout.
Le signe le plus grand et le plus noticeable est les dégradés. Des dégradés partout, des dégradés à tout moment, des dégradés sur absolument tout. Vous les verrez sur les boutons, en arrière-plan, essentiellement partout où ils pourraient les mettre.
Les canons à slop adorent le violet pour une raison inconnue. Vomissement arc-en-ciel. L'IA aime utiliser des couleurs qui ne signifient rien et qui sont simplement différentes couleurs.
Vous obtenez ceci : un écran rempli de couleurs qui ne vont pas bien ensemble mais qui sont colorées ainsi. Parce qu'il y a une certaine distinction dans les champs lors de la création de l'interface utilisateur ou quoi que ce soit d'autre. Elle ne suit pas la règle 70-30-10.
Elle ajoute simplement des couleurs partout. Badges pulsants. Je n'ai aucune idée de pourquoi elle ajoute ces éléments, mais elle le fait simplement.
Je suppose que c'est dans les données d'entraînement. Mais elle ajoute ces badges pulsants sur tout. Dans la « mise à niveau » que mon application universitaire avait.
Ils ont quelque chose appelé une identité numérique, qui affiche simplement, comme, un code QR et votre visage. Elle a ce badge pulsant qui dit qu'elle est « active ». Le problème est.
ELLE NE SERA JAMAIS INACTIVE. SI ELLE EST INACTIVE, L'APPLICATION VOUS DÉCONNECTE. C'est juste de l'information redondante.
Et mon profil a un badge « étudiant actif ». QUELQU'UN PEUT-IL ME DIRE À QUOI RESSEMBLE UN ÉTUDIANT INACTIF ?? Aussi dans la même interface d'identité numérique. Elle a ajouté un petit badge « vérifié » à côté du logo de mon collège.
POURQUOI. Parce qu'elle ne fait pas d'appel API et ne dit pas : « oh oui, ce gars est vérifié ». ET MÊME SI ELLE LE FAISAIT, CELA N'AURAIT AUCUN SENS, comme.
Si je falsifiais mon identité numérique, ajouterais-je délibérément « non vérifié » ???? Cartes d'ongles. Je vois ces choses dans littéralement chaque interface utilisateur codée au « vibe », et cela m'énerve à chaque fois. Vous les voyez partout, mec.
Ce n'est pas parce qu'elles sont mauvaises ; c'est simplement parce qu'elles sont trop utilisées par littéralement chaque LLM dans chaque endroit unique, au point qu'elles ont maintenant l'air mauvaises. Le truc est. Je ne pense pas que quelqu'un ait jamais consciemment pensé : « vous savez ce qui améliorerait ceci ? un ongle ».
Slop d'emoji. L'IA adore les emojis pour une raison quelconque. Elle les aime plus que Sam Altman n'aime prétendre qu'ils sont à la pointe. Éléments mal alignés.
Si vous avez des SVG, de l'art ASCII ou un quelconque élément qui n'est pas dans une boîte, il est presque toujours mal aligné. Comme cette liste dans l'emploi du temps de mon application universitaire. Sélection de police.
Ces sites web ne choisissent généralement pas des sélections de police plus intéressantes. C'est généralement Inter, ou si vous avez un site web même lointainement lié à la programmation, vous obtenez Jet Brains Mono. et ceci : elle ajoute ces // chaque fois qu'elle mentionne quelque chose de proche de la technologie. Texte redondant dû au contexte de chat.
En raison du contexte de chat. Elle ajoute simplement un tas de texte redondant juste à cause du contexte de chat. Par exemple.
Je créais mon précédent site web de blog, et je lui ai dit : « D'accord, je ne veux pas écrire de HTML ; j'écrirai dans mon Neovim confortable, et je ne veux pas faire de trucs liés au web. » Il a ajouté le texte disant « Built with Hugo. Written from Neovim ». Non, parce que personne ne se soucie de l'endroit où je l'écris.
L'IA fait cette chose aussi dans les fichiers readme. Elle dit « Built with Modern CPP 20 features » FRÈRE QUI SE SOUCIE ?. Mon application universitaire a ceci sur son écran de démarrage.
Le truc avec ceci est. TU PEUX VRAIMENT SENTIR LE PROMPT QUI A DÉCLENCHÉ CELA À PARTIR DE CETTE SEULE. Comme « un campus. une application. » Oui.
Most definitely some man...
Qu'est-ce qu'une interface Slop ?
Une interface Slop est l'interface utilisateur que l'IA conçoit qui semble étrange, où elle ne devrait pas être, qui ne sert à rien ou lorsque l'interface utilisateur est trop générique.
🇮🇳 हिन्दी
स्लॉप UI के 10 संकेत
हाल ही में मेरे कॉलेज ऐप को 'मामूली UI सुधारों' के साथ अपडेट किया गया था, और यह वह सबसे खराब AI-जनित उपयोगकर्ता इंटरफेस है जो मैंने कभी देखा है। पुराना UI clumsy था, लेकिन मैं उसे उनकी AI एजेंट द्वारा उत्पन्न 'स्लॉप कैनन' के मुकाबले पसंद करता। स्लॉप क्या है? स्लॉप UI वह UI है जो AI बनाती है जो दिखने में गलत लगती है, जहां यह होनी ही नहीं चाहिए, कोई उद्देश्य नहीं पूरा करती या जब UI बहुत सामान्य हो जाती है। यह वाइब-कोडेड UI में देखा जाता है जिसमें कोई दृष्टि नहीं होती। वाइब-कोडेड UI सही ढंग से किए जाने पर अच्छी दिख सकती है, लेकिन अधिकांश मामलों में ऐसा नहीं होता। और यह ऐप्स को सस्ता और उपयोग करने में आकर्षक नहीं बनाता है। स्लॉप-कोडेड वेबसाइटों के उदाहरण: क्लाउडफ्लेयर ने हाल ही में एक वेबसाइट को स्लॉप-कोडेड बनाया। और भी ऐसी वेबसाइटें हैं जैसे यह, आप बस इसे देखकर जान जाते हैं। यह आज के AI वीडियो की तरह है: किसी भी तरह। निम्नलिखित वे चीजें हैं जो स्लॉप बनाती हैं। ग्रेडिएंट। हर जगह ग्रेडिएंट। सबसे बड़ा और सबसे ध्यान देने योग्य संकेत ग्रेडिएंट है। ग्रेडिएंट कहीं भी, ग्रेडिएंट कभी भी, हर एक चीज़ पर ग्रेडिएंट। आप उन्हें बटनों पर, पृष्ठभूमि में, मूल रूप से कहीं भी देखेंगे जहां इसे डाला जा सके। स्लॉप कैनन को कुछ कारण से बैंगनी रंग पसंद है। इंद्रधनुषी उल्टी। AI ऐसे रंगों का उपयोग करना पसंद करती है जो कुछ भी नहीं मतलब रखते और बस अलग-अलग रंग होते हैं। आपको बस यह मिलता है: एक स्क्रीन पर एक bunch of रंग जो अच्छी तरह से नहीं जाते लेकिन ऐसे रंगे जाते हैं। क्योंकि UI बनाते समय या कुछ भी करते समय क्षेत्रों में कुछ अंतर होता है। यह 70-30-10 नियम का पालन नहीं करती। यह बस हर जगह रंग जोड़ देती है। पल्सिंग बैज। मुझे नहीं पता क्यों यह ये जोड़ती है, लेकिन यह बस ऐसा करती है। मुझे लगता है यह प्रशिक्षण डेटा में है। लेकिन यह हर चीज़ पर इन पल्सिंग बैज जोड़ती है। मेरे कॉलेज ऐप के उस 'अपग्रेड' में। उनके पास एक चीज है जिसे डिजिटल आईडी कहा जाता है, जो बस एक QR कोड और आपके चेहरे को दिखाता है, जैसे कि। इसमें यह पल्सिंग बैज है जो कहता है कि यह 'सक्रिय' है। समस्या है। यह बस कभी भी निष्क्रिय नहीं होती। अगर यह निष्क्रिय हो जाती है, तो ऐप आपको लॉग आउट कर देती है। यह सिर्फ अतिरिक्त जानकारी है। और मेरी प्रोफ़ाइल पर एक 'सक्रिय छात्र' बैज भी है। क्या कोई बता सकता है कि एक निष्क्रिय छात्र कैसा दिखता है?? उसी डिजिटल आईडी इंटरफेस में। इसने मेरे कॉलेज के लोगो के बगल में एक छोटा 'सत्यापित' बैज जोड़ दिया। क्यों? क्योंकि यह कोई API कॉल नहीं कर रही है और कह रही है कि 'ओह yeah, यह आदमी सत्यापित है'। और भले ही वह ऐसा कर रही हो, इसका कोई मतलब नहीं है, जैसे। अगर मैं अपना डिजिटल आईडी जालसाजी कर रहा होता, तो क्या मैं जानबूझकर 'असत्यापित' जोड़ता???? नाख़ुन कार्ड। मैं इन चीज़ों कोliterally हर वाइब-कोडेड UI में देखता हूं, और हर बार यह मुझे गुस्सा दिलाता है। आप इनको हर जगह देखते हैं, ड्यूड। यह इसलिए नहीं है कि ये बुरे हैं; यह सिर्फ इसलिए है कि हर एक LLM हर जगह इनका अत्यधिक उपयोग कर रहा है, जिससे ये अब बुरे दिखने लगे हैं। बात यह है। मुझे नहीं लगता कि किसी ने कभी सचेत रूप से बैठकर सोचा हो कि 'तुम्हें पता है क्या इसमें सुधार लाएगा? एक नाख़ुन'। इमोजी स्लॉप। AI किसी कारण से इमोजी से प्यार करती है। वह इमोजी से अधिक प्यार करती है जितना कि सैम अल्टमैन pretending करता है कि वह सीमा की अगुआई कर रहा है। गलत संरेखित सामग्री। अगर आपके पास SVG, ASCII आर्ट या कोई ऐसा तत्व है जो बॉक्स में नहीं है, तो यह लगभग हमेशा अपनी संरेखण से बाहर होता है। जैसे मेरे कॉलेज ऐप के टाइमटेबल में यह सूची। फ़ॉन्ट चयन। ये वेबसाइट्स आमतौर पर अधिक रोचक फ़ॉन्ट चयन के लिए नहीं जाती हैं। यह आमतौर पर Inter होता है, या अगर आपके पास कोई वेबसाइट है जो nawet प्रोग्रामिंग से दूर से संबंधित है, तो आपको Jet Brains Mono मिलता है। और यह बात: जब भी कुछ टेक से संबंधित बात की जाती है, यह इन // जोड़ देती है। चैट संदर्भ के कारण अतिरेक पाठ। चैट संदर्भ के कारण। यह सिर्फ चैट संदर्भ के कारण अतिरेक पाठ जोड़ देती है। उदाहरण के लिए। मैं अपना पिछला ब्लॉग वेबसाइट बना रहा था, और मैंने उसे कहा, 'ठीक है, मैं कोई HTML नहीं लिखना चाहता; मैं अपने आरामदायक Neovim में लिखूंगा और कोई वेब-संबंधित काम नहीं करूंगा।' तो उसने पाठ जोड़ दिया: 'Built with Hugo. Written from Neovim'। नहीं, क्योंकि कोई भी परवाह नहीं करता कि मैं कहाँ से लिख रहा हूं। AI ऐसा readmes में भी करती है। वह कहती है: 'Built with Modern CPP 20 features' भाई किसको परवाह है। मेरे कॉलेज ऐप की स्टार्ट स्क्रीन पर यह है। इस बात का है। आप वास्तव में इस एक से प्रॉम्प्ट की गंध ले सकते हैं जो इसे ट्रिगर किया। जैसे 'एक कैंपस। एक ऐप।' हाँ। सबसे निश्चित रूप से कुछ आदमी...
स्लॉप UI क्या है?
स्लॉप UI वह UI है जो AI बनाती है जो दिखने में गलत लगती है, जहां यह होनी ही नहीं चाहिए, कोई उद्देश्य नहीं पूरा करती या जब UI बहुत सामान्य हो जाती है।
🇮🇩 Bahasa Indonesia
10 Tanda Antarmuka Slop
Baru-baru ini aplikasi kampus saya diperbarui dengan 'perbaikan UI kecil', dan itu adalah antarmuka pengguna yang dihasilkan oleh AI yang paling jelek yang pernah saya lihat. UI lama memang kaku, tapi saya lebih memilih itu daripada 'topakan slop' yang dihasilkan oleh agen AI mereka. Apa itu Slop? Antarmuka Slop adalah antarmuka pengguna yang dibuat oleh AI yang terlihat aneh, di tempat seharusnya tidak ada, tidak memiliki tujuan, atau ketika antarmuka terlalu umum.
Hal ini terlihat dalam antarmuka yang dikodekan dengan 'vibe' tanpa visi. Antarmuka yang dikodekan dengan 'vibe' bisa terlihat bagus jika dilakukan dengan benar, tetapi kebanyakan tidak demikian. Dan ini membuat aplikasi terlihat murah dan tidak menarik untuk digunakan.
Contoh situs web yang dikodekan sebagai slop: Cloudflare baru-baru ini mengodekan situs web sebagai slop. Dan juga situs web seperti ini, Anda cukup mengetahuinya ketika Anda melihatnya. Ini seperti video AI zaman sekarang: dengan cara apa pun.
Yang berikut adalah hal-hal yang membentuk slop. Gradien. Gradien di mana-mana.
Tanda terbesar dan paling mencolok adalah gradien. Gradien di mana saja, gradien kapan saja, gradien pada setiap hal tunggal. Anda akan melihatnya di tombol, di latar belakang, dasarnya di mana saja tempat bisa ditempatkannya.
Topakan slop suka dengan warna ungu karena suatu alasan. Muntah Pelangi. AI suka menggunakan warna yang tidak berarti dan hanya warna-warna yang berbeda.
Anda hanya mendapatkan ini: layar penuh dengan sekumpulan warna yang tidak cocok dengan baik tetapi diwarnai seperti itu. Karena ada beberapa perbedaan di bidang saat membuat antarmuka atau apa pun. Ia tidak mengikuti aturan 70-30-10.
Ia hanya menambahkan warna ke mana-mana. Lambang Berdenyut. Saya tidak tahu mengapa ia menambahkan ini, tetapi ia hanya melakukan itu.
Saya kira ini ada dalam data pelatihan. Namun ia menambahkan lambang berdenyut ini ke segala sesuatu. Pada 'peningkatan' yang dimiliki oleh aplikasi kampus saya.
Mereka memiliki sesuatu yang disebut identitas digital, yang hanya menampilkan seperti, kode QR dan wajah Anda. Ia memiliki lambang berdenyut yang mengatakan bahwa ia 'aktif'. Masalahnya adalah.
IA HANYA TIDAK AKAN PERNAH TIDAK AKTIF. JIKA IA TIDAK AKTIF, APLIKASI AKAN LOGOUT ANDA. Ini hanya informasi berlebihan.
Dan profil saya memiliki lambang 'mahasiswa aktif'. BISAKAH SORANG ORANG BERITAHU SAPIA TAMPIL MAHASISWA TIDAK AKTIF?? Di dalam antarmuka identitas digital yang sama. Ia menambahkan lambang 'terverifikasi' kecil di samping logo kampus saya.
MENGAPA. Karena ia tidak melakukan panggilan API dan berkata, 'oh ya, orang ini terverifikasi'. Dan BAHKALAU IA MELAKUKAN ITU, IA TIDAK BERARTI APA-APA, seperti.
Jika saya sedang memalsukan identitas digital saya, apakah saya sengaja akan menambahkan 'tidak terverifikasi'???? Kartu Kuku. Saya melihat hal-hal ini secara harfiah di setiap antarmuka yang dikodekan dengan 'vibe', dan ini membuat saya marah setiap kali. Anda melihatnya di mana-mana, bro.
Ini bukan karena itu buruk; ini hanya karena itu terlalu banyak digunakan oleh secara harfiah setiap LLM di setiap tempat tunggal, sehingga sekarang terlihat buruk. Halnya adalah. Saya tidak percaya ada yang pernah secara sadar duduk dan berpikir, 'kamu tahu apa yang akan memperbaiki ini? kuku'.
Slop Emoji. AI menyukai emoji untuk alasan apa pun. Ia menyukainya lebih daripada Sam Altman menyukai berpura-pura bahwa mereka memimpin frontier.
Hal yang Tidak Teratau. Jika Anda memiliki SVG, kunst ASCII atau jenis elemen apa pun yang tidak berada dalam kotak, hampir selalu tidak teratau. Seperti daftar ini di jadwal kampus aplikasi saya.
Pemilihan Font. Situs web ini biasanya tidak memilih pilihan font yang lebih menarik. Biasanya adalah Inter, atau jika Anda memiliki situs web yang bahkan jauh saja terkait dengan pemrograman, Anda akan mendapatkan Jet Brains Mono. dan ini: Ia menambahkan // setiap kali.
🇯🇵 日本語
スロップUIの10の兆候
最近私の大学のアプリが「マイナーなUI改善」でアップデートされましたが、それは私がこれまでに見た中で最もひどいAI生成ユーザーインターフェースでした。古いUIは使いにくかったですが、私はそれよりも彼らのAIエージェントが生成した「スロップキャノン」の結果を好んだでしょう。スロップとは何ですか?スロップUIとは、AIが作り出す、場所がおかしい、あるべきでない場所にある、目的を果たさない、または単に汎用的すぎるユーザーインターフェースのことです。これはビジョンのない「 vibeコード 」されたUIで見られます。 vibeコードされたUIは正しく行われれば素晴らしく見えるかもしれませんが、ほとんどの場合そうではありません。そして、アプリが安っぽく、使う気がしないように見せます。スロップコードされたウェブサイトの例:Cloudflareは最近ウェブサイトをスロップコードしました。それに加えて、このようなウェブサイトは、見ただけでわかります。それはこれらの日のAIビデオのようです:どのようにでも。以下がスロップを構成するものです。グラデーション。どこにでもグラデーション。最も大きくて目立つ兆候はグラデーションです。グラデーションはどこにでも、いつでも、あらゆる単一のものにあります。ボタン、背景、基本的にどこにでも置ける場所に見られます。スロップキャノンはなぜか紫色が大好きです。レインボウ吐き。AIは意味のない色、つまりただ異なる色だけを好むのです。あなたはこういうものを得ます:よく調和しない色の塊が画面いっぱいに広がっているが、そう色づけされているもの。なぜならUIを作るときや何かをするときに、フィールド間に何かの区別があるからです。これは70-30-10ルールに従っていません。ただどこにでも色を追加しているだけです。パルスバッジ。なぜこれを追加するのか私にはわかりませんが、ただ追加しているだけです。たぶんトレーニングデータにあるのでしょう。しかし、それはあらゆるものにパルスバッジを追加します。私の大学のアプリのその「アップグレード」では。彼らはデジタルIDと呼ばれるものを持っていて、それは単にQRコードとあなたの顔を表示するだけのものです。それに「アクティブ」と書かれたパルスバッジがあります。問題は。これは決して非アクティブになりません。もし非アクティブになったら、アプリはあなたをログアウトさせます。これは単に冗長な情報です。そして私のプロフィールには「アクティブな学生」バッジもあります。誰か、非アクティブな学生ってどんな見た目なのか教えてください??同じデジタルIDインターフェースの中で。それは私の大学のロゴの横に小さな「検証済み」バッジを追加しました。なぜ?なぜならそれは何かのAPIを呼び出して、「ああ、この人は確認済みだ」と言っているわけではないからです。そして仮にそれがそうしたとしても、それは何も意味しないのです。たとえば、私が自分のデジタルIDを偽造していたとしても、わざわざ「未確認」と追加するでしょうか????爪のカード。私は literally すべての vibeコードされたUIでこれらのものを見ており、毎回イライラします。あなたはこれらをどこでも見ることができます、ダッド。これらが悪いわけではないのです;ただ、 literally すべてのLLMがあらゆる場所でこれらを過剰に使用しているため、今では見た目が悪くなっているだけです。ポイントは。私は誰かが意識して座って、「これを改善するには爪が必要だ」と思ったことがあるとは思えません。絵文字スロップ。AIはなぜか絵文字が大好きです。それはサム・アルトマンがフロンティアをリードしているとふりをするよりももっと絵文字を愛しています。ずれているもの。あなたがSVG、ASCIIアート、またはボックスに入っていない何らかの要素を持っている場合、それはほとんどいつもずれています。たとえば私の大学アプリのタイムテーブルのこのリスト。フォント選択。これらのウェブサイトは通常、より興味深いフォント選択をしません。通常はInterか、あるいはプログラミングにでも遠く関連しているウェブサイトなら、Jet Brains Monoになります。そしてこれ:技術に関連する何かが言及されるたびに、これ // を追加します。チャットコンテキストによる冗長なテキスト。チャットコンテキストによる。それはただチャットコンテキストのためだけに冗長なテキストを追加します。たとえば。私は以前のブログウェブサイトを作っていて、それにこう言いました:「まあ、HTMLを書きたくないんだ。快適なNeovimで書くし、ウェブ関連のこともしたくないんだ。」するとそれはこう言いました:「Built with Hugo. Written from Neovim」。いいえ、なぜなら誰も私がどこから書いているかを気にしないからです。AIはこのことをreadmeでもやります。それはこう言います:「Built with Modern CPP 20 features」兄弟誰が気にするんだ。私の大学のアプリは起動画面にこれを持っています。そしてこれについては。あなたは実際にこの一つからトリガーしたプロンプトの匂いを嗅ぐことができます。たとえば「一つのキャンパス。一つのアプリ。」はい。間違いなく何かの男性...
スロップUIとは何ですか?
スロップUIとは、AIが作り出す、場所がおかしい、あるべきでない場所にある、目的を果たさない、または単に汎用的すぎるユーザーインターフェースのことです。
🇧🇷 Português
10 Sinais de uma Interface Slop
Recentemente meu aplicativo da faculdade foi atualizado com 'melhorias menores na UI', e foi a pior interface de usuário gerada por IA que já vi. A antiga UI era clumsy, mas eu teria preferido aquela em vez do 'canhão de slop' produzido pelo agente de IA deles. O que é Slop? Uma Interface Slop é a UI que a IA cozinha que parece estranha, onde não deveria estar, não serve para nenhum propósito ou quando a UI é muito genérica.
Isso é visto em UI codificada por 'vibe' sem uma visão. UI codificada por 'vibe' pode parecer ótima quando feita corretamente, mas na maioria das vezes não é. E isso deixa as aplicações com aparência barata e pouco atraente para usar.
Exemplos de Sites Web Codificados como Slop: Cloudflare recentemente codificou um site como slop. E também sites como este, você simplesmente sabe quando vê. É como os vídeos de IA desses dias: de qualquer jeito. O seguinte são as coisas que compõem o slop.
Gradientes. Gradientes em todos os lugares. O maior e mais perceptível sinal são os gradientes.
Gradientes em qualquer lugar, gradientes a qualquer momento, gradientes em cada coisa individual. Você os verá nos botões, no fundo, basicamente em qualquer lugar onde eles possam colocá-los. Canhões de Slop AMAM o roxo por algum motivo.
Vômito Arco-Íris. A IA ama usar cores que não significam nada e são apenas cores diferentes. Você só obtém isso: uma tela cheia de um monte de cores que não combinam bem, mas são coloridas dessa forma.
Porque há alguma distinção nos campos ao fazer a UI ou qualquer outra coisa. Ela não segue a regra 70-30-10. Ela simplesmente adiciona cores por todo o lugar.
Insignias Pulsantes. Eu não tenho ideia de por que ela adiciona essas, mas ela simplesmente faz. Acho que está nos dados de treinamento.
Mas ela adiciona essas insignias pulsantes em tudo. Na 'atualização' que meu aplicativo da faculdade teve. Eles têm algo chamado identificação digital, que simplesmente mostra, como, um código QR e seu rosto.
Ela tem essa insignia pulsante que diz que está 'ativa'. O problema é. ELA SIMPLESMENTE NUNCA FICA INATIVA.
SE ELA FICAR INATIVA, O APLICATIVO TE DESLOGA. É apenas informação redundante. E meu perfil tem uma insignia de 'estudante ativo'. ALGUÉM PODE ME DIZER COMO PARECE UM ESTUDANTE INATIVO?? Também na mesma interface de identificação digital.
Ela adicionou uma pequena insignia 'verificada' ao lado do logotipo da minha faculdade. POR QUE? Porque ela não está fazendo uma chamada de API e dizendo, 'oh sim, esse cara está verificado'. E MESMO QUE ELA ESTEJA FAZENDO ISSO, ELA NÃO SIGNIFICA NADA, como.
Se eu estivesse forjando minha identificação digital, eu acrescentaria deliberadamente 'não verificado'???? Unha de Ferradura. Eu vejo essas coisas em literalmente toda UI codificada por 'vibe', e isso me deixa irritado toda vez. Você vê elas em todo lugar, cara.
Não é que elas sejam ruins; é simplesmente que elas são tão excessivamente usadas por literalmente cada LLM em cada único lugar que agora elas parecem ruins. A coisa é. Eu não acho que alguém já tenha se sentado conscientemente e pensado, 'você sabe o que melhoraria isso? uma unha'.
Slop de Emoji. A IA ama emojis por algum motivo. Ela ama eles mais do que Sam Altman ama fingir que eles estão liderando a fronteira.
Elementos Desalinhados. Se você tem SVGs ou arte ASCII ou algum tipo de elemento que não está dentro de uma caixa, ele quase sempre está desalinhado. Como esta lista no horário do meu aplicativo da faculdade.
Seleção de Fonte. Esses sites normalmente não optam por seleções de fonte mais interessantes. Geralmente é Inter, ou se você tem um site mesmo remotamente relacionado à programação, você obtém Jet Brains Mono. e isso: Ela adiciona esses // sempre que algo próximo à tecnologia é mencionado.
Texto Redundante Devido ao Contexto de Chat. Devido ao Contexto de Chat. Ela simplesmente adiciona um monte de texto redundante apenas devido ao contexto de chat.
Por exemplo. Eu estava fazendo meu site de blog anterior, e eu disse a ele: 'Tudo bem, eu não quero escrever nenhum HTML; eu vou escrever no meu Neovim confortável, e eu não quero fazer nada relacionado à web.' Então ele adicionou o texto dizendo 'Built with Hugo. Written from Neovim'.
Não, porque ninguém se importa de onde eu estou escrevendo. A IA faz isso também nos readmes. Ela diz 'Built with Modern CPP 20 features' Irmão, quem se importa?.
Meu aplicativo da faculdade tem isso na tela de inicialização. E o que isso tem é. VOCÊ REALMENTE PODE CHEIRAR O PROMPT QUE ACIONOU ISSO A PARTIR DESTE ÚNICO.
Como 'um campus. um aplicativo.' Sim. Definitivamente foi algum homem...
O que é uma Interface Slop?
Uma Interface Slop é a UI que a IA cozinha que parece estranha, onde não deveria estar, não serve para nenhum propósito ou quando a UI é muito genérica.
🇷🇺 Русский
10 признаков интерфейса Slop
Недавно мое колледжное приложение было обновлено с 'небольшими улучшениями UI', и это оказался самый плохой пользовательский интерфейс, созданный ИИ, который я когда-либо видел. Старый UI был неудобным, но я бы предпочел его тому, что создал их ИИ-агент в виде 'пушки slop'. Что такое Slop? Интерфейс Slop — это пользовательский интерфейс, который готовит ИИ, который выглядит неправильно, где он не должен быть, не служит никакой цели или когда интерфейс слишком общий. Это наблюдается в интерфейсах, закодированных по 'vibe', без видения. Интерфейс, закодированный по 'vibe', может выглядеть отлично, если сделан правильно, но в большинстве случаев это не так. И это делает приложения дешевыми и непривлекательными для использования. Примеры веб-сайтов, закодированных как Slop: Cloudflare недавно закодировал веб-сайт как slop. И также веб-сайты подобные этому, вы просто знаете это, когда видите. Это похоже на видео ИИ этих дней: как угодно. Ниже перечислены вещи, которые составляют slop. Градиенты. Градиенты повсюду. Самый большой и наиболее заметный признак — градиенты. Градиенты везде, градиенты в любое время, градиенты на каждом отдельном предмете. Вы увидите их на кнопках, на фоне, basically везде, где они могут быть помещены. Пушки slop любят пурпурный цвет по какой-то причине. Радужная рвота. ИИ любит использовать цвета, которые ничего не значат и просто разные цвета. Вы просто получаете это: экран, заполненный кучей цветов, которые плохо сочетаются, но окрашены таким образом. Потому что при создании интерфейса или чего-то еще есть некоторое различие в полях. Он не следует правилу 70-30-10. Он просто добавляет цвета повсюду. Пульсирующие значки. Я не знаю, почему он добавляет эти, но он просто делает это. Думаю, это есть в данных обучения. Но он добавляет эти пульсирующие значки на всё. В том самом 'обновлении', которое имело мое колледжное приложение. У них есть что-то, называемое цифровой идентификацией, которое просто показывает, например, QR-код и ваше лицо. У него есть этот пульсирующий значок, который говорит, что он 'активен'. Проблема в том. ОН ПРОСТО НИКОГДА НЕ БУДЕТ НЕАКТИВЕН. ЕСЛИ ОН НЕАКТИВЕН, ПРИЛОЖЕНИЕ ПРОСТО ВЫКЛЮЧАЕТ ВАС. Это просто избыточная информация. И у моего профиля есть значок 'активный студент'. КТО-НИБУДЬ СКАЖЕТ МНЕ, КАК ВЫГЛЯДИТ НЕАКТИВНЫЙ СТУДЕНТ?? Также в том же интерфейсе цифровой идентификации. Он добавил маленький значок 'проверен' рядом с логотипом моего колледжа. ЗАЧЕМ. Потому что он не делает вызов API и не говорит, 'о да, этот парень проверен'. И ДАЖЕ ЕСЛИ ОН ЭТО ДЕЛАЕТ, ЭТО НЕ ЗНАЧИТ НИЧЕГО, как. Если бы я подделывал свой цифровой идентификатор, я бы намеренно добавил 'не проверен'???? Ногтевые карточки. Я вижу эти вещи буквально в каждом интерфейсе, закодированном по 'vibe', и это меня бесит каждый раз. Вы видите их везде, чувак. Это не потому, что они плохие; это просто потому, что они чрезмерно используются буквально каждой LLM в каждом отдельном месте, поэтому теперь они выглядят плохо. Дело в том. Я не думаю, что кто-то когда-либо сознательно садился и думал, 'вы знаете, что улучшит это? ноготь'. Slop с эмодзи. ИИ любит эмодзи по какой-то причине. Он любит их больше, чем Сэм Альтман любит притворяться, что они задают тон фронтиру. Неправильно выровненные элементы. Если у вас есть SVG, ASCII-арт или какой-то элемент, который не находится внутри коробки, он почти всегда находится вне выравнивания. Например, этот список в расписании моего колледжного приложения. Выбор шрифта. Эти веб-сайты обычно не выбирают более интересные выборы шрифта. Обычно это Inter, или если у вас есть веб-сайт даже отдаленно связанный с программированием, вы получаете Jet Brains Mono. и это: Он добавляет эти // всякий раз, когда упоминается что-то близкое к технологиям. Избыточный текст из-за контекста чата. Из-за контекста чата. Он просто добавляет кучу избыточного текста просто из-за контекста чата. Например. Я создавал свой предыдущий блог-сайт, и я сказал ему: 'Ладно, я не хочу писать никакой HTML; я буду писать в моем удобном Neovim, и я не хочу делать ничего связанного с вебом.' Тогда он добавил текст, говорящий 'Built with Hugo. Written from Neovim'. Нет, потому что никто не заботится о том, откуда я пишу. ИИ делает это также в файлах readme. Он говорит 'Built with Modern CPP 20 features' БРАТ КТО ЗАБОТИТСЯ?. Мое колледжное приложение имеет это на своем экране запуска. И что с этим. ВЫ МОЖЕТЕ ФАКТИЧЕСКИ ПОЧУВСТВОВАТЬ ЗАПУСК, КОТОРЫЙ ВЫЗВАЛ ЭТО ОТ ЭТОГО ОДНОГО. Как 'один кампус. одно приложение.' Да. most definitely some man...
Что такое интерфейс Slop?
Интерфейс Slop — это пользовательский интерфейс, который готовит ИИ, который выглядит неправильно, где он не должен быть, не служит никакой цели или когда интерфейс слишком общий.
🇨🇳 简体中文
10个Slop UI的表现
最近我的大学应用被更新了“次要的UI改进”,结果这是我见过的最糟糕的AI生成用户界面。旧版UI虽然笨拙,但我宁愿要那个,也不愿接受他们AI代理生成的“滥用炮”所产生的界面。什么是Slop?Slop UI是指AI生成的界面,看起来不对劲,出现在不该出现的地方,没有实际用途,或者界面过于泛化。这种情况常见于缺乏愿景的“氛围编码”UI。当做得好时,氛围编码UI可以看起来很棒,但大多数情况下并非如此。这会让应用看起来廉价且缺乏吸引力。Slop编码网站的例子:Cloudflare最近就用AI生成了一个网站。还有像这样的网站,你一眼就能认出来。这就像现在的AI生成视频:随便看看。以下是构成Slop的要素。渐变。到处都是渐变。最大且最明显的标志是渐变。到处都是渐变,随时都是渐变,每个地方都有渐变。你会看到它们出现在按钮上、背景里,基本上任何可能塞进去的地方。滥用炮特别喜欢紫色,原因不明。彩虹呕吐。AI喜欢使用毫无意义、仅仅是不同颜色的颜色。你就会得到这样的一屏:一堆搭配得很糟糕的颜色,但却被这样涂上去。因为在制作UI或其他东西时,某些字段之间还是有区分的。它不遵循70-30-10法则。它只是到处乱加颜色。脉冲徽章。我不明白为什么它会加这些,但它就是会加。我想这是训练数据里有的。但它在所有东西上都加了脉冲徽章。在我大学应用的这次“升级”中。他们有个叫“数字ID”的东西,只是显示一个二维码和你的脸。它上面有一个脉冲徽章,写着“活跃”。问题是。它根本就不会变成“不活跃”。如果它真的变成了“不活跃”,应用就会把你登出。这只是多余的信息。而且我的个人资料上还有个“活跃学生”徽章。有人能告诉我“不活跃的学生”长什么样吗??在同一个数字ID界面里。它还在我的学校logo旁边加了一个小的“已验证”徽章。为什么?因为它显然没有在调用某个API然后说“噢,这个人是已验证的”。即便它真的在调用API,这也毫无意义。比如,如果我在伪造我的数字ID,我会故意加上“未验证”吗???指甲卡片。我在每一个“氛围编码”UI里都能看到这些东西,每次看到都让我火大。你到处都能看到这些,兄弟。这甚至不是说它们不好;而是因为每一个LLM在每一个地方都过度使用了它们,以至于现在看起来很糟糕。问题是。我认为没有人曾经认真坐下来想过:“你知道什么能改善这个吗?一个指甲。”表情符号滥用。AI不知为何喜欢表情符号。它对表情符号的喜爱程度,甚至超过了萨姆·奥尔特曼假装自己在引领前沿的程度。元素错位。如果你有SVG、ASCII艺术或某种不在盒子里的元素,它几乎总是错位。就像我大学应用 timetable 里的这个列表。字体选择。这些网站通常不会选择更有趣的字体。要么用Inter,要么如果你的网站甚至只是和编程有点关系,你就会得到Jet Brains Mono。还有这个:只要提到和技术相关的东西,它就会在这些地方加上//。由于聊天上下文导致的冗余文本。由于聊天上下文。它只是因为聊天上下文而添加了一堆冗余文本。例如。我之前在做我的博客网站时,我告诉它:“好吧,我不想写任何HTML;我会在我的舒适的Neovim里写作,我不想做任何网页相关的事情。”它就添加了文本:“Built with Hugo. Written from Neovim”。不,因为没人在乎我从哪里写。AI在readme里也会这样做。它会说:“Built with Modern CPP 20 features”兄弟谁在乎啊。我的大学应用在启动屏幕上就有这个。这个东西的问题是。你实际上可以从这个界面里闻出触发它的提示。就像“一个校园。一个应用。”没错。毫无疑问,这就是某个人……
什么是Slop UI?
Slop UI是指AI生成的界面,看起来不对劲,出现在不该出现的地方,没有实际用途,或者界面过于泛化。