> 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.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful.com/developers/docs/_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 create Experiences much faster.

![Overview of design system import process](/developers/docs/_fern-files/_img/f099337ae816798a2e025285c265d0631f0abb46a2974cb3eaf1ab4b8f6eb70a.webp)

The tool looks at your codebase, extracts and generates components definitions, and pushes to Contentful once you've reviewed them.

The CLI imports the following:

| **Entity**                  | **Description**                                                                                                                     |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Coded components with Slots | 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/) |

A slot is an area of a component where editors can add other content or components. The import finds slots in your code, such as `children`, or `icon`. It marks each one as required or optional, and you can review and edit them before you push.

When you import tokens with your components, the import also maps the tokens to the components. If a component has a design property for color, spacing, or another style, the import links it to the matching tokens. Editors can then pick those tokens for that property in Contentful.

## Next steps

Continue with these guides:

* **[Getting started](/developers/docs/experience-orchestration/import-design-system/getting-started)** — Walk through a full import, from setup to components in Contentful.
* **[Import flow](/developers/docs/experience-orchestration/import-design-system/import-flow)** — Learn what each screen in the import flow does, and how to import design tokens.
* **[Command reference](/developers/docs/experience-orchestration/import-design-system/command-reference)** — See every command and flag.
* **[FAQ](/developers/docs/experience-orchestration/import-design-system/faq)** — Find answers to common questions.