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.


Context-Based Design Systems

Introducing a new model for AI-enhanced product development, where structured context flows seamlessly between design and engineering.

Figma MCP → Web Components → React Storybook → Story UI

A behind-the-scenes look at an end-to-end workflow for turning Figma components into production-ready UI.

Using Claude Desktop with Figma MCP, Story UI, and Design Systems Assistant

How Claude Desktop integrates into the design systems toolchain, enabling faster, smarter iteration.

Generate Stories in Story UI using Claude Desktop

Demonstrating automated story generation for components directly in Story UI using Claude.

**Story UI – Latest Updates, Imagine Generating Real Working UI Layouts**

New capabilities in Story UI, including AI-powered UI layout generation from simple prompts.

DSAudit – The Design Systems Codebase Auditor