276ed71f31
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
97 lines
2.2 KiB
Markdown
97 lines
2.2 KiB
Markdown
# @overbits/dss
|
|
|
|
Design System Server - UI Developer Companion
|
|
|
|
Extract design tokens and components from Figma, generate code, and sync with your codebase.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install -g @overbits/dss
|
|
# or
|
|
npx @overbits/dss
|
|
```
|
|
|
|
## Requirements
|
|
|
|
- Node.js 18+
|
|
- Python 3.8+ (auto-configured during installation)
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
# 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
|