Import design system overview | Documentation

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.

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

Coded components with slots

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

Next steps

Continue with these guides:

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