@bestdesign/tcg-core

Validate AI-generated UI against your design system. Returns a compliance score, plain-English violations, and auto-corrected TSX.

Install

npm install @bestdesign/tcg-core

First call

import { createConstraintGraph, validate } from '@bestdesign/tcg-core'

const graph = await createConstraintGraph({
  spacing: { 1: '4px', 2: '8px', 3: '12px', 4: '16px' },
  colors: { primary: '#0066CC', text: '#1A1A1A' },
})

const result = await validate(
  `<div style={{ padding: '13px', color: '#0066cc' }}>Hi</div>`,
  graph,
)

console.log(result.score)              // 50
console.log(result.violations[0].message)
// "padding is 13px — your design system uses 4 (16px). Auto-corrected."
console.log(result.corrected)
// `<div style={{ padding: '16px', color: '#0066CC' }}>Hi</div>`

API

createConstraintGraph(tokens)              // build the graph
validate(tsx, graph)                       // → { score, violations, corrected }
addNode(graph, tsx)                        // ingest as tracked node
exportConstraints(graph, format)           // 'json' | 'design-md' | 'claude-context'
generateTsx(graph, nodeId?)                // project graph back to TSX

Full types: see tcg-core.d.ts — every exported function is typed.

Inputs accepted by createConstraintGraph

// 1. JSON tokens object
await createConstraintGraph({ spacing: { 1: '4px' }, colors: {...} })

// 2. DESIGN.md string (Stitch / Claude Design export)
await createConstraintGraph(designMdString)

// 3. File path (Node only)
await createConstraintGraph('./tokens.json')

Status

0.1.0 ships pattern-matching validation — fast and useful for the 80% case (inline pixel values, hex colours, Tailwind spacing classes). 0.2 will add AST-level TSX parsing for prop-level checks and template-literal coverage.

The WASM module ships inside the package (~1.1 MB). No network calls, no telemetry.

MIT licensed. Bug reports + PRs welcome.