Inside

Generative UI đã đến: Khi AI trả lời bằng giao diện, và designer cần làm gì

Generative UI là gì với designer: cách Intelligent UI của ChatGPT và OpenUI 1.0 dựng giao diện từ component, và cách chuẩn bị design system.

Generative UI đã đến: Khi AI trả lời bằng giao diện, và designer cần làm gì

Suốt ba mươi năm, phần mềm vận hành theo cùng một cách: designer tạo ra các màn hình cố định, và người dùng học cách sử dụng chúng. Tháng 10/2026, hai sự kiện đã đẩy mạnh một ý tưởng khác. Ngày 7/10, OpenAI đưa Intelligent UI vào ChatGPT, để câu trả lời xuất hiện dưới dạng giao diện tương tác thay vì chữ. Ngày 15/10, dự án mã nguồn mở OpenUI đạt phiên bản 1.0, mở ra cách để bất kỳ AI agent nào cũng có thể dựng giao diện từ chính component của team.

Đây là generative UI: giao diện được AI ghép dựng đúng lúc bạn cần. Bài này giải thích nó là gì, hai cách tiếp cận này hoạt động ra sao, và nó thay đổi gì với UI/UX designer.

Tóm gọn: với generative UI, designer không còn vẽ từng màn hình, mà thiết kế component, quy tắc và "khả năng phán đoán" mà AI dùng để dựng màn hình ngay tức thì.

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

Trong một sản phẩm truyền thống, designer quyết định trước có những màn hình nào và mỗi màn hình có gì. Với generative UI, hệ thống quyết định lúc đang chạy. Nó nhìn vào yêu cầu, ngữ cảnh và dữ liệu, rồi chọn component và sắp xếp chúng thành một giao diện cho đúng khoảnh khắc đó.

Một hình dung đơn giản: nhờ trợ lý so sánh ba chiếc laptop, thay vì ba đoạn văn, bạn nhận được bảng so sánh cạnh nhau có bộ lọc. Nhờ lên kế hoạch bữa tối, bạn nhận được công thức kèm timeline và thanh trượt số khách tự cập nhật lượng nguyên liệu.

Chi tiết quan trọng là generative UI tốt không phải mô hình tự vẽ pixel từ con số không. Cả hai cách tiếp cận dưới đây đều dựa trên một thư viện component được định nghĩa sẵn. AI lo phần ghép; component và quy tắc giữ cho kết quả đúng hướng.

Intelligent UI của ChatGPT

Ngày 7/10/2026, OpenAI mở rộng GPT-6 tới nhiều người dùng ChatGPT hơn và giới thiệu Intelligent UI. Theo OpenAI, ChatGPT giờ có thể trả lời bằng hình ảnh, nút bấm, form, biểu đồ và trải nghiệm tương tác ngay trong cuộc hội thoại.

OpenAI mô tả nó thế nào

  • Mô hình chọn hình thức dựa trên câu hỏi: đặt cạnh nhau khi cần so sánh, sơ đồ tương tác khi cần giải thích, chữ thuần khi đó là cách hữu ích nhất.
  • OpenAI xây một thư viện component native có thể stream cùng một compiler xử lý giao diện ngay khi mô hình đang tạo, nên UI hiện ra dần dần thay vì đợi cả câu trả lời hoàn tất.
  • Thư viện tạo cho mọi câu trả lời một nền tảng thiết kế quen thuộc, còn mô hình quyết định cách ghép các phần lại với nhau.
  • OpenAI huấn luyện mô hình ra quyết định thiết kế về nội dung, bố cục, hình ảnh và tương tác, đồng thời đánh giá giao diện nó tạo ra theo độ rõ ràng, tính hữu ích và độ đầy đủ.
  • Bạn cũng có thể nhờ ChatGPT dựng một công cụ nhỏ cho việc trước mắt, như máy tính tiết kiệm hay công cụ chia tiền ăn.

