I recently finished an incredible Smashing Workshop on AI Interfaces with Vitaly Friedman, and one specific lesson has completely shifted what I am building this week.
We spend so much time obsessing over the "input" side of AI—the chat UI, the discoverability patterns, the prompt suggestions. But Vitaly showed an example of a first-draft AI prototype that highlighted a massive problem on the "output" side: the AI was generating incredibly valuable insights, but presenting them to the user in a massive, unreadable wall of text. 🧱
It was a great reminder of a core UX truth, and it sparked a huge learning moment for me.
The "Dumb" Component Strategy ⚙️
To handle these dynamic AI outputs, I realized I needed to shift my approach and design flexible, "dumb" front-end presentational components that can catch whatever wall of text the AI firehoses at it. 🚒💦
This has completely changed my workflow. Now, I design these presentational components first, define the exact JSON format I am expecting, and then iterate back-and-forth with our developers. We collaborate closely, tweaking the payload until they are sending a well-formatted JSON structure that these "dumb" components can easily digest. Their entire job is to sit there, wait to be handed that payload, and automatically map the data into a layout that human eyes can actually scan and understand. 🧩
This was my first real foray into designing a UI meant to accommodate "anything the AI spits back," and it really stretched my brain! 🧠
Designing for the Unpredictable 📏
I spent the week creating a series of dynamic cards designed to catch and format these AI insights. Because you never quite know how verbose an AI model is going to be, the design constraints had to be rock solid:
Typography Guardrails: I implemented strict line-length clipping and strategic CSS spacing so that even a highly wordy AI response doesn't break the container or ruin readability.
Contrast & Accessibility: Every card state was audited to ensure it maintains strict WCAG AA contrast compliance, regardless of the data density.
Accessible Data Visualization 📊♿️
Of course, not all AI payloads are just text. Sometimes the AI returns quantitative data that needs to be visualized.
To handle this, I integrated Visa's open-source chart and graph components into the sandbox. If you work in front-end design, you know how rare it is to find data visualization components that have robust, built-in WCAG accessibility. Visa's library handles this beautifully, allowing the AI to pass JSON data into charts that are natively accessible to screen readers.
The Next Step: The Pressure Test 🛠️😅
This is such a fun, challenging way to start designing. Instead of creating perfectly curated, static Figma mockups, I am building resilient, rule-based containers.
I am in the process of handing these components over to the repository now. I honestly can't wait until this gets pressure-tested by the developers with real backend data to see how my front-end logic holds up, where it breaks, and what adjustments I need to make next.
#UXDesign #DesignSystems #AI #Accessibility #DataViz #Frontend #WCAG