Design Systems for AI and Agentic Development

How do design systems actually work in an AI-driven development workflow?  In this episode of Even-Keeled, the Headway team breaks down how they connect design systems directly to agents, why screenshots and vibe coding fall short, and what it takes to keep AI-generated code consistent at scale. Jon Kinney (CTO), Tim Gremore, and Dan Diemer explore how tools like MCP servers, agent files, and structured component APIs help agents stay aligned with real design standards, how their team achieved high accuracy by generating agent context from code, and why a design system is more than a UI kit. It is a living framework of rules, documentation, and reusable components that empowers both teams and solo developers to ship faster with fewer inconsistencies. Segments: 00:00 - Introduction 02:11 - Why design systems are more critical than ever with AI agents 03:53 - The levels of agentic coding from tab complete to terminal workflows 04:36 - Why a Figma screenshot only gets your agent so far 06:37 - When the language of your design system breaks at scale 07:26 - Connecting your design system to an agent through MCP 08:40 - Static agents files vs. dynamic MCP connections 13:11 - Treating AI agents like a new developer on your team 16:54 - Building an agents file for 90% accuracy out of the gate 24:00 - What a design system actually is and why it's more than a UI kit 34:05 - Directing agents at Legos instead of a bin of mixed mashed colors Topics Covered Design systems in the age of agentic development Why screenshots and vibe coding break down at scale Using MCP servers to connect agents to real design systems Agent files as lightweight context for consistent UI generation Turning design system code into agent-readable APIs Achieving high accuracy with structured component context Managing drift and keeping AI outputs on the rails Documentation, hooks, and workflows that reinforce consistency ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)

How does a dev agency actually use AI to ship production software? In this episode of Even-Keeled, the Headway development team pulls back the curtain on their real AI workflows, the tools they're using daily, and why experienced developers are writing the best code of their careers right now.Jon Kinney (CTO), Tim Gremore, and Dan Diemer talk through how they're helping clients leverage AI, what happens when vibe-coded apps need to go to production, and why convention over configuration gives frameworks like Ruby on Rails and Elixir a serious edge in the age of agentic development.SEGMENTS00:00 - How we help clients leverage AI 03:30 - First AI deployment: a baseball coaching app 4:00 - Frontier models and secure data access 05:09 - Design systems and agentic workflows 06:00 - Figma MCP and filling the tooling gaps 10:02 - Why AI gives different answers every time 11:27 - What actually needs generative AI vs. traditional automation 13:01 - Software spikes and controlling the slop factor 16:01 - Why experienced devs are writing better code with AI 17:23 - Convention over configuration as an AI advantage 20:00 - Making vibe-coded apps production-ready 25:23 - How clean code feeds the AI feedback loop 27:10 - Dev tooling: Claude Code, TideWave, Beads, Pencil.dev 30:08 - Figma to code and design system challenges 32:40 - Claude Max plans, token limits, and pricing 38:00 - Building your AI cyberdeck 42:50 - "Code is cheap" and why taste matters now 45:30 - How AI is changing project estimationTOPICS COVEREDHow a product agency uses AI on real client projectsWhy LLMs are non-deterministic and what that means for enterprise softwareClaude Code, TideWave, Beads, Pencil.dev, and Open Code comparedFigma MCP and design system integration with agentic workflowsRuby on Rails and Elixir as AI-friendly frameworksMaking vibe-coded apps enterprise-gradeContext windows, token efficiency, and the slop factorHow AI changes software estimation and project scoping ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)

