Deus In Machina (DIM) — Design System Runtime

Design System Runtime (DSR) — A runtime layer that enforces structure and consistency across design systems. Bridge the gap between Figma designs and code implementation with automated token normalization, pattern detection, and validation.

What is DSR?

DSR is not a design generator. It's a runtime that:

• Normalizes raw Figma data into semantic DTCG-compliant tokens
• Detects reusable UI patterns across your designs
• Validates implementation against design system rules
• Corrects issues with automated fix suggestions

Think of it as a linter + compiler for your design system.

Key Features

🎨 Bidirectional Figma Sync

• Export Figma Variables to DTCG JSON
• Import DTCG tokens back to Figma
• Color normalization (hex, rgba, hsla)
• Multi-mode support (light/dark themes)

🧩 Pattern Inference

• Detect reusable UI structures
• Identify component patterns
• Suggest semantic improvements

✅ Validation Engine

• 6 rule categories (tokens, spacing, patterns, layout, a11y, performance)
• 5 built-in presets (strict, relaxed, minimal, a11y, performance)
• Custom rule pack creation

⚡ Performance

• API response caching with TTL
• Request deduplication
• Batch operations with concurrency control
• Streaming for large files

📊 Observability

• Structured logging (6 levels)
• Metrics collection
• Opt-in telemetry
• Health checks (K8s probes)

🌐 Web Panel (NEW)

• Browser-based dashboard for DSR
• Real-time token browser
• Validation results viewer
• Figma sync status
• System health monitoring
• Deployable to Vercel

Quick Start

Installation

npm install -g deus-in-machina

Export Figma Variables

export FIGMA_API_KEY=your_token_here

dsr export-variables \
  --file AbCdEf123 \
  --out tokens.json \
  --color-mode hex

Validate Tokens

dsr validate \
  --input tokens.json \
  --ruleset strict

Import Back to Figma

dsr import-variables \
  --file AbCdEf123 \
  --input tokens.json \
  --collection "Design Tokens"

Web Panel

DSR includes a modern web dashboard for visual token management and monitoring.

Features

• 📊 Dashboard — Overview of tokens, validation status, system health
• 🎨 Token Browser — View collections, sync status, export/import
• ✅ Validation Results — See errors, warnings with fix actions
• 🔍 Pattern Detection — Browse detected UI patterns
• 🎭 Figma Sync — Monitor sync status and history
• 💚 Health Monitor — Component health and response times
• ⚙️ Settings — Configure rulesets and telemetry

Deploy to Vercel

Or manually:

# Clone repository
git clone https://github.com/Ultraivanov/deus-in-machina.git
cd deus-in-machina

# Deploy to Vercel
npx vercel --prod

The web panel will be available at https://your-project.vercel.app

Documentation

Guide	Description
Installation	Setup and configuration
Quick Start	5-minute tutorial
Rule Packs	Validation rules and presets
Performance	Optimization and monitoring
Observability	Logging, metrics, telemetry
Error Handling	Troubleshooting guide

API Usage

Programmatic API

import { exportFromFigmaAPI, exportVariablesToDTCG } from 'deus-in-machina/figma';
import { validateUI } from 'deus-in-machina';
import { loadRuleset } from 'deus-in-machina/ruleset';

// Export from Figma
const data = await exportFromFigmaAPI(fileKey, apiKey);
const tokens = exportVariablesToDTCG(
  data.meta.variables,
  data.meta.variableCollections
);

// Validate
const ruleset = await loadRuleset('strict');
const result = await validateUI({
  code: JSON.stringify(tokens),
  rulesetName: 'strict'
});

console.log(result.summary);
// { errors: 0, warnings: 2, infos: 5 }

Using Presets

import { loadRuleset, extendPreset } from 'deus-in-machina/ruleset';

// Use built-in preset
const strict = await loadRuleset('strict');

// Create custom ruleset
const custom = extendPreset('relaxed', {
  name: 'my-team',
  tokens: { severity: 'error' }
});

CLI Reference

dsr <command> [options]

Commands:
  export-variables   Export Figma Variables to JSON
  import-variables   Import JSON to Figma Variables
  sync-variables     Bidirectional sync
  validate           Validate tokens against rules
  health             Check system health
  benchmark          Run performance benchmarks

Options:
  --help             Show help
  --version          Show version
  --verbose          Enable verbose output

Architecture

Figma → Extractor → Normalizer → Pattern Engine → Rules → Validator → Fix Loop
                           ↓
                    DTCG Tokens
                           ↓
                    Code Implementation

Core Modules

Module	Purpose
src/figma/	Figma API integration
src/ruleset/	Validation rules and presets
src/validator.js	UI linting engine
src/patterns.js	Pattern detection
src/fix-loop.js	Automated corrections
src/perf.js	Performance utilities
src/logger.js	Structured logging
src/metrics.js	Metrics collection
src/telemetry.js	Usage analytics
src/health.js	Health checks

Development

Setup

git clone https://github.com/Ultraivanov/deus-in-machina.git
cd deus-in-machina
npm install
npm test

Running Tests

# All tests
npm test

# Watch mode
npm run test:watch

# Specific file
npm test -- tests/figma-sync.test.js

Building

npm run build

Version Management

# Bump version
npm run version:bump minor

# Get current version
npm run version:get

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Roadmap

• Token normalization
• Pattern inference
• Validation engine
• Figma bidirectional sync
• Performance optimization
• Observability suite
• GitHub Actions marketplace integration
• VS Code extension
• Web UI dashboard

Stats

• 233 tests across 9 test suites
• 60+ source files
• 15 completed blocks (Phase 4-6 + R-01)
• 6 documentation guides

Status

Phase 7 — Release (in progress)

• ✅ R-01: Release packaging
• ⏳ R-02: Public docs + examples
• ⏳ R-03: Support + maintenance plan

See .codex/PHASES.md for full project status.

Support

• 📖 Documentation
• 🐛 Issues
• 💬 Discussions

License

Proprietary. All rights reserved. Use, copying, modification, redistribution, or derivative work requires prior explicit written permission from Dmitry Ivanov. See LICENSE for details.

---

⬆ Back to top