Getting Started

CLI Reference

Use the Styleframe CLI to initialize projects and build optimized CSS from your configuration files.

Overview

The Styleframe CLI is a command-line interface that helps you initialize new projects and build production-ready CSS from your Styleframe configuration. It provides a streamlined workflow from project setup to optimized style generation.

Why use the CLI?

The CLI helps you:

Quick project setup: Initialize Styleframe configuration and dependencies with a single command.
Optimized builds: Generate production-ready CSS from your configuration files.
Flexible output: Control where and how your styles are generated.
Consistent workflow: Integrate Styleframe into your development and deployment pipelines.

Installation

Install the CLI as a development dependency:

pnpm install -D @styleframe/cli

yarn add -D @styleframe/cli

npm install -D @styleframe/cli

bun add -D @styleframe/cli

Commands

The CLI provides three primary commands: init for project setup, build for generating CSS output, and figma for syncing design variables with Figma.

init

command

styleframe init [options]

Initialize a new Styleframe project in your current directory.

Options

Option	Alias	Type	Default	Description
`--cwd`	`-d`, `--dir`	`string`	`process.cwd()`	Directory where the project will be initialized

Usage

styleframe init

styleframe init --cwd ./my-project
styleframe init -d ./my-project

Creates a styleframe.config.ts file with basic configuration
Creates or updates tsconfig.json with styleframe includes
Adds all styleframe packages to your package.json dependencies
Detects and configures your framework (Vite or Nuxt), if applicable
Skips creating files that already exist (won't overwrite existing config)

Pro tip: After running init, don't forget to run npm install to install the added dependencies.

build

command

styleframe build [entry] [options]

Build your Styleframe project and generate CSS output files.

Options

Option	Alias	Type	Default	Description
`entry`	-	`string`	`styleframe.config.ts`	Entry point file(s) for the build
`--outputDir`	`-o`, `--out`	`string`	`styleframe`	Output directory for built files
`--clean`	-	`boolean`	`false`	Clean output directory before build

Usage

styleframe build

styleframe build my-styles.config.ts

styleframe build --outputDir dist/styles
styleframe build -o dist/styles
styleframe build --out dist/styles

Loads your Styleframe configuration from the entry file
Processes all styles, variables, themes, and utilities
Generates optimized CSS files in the specified output directory

The build command generates a structured output directory:

styleframe/
├── index.css          # Main compiled CSS
└── index.ts           # Main compiled TypeScript

watch 🚧

command

styleframe watch [entry] [options]

Watch mode is planned for a future release. It will automatically rebuild your styles when configuration files change.

Coming soon: Track progress in the GitHub repository.

figma

command

styleframe figma <subcommand> [options]

Sync Styleframe variables with Figma using the DTCG (Design Tokens Community Group) format.

The figma command provides two subcommands for bidirectional synchronization:

export: Export Styleframe variables to DTCG format JSON for importing into Figma
import: Generate Styleframe TypeScript code from DTCG format JSON exported from Figma

figma export

command

styleframe figma export [options]

Export Styleframe variables to DTCG format JSON.

Options

Option	Alias	Type	Default	Description
`--config`	`-c`	`string`	`styleframe.config.ts`	Path to the Styleframe config file
`--output`	`-o`	`string`	`tokens.json`	Output JSON file path
`--collection`	`-n`, `--name`	`string`	`Design Tokens`	Name for the Figma collection
`--baseFontSize`	-	`string`	`16`	Base font size for rem conversion (in pixels)

Usage

styleframe figma export

styleframe figma export --config src/styleframe.config.ts
styleframe figma export -c src/styleframe.config.ts

styleframe figma export --collection "My Design System"
styleframe figma export -n "My Design System"

Loads your Styleframe configuration from the config file
Extracts all variables from root and themes
Converts variables to Figma-compatible types (color, number, string, boolean)
Generates DTCG-formatted JSON with theme support as Figma modes

figma import

command

styleframe figma import [options]

Generate Styleframe TypeScript code from DTCG format JSON.

Options

Option	Alias	Type	Default	Description
`--input`	`-i`	`string`	-	Input DTCG JSON file path (required)
`--output`	`-o`	`string`	`tokens.styleframe.ts`	Output Styleframe TypeScript file path
`--composables`	-	`boolean`	`true`	Use @styleframe/theme composables (useColor, useSpacing, etc.)
`--rem`	-	`boolean`	`false`	Use rem units for dimensions instead of px
`--baseFontSize`	-	`string`	`16`	Base font size for rem conversion (in pixels)
`--instanceName`	-	`string`	`s`	Name for the Styleframe instance variable

Usage

styleframe figma import --input tokens.json
styleframe figma import -i tokens.json

styleframe figma import -i tokens.json --output src/tokens.styleframe.ts
styleframe figma import -i tokens.json -o src/tokens.styleframe.ts

styleframe figma import -i tokens.json --rem
styleframe figma import -i tokens.json --rem --baseFontSize 14

styleframe figma import -i tokens.json --composables false

Reads and parses the input DTCG JSON file
Converts DTCG format to Styleframe variables and themes
Generates TypeScript code with proper imports and variable definitions
Optionally uses @styleframe/theme composables for common patterns

Best Practices

Use npm scripts: Define CLI commands in your package.json for consistent execution across your team.
Version control configs: Commit your styleframe.config.ts to ensure consistent styling across environments.
Integrate with CI/CD: Run styleframe build in your deployment pipeline to generate production CSS.
Organize output: Use --outputDir to organize generated files according to your project structure.
Descriptive naming: Use clear names for multiple configs like styleframe.theme.config.ts or styleframe.components.config.ts.

Use native integrations: We recommend using native integrations with Vite and other tools for building projects using styleframe.

FAQ

Use the figma command for bidirectional sync:

Export to Figma: Run styleframe figma export to generate a DTCG JSON file, then import it into Figma using the Variables Import plugin
Import from Figma: Export your Figma variables as DTCG JSON, then run styleframe figma import -i tokens.json to generate Styleframe code

# Export Styleframe → Figma
styleframe figma export -o tokens.json

# Import Figma → Styleframe
styleframe figma import -i tokens.json -o src/tokens.styleframe.ts

Edit this pageorReport an issue

Licensing

Understanding Styleframe's Open Source MIT license and Styleframe Pro's commercial license for production use.

Overview

Explore Styleframe's comprehensive API for building type-safe, maintainable design systems. From variables and selectors to themes and composables, discover how to create scalable styling architectures.