Microsoft VibeCanvas Practice: From Interface to Runnable Experience

Generative AI is pushing product design from "completing interfaces" to "a way where design and Agents work together." When AI can easily generate a flood of solutions, the real challenge becomes: how can we quickly turn ideas into tangible, testable product experiences?

This session will use Microsoft’s self‑developed VibeCanvas as a core case study to show how AI can be embedded into real design workflows, reshaping design deliverables and team collaboration. Key highlights include:

1. The designer’s role is shifting from “UI execution” to “problem definition and experience judgment.” As AI lowers the barrier from mockups to prototypes, designers now extend their responsibility to problem definition, experience validation, and quality assurance – judgment becomes the decisive capability.

2. VibeCanvas moves design from “expressing ideas” to “rapidly generating and validating real product experiences.” Designers can use natural language or existing drafts (from Figma, PDF, or PPT) to request code generation; the Agent produces code in real time, and the results can be run, tested, and iterated directly on the canvas. Every output is a runnable, testable prototype, not a static image.

3. The value of AI design goes beyond generating interfaces – it lies in enabling collaboration between designers and multiple Agents. VibeCanvas comes with built‑in templates for various Microsoft products (Copilot, Bing, Edge, M365, etc.) and supports integration with different Agents and their contexts, turning the canvas into a collaborative workspace where designers and Agents work side by side.

4. The division of work between product designers and Agents is being redefined in the AI era. Agents handle rapid generation, exploration, and iteration, while designers remain responsible for problem definition, user value judgment, experience oversight, and final decisions. Through this human‑machine collaboration, designers evolve from “executors” to “judges,” and Agents truly become collaborative partners in the design process.

1、Understand the core changes AI brings to product design, and gain a renewed perspective on the designer’s role in problem definition, experience judgment, and product implementation.
2、Learn how VibeCanvas translates design intent into runnable, testable product experiences through natural language, code generation, real‑time preview, and multi‑option comparison.
3、Obtain practical references for team‑level AI transformation, and discover how to turn individual AI usage experiences into reusable team workflows.
4、Learn how to systematize team requirements into reusable plugins, design skills, and collaboration processes, while balancing efficiency, quality, and controllability.