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

# Import design system overview

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

The `@contentful/experience-design-system-cli` is an agentic CLI tool that extracts components and tokens from your codebase to use in Contentful Experiences.

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 (recommended)

Run `experiences import` to walk through the full pipeline in a single terminal session. The tool looks at your codebase, extracts and generates components definitions, and pushes to Contentful once you've reviewed them.

### 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/run-the-pipeline-step-by-step).

## Imported entities

The CLI imports the following:

| **Entity**       | **Description**                                                                                                                     |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Coded components | UI building blocks that map to a component in your frontend code, such as buttons, cards, and heroes.                               |
| Design tokens    | Colors, spacing, typography, borders, and other styling values in [W3C DTCG format](https://www.designtokens.org/tr/drafts/format/) |

## Coded components with slots

```bash
experiences import --project ./my-design-system --composite
```

## Next steps

Continue with these guides:

* **[Getting started](/experience-orchestration/getting-started)** — End-to-end walkthrough of a full import, from setup to seeing your components in Contentful.
* **[Import components](/experience-orchestration/import-components)** — Run the component import pipeline.
* **[Import design tokens](/experience-orchestration/import-design-tokens)** — Import design tokens from your codebase.
* **[Coded components](/experience-orchestration/coded-components)** — Preserve embedded-component hierarchies with composite mode.
* **[Run history and replay](/experience-orchestration/run-history)** — List, push, or edit prior runs.
* **[Command reference](/experience-orchestration/command-reference)** — Full flag reference for `experiences import` and the individual pipeline commands.
* **[Debug logging](/experience-orchestration/debug-logging)** — Capture a trace of a run for troubleshooting.
* **[FAQ](/experience-orchestration/faq)** — Common questions and behaviors that surprise operators the first time through.

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