Skip to content

Samsen Internal Framework

This is Samsen's internal framework content for Toolchain. It is read-only reference material.

Southleft Open Source Tools

Overview

Southleft maintains a suite of open source tools that support AI-assisted design workflows. These tools are both practical utilities and reference implementations of Samsen principles.

Repository: github.com/southleft

FigmaLint

Purpose: Automated validation and quality checks for Figma files.

What it does: - Scans Figma files for common issues: unnamed layers, detached styles, inconsistent spacing, missing auto-layout - Enforces design system conventions: correct token usage, naming patterns, component structure - Reports violations with actionable fix suggestions

Why it matters: Clean Figma files produce better AI output. When a Figma file is messy — unnamed layers, inconsistent token usage, detached components — the data that flows through MCP to Claude Code is noisy. FigmaLint ensures the source of truth is clean before AI consumes it.

Connection to the methodology: FigmaLint operationalizes the quality guardrails principle. Instead of relying on manual review to catch Figma file issues, automation catches them systematically. This is especially important at scale — when multiple designers contribute to a shared Figma library.

Figma Console MCP

Purpose: Treat the design system as an API for AI tools.

What it does: - Extract — Pull component specifications, token values, layer structure, and layout data from Figma files - Create — Generate Figma components from structured specifications - Debug — Validate consistency between Figma components and their expected structure

Why it matters: This is the core bridge between Figma and Claude Code. Without it, designers would need to manually copy specifications from Figma into prompts. With it, Claude Code can read a Figma file directly and understand what needs to be built.

Connection to the methodology: Figma Console MCP implements the "design system as context" principle. By exposing Figma data through MCP, it turns the design system from a visual reference into structured context that AI can consume and act on.

Story UI

Purpose: Layout composition tooling for design system components.

What it does: - Provides layout primitives (Stack, Grid, Cluster, Sidebar, etc.) as reusable components - Handles responsive behavior, spacing, and alignment through semantic props - Composes complex layouts from simple building blocks

Why it matters: Layout is one of the most error-prone areas for AI-generated code. Components might look correct individually but break when composed into a page. Story UI provides tested, reliable layout primitives that AI can compose confidently.

Connection to the methodology: Story UI reduces the decision space for AI. Instead of generating custom CSS for every layout, AI selects from proven layout components. This increases consistency and reduces the need for iteration.

Design Systems MCP

Purpose: AI reference to design system best practices and patterns.

What it does: - Provides design system knowledge as MCP context: token architecture guidelines, component patterns, accessibility requirements, naming conventions - Serves as a general knowledge base for AI tools working with design systems

Why it matters: While Figma Console MCP provides project-specific data (the actual tokens and components), Design Systems MCP provides domain knowledge (how design systems should work in general). Together, they give AI both the specific context and the general expertise.

Connection to the methodology: Design Systems MCP is the "textbook" that complements the "project files." It ensures AI follows design system best practices even for patterns that aren't explicitly documented in the project.

Altitude

Purpose: Design system starter kit and reference implementation.

What it does: - Provides a complete, production-ready design system scaffold - Includes token architecture (primitive → semantic → component layers) - Ships with core components implemented following Samsen best practices - Serves as a starting point for new projects and a reference for existing ones

Why it matters: Starting a design system from scratch is hard. Altitude provides the structural decisions — token naming, file organization, component architecture — so teams can focus on customization rather than foundation building.

Connection to the methodology: Altitude is the reference implementation of Samsen's design system principles. It demonstrates token architecture alignment, specs-first methodology, and CBDS patterns in a working codebase. It's both a tool and a teaching artifact.

How the Tools Connect

┌─────────────┐
│ FigmaLint   │──── Validates Figma files (clean source data)
└──────┬──────┘
       │
       ▼
┌─────────────┐          ┌──────────────┐
│ Figma       │──MCP────►│ Claude Code  │
│ Console MCP │          │              │
└─────────────┘          │              │
                         │              │
┌─────────────┐          │              │     ┌──────────────┐
│ Design Sys  │──MCP────►│              │────►│ Components   │
│ MCP         │          └──────────────┘     │ (using       │
└─────────────┘                               │  Story UI    │
                                              │  + Altitude) │
                                              └──────────────┘

The tools form a pipeline: FigmaLint ensures data quality, Figma Console MCP extracts that data for AI, Design Systems MCP provides best practices, and the generated output uses Story UI for layout and follows Altitude patterns for component architecture.

Open Source as Education

Beyond their practical utility, these tools serve an educational purpose. They demonstrate:

  • How MCP servers are built and configured
  • How design systems can be structured for AI consumption
  • How quality guardrails can be automated
  • What production-ready component architecture looks like

Open-sourcing these tools is itself a form of thought leadership — it shows rather than tells.