<insights>
Insights
Design systems, AI, and the craft of building for the web — published as we learn it, from real client work and our own open-source tooling. New posts also land on our Substack.
Follow on Substack →
54 more posts · newest first
Design Systems
Context-Based Design Systems, Revisited
A year into the AI-driven design systems era, the framework holds up. Here’s what’s changed, what’s clearer, and why context still beats autonomy.
Design Systems
Designers, You’re Not at the Kids’ Table Anymore
There’s never been a better time for designers to ship real code, and you don’t need to “learn to code” to do it.
AI
Figma MCP vs. Figma Console MCP: A Definitive Comparison
They share three letters in common. That’s about where the similarities end. A clear, category-by-category breakdown of what Figma’s official MCP server and Figma Console MCP can each do — and when to use which.
Design Systems
Code to Design Isn’t the Point. System Parity Is.
Figma’s new Claude Code to Figma workflow captures screens. Figma Console MCP understands systems. Both are useful, they just operate at different layers of the stack.
AI
Figma Console MCP: AI-Powered Design System Management That Changes Everything
Discover how Figma Console MCP complements the official Figma MCP by providing complete project-wide context instead of component-specific information. Extract your full design system, manage variables and tokens, and even modify your Figma files directly through AI conversation.
AI
A2UI: How AI Agents Build Real User Interfaces
What if AI agents could build real interfaces on demand, not code snippets you copy-paste, but actual components from your design system? A2UI makes that possible.
AI
One Dashboard for Everything: Why 2026 Will Be the Year of Less UI
Since Anthropic released MCP, I’ve been funneling all my contexts into one AI interface. My prediction for 2026: we’re going to be working with a lot less UI.
AI
You Can Vibe Almost Anything Now. That’s the Good Part and the Risk.
Vibe coding has made it possible to build almost anything, which also means you should think twice before paying for tools you could build yourself in an afternoon.
AI
Introducing Our New Course: AI & Design Systems
We’re teaming up with Brad and Ian Frost to share a grounded, real-world approach to using AI inside design system workflows while preserving the quality, clarity, and standards your products depend on.
Business
How We Ended Up Building a Continuous Context Workflow With Grain, Claude, and MCP
A look at how we slowly transformed simple meeting transcripts into a continuous context workflow that now powers proposals, discovery, prototypes, and code across our projects.
AI
Vibe Coding vs. Context Engineering
Not everything AI-assisted should be called vibe coding — context engineering is the discipline that transforms creative sparks into sustainable systems, with or without a vibe in sight.
Design Systems
Your Documentation Can Do More Than You Think
Company Docs MCP turns your existing documentation into an intelligent assistant that can serve your team and even power AI to build and validate better products.
AI
The Cascade Effect in Context-Based Design Systems
A clean design system should behave like well-structured CSS, where inheritance flows smoothly, overrides are rare, and each layer respects the next. Here’s how we apply that mindset to building resilient, AI-ready systems.
AI
When AI Meets Design Systems: My Storybook Webinar Recap
A behind-the-scenes look at my recent Storybook webinar on AI-powered design systems, including the lessons, surprises, and why this conversation matters.
Design Systems
What Happens When AI Actually Understands Your Design System
A quick demo showing how Claude, the Figma MCP, and the Design Systems Assistant MCP work together to deliver smarter, context-aware design system support.
Design Systems
Context-Based Design Systems: A New Model for the AI-Driven Product Lifecycle
What happens when every step in the product lifecycle inherits context from the one before it? You get a smarter, faster, more accurate way to build and the start of a new design systems era.
Design Systems
Designing for Developers—and the AI Agents Working Beside Them
How FigmaLint helps bridge the gap between design, development, and the AI agents transforming the product lifecycle.
Design Systems
Introducing Story UI: Accelerating Layout Generation with AI + MCP
Story UI is a new open-source tool that empowers non-developers to generate real layouts from design system components using AI and MCP, bridging the gap between development and product.
AI
Rethinking Design-to-Product Workflows with MCP, Design Systems, and Generative UI
By combining Figma’s MCP server, a structured design system, and natural language UI generation, we’re not just speeding up design-to-dev, we’re rethinking the entire path from idea to product.
AI
We Need a Spotify for Micro Apps
Micro apps are everywhere—but no one knows where to find them. Most creators don’t want to build startups, they just want to share what they’ve made. We need a place for that. A Spotify for small tools. A stage for indie software.
AI
The Rise of the Micro App: Why Smaller Software Is Winning
Big apps are bloated. Micro apps are personal. As software becomes easier to build, we’re seeing a shift from mass-market platforms to focused, single-purpose tools built by individuals, for individuals. This is the indie movement in software—and it’s just getting started.
AI
When the Tablets Came: What AI Feels Like to Those of Us Who’ve Seen Disruption Before
A reflection on how AI’s quiet disruption mirrors the fall of print during the rise of tablets — shifting roles, erasing opportunities, and redefining what ‘support’ really means.
AI
From Figma to Front-End: Using AI to Generate Real Code in Seconds
A behind-the-scenes look at how we’re using an open-source tool—Figma-Context-MCP—and repurposing it to generate scalable front-end code from structured design system components.
AI
In Defense of Vibe Coding
Vibe coding isn’t about perfect code, it’s about unlocking creativity, validating ideas fast, and sketching the future before committing to the final draft.
AI
Children and AI: The Next Generation of Learners
As parents, we all want our kids to be curious, independent thinkers. But in today’s digital age, how do we foster that curiosity without exposing them to the chaos of the open internet?
Design Systems
Unveiling the Complexity of Enterprise Design Systems
Some of the most recognizable companies in the world trust us to build and refine their design systems—but you’ll never see our work, and that’s exactly the point.
AI
AI-First
At Southleft, we’re embracing an AI-first mindset—leveraging AI as a collaborative tool to boost efficiency, enhance workflows, and redefine how we deliver value for our clients.
Business
5 Signs Your Construction Firm is Losing Time & Money on Inefficient Tech
Disconnected tools and outdated processes could be costing your construction firm time and money. Here are five signs your tech stack is slowing you down—and how to fix it.
Design Systems
Building Multi-Brand Design Systems: The Developer’s Perspective
Discover how developers can create scalable, multi-brand design systems that seamlessly bridge design and code for consistent, adaptable, and efficient front-end workflows.
Development
Demystifying Web Components: Understanding Slots (Part 1)
Discover how slots in Web Components allow for flexible content insertion, improving component reusability and customization.
Development
Demystifying Web Components: Understanding Slots (Part 2)
Explore advanced slot techniques including fallback content, slot assignment, and dynamic manipulation to create more powerful and flexible Web Components.
Development
Demystifying Web Components: Understanding Slots (Part 3)
Learn best practices for designing Web Components with slots and discover basic techniques for styling slotted content to create modular and visually customizable components.
Development
Demystifying Web Components: Understanding Slots (Part 4)
Master advanced styling techniques for slotted elements, focusing on CSS custom properties and targeting specific elements to create highly flexible and themeable Web Components.
Business
The Unexpected Origin of Southleft’s Name
Discover the unexpected and amusing origin story behind the name of our digital design and development agency, Southleft.
Design
A Guide to Streamlining Design and Development Collaboration with Token Studio
Discover how Token Studio streamlines design and development collaboration, enhancing workflows and maintaining consistency across projects.
Design Systems
Token Naming Conventions: The Key to a Scalable Design System
Discover the power of structured token naming conventions in building a scalable, consistent, and collaborative design system across all tiers.
Design Systems
Introducing Altitude, Southleft’s Comprehensive Design System Solution
Discover how Altitude by Southleft reimagines the intersection of design and development, offering a versatile, scalable system that seamlessly adapts from concept to code.
Development
Boost Your Search Functionality Using Algolia
In this blog, we’ll delve into how integrating Algolia with a website can streamline the way users interact with your content, using a practical implementation as our guide.
Design Systems
Accessible Design Systems: Building a Focus Trap With Web Components
Web component encapsulation can hinder keyboard navigation. Discover a reusable code pattern for accessible focus trapping, solving this critical accessibility challenge in your design system.
Project Management
Unleashing an Avalanche of Project Management Advancements in Web Development
In the pristine expanses of the backcountry, skiers aren’t just chasing the heady thrill of fresh powder; they’re navigating terrain where the wrong step can trigger a lethal avalanche. What if the meticulous risk management strategies that safeguard backcountry explorers could be applied to project
Design Systems
The Value of Design Tokens in Modern Web Development
Design tokens are the secret to building consistent, maintainable websites – discover their power and how to implement them in your workflow.
Business
“Knowing Is Half the Battle”: A Grown-Up Guide to Applying Childhood Lessons in Leadership and Life
The journey from knowledge to action is what completes the battle, bridging the gap between insight and achievement.
Development
Taming the Shadow DOM: Injecting Global Styles with Adopted Stylesheets
Achieve a unified look for your web application! Learn how to bridge the gap between web components’ Shadow DOM and global styles using the power of adopted stylesheets.
Development
Useful Git Commands for Front-End Developers
Here’s a list of useful Git commands to master to help you navigate your next front-end project!
Business
The Precarious Position of In-House Design Systems Teams Amidst Corporate Cutbacks
Recent layoffs in the tech world, including design systems teams, reflect broader dilemmas about integrating and valuing specialized roles amid economic challenges.
Development
Create Impressive Scroll-Based Animations with CSS scroll-timeline
Learn how to create immersive scroll-based animations based on user scrolling with no JavaScript required.
Development
The Future-Proof Choice: Web Components First Over JavaScript Frameworks
Behold the transformative POWER of web components offering highly convenient flexibility and efficiency across diverse frameworks and code ecosystems.
Business
The Highs and Lows of Running a Digital Design Agency: An Inside Look at Southleft
Navigating the terrain of agency ownership isn’t for the faint of heart. Explore the highs and lows, innovations and setbacks, that define Southleft’s story.
Design
Brad Frost’s Talk at FRONT ZURICH 2023 – Is Atomic Design Dead?
Brad Frost explores the future of design systems, touching on global collaboration and AI, at FRONT ZURICH 2023.
Business
Partnering with Enterprise Clients in a Modern Approach to Web Development
Southleft utilizes a tailored Scrummerfall approach to provide a smooth workflow for web projects. Our proven process promotes collaboration, transparency, and quality assurance from start to finish.
Business
The Importance of Synchronizing Your Design System and Product Strategy
Learn how aligning your design system with your product strategy can create a consistent user experience and give you a competitive advantage
Development
Native Web Components in Design Systems: A Comprehensive Guide
Dive into native web components – their pros, cons, adoption by big tech, framework integration, design system use, and challenges like lack of SSR support
Business
A Meeting of Minds: The Southleft Approach to Strategic Partnerships and In-House Augmentation
Explore our nuanced method of collaboration with fellow agencies and in-house teams, aiming to inspire creativity and strengthen connections in the digital sphere.
Business
The Many Hats of PMs in Digital Agencies
Watch me ramble on and fumble through my words while having a delightful conversation with the hosts of the “Agencies That Build” podcast.
<cta>
Is your design system AI-ready?
A 30-minute discovery call is the fastest way to find out where your leverage is.