AI & Design Systems
Foundational Concepts
Context-Based Design Systems
Introducing a new model for AI-enhanced product development, where structured context flows seamlessly between design and engineering. This foundational framework shapes how we think about design systems in the age of AI—ensuring that every phase in the workflow receives and passes along context, growing smarter and more capable with every step.
Context-Based Design Systems
Introducing a new model for AI-enhanced product development, where structured context flows seamlessly between design and engineering. This foundational framework shapes how we think about design systems in the age of AI—ensuring that every phase in the workflow receives and passes along context, growing smarter and more capable with every step.
Open Source Tools
Figma Console MCP
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.
Explore the 5-part series:
Figma Console MCP
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.
Explore the 5-part series:
Company Docs MCP
A free, open-source service that transforms your existing documentation into a remote MCP, making it instantly accessible to people and AI across Slack, Claude Desktop, Cursor, and more—all without duplicating your source of truth. Your docs become a living, queryable resource that works wherever your team does.
Company Docs MCP
A free, open-source service that transforms your existing documentation into a remote MCP, making it instantly accessible to people and AI across Slack, Claude Desktop, Cursor, and more—all without duplicating your source of truth. Your docs become a living, queryable resource that works wherever your team does.
Harvest MCP
A free, open-source connector that turns your Harvest data into actionable insights for agencies, ops, and sales teams. Harvest MCP lets you ask plain-language questions about profitability, utilization, historical client value, and pipeline opportunities—no more exporting, pivoting, or guesswork.
Watch the demos:
Harvest MCP
A free, open-source connector that turns your Harvest data into actionable insights for agencies, ops, and sales teams. Harvest MCP lets you ask plain-language questions about profitability, utilization, historical client value, and pipeline opportunities—no more exporting, pivoting, or guesswork.
Watch the demos:
Workshops & Talks
When AI Meets Design Systems
A behind-the-scenes reflection on our 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.
When AI Meets Design Systems
A behind-the-scenes reflection on our 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.
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.
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.
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.
AI-Enabled Design Systems and Product Design
A recorded talk exploring the intersection of AI, design systems, and product design. For a while it felt like design systems were going to be disrupted by AI—this presentation explores how they’re actually becoming more essential than ever.
AI-Enabled Design Systems and Product Design
A recorded talk exploring the intersection of AI, design systems, and product design. For a while it felt like design systems were going to be disrupted by AI—this presentation explores how they’re actually becoming more essential than ever.
AI & Design Systems
A new online course from Brad Frost and Southleft. Learn how to apply AI to design systems in ways that are grounded, practical, and shaped by real work with large-scale teams.
AI & Design Systems
A new online course from Brad Frost and Southleft. Learn how to apply AI to design systems in ways that are grounded, practical, and shaped by real work with large-scale teams.
Design System Tools
DSAudit – The Design Systems Codebase Auditor
A tool for auditing and validating the health of a design system’s codebase. DSAudit helps teams understand their system’s structure, identify issues, and maintain consistency across their component libraries.
DSAudit – The Design Systems Codebase Auditor
A tool for auditing and validating the health of a design system’s codebase. DSAudit helps teams understand their system’s structure, identify issues, and maintain consistency across their component libraries.
FigmaLint – The Figma Design Linter
An AI-powered plugin that audits Figma files for consistency, accessibility, and token usage. FigmaLint helps teams maintain design quality standards across their Figma files.
Note: Figma recently announced “Check Designs,” a core linter that overlaps with FigmaLint. Read our reflection on Schema 2025.
FigmaLint – The Figma Design Linter
An AI-powered plugin that audits Figma files for consistency, accessibility, and token usage. FigmaLint helps teams maintain design quality standards across their Figma files.
Note: Figma recently announced “Check Designs,” a core linter that overlaps with FigmaLint. Read our reflection on Schema 2025.
Design Systems Assistant MCP
A dedicated MCP server for design systems, built to be a trusted source for AI tooling. The Design Systems Assistant provides structured, reliable context that AI tools can use to understand and work with your design system.
Design Systems Assistant MCP
A dedicated MCP server for design systems, built to be a trusted source for AI tooling. The Design Systems Assistant provides structured, reliable context that AI tools can use to understand and work with your design system.
Altitude – Southleft’s Design System
Our in-house design system, built as a testbed for AI integrations and workflow experiments. Altitude powers demos and product prototypes like Story UI and FigmaLint, serving as our laboratory for exploring the future of design systems.
Altitude – Southleft’s Design System
Our in-house design system, built as a testbed for AI integrations and workflow experiments. Altitude powers demos and product prototypes like Story UI and FigmaLint, serving as our laboratory for exploring the future of design systems.
Story UI
Story UI – Demo and Announcement
Story UI connects design systems to AI-powered workflows, enabling the generation of real working UI layouts from simple prompts. Explore the latest updates and capabilities:
Story UI – Demo and Announcement
Story UI connects design systems to AI-powered workflows, enabling the generation of real working UI layouts from simple prompts. Explore the latest updates and capabilities:
Workflow Demos
Figma MCP Integrations
Explore our demos showing how Figma MCP integrates into AI-assisted design systems work:
- Rethinking Design-to-Product Workflows with MCP, Design Systems, and Generative UI
- Figma MCP Demo – Early explorations of Figma MCP integration
- Figma MCP → Web Components → React Storybook → Story UI – End-to-end workflow
- Using Claude Desktop with Figma MCP, Story UI, and Design Systems Assistant
Figma MCP Integrations
Explore our demos showing how Figma MCP integrates into AI-assisted design systems work:
- Rethinking Design-to-Product Workflows with MCP, Design Systems, and Generative UI
- Figma MCP Demo – Early explorations of Figma MCP integration
- Figma MCP → Web Components → React Storybook → Story UI – End-to-end workflow
- Using Claude Desktop with Figma MCP, Story UI, and Design Systems Assistant