Dive into the intricate world of system architecture, focusing on Conway's Law and its impact on software development. Learn how organizational communication structures can shape the architecture of systems. The Headway team discusses the balance between creating independent teams for faster development and the potential pitfalls of unnecessary silos, especially for startups and smaller teams.Listen to debates on the merits of microservices versus monolithic applications, with insights into how modern technologies like Elixir's flame pattern and serverless solutions like AWS Lambda can offer scalable and efficient solutions. They also discuss hosted environments, from on-premises setups to cloud-native solutions, and how new patterns and technologies make it easier for developers to build robust applications without deep DevOps expertise. This episode provides valuable perspectives and innovative approaches to system design and scalability. Tune in for a thought-provoking discussion that bridges theory and practical application in software architecture. Discussion:01:34 Diving into System Architecture and Deployment Evolution02:20 Exploring Conway's Law in Software Development04:04 The Challenges of Team Communication and Project Management06:45 Efficiency in Small Teams: The Power of Three09:04 Navigating Full Stack Development and Conway's Law17:14 Innovative Approaches to Hosted Infrastructure Technology27:32 Concluding Thoughts on Conway's Law and the Future of Software Development Resources Mentioned:Conway's Law and The Mythical Man-MonthConway's Law - WikipediaThe Mythical Man-Month by Frederick P. Brooks Jr.Elixir and the Flame PatternElixir LanguageChris McCord’s Flame Pattern Presentation at ElixirConf EUFlame Pattern LibraryFly.io PlatformServerless and Hosted EnvironmentsAWS LambdaSupabaseNetlifyVercelFull-Stack Development and LiveViewLiveView for ElixirHotwire by BasecampReact Server ComponentsRelated Articles and Blog PostsJason Fried’s Tweet on Team Size at 37signalsFly.io Blog on the Flame Pattern in JavaScriptBooks and FrameworksShape Up by BasecampRuby on Rails Framework Even-Keeled is a podcast by Headway, a digital product agency.https://www.headway.io/ ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)

The Headway development team dives into the power of design systems and seamless designer-developer collaboration.Learn about implementing design systems in various environments, automated design-to-code processes, and the crucial role of detailed design documentation.Find out how tools like Tailwind and Storybook can enhance or complicate development. The team doesn't shy away from discussing the real-world implications of maintaining design systems and the delicate balance of collaboration required between designers and developers.Discover how tools like Figma, Tailwind CSS, and Storybook can improve your workflow and consistency and reduce errors. Tune in for engaging debates and actionable tips on optimizing your design and development process. Whether you're a seasoned developer or just starting, this episode offers valuable takeaways you won't want to miss. 00:00 Introduction01:50 Defining Design Systems and Their Importance03:22 The Role of Figma in Design Systems07:51 Tailwind CSS and Its Impact on Design Systems10:28 Exploring Storybook and Its Alternatives17:32 Design Systems in Mobile Development22:04 Collaboration Between Designers and Developers33:02 The QA Process and Design Review34:48 Balancing Design Review with Development Cycles37:52 Upcoming Conference Talk on Design SystemsYouTube Content on Design Systems:Headway YouTube ChannelDesign System Course for FigmaTools and Libraries:Elixir Live Storybook: Elixir Live StorybookMediCode Application: MediCode AI/ML ProductView Component (GitHub): View ComponentLookbook (Storybook for View Components): LookbookChromatic:Chromatic: Chromatic Visual Testing ToolTailwind:Tailwind CSS: Tailwind CSSFigma and Design Systems:Figma: Figma Design ToolHeadway Design Systems Course: Headway Design Systems CourseShipwright Design System by Headway: Shipwright Design System Even-Keeled is a podcast by Headway, a digital product agency.https://www.headway.io/ ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)

Exploring AI in Development: Tools, Privacy, and Local Hosting InsightsThe Headway development team dives into various aspects of artificial intelligence (AI) and machine learning (ML) in development. Discussion topics range from using AI tools such as ChatGPT in browsers and code editors (including VS Code and Vim), to addressing privacy and security concerns surrounding AI. They explore options for running large language models (LLMs) locally to mitigate privacy issues and highlight Headway's internal developments in the AI space. The conversation also touches on consumer-facing AI tools, troubleshooting development issues with AI assistance, and the potential of hosting AI models locally for development purposes, showcasing Elixir's potency in the ML ecosystem through projects like Medicode and tools such as Live Book. 01:13 Exploring AI Tools and ChatGPT Experiences08:27 AI in Code Editors: Enhancing Developer Productivity23:13 The Future of AI in Troubleshooting and Development33:10 Local Hosting of LLMs and Elixir's Role in AI41:41 Wrapping Up: AI Innovations and Future Directions Even-Keeled is a podcast by Headway, a digital product agency.https://www.headway.io/ ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)

