> This page is for Experience Orchestration.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful-staging.ferndocs.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful-staging.ferndocs.com/developers/docs/_mcp/server.

# Import design system overview

> Learn how to import your design system Component Types and tokens into Contentful using the CLI.

Import your design system components and tokens directly from your codebase into Contentful. The `@contentful/experience-design-system-cli` analyzes your source files, uses an AI agent to generate Component Definition Format (CDF) definitions, and pushes them to your space — your codebase remains the single source of truth.

## Import pipeline

The CLI offers two modes: an **interactive TUI** that runs the full pipeline in one command, and **individual CLI commands** for granular control over each step.

### Interactive TUI

Run `experiences import` to walk through the full pipeline in a single terminal session. The TUI guides you through extraction, review, generation, preview, and push — prompting for decisions at each step. Use this mode when importing for the first time or when you want a guided experience.

### Individual CLI commands

Run each step of the pipeline as a separate command for granular control. Use this when you need to re-run a specific stage, inspect intermediate results, or integrate steps into a custom pipeline. See [Run the pipeline step by step](/experience-orchestration/import-components#run-individual-pipeline-steps) for the full command reference.

## Imported artifacts

The CLI imports the following artifacts:

| **Artifact**    | **Description**                                                                                                                              |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Component Types | Visual UI building blocks (buttons, cards, layouts) with their properties, types, and categories                                             |
| Design tokens   | Colors, spacing, typography, borders, and other styling values in [W3C DTCG format](https://design-tokens.github.io/community-group/format/) |

## Next steps

Continue with these guides:

* **[Installation](/experience-orchestration/installation)** — Install the CLI and configure your environment.
* **[Import components](/experience-orchestration/import-components)** — Run the Component Type import pipeline.
* **[Import design tokens](/experience-orchestration/import-design-tokens)** — Import design tokens from your codebase.