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.

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

• 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-KEELED

Even-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 HEADWAY

Headway is a digital product agency building web and mobile apps for companies from startups to enterprise. Venture builders, not vendors.

🌐 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.

00: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 estimation

• How a product agency uses AI on real client projects
• Why LLMs are non-deterministic and what that means for enterprise software
• Claude Code, TideWave, Beads, Pencil.dev, and Open Code compared
• Figma MCP and design system integration with agentic workflows
• Ruby on Rails and Elixir as AI-friendly frameworks
• Making vibe-coded apps enterprise-grade
• Context windows, token efficiency, and the slop factor
• How AI changes software estimation and project scoping

### ABOUT EVEN-KEELED

Even-Keeled is a podcast about the craft of creating software and effective development teams, hosted by the development leadership at Headway. New episodes monthly.

### ABOUT HEADWAY

Headway is a digital product agency building web and mobile apps for companies from startups to enterprise. Venture builders, not vendors.

🌐 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)