We're back! Join the Headway development leadership team for a chat about RailsConf, Vim and VS Code, PWAs, Turbo Native, Rails 8, Elixir, React, and more.We discuss recent steps Apple has taken constraining the capabilities of Progressive Web Applications (PWAs) in the European Union. The team also explores TurboNative, a tech solution that blends native and web apps, and Supabase, an open-source Firebase competitor built on Postgres. The resurgence in popularity of the Ruby on Rails framework is also discussed. The episode suggests that while JavaScript libraries like React continue to dominate, full-stack solutions offered by platforms like Rails are experiencing a revival, particularly for start-ups.00:00 Introductions and Discussion on Technology Trends and Workflows00:54 Exploring the World of Programming with Core Technologies01:21 RailsConf and the Journey of Submitting a Talk02:33 The Vim vs VS Code Debate08:23 Exploring Other Editors and the Power of Vim13:26 Apple's Decisions on PWAs and its Impact19:15 Introduction to Turbo Native19:51 Turbo Native vs Other Systems20:54 Turbo Native's Unique Features22:09 Turbo Native for iOS and Android22:34 Benefits of Turbo Native for Clients24:55 The Evolution of React and Rails25:51 The Resurgence of Rails26:51 The Future of React and Rails27:33 The Flexibility of React36:14 The Use of Supabase in Projects38:56 The Challenges and Rewards of Consulting39:51 Preview of Next Discussion: AI, ML, and Cloud NativeHear from Jon Kinney, Partner & CTO, Tim Gremore, Development Lead, Dan Diemer, Mobile Lead, and Chris Held, Development Lead. Even-Keeled is a podcast by Headway, a digital product agency.https://www.headway.io/ ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)

In this episode, Jon chats with Jacob Hebert and Matt Mcgee from the Headway development team about creating static sites with Gatsby. They dive into their experience with Gatsby on client projects and solutions they’ve found most helpful for CMS integration, styling, SEO, and more. Even-Keeled is a podcast by Headway, a digital product agency.https://www.headway.io/ ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)

Team retrospectives are a great way to understand what your team can improve on after completing a project. In this episode, Jon chats with Andrew Stuntz, Senior Developer at Headway, about specific ways you can make your team's retrospectives more impactful. That way you can get the most out of your meetings, prevent your team from talking in circles, and do better work together. Even-Keeled is a podcast by Headway, a digital product agency.https://www.headway.io/ ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)

In this episode, we discuss storytelling through pull requests and git commit messages and dig into how to effectively use git rebase to craft the story of your code. Even-Keeled is a podcast by Headway, a digital product agency.https://www.headway.io/ ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)

Jon Kinney, Partner & CTO, and the development team at Headway explore development methodologies and best practices that help teams build successful software. Learn about the format and content of the podcast as well as some background about your host.Even-Keeled is a podcast by Headway, a digital product agency.https://www.headway.io/ ABOUT EVEN-KEELEDEven-Keeled is a podcast about building software in the age of AI. From design systems and agentic workflows to vibe-coded apps and more, the development leadership team at Headway shares what's working, what's not, and what they're learning on real client projects. No hype. Just how the work gets done. New episodes monthly.ABOUT HEADWAYHeadway is a full-cycle product studio. We work in four areas: design systems, digital transformation, new products, and artificial intelligence. We partner with growth-stage B2B SaaS companies, mid-market teams, and enterprise innovation groups.🌐 Headway Website: [https://www.headway.io\](https://www.headway.io)📞 Book a Free Consultation: [https://www.headway.io/free-consultation\](https://www.headway.io/free-consultation)