Web thương hiệu thoát AI slop: cách tiếp cận design system

Nhiều người muốn làm website thương hiệu gần đây đều gặp một băn khoăn giống nhau. Màn hình dựng nhanh bằng công cụ AI trông cũng ổn, nhưng khi mở ra lại có cảm giác đã thấy ở đâu đó. Gradient tím, hero căn giữa, ba thẻ icon xếp hàng ngang. Khi những màn hình như vậy phủ khắp internet, người ta sinh ra cả một từ: "AI slop". Đó là cách gọi kiểu thiết kế trung bình mà AI phổ thông sản xuất hàng loạt. Yeowubie giải bài toán này bằng cách tiếp cận gọi là design system. Bài viết này sẽ lần lượt nói về việc vì sao AI slop xuất hiện, design system ngăn nó ra sao, vì sao nhất quán thương hiệu trở thành tài sản, và áp dụng thực tế thế nào.

Vấn đề của thiết kế AI slop

AI slop là sản phẩm mà công cụ tạo sinh nhả ra y nguyên giá trị trung bình của dữ liệu huấn luyện. Nhanh và rẻ, nhưng điểm yếu cốt lõi là giống hệt hàng nghìn website khác. Sức mạnh giúp phân biệt thương hiệu đã thiếu ngay từ đầu.

Vấn đề không dừng ở thẩm mỹ. Người truy cập, ngay khi nhìn màn hình, vô thức cân nhắc mức độ đáng tin. Một trang chỉ đặt logo công ty lên trên một template thấy ở khắp nơi sẽ tạo ấn tượng "chỗ này cũng tầm tầm". Dù sản phẩm hay dịch vụ vững vàng, ấn tượng đầu tiên đã bị gộp vào mức trung bình. Chi phí bỏ ra để khác biệt sụp đổ chỉ trong một màn hình.

Nhìn về mặt kỹ thuật, nguyên nhân càng rõ. Màn hình AI tạo ra thường hội tụ về các mẫu phổ biến nhất. Hero căn giữa toàn chiều rộng, dưới đó là thẻ icon gom thành cụm ba, thẻ kính mờ đặt trên gradient, carousel. Từng cái là mẫu đã được kiểm chứng, nhưng chồng lại cùng lúc thì thành dấu hiệu "do AI làm" mà ai cũng nhận ra. Phông chữ cũng vậy: font sans-serif mặc định và tông indigo-violet độ bão hòa cao càng làm ấn tượng đó đóng đinh.

