Skip to content

<open-source>

We publish our homework

If we recommend a workflow, it’s because we’ve already built and shipped it. Every tool here came out of real client work — open-source, in production, used by real teams.

Southleft on GitHub The practice behind the tools

<the-tools>

Five tools, one thesis

AI is only as good as the structured context it can reach. Each of these puts more of your design system within reach.

$ npx figma-console-mcp

mcp server

AI-powered design system management inside Figma.

Gives AI assistants full read and write access to your Figma design system. Extract variables, components, and styles as structured data — or create and update tokens and layouts through natural language. Your design system, as an API.

$ npx story-ui

storybook + mcp

AI layout generation for Storybook via MCP.

Connects your design system to AI workflows: generate real, working UI layouts from plain-language prompts, straight into Storybook — every component from your library, zero rogue divs.

$ npx figmalint

figma plugin

Design linting for developer-ready Figma files.

An AI-powered plugin that audits your Figma files the way a developer — or an AI agent — would read them: component consistency, accessibility compliance, and token usage, with auto-fix suggestions and handoff exports.

$ npx design-systems-mcp

mcp server

A design systems knowledge base your AI can query.

A dedicated MCP server built to be a trusted source for AI tooling — structured, reliable context that AI tools can use to understand and work with your design system.

$ open /tools/altitude

design system

Our open design system — and our AI testbed.

Southleft’s in-house design system: Lit web components, Style Dictionary tokens, and wrappers for React, Svelte, and Angular. It’s the laboratory where every tool above gets exercised.

// why open source?

Consulting advice grounded in shipped software. These tools are how we test our own thinking — and how you can test us before a single call.

see the practice →

<the-series>

The Figma Console MCP series

Five posts on why we built it, how it differs from Figma’s official MCP, and what it means when your design system becomes an API.

all insights →

  1. Figma Console MCP: AI-Powered Design System Management That Changes Everything

    Jan 2026

  2. Figma MCP vs. Figma Console MCP: A Definitive Comparison

    Mar 2026

  3. Code to Design Isn’t the Point. System Parity Is.

    Feb 2026

  4. Designers, You’re Not at the Kids’ Table Anymore

    Mar 2026

  5. Context-Based Design Systems, Revisited

    May 2026

<cta>

Want these tools working on your system?

We integrate everything on this page with real client design systems — audits, MCP setups, and embedded engineering.

Start a conversation Ask about a workshop