---
title: "deeepSpace Documentation"
sidebarTitle: "Overview"
description: "The continuous source of truth for design systems. Connect Figma components with code, detect drift, and stream living context to AI coding agents."
keywords: "design system source of truth, figma code sync, design token drift, ai coding context"
icon: "house"
---

## Keep Design and Code Continuously Aligned

**deeepSpace is the one source of truth for your design system, connecting designers, developers, and the AI agents they use while keeping design and code continuously aligned.**

It connects Figma components with their corresponding code components, tracks and versions both sides, detects structural, styling, token, variant, and visual mismatches, and helps teams understand exactly what changed and where design and implementation have drifted apart.

By giving people and their AI agents access to the same design-system context, deeepSpace creates a shared bridge between design and development where teams and AI can understand, maintain, and evolve the design system together.

<Tip>
**deeepSpace connects designers, developers, and AI agents around the same design system — Sync → Version → Detect → Verify → Align.**
</Tip>

<div className="hero-buttons">
  <a href="/guides/installation" className="btn active lg">
    Start with deeep CLI →
  </a>
  <a href="/guides/intro" className="btn secondary lg">
    Read the Docs
  </a>
</div>

## Quick Start

<CardGroup cols={2}>
  <Card title="Introduction & Concepts" icon="book-open" href="/guides/intro">
    Discover how deeepSpace acts as the single source of truth across your design system.
  </Card>
  <Card title="Installation Guide" icon="download" href="/guides/installation">
    Install the deeep CLI on macOS, Linux, or Windows.
  </Card>
  <Card title="Connect Your Project" icon="plug" href="/guides/connect">
    Link your local Git repository to a deeepSpace project and configure component discovery.
  </Card>
  <Card title="Sync Components" icon="refresh-cw" href="/guides/sync">
    Discover local components and sync their manifest with deeepSpace.
  </Card>
</CardGroup>

## Product Ecosystem

<CardGroup cols={2}>
  <Card title="Figma Plugin" icon="pen-tool">
    **The designer-side connection**

    Designers selectively sync components, variants, properties, styles, and design tokens into deeepSpace.
  </Card>
  <Card title="deeep CLI" icon="terminal">
    **The developer-side connection**

    Analyzes UI codebases, discovers components and Storybook stories, and syncs code representations.
  </Card>
  <Card title="Web Space" icon="globe">
    **The central design-system hub**

    Explore components, connect Figma-to-code mappings, inspect versions, and review visual diffs.
  </Card>
  <Card title="AI Connector (MCP)" icon="bot" href="/guides/ai-connector">
    **Model Context Protocol server**

    Connects AI coding agents and IDE tools to live design-system context for automated alignment.
  </Card>
</CardGroup>

## Continuous Alignment Workflow

<CardGroup cols={1}>
  <Card title="1. Sync Design & Code" icon="refresh-cw">
    Designers push from Figma via the plugin; developers sync code components with `deeep init` and `deeep sync`.
  </Card>
  <Card title="2. Detect & Verify" icon="search">
    deeepSpace tracks versions, detects styling/prop drift, and visually verifies rendered components against Figma.
  </Card>
  <Card title="3. Align with AI" icon="sparkles">
    Use Web Space and the AI Connector (MCP) to resolve differences and maintain continuous consistency.
  </Card>
</CardGroup>