Chuk Design System

Provides a universal design token system with multi-format export capabilities for colors, typography, spacing, and motion.

python

1

GitHub Stars

python

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "chrishayuk-chuk-mcp-design-system": {
      "command": "python",
      "args": [
        "-m",
        "chuk_design_system.server"
      ]
    }
  }
}

You learn to run and use the Chuk Design System MCP server, which provides a programmable interface to access and export universal design tokens across multiple formats. This server makes it easy to generate theme-specific assets for canvases, slides, videos, and CSS while keeping the data model type-safe and well-tested.

How to use

You run the MCP server locally and connect your MCP client to the provided stdio entry. The server exposes a Python module that you start to enable design-token exports like Canva CSS, Remotion TypeScript, Python-pptx, and W3C Design Tokens JSON.

How to install

Prerequisites: ensure Python is available on your system. You also need a runtime command suitable for starting the MCP server locally.

Step by step commands to set up and start the MCP server locally are shown below.

# Install the package in editable mode (from source)
pip install -e .

# Or install via editable mode with uvx as a runner (recommended)
uv pip install -e .

Configuration and startup

Configure the MCP server connection for your client by pointing to the local Python module runner. The following dispatch starts the server using Python and runs the server module.

{
  "mcpServers": {
    "chuk-design-system": {
      "command": "python",
      "args": ["-m", "chuk_design_system.server"]
    }
  }
}

Usage patterns

Export all themes to Canva CSS using the server to generate CSS tokens for each theme. - Generate Remotion TypeScript color tokens for integration into video projects. - Produce PPTX-ready theme dictionaries for PowerPoint slides. - Retrieve a W3C Design Tokens JSON blob for token-driven tooling.

Examples and quick-start snippets

Get a theme and export to Canva CSS in a single workflow.

from chuk_design_system.themes import get_theme
from chuk_design_system.exporters import export_to_canva_css

theme = get_theme("tech")
css = export_to_canva_css(theme)
print(css)

Project structure highlights

The system defines colors, typography, spacing, and motion tokens along with themes such as Tech, Finance, Education, Lifestyle, Gaming, Business, and Minimal. It includes tooling to export tokens into Canva CSS, Remotion TS, PPTX, CSS, and W3C JSON.

Security and quality notes

The server is designed with type-safe models and comprehensive tests to ensure token integrity. Expect robust validation through Pydantic models and high test coverage.

Available tools

get_theme

Retrieve a theme object by name from the internal theme registry.

export_to_canva_css

Convert a theme into Canva-compatible CSS tokens.

export_to_remotion_ts

Generate Remotion TypeScript color tokens for use in media projects.

create_pptx_theme_dict

Create a Python dictionary suitable for python-pptx theme application.

export_to_css

Export a theme to standard CSS tokens.

export_to_w3c_json

Export design tokens as W3C Design Tokens JSON.

THEMES

Dictionary of available theme definitions.

ColorTokens

Access color palettes and semantic colors.

TypographyTokens

Access font families, text styles, and weights.

MotionTokens

Access motion durations, easing, and spring configs.