Yeowubie cố ý tránh những lối mòn này. Thay cho hero toàn chiều rộng là bố cục editorial bất đối xứng; thay cho indigo lạnh là tông trung tính mực ấm với điểm nhấn petrol (#1F7A6E). Vật liệu kiểu kính chỉ dùng giới hạn ở phần khung hệ thống, không đặt lên trên phần chữ nội dung. Những lựa chọn lệch một bước khỏi giá trị mặc định ấy gom lại giúp thoát khỏi "lại màn hình đó".

Tuy nhiên cần tránh hiểu lầm. Bản thân AI không phải vấn đề. Yeowubie cũng là đội ngũ làm và vận hành bằng AI. Vấn đề không nằm ở công cụ, mà ở thái độ xuất bản nguyên đề xuất đầu tiên mà công cụ đưa ra. Lấy giá trị trung bình làm điểm xuất phát thì được, nhưng nếu thiếu phán đoán kéo nó về phía thương hiệu thì sẽ thành slop.

Cách tiếp cận design system (token và component)

Design system là cấu trúc định nghĩa một lần màu, phông, khoảng cách, component, rồi để mọi màn hình tham chiếu chúng. Thay vì chọn lựa tùy hứng, nó dựng một chuẩn duy nhất ép quy tắc thương hiệu ở cả phía code lẫn phía thiết kế.

Đơn vị cốt lõi là design token. Token là biến đặt tên cho giá trị, kiểu "màu này", "khoảng cách này". Yeowubie dùng cấu trúc ba tầng. Tầng dưới cùng là token nguyên thủy (primitive), là giá trị thuần. Trên đó là token ngữ nghĩa (semantic), đặt tên theo công dụng như "màu chữ nội dung", "bề mặt nhấn". Trên cùng là token thương hiệu, phủ quyết định riêng của thương hiệu lên giá trị ngữ nghĩa đó. Khi dựng màn hình, ta không gọi giá trị nguyên thủy trực tiếp mà chỉ tham chiếu token ngữ nghĩa và thương hiệu. Nhờ vậy chỉ cần chỉnh một điểm nhấn petrol là mọi màn hình dùng màu đó đổi theo cùng lúc.

Component là tầng tiếp theo. Các mảnh như nút, thẻ, thanh điều hướng được thiết kế một lần trên nền token, rồi trang mới chỉ việc ghép các mảnh đó lại. Không phải vẽ lại nút ở từng trang nên không lệch nhau, và sửa một lần là phản ánh ở mọi nơi. Đây chính là điểm đạt được cả nhất quán lẫn tốc độ cùng lúc.

Hệ thống của Yeowubie chia hai tầng. Tầng dưới (SYSTEM) là quy tắc phổ quát theo hướng Apple Human Interface Guidelines, lo phần thao tác mà ai cũng thấy quen và dễ chịu. Tầng trên (EXPRESSION) chứa biểu đạt riêng của thương hiệu. Khả dụng phổ quát đặt làm nền, giọng nói thương hiệu đặt lên trên. Vì token được quản lý bằng định dạng chuẩn (W3C DTCG) nên công cụ thiết kế và code phát triển chia sẻ cùng một giá trị.

Lý do cách này ngăn được slop rất đơn giản. Bảo AI tự làm trên trang giấy trắng thì nó trôi về trung bình. Nhưng nếu dựng sẵn hàng rào là token và component, AI chỉ tạo sinh bên trong đó. Tốc độ của công cụ vẫn dùng nguyên, còn kết quả thì không thể vượt ra ngoài quy tắc thương hiệu. Không phải AI thả tự do, mà là AI được hệ thống giữ lại làm việc.

Nhất quán thương hiệu

Nhất quán thương hiệu là trạng thái mọi điểm chạm lặp lại cùng một quy tắc thị giác và ngôn ngữ. Khi web, danh thiếp, đề xuất, mạng xã hội không rời rạc mà trông như do một người làm, người truy cập nhận ra thương hiệu nhanh hơn và nhớ lâu hơn.

Nhất quán là tài sản vì nó tích lũy. Gặp đi gặp lại cùng màu, cùng phông, cùng quy tắc khoảng trắng, một mẫu hình đọng lại trong trí nhớ con người. Đến mức che logo vẫn nhận ra, thì chính sự nhận diện đó giúp giảm chi phí marketing. Ngược lại, mỗi trang một tông thì lần nào cũng phải thuyết phục lại từ đầu. Ấn tượng không tích lũy là chi phí lặp lại mỗi lần.

Design system bảo đảm sự nhất quán này bằng cấu trúc chứ không bằng ý chí con người. Cách để người phụ trách phải nhớ giá trị màu rồi căn cho khớp mỗi lần sẽ sụp khi đổi người hoặc deadline gấp. Cách tham chiếu token loại bỏ sự lung lay đó. Dù là trang mới hay chiến dịch mới, hễ còn gọi cùng token thì tự động căn khớp. Giao sự nhất quán cho hệ thống thay vì giao cho sự tận tâm cá nhân.

Khác biệt lộ rõ nhất khi mở rộng. Năm trang thì người ta còn căn bằng mắt được. Nhưng khi trang tăng lên hàng chục, ngôn ngữ thành ba thứ, mỗi mùa thêm chiến dịch thì làm thủ công không kiểm soát nổi. Hệ thống càng quy mô lớn càng hoạt động mạnh. Việc dựng token và component từ đầu là khoản đầu tư chặn trước hỗn loạn về sau.

Việc Yeowubie kiên trì với tổ hợp riêng gồm trung tính mực ấm, điểm nhấn petrol và bất đối xứng editorial cũng nằm trong mạch này. Cố định bằng token một lựa chọn tránh tổ hợp phổ biến thì sự khác biệt ấy lặp lại không lung lay ở mọi màn hình. Một quy tắc đặt tốt từ đầu càng theo thời gian càng tích lũy thành ấn tượng rõ nét hơn.

Cách áp dụng

Việc áp dụng bắt đầu từ chuyển các quyết định cốt lõi của thương hiệu thành token. Bước đầu là định nghĩa giá trị chuẩn của màu, phông, khoảng cách, vật liệu theo đơn vị ngữ nghĩa, và cam kết mọi việc về sau chỉ tham chiếu các token đó.

Việc đầu tiên là xác định rõ điểm khác biệt. Quyết định trước xem thương hiệu mình sẽ bỏ mẫu phổ biến nào. Với Yeowubie là bỏ gradient indigo-violet và chọn trung tính ấm cộng petrol. Khoảnh khắc ghi quyết định này vào file token thay vì để trong đầu, chuẩn đó trở thành cam kết chung của cả đội.

Tiếp theo là dựng component trên nền token. Sắp xếp trước các mảnh hay dùng: nút, thẻ, điều hướng, form. Cho mỗi mảnh chỉ tham chiếu token thì việc làm trang về sau gần như là lắp ghép. Khi dùng công cụ AI cũng đưa các component và token này vào làm điều kiện đầu vào. Khi đó kết quả tạo sinh ra đời ngay từ bên trong thương hiệu.

Ở khâu kiểm tra, đưa vào việc soát lối mòn. Trước khi xuất bản, xác nhận xem có lọt vào dấu hiệu slop như hero căn giữa toàn chiều rộng, ba thẻ icon, kính trên chữ, sans-serif mặc định không. Cố định các mục kiểm tra thành danh sách thì lọc bằng chuẩn chứ không bằng cảm giác. Lọc bỏ giá trị trung bình mà AI vô tình kéo vào ở khâu này là điều then chốt.

Quy mô và mức tùy biến cần cân bằng. Thương hiệu nhỏ thì vài màu, phông và mấy component cốt lõi là đủ. Không cần dựng hệ thống đồ sộ từ đầu, cứ token hóa từ những thứ hay dùng. Nhớ rằng hệ thống không phải hoàn thành một lần mà là cấu trúc nuôi lớn dần khi dùng, thì có thể bắt đầu nhẹ nhàng.

Yeowubie tiến hành quá trình này bằng đội ngũ Hàn-Việt vận hành bằng AI. Lấy design system làm chuẩn, tận dụng tốc độ của AI ở bên trong khuôn đó. Nếu bạn muốn dựng mới web thương hiệu hoặc gỡ cảm giác slop khỏi màn hình hiện có, hãy trao đổi với Yeowubie.