OpenAI thẳng thắn thừa nhận vẫn "còn việc phải làm để cải thiện khả năng phán đoán thiết kế của mô hình". Định hướng họ nêu ra khá táo bạo: thay vì con người thích nghi với phần mềm, phần mềm sẽ thích nghi với con người.

Khả dụng. Intelligent UI bắt đầu triển khai từ 7/10 cho ChatGPT Plus, Pro, Business và Enterprise trong tab Chat, rồi tới Free và Go từ ngày hôm sau. Với Enterprise, việc có dùng được hay không phụ thuộc cài đặt của admin.

OpenUI 1.0: generative UI cho mọi agent

Intelligent UI của ChatGPT nằm trong ChatGPT. OpenUI, do công ty Thesys duy trì, muốn mang mô hình tương tự đến bất kỳ sản phẩm nào có AI agent. Dự án mã nguồn mở theo giấy phép MIT và đạt bản 1.0 ngày 15/10/2026.

Cách hoạt động, nói đơn giản

  1. Bạn định nghĩa, hoặc dùng lại, một thư viện component: các card, biểu đồ, form và nút bấm mà sản phẩm cho phép.
  2. OpenUI tạo hướng dẫn prompt từ thư viện đó.
  3. Mô hình trả lời bằng OpenUI Lang, một ngôn ngữ gọn, ưu tiên streaming, được thiết kế cho UI do mô hình tạo.
  4. Một renderer biến output đó thành phần tử giao diện thật ngay khi dữ liệu stream về.

Vì mô hình chỉ được dùng những component bạn đã đăng ký, thư viện đóng vai trò như hàng rào an toàn. Bản 1.0 thêm custom actions, để nút bấm trong giao diện được tạo có thể gọi code của chính app bạn, và hoạt động với nhiều mô hình khác nhau, kể cả mô hình open-weight.

Theo dự án, OpenUI có runtime cho React, Vue, Svelte và Angular, riêng React có thêm component dựng sẵn và giao diện chat. Thesys cho biết OpenUI Lang dùng ít hơn tới 67% token so với JSON, và một benchmark của chính hãng được báo chí nhắc tới cho thấy nó vượt các định dạng generative UI khác. Hãy coi các con số này là tuyên bố của nhà phát triển, chưa phải kết quả độc lập.

Hai cách tiếp cận, một ý tưởng chung

  • Intelligent UI là trải nghiệm của một nhà cung cấp trong một sản phẩm. Designer không đổi được component của nó, nhưng nó cho hàng triệu người thấy generative UI có cảm giác thế nào.
  • OpenUI là hạ tầng. Team sản phẩm mang design system của chính mình vào và quyết định chính xác AI được phép hiển thị gì.

Cả hai dựa trên cùng một nguyên tắc: thư viện component có giới hạn cộng với khả năng phán đoán của mô hình. Nguyên tắc đó chính là chỗ của designer.

Điều này có ý nghĩa gì với designer

1. Bạn thiết kế hệ thống, không phải từng màn hình. Khi giao diện được ghép lúc chạy, sản phẩm thiết kế giá trị nhất là thư viện component và quy tắc kết hợp. Mỗi component cần mục đích rõ ràng, các trạng thái và giới hạn.

2. Component cần "đọc được bởi AI". Mô hình chọn component dựa trên tên, mô tả và ví dụ. Tên mơ hồ và variant không có tài liệu dẫn tới lựa chọn kém. Hãy ghi rõ khi nào dùng, khi nào không, và component cần dữ liệu gì.

3. Thiết kế để ghép nối. Một card có thể đứng một mình, nằm trong lưới, trong bong bóng chat hay cạnh biểu đồ. Component phải trông ổn trong những tổ hợp bạn chưa từng vẽ. Hãy thử chúng cạnh các "hàng xóm" lạ và ở nhiều độ rộng.

4. Xác định khi nào không nên tạo UI. Chính OpenAI nói đôi khi chữ thuần là tốt nhất. Hãy viết quy tắc khi nào tương tác có ích, như so sánh, điều chỉnh đầu vào hay hoàn thành một việc, và khi nào nó chỉ gây nhiễu.

