Files
dss/cli/README.md
Digital Production Factory 276ed71f31 Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm

Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)

Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability

Migration completed: $(date)
🤖 Clean migration with full functionality preserved
2025-12-09 18:45:48 -03:00

2.2 KiB

@overbits/dss

Design System Server - UI Developer Companion

Extract design tokens and components from Figma, generate code, and sync with your codebase.

Installation

npm install -g @overbits/dss
# or
npx @overbits/dss

Requirements

  • Node.js 18+
  • Python 3.8+ (auto-configured during installation)

Quick Start

# Initialize DSS in your project
dss init

# Configure Figma access
dss config --set figmaToken=figd_your_token
dss config --set figmaFileKey=your_file_key

# Start the server
dss start

# Sync tokens from Figma
dss sync --format css

# Extract components
dss extract components

Commands

dss init

Initialize DSS in the current project. Creates .dss/ directory with configuration.

dss start

Start the DSS server. Options:

  • -p, --port <port> - Port (default: 3456)
  • -d, --dev - Development mode with auto-reload
  • --no-open - Don't open browser

dss stop

Stop the running DSS server.

dss sync

Sync design tokens from Figma. Options:

  • -f, --format <format> - Output format: css, scss, json, ts (default: css)
  • -o, --output <path> - Output file path
  • --file-key <key> - Figma file key

dss extract <type>

Extract tokens, components, or styles from Figma. Types: tokens, components, styles, all

dss config

Manage configuration. Options:

  • --set <key=value> - Set a config value
  • --get <key> - Get a config value
  • --list - List all config values

dss status

Check DSS server and configuration status.

Configuration

Global Config (stored in ~/.config/dss/)

  • figmaToken - Figma personal access token
  • defaultPort - Default server port
  • defaultFormat - Default token output format

Project Config (stored in .dss/config.json)

  • figmaFileKey - Figma file key for this project
  • port - Server port
  • outputDir - Token output directory
  • tokenFormat - Token format (css, scss, json, ts)
  • componentFramework - Component framework (react, vue, svelte)

Web Dashboard

Once the server is running, access the web dashboard at http://localhost:3456:

  • Projects - Manage design system projects
  • Tokens - Browse and export design tokens
  • Components - View component gallery and generate code

License

MIT