When to Use

Generate React components from a Figma design and register them with Studio via the Studio Figma Plugin + csdx studio:component:sync/add/register CLI commands. Optionally imports Figma design tokens.

Use when the user wants real, committable React components in their project generated from a Figma design (component library, design system, frames). NOT for one-off pastes (for that, point them at figma-copy-paste. Phrases) “generate components from Figma”, “Figma to React”, “import my design system”. This skill produces source files + registry entries + (optionally) design tokens.

Auth preflight: settle the credential before the first API call. Resolve it OAuth-first per authenticate-cma: CS_OAUTH_ACCESS_TOKEN, else the Contentstack MCP’s stored session. Never ask the user for a session authtoken. If nothing resolves, or a refresh fails with 400 invalid_refresh_token, hand them ! CONTENTSTACK_REGION=<code> npx @contentstack/mcp --auth (it needs a TTY and a browser, so it cannot be run for them) and wait. 403 error_code 316 is a valid credential aimed at another org: fix the org or the api_key, do not re-authenticate.

Generate Studio Components From a Figma Design

Standard: REQUIRED Reading

This skill orchestrates the canonical Studio Figma Plugin + Studio CLI workflow. The authoritative in-repo documents are:

/docs/bring-your-own-components/generate-components-from-figma.md: the full developer-facing flow with reference diagram, four CLI commands, plugin walkthrough, screenshots
/docs/bring-your-own-components/copy-and-paste-from-figma-to-studio.md: the lighter-weight Copy to Studio path
/docs/bring-your-own-components/studio-design-tokens-overview.md: the design-token side

The workflow has two sides:

Side	Tool	Who drives it
Designer	Studio Figma Plugin (Figma Marketplace plugin id 1541766192464484605)	Designer, inside Figma
Developer	Studio CLI (csdx)	Developer, in the terminal

They meet via Component IDs and Design Token IDs generated by the plugin and consumed by the CLI. No Figma MCP server is involved. Treat any mention of “Figma MCP” here as stale.

The Four CLI Commands

The Studio CLI exposes four primary commands for the Figma workflow (plus a design-token auxiliary). Every step maps to one. Name the command when you tell the user what you’re doing.

Command name	csdx invocation	What it does
Project	csdx studio:project:set / csdx studio:project:get	Connect the CLI to a specific Studio project. Every later command scopes to it.
Sync	csdx studio:component:sync --component-path=<path>	Publish existing code components into the Studio project so the Figma plugin’s Auto Map can match Figma layers to them.
Add	csdx studio:component:add --component-id=<id>	Generate a new React component from a Figma design (run after the plugin produces a Component ID).
Register	csdx studio:component:register --component-path=<path> or --component-dir=<dir>	Add a local or custom component to Studio so authors can use it on the canvas.
(aux) Design token: add	csdx studio:design-token:add --design-token-id=<id>	Pull design tokens from the plugin’s output into register-design-tokens.ts.

Mental model:

Project scopes everything.
Sync flows existing code into the plugin (one-way, upstream).
Add flows the plugin’s Figma output into new code in the repo (one-way, downstream).
Register publishes any local component to Studio’s canvas.

Task

Step 0: Detect which side of the workflow the user is on

If the user has a Component ID already (from the plugin’s Generate Design step), they’re on the developer side and want this skill to run the Add + Register commands. Jump to Step 4.

If the user doesn’t have a Component ID yet, walk them through the full setup first (Steps 1 to 3), then have them open Figma and run the plugin (Step 3), then come back for Step 4.

Step 1: Verify CLI is installed and a project is linked

Run:

csdx --version
csdx studio:project:get

If csdx is not installed:

npm i -g @contentstack/cli
csdx plugins:install @contentstack/studio
csdx config:set:region   # pick the user's Contentstack region
csdx login --oauth        # opens browser for OAuth

If csdx studio:project:get does NOT return the project the user wants:

csdx studio:project:set --project-id=<projectId>

Use the projectId input if provided. Otherwise ask the user.

Step 2: Sync existing components (if using Auto Map)

If componentPathToSync was provided OR if this is the first run on this repo, publish existing components so the Figma plugin can match against them:

csdx studio:component:sync --component-path=<componentPathToSync>

Skip if the user has already synced recently and no components have changed.

Step 3: Have the designer (or the user themselves) run the Studio Figma Plugin

Print these instructions verbatim:

Designer step (in Figma):

Install Contentstack Studio from the Figma Marketplace (plugin id 1541766192464484605) if not already installed.

Open the file, go to Plugins, choose Contentstack Studio, then click Run.

Pick region, click Authorize: completes OAuth, returns to Figma.

Confirm the Figma file is editable (read-only files block Auto Layout updates and mapping).

Select the frame(s) or component(s) to generate (Shift+click for multiple).

Add a layout prompt if needed (e.g. “Make this a carousel”). Prompts shape layout, spacing, and responsiveness only, not behavior.

Pick a responsiveness option: Optimize for responsiveness (desktop/tablet/mobile) or Fixed-size screens.

Let Auto Map match Figma layers to your synced code components. Override any row manually.

Click Generate Design.

