Agentic Design Systems in 2026 with Brad Frost

Name: Agentic Design Systems in 2026 with Brad Frost
Uploaded: 2025-12-11T21:01:11.000Z
Duration: 2 h 40 min 51 s

Introduction to Design Systems and Agentic Design

Opening Remarks

The speaker humorously discusses their experience with online shopping ads leading to ridiculous clothing choices, hinting at the influence of social media on personal style.

They mention a fondness for vintage shopping, specifically highlighting a Whitney Houston tour t-shirt from 1991 as an example of their unique finds.

Webinar Setup

The host acknowledges the record number of participants (587), thanking attendees for joining the interactive webinar format.

Ground rules are established: questions should be directed to the Q&A tool for better management and response rates during the session.

Understanding Design Systems

Purpose of Design Systems

The discussion shifts to design systems, emphasizing their importance in creating reusable components that generate code effectively.

A problem is identified: agents often ignore existing patterns in favor of creating their own, which undermines the purpose of design systems.

Challenges Faced by Agents

The speaker notes that agents consume context differently than humans, relying on metadata types and examples rather than traditional learning methods.

There’s a call to action for improving how information is presented within design systems to encourage proper usage among agents.

Insights from Brad Frost on Agentic Design

Contextual Understanding

Brad Frost joins the conversation, reflecting on previous discussions about AI's integration with design systems and its evolving nature.

He highlights that what breaks first when agents use design systems varies daily, indicating a complex relationship between technology and user interaction.

Importance of Contextual Clarity

Frost emphasizes that even if components are correctly utilized (e.g., web components like DS-button), there can still be significant gaps in understanding how they fit into broader designs.

Understanding the Role of Agents in Development

The Concept of Seams in Development

The introduction of agents into development creates new seams, which are opportunities but also points where breakdowns occur due to loss in translation.

When seams aren't seamless, it leads to a drop-off in communication and fidelity, causing agents to get lost at various stages.

Automation and Technology's Role

There is a human tendency to seek automation solutions for issues arising from these seams, aiming for plug-and-play systems that synchronize environments like Figma and Storybook.

A new non-deterministic paradigm emerges that can be inventive but may also complicate matters further.

Coverage and Validation: Key Components

In Storybook Land, two critical aspects under the branch of structure are coverage (what agents can reuse) and validation (what agents must respect).

Coverage requires predictable patterns through types, normalized examples, composition rules, and test coverage; missing patterns force agents to improvise poorly.

Importance of Machine-readable Context

Transforming core coverage into machine-readable context is essential for optimization as it reduces token usage and increases speed during agentic workflows.

Balancing Coverage with Validation

Validation ensures adherence to UI standards through tests and human reviews. It ties agent success to concrete signals like tests and sign-offs.

Both coverage (providing patterns) and validation (keeping output on track) are necessary for effective system operation.

Identifying Gaps in Design System Teams

Current Challenges Faced by Teams

Many design system teams face significant gaps in testing practices; they often have inconsistent testing flavors leading to uneven component quality.

Discrepancies Over Time

Components created years ago may not align with current coding standards due to organic changes over time, resulting in inconsistencies within the component library.

Need for Comprehensive Testing Approaches

Effective testing should encompass multiple flavors beyond just unit tests; interactive tests and visual tests are crucial for comprehensive evaluation.

The Value of Tests in Confidence Building

Despite personal aversion towards testing, it's acknowledged that thorough testing is vital for launching projects confidently.

As we enter a new era of development, robust testing becomes essential not just as a checkbox but as a means to ensure quality outputs from both agents and humans.

Garbage In, Garbage Out Principle

The discussion highlights the principle that poor input quality leads to poor output quality within design systems.

Operationalizing Agentic Design Systems

Challenges in Design System Implementation

The effectiveness of a design system is contingent on its functionality; if it fails to work properly, users cannot rely on it for accurate implementation.

Operationalizing agentic design systems is complex and not as straightforward as simply flipping a switch, indicating the need for deeper discussions around this topic.

Workflow Dynamics in Design Systems

Understanding the workflow is crucial; agents operate within a loop where the design system plays an integral role.

The initial steps involve agents referencing design patterns, generating code, and conducting tests that act as guardrails against functional bugs and accessibility violations.

If tests fail, errors are communicated back to agents for iteration. The goal is to automate this process to minimize human intervention while ensuring quality control.

Self-Updating Mechanism of Design Systems

Once components pass validation by humans, they can update the design system automatically, creating a self-updating record that keeps agents informed with current context.

A complete loop ensures that the design system serves as the operational truth for AI workflows, emphasizing its foundational importance.

Introduction of MCP at Storybook

Storybook is developing an MCP (Manifest Component Protocol), which will connect users' projects with existing UI patterns effectively.

