AI is getting very good at coding, especially with the arrival of new models like Opus 5 and Fable 5.1. Most non-technical people think learning how to code is becoming unnecessary — knowing how to use these LLMs is all you need: prompt engineering, agent graphs, and so on.

But my recent experience with AI will change the way you think about it. I was working on an accounting desktop app. Everything was working as intended both on my local environment and the client's PC, then the client asked me to install the software on another PC that just had Windows 10 installed.

After installing on that legacy PC, I started noticing every floating UI from Base UI stopped working and started sticking to the top-left 0,0. As someone would guess, I thought this could be a problem with Base UI or ShadCN. Being lazy, I sent the same screenshot to the AI, and it also suggested the problem was with Base UI itself. After investigation, it told me the reason was Base UI's internal library @floating-ui.utils/dom. I asked it to add logs to collect more metadata — I literally spent my whole day until 2 AM fixing the bug and finally reached a point where I raised a bug on the Base UI repo.

The next day, I gave up on the LLM and started replicating the bug in an isolated environment by introducing things into the application step by step. I tried the following order: @tailwindcss -> @import "tw-animate-css" -> @import "shadcn/tailwind.css"; -> app.css. Just after introducing the base components, things started working, but as soon as I introduced app.css again, I started seeing the same problem. By now, it was very obvious the bug was coming from app.css, not from a third-party library. But unfortunately, app.css was 1200 lines long — thanks to AI slop. That's why I started trying the split-and-try method to pinpoint the issue, and after 20+ tries, the bug was in a block that I would never have thought of, and neither would the AI.

Ready to see it? Just one line of AI slop:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* Movement goes: no keyframes, no transform transitions. Opacity and
           colour stay, because those are what tell someone a thing appeared
           or changed. */
    animation: none !important;
    transition-property:
      opacity, color, background-color, border-color, fill, stroke !important;
    transition-duration: 150ms !important;
-    transform: none !important;
    scroll-behavior: auto !important;
}

AHHH! I don't know what the AI was thinking when it wrote this line of code. Although this was easy bug, but software is far more complex than this example. That's why having strong foundation and knowing how thing works always gives you win over traditional vibe coders.