5. Streaming thay đổi bố cục. Giao diện hiện ra dần cần khung sườn ổn định, thứ tự hợp lý và không bị giật khi nội dung đổ vào. Hãy nghĩ cái gì hiện trước, cái gì lấp đầy sau.

6. Niềm tin và quyền kiểm soát quan trọng hơn. Khi AI dựng một form hay một nút bấm, người dùng cần biết nó sẽ làm gì. Nhãn rõ ràng, xem trước khi thực hiện và cách hoàn tác hay chỉnh sửa dễ dàng trở nên thiết yếu.

7. Accessibility không thể để sau. Bố cục do AI tạo vẫn cần thứ tự focus, nhãn, độ tương phản và hỗ trợ trình đọc màn hình. Hãy tích hợp chúng vào component để mọi tổ hợp đều thừa hưởng.

Checklist khởi đầu thực tế

  • Chọn 10 đến 15 component bao phủ phần lớn câu trả lời của sản phẩm: khối chữ, card, danh sách, so sánh, biểu đồ, form, nhóm nút, bản đồ, timeline, trạng thái trống.
  • Viết mục đích một dòng và quy tắc sử dụng cho từng component, kèm ví dụ đúng và sai.
  • Xác định dữ liệu bắt buộc và tuỳ chọn cho từng component để AI biết cần điền gì.
  • Đặt quy tắc ghép: lồng tối đa bao nhiêu lớp, mỗi màn hình bao nhiêu hành động chính, khi nào dùng biểu đồ thay cho bảng.
  • Thiết kế trạng thái loading và trạng thái hiển thị một phần cho streaming.
  • Quyết định hành động nào cần xác nhận trước khi chạy.
  • Tích hợp accessibility vào mọi component.
  • Review output thật mỗi tuần và biến lỗi lặp lại thành quy tắc mới.

Giới hạn và câu hỏi còn bỏ ngỏ

  • Khả năng phán đoán thiết kế vẫn đang phát triển. OpenAI tự nói điều này, và bố cục được tạo vẫn có thể rối hoặc thiếu nhất quán.
  • Dễ dự đoán hay linh hoạt. Màn hình cố định dễ test và viết tài liệu hơn. Màn hình được tạo thay đổi liên tục, khiến QA và analytics khó hơn.
  • Tính nhất quán của brand phụ thuộc vào thư viện. Hệ thống component yếu dẫn tới giao diện được tạo yếu.
  • Benchmark còn sớm. Các tuyên bố về hiệu năng của định dạng generative UI phần lớn đến từ nhà phát triển.
  • Không phải thứ gì cũng nên tạo bằng AI. Các luồng cốt lõi như thanh toán hay cài đặt thường hưởng lợi từ bố cục ổn định, quen thuộc.

Kết nối với các xu hướng trước đó

Generative UI không xuất hiện một mình. Code Layers và Specs mới của Figma, guidelines design system cho AI agent, và các công cụ như Claude Design đều chỉ về cùng một hướng: designer ngày càng định hình hệ thống, context và quy tắc mà AI sử dụng, không chỉ những pixel cuối cùng. Nếu bạn đã đầu tư vào một design system gọn gàng, bạn đang ở vị thế rất tốt.

Kết luận

Generative UI đẩy công việc của designer lên một tầng cao hơn. Thay vì vẽ mọi màn hình có thể có, bạn thiết kế các khối xây dựng, quy tắc ghép chúng và khả năng phán đoán khi nào một giao diện thực sự có ích. Intelligent UI của ChatGPT cho đông đảo người dùng thấy trải nghiệm này; OpenUI cho thấy team sản phẩm có thể tự xây nó bằng component của mình. Trong cả hai trường hợp, chất lượng kết quả phụ thuộc vào chất lượng hệ thống phía sau, và đó chính là công việc thiết kế.

Nguồn tham khảo

Thông tin được kiểm tra ngày 16/10/2026.