AI tạo giao diện: Khi LLM biến văn bản thành các thành phần UI sống động

Thesys và C1 API định hình lại cách AI tạo ra giao diện người dùng

Hầu hết các giao diện AI hiện nay đều gặp chung một vấn đề. Mô hình rất thông minh, đầu ra hữu ích, nhưng tất cả đều đến dưới dạng văn bản — dày đặc, tuyến tính, khó xem. Người dùng yêu cầu phân tích tài chính và nhận được ba đoạn văn. Họ yêu cầu so sánh sản phẩm và nhận được một danh sách. Giao diện chưa theo kịp những gì mô hình có thể làm.

Chính sự thiếu sót đó là điều mà Thesys đang xây dựng. Công ty này được thành lập tại San Francisco năm 2024 bởi Rabi Shankar Guha và Parikshit Deshmukh, tự mô tả mình là một công ty generative UI — và cụm từ đó đang làm được nhiều điều hơn vẻ bề ngoài.

Generative UI thực chất là gì

Generative UI không phải là công cụ giúp các nhà thiết kế vẽ nhanh hơn. Nó không phải là một plugin Figma hay một trợ lý code. Sự khác biệt ở đây rất quan trọng: generative UI hoạt động tại thời điểm chạy (runtime), không phải tại thời điểm thiết kế (design time). Nó không tạo ra một màn hình tĩnh được giao đi. Nó tạo ra giao diện ngay lập tức, phản hồi lại những gì người dùng thực sự làm và yêu cầu.

Kiến trúc về nguyên tắc rất đơn giản. Người dùng gửi một prompt. Thay vì LLM trả lời bằng văn bản thuần túy, hệ thống sẽ diễn giải ý định đó, tham khảo thư viện component và các quy tắc thiết kế, sau đó lắp ráp một giao diện sống — một biểu đồ, một biểu mẫu, một thẻ dữ liệu, một bảng — hiển thị trực tiếp trong ứng dụng. Giao diện chính là câu trả lời.

Thesys minh họa điều này rõ ràng trong các sơ đồ kiến trúc của họ. Một bên là thư viện UI, các hướng dẫn UX, ý định của người dùng, ngữ cảnh, sở thích và dữ liệu. Ở giữa là engine GenUI. Ở bên kia là giao diện tương tác được hiển thị. Sơ đồ này đọc giống như một quy trình vì nó chính xác là những gì nó là — một lớp middleware cấp sản xuất nằm giữa mô hình ngôn ngữ và màn hình của người dùng.

C1 API và Generative UI trong thực tế

Sản phẩm cốt lõi của Thesys là C1 — một API middleware bổ sung cho các phản hồi của LLM để tạo ra các thành phần UI có cấu trúc thay vì văn bản. Nó sử dụng endpoint tương thích với OpenAI, nghĩa là các nhóm có thể áp dụng nó mà không cần viết lại backend của họ. SDK React C1 sẽ hiển thị các component đó ở phía client, xử lý việc truyền tải luồng dữ liệu (streaming), quản lý trạng thái và tính tương tác ngay từ đầu.

Vốn từ vựng component bao gồm các mẫu dữ liệu phổ biến nhất: biểu đồ, bảng, biểu mẫu, thẻ (cards), slide và báo cáo. Chúng được xây dựng trên Crayon — hệ thống thiết kế React mã nguồn mở của Thesys, bản thân nó được xây dựng trên các nguyên tắc Radix UI và shadcn/ui. Hình ảnh trên bảng điều khiển Crayon cho thấy điều này trong thực tế: các biểu đồ tài chính màu cam ấm được xếp lớp trên các bảng phân tích tối màu, các điểm KPI nổi bật bằng typography, và các biểu đồ vùng truyền đạt dữ liệu xu hướng mà không yêu cầu người dùng phải đọc một câu.

Câu chuyện về cá nhân hóa cũng rất cụ thể. Một trong những tài sản hình ảnh quan trọng của Thesys cho thấy bốn người dùng — mỗi người được gán một danh tính màu riêng biệt (xanh ngọc, xanh lá, tím, xanh dương) — với bốn giao diện được hiển thị khác nhau. Cùng một ứng dụng. Cùng một mô hình nền tảng. Bốn bố cục khác nhau, mỗi bố cục được lắp ráp để phù hợp với một bối cảnh và hồ sơ sở thích khác nhau. Đó là lời hứa cốt lõi của generative UI ở quy mô lớn: không phải bốn biến thể được làm thủ công, mà là một hệ thống tạo ra giao diện phù hợp với bất kỳ ai đang sử dụng nó.

Tại sao điều này quan trọng đối với các nhà thiết kế

Sự thay đổi trong cách các nhà thiết kế làm việc trong mô hình này là có thật. Công việc không còn là thiết kế mọi màn hình. Mà là định nghĩa vốn từ vựng của các component — bộ công cụ được phê duyệt — và đặt ra các quy tắc để AI có thể kết hợp chúng. Các nhà thiết kế trở thành người quản lý hệ thống, không phải tác giả của mọi trạng thái.

Các sơ đồ quy trình làm việc của Thesys đóng khung điều này thành ba giai đoạn: Thiết kế, Phát triển, và Phân phối. Mỗi giai đoạn được thể hiện dưới dạng một wireframe được chiếu sáng dần dần — từ bản phác thảo phẳng tối màu đến giao diện được hiển thị rực rỡ. Điều này ngụ ý rằng cùng một component tồn tại trong cả ba giai đoạn. Ma sát khi chuyển giao biến mất không phải vì các nhà phát triển nhanh hơn, mà vì hệ thống tự tạo ra phiên bản đã triển khai trực tiếp từ các quy tắc thiết kế.

Đối với các nhà phát triển, sự thay đổi cũng rất đáng kể. Công việc chuyển từ viết mã UI lặp đi lặp lại sang điều phối ngữ cảnh — quyết định dữ liệu nào cần truyền vào, component nào được phép, và cách xử lý các callback tương tác khi người dùng tương tác với những gì mô hình tạo ra. Cách tiếp cận generative UI định vị C1 của Thesys không phải là một lớp tiện ích mà là một mô hình khác về cách phần mềm frontend được xây dựng.

Hơn 300 nhóm đã sử dụng các công cụ của Thesys để xây dựng và triển khai các giao diện AI thích ứng. Danh mục generative UI đang phát triển nhanh chóng, với các công trình của Google Gemini và các nền tảng cạnh tranh đang tham gia vào lĩnh vực này. Thesys đặt cược rằng cơ sở hạ tầng — API, hệ thống thiết kế, SDK hiển thị — là nơi giá trị bền vững tồn tại, chứ không phải ở bản thân mô hình.