Design Systems, AI, and the Art of Separation of Concern

A design system is a shared language for designers, developers, product teams, and AI tools. In this talk, I looked at what that language needs to define: how components look, how interactions feel, and how the interface behaves through loading, errors, validation, and accessibility. I also explored shared ownership and why gaps in the system leave developers making decisions on their own, gradually introducing inconsistency.

From there, I connected design systems to separation of concerns and the single responsibility principle, using a React log viewer to show how UI, data fetching, formatting, and types can be separated. I shared seven practical tips covering focused modules, design tokens, a single source of truth, lint rules, consistent naming, and teaching AI tools the architecture. The aim was to make design decisions explicit and keep the code organised enough for both the team and its AI assistants to follow them.