A demo of the MCP server aims to showcase how it facilitates interaction between components and their respective stories.

Demonstration of MCP Functionality

Kyle introduces himself as a DX engineer working on the MCP server designed to analyze component properties and API usage based on user-defined stories.

The agent leverages well-crafted stories from Storybook to enhance its understanding and application of components during development.

Overview of Meal Drop Application Demo

Kyle presents a demo using an app called Meal Drop, showcasing how shared components are organized within a monorepo structure for better management across packages.

He explains that the MCP server extracts information from these components and provides both JSON output for agents and an HTML viewer for developers’ reference.

This structured approach captures key insights from the transcript while providing timestamps for easy navigation.

Overview of the Development Environment

Project Structure and Components

The project consists of multiple pages, including a homepage and a restaurant detail page, with some missing global styles.

There are two separate Storybooks: one for components as a design system and another for the project itself, each linked to different MCP servers.

MCP Server Configuration

The speaker uses VS Code with Copilot and Claude Sonnet 4.5 as an agent, configured with two MCP servers—one for the app and one for UI development.

Each MCP server has distinct toolsets; one focuses on documentation while the other enhances development capabilities by enabling efficient story creation.

Utilizing Documentation Tools

Component Documentation Retrieval

A prompt is issued to add a customer reviews component that includes avatars, names, star ratings, and review text using placeholder images.

The agent retrieves detailed documentation about necessary components like stars and typography to optimize its context for generating results.

Optimization Techniques

Without the MCP server, the agent would need to search through raw source code; instead, it utilizes structured data optimized for quick access to component information.

Research indicates that formatting choices (XML vs. Markdown vs. JSON) significantly impact token usage efficiency during evaluations in Storybook MCP.

Development Toolset in Action

Story Creation Process

Transitioning from documentation tools to development tools allows the agent not only to create stories but also provide links for human validation of those stories.

The utility of this process lies in ensuring directional correctness; once local tests pass, developers can confirm that generated outputs align with expectations.

Live Demonstration of Features

During a live demonstration, various stories were created successfully—including default views and individual reviews—showcasing real-time editing capabilities.

The ability to change ratings dynamically during testing exemplifies how effectively Storybook integrates user feedback into its development workflow.

Interactive Development and Design Systems

Initial Reactions to the Code

The speaker expresses excitement about seeing the code for the first time, indicating a positive reaction to its potential.

Discussion begins on creating an interactive review form component that allows users to engage with content dynamically.

Importance of Interactivity in Design

Emphasizes the complexity of testing interactions within design, highlighting the need for scaffolding and assembly during team meetings.

The ability for stakeholders to suggest changes in real-time is seen as revolutionary, merging structured coding with democratic design processes.

Balancing Structure and Creativity

The conversation touches on combining well-engineered components with user-friendly design tools, allowing everyone to contribute while maintaining control over the project.

The concept of "vibe coding" evolves into "vibe engineering," suggesting a more rigorous approach that keeps human oversight in development.

Rigor in Production Environments

Acknowledges challenges faced by large companies when using certain tools; stresses the importance of having a structured approach to avoid chaos.

Highlights how established standards and test suites empower teams to maintain control over their projects while utilizing innovative technologies.

Demonstrating Practical Applications

Plans are made to launch a review form quickly, showcasing efficiency in development cycles.

A demonstration reveals that existing UI elements are reused effectively within the new component, emphasizing consistency across designs.

Accessibility in Design Systems

Importance of Accessibility in Product Experience

The components built with accessibility best practices do not guarantee an accessible product experience; the assembly and composition of these components are crucial.

Even if a design system is well-designed, the overall user experience may lack accessibility due to how components are integrated or utilized.

A demonstration highlights the necessity of reusing design systems; missing elements like text areas can lead to accessibility issues when components operate independently.

Enhancements in Development Tools

A new feature in Storybook allows users to copy story names or open them directly in an editor, enhancing workflow efficiency.

Upcoming developments include a testing toolset that integrates testing directly into Storybook, transforming stories into real tests using VTest for faster execution.

Accessibility Testing Insights

The integration of accessibility checks through Axe within the testing framework provides immediate feedback on component accessibility during development.

Identified errors such as heading order issues illustrate common pitfalls in maintaining proper structure for accessible content.

Implementation and User Interaction

Demonstrating a reusable component's implementation on a restaurant detail page emphasizes practical application and user interaction with the product.

Utilizing Git for version control simplifies managing changes compared to traditional methods, showcasing effective collaboration among team members.

Collaborative Prototyping and Feedback Loops

Rapid prototyping within Storybook allows teams to visualize product features interactively, facilitating discussions across departments about desired functionalities.

The ability to quickly assemble pages fosters collaboration between technical and non-technical stakeholders, making it easier for diverse teams to contribute ideas effectively.

