Tại sao AI vẫn tệ với Front-end?

AI có thể generate cả một trang web trong 30 giây. Nó có thể dựng 3D world, tạo video, vẽ hình ảnh photorealistic. Nhưng bạn nhờ nó chỉnh cái spacing cho đều, hay viết một cái scroll-driven animation tử tế? Nó faceplant ngay lập tức.

Chuyện này mình gặp hoài. Và gần đây đọc được bài của Adam Argyle trên nerdy.dev, thấy ổng rant đúng cái mình nghĩ bấy lâu nay. Nên hôm nay mình muốn chia sẻ lại, kèm theo góc nhìn cá nhân từ kinh nghiệm dùng AI để làm front-end hàng ngày.

Cái mà AI làm tốt và tại sao nó làm tốt

Phải công nhận một điều: AI rất giỏi những thứ nhàm chán. Mà front-end thì có khá nhiều thứ nhàm chán.

• Scaffolding: Bạn cần dựng nhanh một cái form, một cái card component, một cái layout cơ bản? AI phun ra trong vài giây. Nó đã thấy hàng triệu pattern tương tự rồi.
• Token migration: Chuyển đổi design tokens, mapping color palette, rename biến CSS loại công việc tedious mà con người ghét làm thì AI lại ăn ngon.
• Outlining features: Cần brainstorm nhanh một feature list? AI cho bạn một cái checklist generic khá ổn để bắt đầu.

Theo kinh nghiệm của mình, AI thực sự shine khi task là "copy-paste có suy nghĩ". Nếu pattern đã well-worn, đã có hàng nghìn tutorial trên internet, thì AI basically giúp bạn copy-paste nhanh hơn. Và thật ra, phần lớn công việc programming hàng ngày đúng là như vậy.

Nhưng đây cũng chính là giới hạn của nó.

Khi bạn bước ra khỏi "con đường mòn"

Cái giây phút bạn cần thứ gì đó bespoke thứ gì đó không nằm trong top 100 kết quả Stack Overflow là lúc AI bắt đầu chới với.

Mình liệt kê vài trường hợp mà mình đã đau đầu thực tế:

Custom interactions & animations: Thử nhờ AI viết scroll-driven animations xem. Nó sẽ tự tin phun ra một đống CSS syntax mà trông như từ thời IE6. Hoặc nó dùng JavaScript để làm thứ mà CSS thuần có thể handle vì training data của nó đầy những solution cũ rích.

Layout & Spacing: AI tệ toán. Mà layout là toán. Intrinsic sizing, extrinsic constraints, dynamic calculations dựa trên viewport nó đoán mò. Bạn expect symmetry? Nó cho bạn padding lệch 3px mà tự tin nói "Done!"

Combined states: Một component có 5 states khác nhau, interact với 3 context providers? AI bắt đầu khóc. Nó không biết edit chỗ nào, sửa chỗ này thì break chỗ kia.

Accessibility: Đây là phần đau lòng nhất. AI hay quăng aria-hidden="true" vào random elements rồi hy vọng nó đúng. Accessibility không phải checklist nó cần hiểu context, hiểu user flow. AI không có khả năng đó.

Performance: Mặc định, AI cho bạn solution nặng nhất, jank nhất. Trừ khi bạn explicitly nói "optimize cho performance", nó không care.

Và điều mình thấy hay (theo kiểu mỉa mai) là: component càng complex, AI càng chậm và càng ngu đi. Nó có thể one-shot một cái UI decent, nhưng follow-up request thứ hai là bắt đầu loạn.

Tại sao lại như vậy?

Training data là rác cũ

Internet đầy tutorial cũ, solution outdated, và UI pattern generic. Đó là thứ AI được train. Modern CSS? Nó barely biết. Những feature mới như @layer, @container, @scope, hay anchor positioning training data cho những thứ này cực kỳ ít so với cả đại dương jQuery solutions ngoài kia.

Bạn đang nhờ một thằng đọc hàng triệu bài tutorial cũ để viết code hiện đại. Kết quả là... y như bạn tưởng.

Nó không nhìn thấy gì cả

Đây là điều fundamental mà nhiều người quên: LLM không phải rendering engine. Nó không "thấy" output. Nó đoán text tiếp theo dựa trên pattern.

Bạn throw screenshot vào? Nó interpret được ở mức surface, nhưng nó không thể biết cái icon bị mất là do CSS specificity conflict hay do font chưa load. Nó đang stabbing in the dark.

Cái interaction kinh điển mà ai cũng gặp:

AI: "Done! Here is your perfectly crafted UI." Mình: "Icon biến mất rồi, fix đi." AI: "You're absolutely right. Let me fix that for you." (Fix xong thì cái khác lại vỡ)

Nó không hiểu "tại sao"

AI không hiểu WHY đằng sau architectural decisions. Tại sao chúng ta dùng state machine thay vì boolean flags? Tại sao chúng ta chọn CSS Grid thay vì Flexbox cho layout này? Tại sao chúng ta cần logical properties thay vì physical properties?

Nó là một text predictor khổng lồ. Nó predict token tiếp theo, không phải reason about architecture. Bạn có thể guide nó đến đó, nhưng bạn phải spell out mọi thứ và lúc đó thì bạn đang làm phần khó nhất rồi, AI chỉ type hộ.

Không kiểm soát được môi trường

Điều mình thấy ít người nói đến: AI viết Rust, Python, TypeScript rất tốt vì những ngôn ngữ đó chạy trong môi trường predictable. Bạn pin được version. Node 20.11? Lock. Rust 1.77? Lock.

HTML và CSS không có luxury đó. Browser nào? Version nào? Viewport size bao nhiêu? User dùng keyboard, mouse, touch, hay voice? Dark mode hay light mode? Reduced motion hay không? LTR hay RTL?

Đó là một ma trận biến số khổng lồ mà AI không control được, nên nó... ignore. Cho đến khi bạn nhắc. Mà ngay cả khi bạn nhắc, kết quả cũng không guaranteed.

Con người là bài toán khó nhất

Chúng ta - users là một combinatorial explosion. Chúng ta đổi viewport liên tục, switch theme, đổi device, đổi browser, đổi input method. Chúng ta không phải static target. Chúng ta không phải pattern có thể learn một lần rồi xong.

Có một "mainstream" của behaviors và preferences mà AI handle được. Nhưng cái "full potential" matrix của human interaction thì sẽ còn làm khó AI rất lâu nữa.

Theo kinh nghiệm của mình, cách tiếp cận hiệu quả nhất hiện tại là:

• Dùng AI cho scaffolding và boilerplate — để nó làm phần boring.
• Tự tay handle phần bespoke — custom interactions, complex states, accessibility.
• Review mọi thứ AI output — đặc biệt CSS. Đừng trust mà không verify.
• Cung cấp context cực kỳ rõ ràng — nếu bạn cần logical properties, nói. Nếu bạn cần container queries, nói. Đừng assume nó biết.
• Học CSS hiện đại — vì AI chưa biết, nên đây chính là competitive advantage của bạn.

Điều cuối mình muốn nói: việc AI có thể generate được front-end "tàm tạm" từ zero đã là impressive rồi, considering tất cả những limitations trên. Nhưng "tàm tạm" không phải thứ users deserve. Và khoảng cách từ "tàm tạm" đến "tốt" đó vẫn là việc của chúng ta.