Teaching AI to Use Your Design System

AI can generate interfaces in seconds. But without awareness of your design system, it can also generate inconsistency, technical debt, and frontend chaos just as quickly. Join Alex Andrade, Senior Design Engineer at 7shifts, for a practical talk and live demo exploring how AI is changing the relationship between design systems, prototyping, and frontend development. At 7shifts, the design system “Sous Chef” connects a Figma UI kit with a React component library. Before AI, the workflow was relatively straightforward: designers created interfaces using the UI kit, and developers mapped those designs to production-ready React components. ​About the Speaker ​Alex Andrade (  / palexandrade  ) is a Senior Design Engineer at 7shifts and the founding architect behind Sous Chef, the company’s design system connecting Figma and React. His work focuses on design systems, frontend architecture, developer experience, and building scalable UI workflows for modern product teams. ​Event Sponsor ​This event is sponsored by 7shifts (https://7shifts.com). 7shifts is a restaurant team management platform designed to help restaurants simplify scheduling, payroll, communication, hiring, and labor operations. Used by thousands of restaurants across North America, 7shifts builds tools that help restaurant teams operate more efficiently while improving the employee experience. 0:00 - Intro to TechTank and community 3:21 - 7shifts company overview and mission 7:51 - AI-first strategy at 7shifts 10:50 - Introduction to the talk: Teaching AI to use your design system 12:47 - The challenge: AI, design systems, and technical debt 17:28 - What is a design system? 19:44 - Live demo: 7shifts "Sous Chef" design system 25:14 - Identifying AI-generated UI inconsistencies 33:09 - Our solution: Building an MCP server for the design system 36:59 - Practical example: AI prototyping with MCP context 42:45 - Demo: AI building a page without vs. with MCP context 1:02:46 - Summary: From component libraries to context architecture 1:03:22 - Q&A session with the audience 1:19:00 - Closing remarks and upcoming events