Command Reference

Every studio:* command runs against whichever project is active, so set the active project once before anything else. Generate a section has its own page, because it is a guided flow rather than a single call.

Do It With a Skill

Each command has a conversational equivalent: register-component, import-design-tokens, register-breakpoints, figma-generate-components and configure-studio.

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

Project

Set the active project

studio:project:set connects the CLI to a Studio project. Every other studio:* command runs against whatever project is active, so this is part of the one-time setup. Run it once per project you work on.

csdx studio:project:set                              # interactive picker
csdx studio:project:set --project-id=proj_abc123     # set directly

Without a flag, the CLI lists the projects your account can access and lets you pick. Find a project’s ID in Studio: open your project, then Settings, then General.

Show the active project

studio:project:get displays the project the CLI is currently pointed at, along with its details. Use it to confirm you’re about to write to the right place before running a command that creates or changes content.

csdx studio:project:get

No flags. If no project is active yet, set one with studio:project:set above.

Components

Register local components

studio:component:register registers UI components you’ve already written. Point it at a file or a directory. It infers each component’s prop schema (from TypeScript types, PropTypes, or JSDoc), generates the registerComponent calls, and adds them to your Studio components registry. Afterward the components appear in Studio’s palette under Registered Components.

A single file:

csdx studio:component:register --component-path=src/components/Button.tsx

A whole directory:

csdx studio:component:register --component-dir=./components

If you pass neither flag, the CLI prompts for a file or directory path.

Related: Registering components for what registration means and the underlying API, and register-component for the conversational equivalent.

Add a component from Figma

studio:component:add generates a code component from a Figma design and writes the component file, its style file, and metadata into your project. It detects your project’s styling method (Tailwind, CSS Modules, styled-components, or vanilla CSS) and matches it.

Use it when your team designs in Figma and you want the code component scaffolded for you instead of hand-writing it.

csdx studio:component:add --component-id=component-123

You get the component ID from the Studio Figma plugin. If you omit the flag, the CLI prompts for it. During the run it also shows hints and asks for an optional prompt to steer generation.

To override the detected styling method, answer the CLI’s interactive prompt (for example “Use CSS Modules instead of Tailwind”).

Related: Generate components from Figma for the concept and the agentic equivalent.

Sync a component to the Figma plugin

studio:component:sync makes one of your code components available in the Figma plugin’s mapping dropdown, so designers can link Figma layers to it. Use it when your team works Figma-first and you want designers to see which components exist before they design.

This is the reverse direction of Add a component from Figma, which generates code from a design.

csdx studio:component:sync --component-path=src/components/Card.jsx

The component path is required. If omitted, the CLI prompts for it.

Design Tokens

Add design tokens

studio:design-token:add brings design tokens into your project. Give it a Figma design-token ID to fetch from Figma, or run it with no ID and it analyzes your project (CSS custom properties, JS/TS token files) and generates a register-design-tokens file.

Import the generated file into your app’s entry point (main.tsx, index.tsx, etc.) so the tokens register at boot. Re-run the command any time to refresh.

csdx studio:design-token:add --design-token-id=abc123-def456
csdx studio:design-token:add                 # generate by analyzing the project

When generating from the project, the CLI prompts for the token access level (dynamic / tokens / arbitrary). See Design tokens for what each level exposes to authors.

Update design-token config

studio:design-token:config updates configuration values in the generated register-design-tokens file (for example, the token access level) without regenerating the tokens themselves. It’s interactive: the CLI reads the current config and prompts you for the changes.

Prerequisite: the register-design-tokens file must already exist. If it doesn’t, generate it first with studio:design-token:add.

csdx studio:design-token:config

No flags. The command walks you through the current values and the ones you can change.

Responsive Options

Sync responsive breakpoints

studio:responsive-options:sync reads the responsive breakpoints defined in your registerBreakpoints function and syncs them to the Studio project, so canvas authoring reflects the same breakpoints your code renders at.

csdx studio:responsive-options:sync
csdx studio:responsive-options:sync --file-path=src/studio/breakpoints.ts
csdx studio:responsive-options:sync --file-dir=src/studio

Run flagless and the CLI searches your project for the registerBreakpoints function. Use the flags to point it at a specific file or directory.

See Also

• Studio CLI: install and one-time setup
• Generate a section: the guided section-generation flow
• Breakpoints: what the synced breakpoints drive