Skip to content

Samsen Internal Framework

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

The Core Stack — Figma, Claude Code, and MCP

Overview

The Samsen toolchain is built on three integrated layers:

  1. Figma — Visual design, design system management, component exploration
  2. Claude Code — AI-assisted implementation, iteration, and production shipping
  3. MCP (Model Context Protocol) — The bridge that connects AI tools to design data, APIs, and external systems

Figma

Role in the Workflow

Figma is the visual thinking tool. Designers use it to:

  • Explore layout and composition options
  • Define and manage design system tokens (via Figma Variables)
  • Create component variants and document their states
  • Communicate design intent to stakeholders
  • Prototype interactions for validation

Key Capabilities for AI-Assisted Design

  • Variables — Figma's variable system maps directly to CSS custom properties. This 1:1 mapping is the foundation of token architecture alignment.
  • Component properties — Boolean, text, instance swap, and variant properties define the component API that code needs to implement.
  • Dev Mode — Provides code-ready specifications including spacing, typography, and color values referenced by token name (not raw value).
  • Figma Make — Figma's built-in AI for design exploration within the canvas. Complementary to Claude Code (see hybrid workflow).

Claude Code

Role in the Workflow

Claude Code is the implementation and shipping tool. It:

  • Reads design specifications (from Figma via MCP, or from markdown specs)
  • Generates production components matching the design system
  • Iterates based on natural language feedback
  • Runs builds, tests, and linting
  • Manages git operations (branch, commit, PR)

Key Capabilities

  • Filesystem access — Reads and writes files in the actual project directory
  • Command execution — Runs build tools, test suites, linters
  • MCP integration — Connects to external data sources (Figma files, documentation, APIs)
  • Conversational iteration — Maintains context across a multi-turn working session
  • CLAUDE.md — Reads project context automatically at session start

MCP (Model Context Protocol)

What MCP Is

MCP is an open protocol that allows AI tools to connect to external data sources and services. Think of it as a standardized plugin system for AI. Instead of copy-pasting data into prompts, MCP gives AI direct access to the source.

MCP in the Samsen Toolchain

Two MCP servers are central to the workflow:

Figma Console MCP (Southleft)

An open-source MCP server built by Southleft that treats the design system as an API:

  • Extract — Pull component data, token values, and layout specifications from Figma files
  • Create — Generate Figma components from specifications
  • Debug — Validate Figma file structure, check for consistency issues

This is how Claude Code reads a Figma file: through Figma Console MCP. The designer says "build this component from the Figma file," and Claude Code uses MCP to access the design data directly.

Repository: github.com/southleft/figma-console-mcp

Design Systems MCP (Southleft)

An MCP server that gives AI access to design system best practices and reference material:

  • Token architecture guidelines
  • Component documentation standards
  • Accessibility requirements
  • Naming conventions

This provides general design system knowledge as context, complementing the project-specific design system data from Figma Console MCP.

Repository: github.com/southleft/design-systems-mcp

How MCP Connects the Stack

┌─────────────┐     MCP      ┌──────────────┐     Code      ┌──────────────┐
│   Figma     │◄────────────►│  Claude Code  │──────────────►│  Codebase    │
│  (Design)   │  Figma MCP   │  (AI Agent)   │  Git + Files  │  (Production)│
└─────────────┘              └──────────────┘               └──────────────┘
                                    ▲
                                    │ MCP
                              ┌─────┴──────┐
                              │ Design Sys  │
                              │ MCP (Best   │
                              │ Practices)  │
                              └────────────┘

The designer works in Figma. Claude Code reads the Figma file via MCP, references best practices via Design Systems MCP, and generates code into the production codebase. The entire pipeline is connected — no copy-pasting, no manual translation.

Stack Configuration

For a New Project

  1. Install Claude Code CLI
  2. Create CLAUDE.md in the repo root
  3. Configure MCP servers in Claude Code settings:
  4. Add Figma Console MCP with the project's Figma file key
  5. Add Design Systems MCP for general reference
  6. Set up Figma Variables to match the project's CSS token naming
  7. Test the pipeline: describe a simple component → generate → review in browser

For an Existing Project

  1. Audit the existing design system for token alignment (Figma variables ↔ CSS custom properties)
  2. Create CLAUDE.md documenting existing conventions
  3. Add MCP server configurations
  4. Start with a low-risk task: "Build this new component" or "Update this existing component's spacing"
  5. Gradually expand scope as confidence builds

Tool Alternatives

The Samsen methodology is optimized for this specific stack, but the principles apply more broadly:

Role Primary Alternatives
Design tool Figma Sketch (with plugins), Adobe XD
AI implementation Claude Code Cursor, GitHub Copilot Workspace, Windsurf
Design-AI bridge Figma Console MCP Custom scripts, Figma API direct
Design system ref Design Systems MCP In-repo documentation, Storybook

The differentiator isn't the specific tools — it's the connected workflow. Any stack that provides AI with design system context, iterative conversation, and codebase access can implement the same methodology.