Skip to navigation
Import design system

Import design system overview

The @contentful/experience-design-system-cli is an agentic CLI tool that extracts components and tokens from your codebase to create Experiences much faster. This guide explains what the tool does and what it imports, then points you to the guides that show you how to use it.

Overview of design system import process

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:

EntityDescription
Coded components with SlotsUI building blocks that map to a component in your frontend code, such as buttons, cards, and heroes.
Design tokensColors, spacing, typography, borders, and other styling values in W3C DTCG 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: The guides below take you from setup to a finished import.

Next steps

Continue with these guides, in order:

  • Getting started — Learn what the CLI does with your code, set up the tools it needs, and run your first import.
  • Import flow — Learn more about what each step of the import flow does, and how to import design tokens.
  • Command reference — Learn how to start the CLI, and understand the Settings menu.
  • FAQ — Find answers to common questions.