Import design system overview | Documentation

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 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

Next steps

Continue with these guides:

Installation — Install the CLI and configure your environment.
Import components — Run the Component Type import pipeline.
Import design tokens — Import design tokens from your codebase.