Generative UI: Design Practices in the Era of AI Assistants

Traditional digital assistants typically respond to user queries with plain text or simple cards. However, professional users such as bank relationship managers, customer service representatives, and salespeople often need to extract key information from long passages of text in scenarios such as high‑frequency inquiries, product comparisons, and process guidance. Generative UI — which generates structured answer containers (conclusion summaries, step‑by‑step lists, comparison tables, collapsible evidence, etc.) in real time based on the user's intent and confidence — enables users to grasp the core information within two seconds, thereby improving both key information acquisition and efficiency. Yet, from "concept understanding" to "engineering implementation", experience designers lack systematic cases and methodologies.

This talk will use a real‑world implementation of a digital assistant for bank relationship managers to deconstruct the design rule tables, container component libraries, and confidence visualization strategies of generative UI. Workshop participants will also engage in a hands‑on exercise to design a complete workflow for mapping a "conclusion container" from JSON to the front end.

Main Content:

1. Opening Introduction
1.1 Speaker's self‑introduction and professional background
1.2 Explanation of the significance of this workshop and the application background of generative UI in the era of AI assistants
1.3 Clarification of learning objectives and workshop agenda

2. Human‑AI Communication and Collaboration Experience Design Paradigm
2.1 Introduction to the process paradigm of human‑AI communication and collaboration
2.2 Differences between human‑AI collaboration and traditional human‑computer interaction
2.3 The purpose of designing for generative UI

3. Practical Experience in Building Generative UI
3.1 Basic guiding principles of generative UI: starting from fundamental principles
3.2 Implementation logic of generative UI: from the basic flow of AI conversation to the presentation of the communication interface
3.3 How to implement: defining mapping rules and component styles for generative UI
3.4 Demonstration of real‑time rendering: showcasing the generative UI real‑time renderer

4. Group Hands‑On Exercise
4.1 Based on a specific scenario, define rules and style documentation for generative UI
4.2 Render the results
4.3 Group summary

5. Summary and Outlook
5.1 Summarize practical experience and analyze challenges throughout the process
5.2 Outlook on the responsibilities and boundaries of experience design in future implementation phases

1、Background introduction and icebreaking
2、Introduction to generative UI and the human‑AI collaboration communication paradigm
3、Practical experience sharing and overall implementation logic
4、Group interaction: co‑creating a specific type of answer container for a conversation card
5、Summary of practical experience and guidance on expanding scenarios

1、Interaction/UI designers, AI product managers
2、Design system owners and front‑end/full‑stack engineers
3、Design managers and innovation team leads

1、Cognitive level: Build a systematic knowledge framework for generative UI
2、Master the overall implementation process of future generative UI
3、Understand the specific future responsibilities of designers