This collection highlights my ongoing explorations at the intersection of AI and design systems, along with the tools we’ve been building at Southleft to bridge the gap between design and engineering. From new workflows and MCP integrations to AI-powered auditing tools, these posts share experiments, insights, and practical applications that help digital teams ship faster with higher quality.
Introducing a new model for AI-enhanced product development, where structured context flows seamlessly between design and engineering.
**Doing More With Your Design System in Figma 🎥**
A hands-on workshop hosted with Joey Banks (Baseline Design), covering how to build and scale robust design systems directly in Figma. This session dives into structuring flexible, maintainable components and libraries; connecting design and engineering using Figma MCP; and exploring how tools like Figma Make and Storybook bring your system to life beyond the canvas.
Vibe Coding Design Systems – Into Design Systems Online Jam
A hands-on, community-driven session exploring new models for building and documenting design systems with AI. Featuring lessons on spec-driven development, exporting and structuring design tokens, and building scalable documentation sites using Figma Make, Figma MCP, and modern context-based workflows. Includes TJ’s CBDS talk on preparing design systems for the AI-driven product lifecycle, showing how context and real-world fidelity accelerate collaboration between design and engineering.
When AI Meets Design Systems: My Storybook Webinar Recap
A behind-the-scenes reflection on TJ’s recent Storybook webinar focused on the intersection of AI and design systems. The post covers live demo lessons, audience insights, and why design systems give AI the context and structure it needs to be genuinely useful. Includes thanks to the Storybook team and practical takeaways for anyone building modern digital products.
A diagnostic and reporting tool for Figma that goes far beyond what Dev Mode MCP offers, giving AI and design teams deep, project-wide intelligence—from token usage to plugin debugging to cross-project audits. Unlike generator tools, Console MCP provides raw, structured context for analysis, validation, and scalable design system diagnostics.
Part 1: Why Figma Console MCP?
Explains the limitations of Dev Mode MCP and introduces Console MCP as a way to scan, audit, and monitor all layers of your Figma projects—including real-time console logs and system-wide diagnostics.
Part 2: From System-Wide Awareness to Pinpoint Precision
Demonstrates how Console MCP lets you audit multiple projects at scale, zoom in on component details, spot inconsistencies early, and achieve true cross-project intelligence—all within Figma.