@lythos/design-system

Schema validator and adapter for SVG design tokens. Validates external design skill output and normalizes it into a standard schema for SVG theming.

This tool does NOT invent colors or fonts. It validates and adapts. The actual design values should come from a professional design skill.

Usage

# No installation required — bunx runs it directly
bunx @lythos/design-system validate ./tokens.json
bunx @lythos/design-system adapt ./external.json "Theme Name"

Commands

validate <tokens.json>

Validate a design tokens file against the schema.

bunx @lythos/design-system validate tokens.json
# ✅ Valid design tokens schema

adapt <external.json> <name>

Convert output from an external design skill into the standard schema. Handles common field name variations (colors vs colour, borderRadius vs radius, etc.). Outputs normalized JSON to stdout.

bunx @lythos/design-system adapt raw-theme.json "My Theme" > tokens.json

schema

Output the schema definition for reference.

bunx @lythos/design-system schema

Schema

The design tokens schema maps to SVG attributes:

| Token | SVG Target | |-------|-----------| | colors.primary | stroke on node borders | | colors.surface | fill on node rects | | colors.background | Background / cluster fill | | colors.text | Text fill | | typography.fontFamily | font-family on text |

Full schema: bunx @lythos/design-system schema

Swappable Design Skill

Replace with any design skill that outputs compatible tokens:

# skill-deck.toml
[tool]
skills = [
  # "design-system",        # ← this adapter
  "acme-design-system",    # ← your preferred design skill
]

As long as the replacement outputs the same JSON schema, mermaid-render consumes it without modification.

Agent Skill

For agent-facing instructions (SVG rewriting rules, schema mapping, sacred layout attributes), see the accompanying SKILL.md.