Understanding the Role of Developers in Modern Workflows

The Empowerment of Developers

Developers are likened to "mouth coding," where they articulate their ideas verbally, and others help facilitate this process. This collaboration is seen as a powerful moment for developers to engage more deeply with their work.

Historically, developers have been positioned low in the workflow hierarchy, even within agile frameworks. The traditional designer-developer handoff has become increasingly ineffective over time.

Enhancements Through Storybook

The workshop environment provided by Storybook offers visual outputs that enhance accessibility for many users, making it easier to understand and interact with code visually.

MuleDrop's integration of mock data allows for dynamic testing without hardcoding reviews, showcasing how tools can adaptively support development processes. This flexibility is beneficial for using Storybook effectively.

Testing and Automation

Storybook now supports automated tests through its integration with the MCP server, aiming to create a self-healing loop that not only develops components but also runs comprehensive tests on them automatically. This includes component tests beyond basic checks like linting or type checking.

The goal is to ensure functional integrity by validating components in Chromatic after development, emphasizing the importance of quality input leading to quality output (garbage in, garbage out).

User Simulation and Component Testing

Component tests simulate real user interactions by running in browsers rather than just executing unit tests via CLI; this provides a closer approximation of actual user behavior when interacting with applications. Understanding this distinction is crucial for effective testing strategies.

Visualizing changes during development helps stakeholders quickly identify new sections or modifications made within the application interface, enhancing collaborative feedback loops among team members.

Democratizing Design and Development

Designers who understand code but do not actively code themselves can still contribute meaningfully within these workflows by utilizing tools like Storybook to assemble product pages from snippets of code easily—democratizing access to design capabilities across teams. This shift empowers designers significantly compared to previous limitations they faced in technical environments.

Democratizing Design and Development

The Role of Code Packages and Monorepos

The discussion emphasizes the importance of establishing a code package and monorepo, which simplifies the process for non-professionals to engage with coding. Once set up, users can input instructions without needing extensive design or development skills.

Enhancing Collaboration Between Designers and Developers

Engineers express frustration over reviewing broken or subpar code from prototypes. The new approach aims to streamline this process, bringing prototypes closer to production quality regardless of who initiates the prompt.

Figma's Position in Modern Workflows

A question arises regarding Figma's relevance as a design system across multiple technologies (web, Android, iOS). There is speculation about whether Figma will remain central or become less significant in future workflows.

Predictions on Design Tools Evolution

The speaker predicts that there won't be a single correct workflow moving forward. Instead, various tools like Figma will continue evolving within their ecosystems while new tools emerge alongside them.

Disruption in Design Processes

This moment is described as disruptive for the industry, indicating that future methodologies will differ significantly from traditional practices established over decades.

Understanding Design Systems in Figma

In discussing design systems within Figma, it’s noted that they serve as contracts ensuring components exist in code form. This relationship between design and implementation is crucial for effective collaboration.

Component Representation Across Tech Stacks

When designers use components from Figma (e.g., buttons), they signal developers to utilize these elements consistently across different platforms while maintaining a unified design language.

Simplifying UI Representation

The conversation highlights that UI representation may become less critical; instead, focus shifts towards component APIs and how they are documented through YAML and Markdown files.

Translation of Components into Libraries

Recent work involves translating component requirements into various libraries (React, iOS, Android), showcasing how LLMs can effectively bridge different programming languages.

Process Over Artifacts in Consulting

Emphasizes that processes are vital for delivering results in consulting environments. Maintaining structured workflows ensures alignment among team members throughout project development.

Upcoming Demonstration

A brief mention indicates an upcoming demo intended to showcase additional features or insights related to the discussed topics before transitioning into Q&A.

Testing Interactivity in Design Systems

Exploring Interactive Testing

The speaker initiated a prompt to test the interactivity of a form without specifying stories, indicating an exploratory approach to testing.

Upon checking for interaction tests within the project, it was confirmed that the project utilizes play functions, leading to the generation of multiple interactive stories with validation checks.

Although some component tests failed, the overall success of generating interactive stories highlighted effective testing capabilities integrated into the development environment.

Enhancing Ergonomics in Development

The immediate feedback loop in Storybook allows developers to see and interact with changes quickly, significantly reducing time between identifying issues and correcting them compared to traditional methods.

The integration of console errors and UI elements enhances user experience by grounding abstract concepts into tangible interactions.

Understanding Agentic Design Systems

Nature of AI and Design Systems

The unpredictable nature of AI means that repeated prompts yield varying results; this variability must be accepted as part of working with AI systems.

A new tool called Storybook Evals has been introduced to benchmark design systems against specific test prompts, allowing for performance assessment over time.

Evaluating System Performance

Test prompts help evaluate quality metrics such as cost (token usage), speed, and code conformity within design systems.