The plugin shows four output buttons. Click Copy CLI Command to get a ready-to-run csdx studio:component:add --component-id=<id> on your clipboard. If design tokens were generated, also note the Design Token ID.

Then ask: “Paste the Component ID (or the full CLI command) the plugin gave you.”

If the user pastes a full command like csdx studio:component:add --component-id=abc123, extract abc123 as the componentId.

Step 4: Run Add to materialise the Figma design as React source

csdx studio:component:add --component-id=<componentId>

The CLI auto-detects the project’s styling method (Tailwind / CSS modules / vanilla CSS) and writes three files into the project’s components directory:

A React .tsx component file
A matching style file
A metadata file capturing the prop schema

Capture the paths the CLI prints. You’ll need them for Step 6.

If the user wants to customize the generation, pass an additional prompt argument to the Add command (refer to the CLI’s --help for the exact flag, varies by CLI version). Common customizations:

“Use the existing useBreakpoint hook for the responsive switch”
“Use clsx for conditional class names”
“Match the export style of src/components/Button.tsx“

Step 5: (Optional) Run Design token: add if tokens were generated

If designTokenId was provided:

csdx studio:design-token:add --design-token-id=<designTokenId>

The CLI scans the project’s existing token sources (JS/TS files, CSS files with custom properties, JSON token files) and prompts:

Include Studio’s default design tokens? (Y/N): default Y to keep canonical Studio tokens alongside custom ones.
Access level: dynamic (entry-linked only), tokens (dynamic + custom), or arbitrary (all canvas properties). Pick tokens for most cases.
Output path: accept the default.

The CLI writes register-design-tokens.ts. Then add the import to the app entry (e.g. src/main.tsx or src/bootstrapStudioSdk.ts):

import "./register-design-tokens";

Verify the import comes BEFORE any <StudioComponent /> mount.

Step 6: Run Register to publish the new component to Studio’s canvas

csdx studio:component:register --component-path=<path-from-step-4>

After this, the component appears in the Studio canvas palette. Authors can drop it on a composition and bind its props.

Step 7: Print next steps

Generated and registered <N> components from Figma.

Source:     <component-path-from-add>
Tokens:     <register-design-tokens.ts>   (if design tokens were run)
Registered: via csdx studio:component:register

Open Studio → any composition → Components palette → look for the new tile.
Drop it on a canvas to verify the render matches the Figma source.

Re-run `csdx studio:component:sync --component-path=<path>` if you want this
new component (or any other code-side changes) to be visible to the next
Figma plugin run's Auto Map.

Inputs Needed From the User

componentId: required for the developer side (Steps 4 to 7). If absent, walk through Steps 0 to 3 first.
designTokenId: optional, only needed if the plugin produced tokens.
projectId: optional, only needed if the project isn’t already linked.
componentPathToSync: optional, only needed if code components changed since last sync OR first run.

Ask clarifying questions when:

csdx isn’t installed AND the user hasn’t confirmed they want to install it
Multiple Studio projects could be the target. Confirm with csdx studio:project:get first
The Figma file’s editable status isn’t clear (the plugin will surface this. If not, ask)

Acceptance

The skill succeeds only when ALL are true:

csdx studio:project:get returns the intended project
Every generated component carries its CSLP tags: studioAttributes spread on the root element and wrap: false in its register entry, and each bindable prop’s $-twin spread on the element rendering it. Confirmed in the DOM: the root and each bound text/image element show data-cslp. Without it the component renders but Visual Editor and Live Preview cannot edit it. See register-component § The studioAttributes contract.
If Sync was needed: csdx studio:component:sync ran successfully (CLI exits 0)
csdx studio:component:add --component-id=<id> produced a .tsx, a style file, and a metadata file at known paths
If tokens were involved: register-design-tokens.ts exists AND is imported from the app entry point
csdx studio:component:register ran successfully
After dev server restart, the new component appears in Studio’s palette with the correct name + thumbnail
Dropping the new component on a canvas renders without console errors

If any check fails, surface the specific failure with file paths.

Common Pitfalls

Pitfall	Why it bites	Fix
Skipping Sync before the designer runs the plugin	Auto Map has nothing to match against. Every Figma layer becomes a generic frame	Run csdx studio:component:sync --component-path=<path> before Step 3
Running Add against a stale Component ID	The plugin generated a different design later. IDs are versioned	Re-run the plugin’s Generate Design and grab the new ID
Forgetting to import register-design-tokens.ts from the app entry	Tokens never register. They exist in the file but Studio doesn’t see them	Add import "./register-design-tokens"; to main.tsx (or wherever the SDK bootstraps) before any <StudioComponent />
Running Register on a path the CLI doesn’t recognize as a component	Register fails: needs a component file (named export matching a React component) or a directory containing them	Pass the exact .tsx path returned by Add, or the parent directory if registering many at once
Confusing Sync and Register	They look similar but face different audiences	Sync makes code components visible to the Figma plugin (for Auto Map). Register makes components visible to authors on the Studio canvas.
Mixing responsive + fixed-size in one plugin run	Plugin refuses, only one mode per Generate Design call	Run the plugin twice, once per responsiveness mode
Read-only Figma file	Blocks Auto Layout updates, token adjustments, component mapping	Get edit access first