Goal and Value

This is a case study of a tool design and development project that integrates AI design systems and LLMs. This tool addresses three major challenges faced by most AI-powered design agents:

• Multimodal design capabilities

• Addressing the unpredictability of AI-generated designs

• Highly customizable prompt engineering and design system components

Enhancing the usability of the AI ​​playground

From expert testing and competitor analysis to integration of design system components: Reduce the learning curve and improve operational efficiency.

Function Area	User frequency
➊ Nav Bar	High - Low
➋ Model & Account	Med - Low
➌ System prompts & Output Context	High
➍ Input	High
➎ System Setup	Low

The new navigation bar integrates quick actions into the Hover Action Card component, allowing users to perform 80% of their tasks without having to switch tabs. The intuitive gesture controls allow user to quickly collapse/expand the navigation bar, free more space for Playground IDE.

The prompts and parameter adjustment bar have been redesigned with a more refined, responsive interface, making them even easier to use without sacrificing functionality (compared to OpenAI's 50/50 unsplitable design).

Design summary

Multimodal Design

Compared to most AI agent designs, which primarily rely on text-based chat, Design system components can 100% handling images, text, voice, and even interactive data visualizations simultaneously.

The design system components achieve 100% code compatibility (design = code).