Understanding system drift is crucial since design systems are dynamic entities that evolve over time due to updates in tools and models.

Trade-offs in Design System Optimization

Balancing Quality, Cost, and Speed

Each design project faces unique trade-offs; optimizing for one aspect often compromises another—illustrated by the adage "good, cheap, fast: pick two."

Running evaluations reveals patterns in AI behavior that can inform decisions about context usage when comparing different formats like Markdown and XML.

Quantifying Impact on Efficiency

For years, justifying design system benefits has been challenging; however, recent evaluations provide concrete evidence demonstrating how agents perform better with structured design systems.

These insights offer valuable metrics for assessing human efficiency alongside agent performance when utilizing a defined design system.

Wrap-Up and Future Directions

Conclusion of Presentation

The speaker wraps up the presentation, expressing hope that it serves as a starting point for building an agentic design system.

Acknowledgment of attendees is made, with a reminder about an upcoming Q&A session.

Upcoming Course on AI and Design Systems

Introduction to a new course focused on AI and design systems, led by Brad Frost and his collaborators.

The course aims to help participants navigate the current landscape filled with noise and rapid changes in technology.

Key Concepts in the Course

Emphasis on evaluating the entire design system landscape, including tools like Figma, to enhance product development.

The course intends to be accessible not just for engineers or designers but for anyone involved in digital product success.

Community Building and Support

Creation of a community where individuals can share experiences and insights related to design systems amidst changing technologies.

Focus on foundational concepts that endure despite evolving tools, promoting collaboration over traditional methods like JIRA ticketing.

Q&A Session Insights

Architecting Design Systems

Discussion on recommendations for architecting design systems ready for MCPs (Minimum Component Products) and LEMs (Lightweight Engineering Models).

Importance of Maintenance in Design Systems

Highlighting the need for ongoing maintenance within design systems due to entropy; components may degrade over time without updates.

Role of Component Manifest

Explanation of how component manifests can indicate outdated elements within a system, serving as a tool for maintaining relevance.

DesignOps and Its Value in Modern Organizations

The Challenge of Demonstrating Value

Eric raises a concern about DesignOps struggling to showcase its value amidst increasing innovation demands.

There is a perceived separation between design, DesignOps, and engineering, leading to challenges in collaboration and integration.

New interfaces allow non-technical individuals to engage in software creation, expanding the role of designers beyond traditional boundaries.

Embracing Change in Roles

Designers and DesignOps professionals are encouraged to adapt their perspectives on their roles and responsibilities.

The speaker emphasizes the need for organizations to embrace flexibility and redefine job functions as they navigate new challenges.

Shifting Responsibilities in Design Systems

Design system maintainers must evolve their responsibilities to include quality checks and governance across the organization.

The focus has shifted from merely maintaining design systems to ensuring that all outputs meet quality standards through structured processes.

Defining a Design System

A design system is described as the official narrative of how an organization designs and builds digital interfaces.

It encompasses UI standards, design libraries, code libraries, documentation, people, and processes that collectively shape this narrative.

Quality Assurance in Digital Interfaces

Emphasizing quality at the system level unlocks efficiency at scale while preventing chaos with new tools being introduced into workflows.

The importance of thoughtful architecture is highlighted as essential for achieving high-quality results rather than just functional outputs.

Future Perspectives on UI Generation

Discussion shifts towards generative aspects of UI development where prompts may become unnecessary as systems generate UIs contextually based on established components.

Examples like Salesforce's Agent Force illustrate potential advancements in product experiences driven by these generative capabilities.

Web Component-Based Design Systems and Their Impact

Evolution of User Interfaces

Discussion on the transition from traditional dashboard designs to web component-based systems like Lightning 2, which allow for dynamic UI creation tailored to user needs.

Emphasis on the power of the Lightning Design System in enhancing user experience by providing a more intuitive interface compared to conventional chatbots.

Real-Time UI Generation

The ability to assemble UIs in real-time is highlighted as a significant advancement, unlocking new digital experiences while raising questions about their effectiveness.

Reference to a Google research study indicating users' preference for generative UIs over static text outputs from chatbots, especially for complex learning tasks.

Future Considerations in UI Development

Importance of establishing constraint and validation systems in developing future UIs that ensure quality and relevance.

Acknowledgment of the multifaceted nature of evolving technologies, suggesting that both old and new interfaces will coexist and create opportunities.

Responsibility in Design Choices

Call for designers to embrace an abundance of tools without feeling limited, stressing the responsibility to ensure that new developments are beneficial.

Concluding thoughts on the importance of evaluating whether emerging technologies provide good solutions, emphasizing collective responsibility within the industry.

Closing Reflections

Expression of gratitude towards participants for engaging discussions aimed at advancing industry standards and practices.