@plaited/token-types

Design token types based on the [design token format](https://design-tokens.github.io/community-group/format/) for use with plaited token utility packages.


License
ISC
Install
npm install @plaited/token-types@5.6.2

Documentation

Plaited a Neuro-Symbolic Agentic Framework: AI-Assisted Design Systems, Generative UI Agents, Personalized Knowledge Worker Screens

Build design systems that AI can generate from

Build/Tests Bundle Size


Plaited is a design system toolkit with AI built in. Define your tokens, templates, and stories—the Workshop plugin handles the rest. No ML expertise required.

What You Can Build

AI-Assisted Design Systems — Your design tokens and patterns become the vocabulary AI uses to generate consistent UI.

Generative UI Agents — Train agents that compose templates from your design system, not from scratch.

Personalized Knowledge Worker Screens — Generate role-specific interfaces that follow your design guidelines.

Get Started

Step 1: Install the package

bun install plaited

Step 2: Add the Workshop plugin

Claude Code:

/plugin marketplace add plaited/plaited

Other AI coding agents:

curl -fsSL https://raw.githubusercontent.com/plaited/plaited/main/scripts/install-workshop.sh | bash

The installer detects your agent or lets you choose:

┌─────────────┬──────────────────┬─────────────────────────────────────┐
│ Agent       │ Directory        │ Supported Features                  │
├─────────────┼──────────────────┼─────────────────────────────────────┤
│ claude      │ .claude/         │ skills, commands, agents, hooks     │
│ cursor      │ .claude/         │ skills                              │
│ opencode    │ .opencode/       │ skills, commands, agents            │
│ amp         │ .agents/         │ skills, commands                    │
│ goose       │ .claude/         │ skills                              │
│ factory     │ .factory/        │ skills                              │
└─────────────┴──────────────────┴─────────────────────────────────────┘

Step 3: Start building

Describe what you want to build. The Workshop plugin handles the rest—discovering stories, starting the dev server, running tests, and iterating with visual feedback.

Manual CLI (without plugin)
# Start the dev server with hot reload
bun --hot plaited dev

# Run story tests
bun plaited test

Performance

Plaited is fast. See the js-framework-benchmark results.

How It Works (Behavioral Programming)

Behavioral programming aligns with how reinforcement learning agents reason about the world:

  • Stories as world model — Stories define valid UI states and transitions, serving as ground truth for both testing and agent training
  • Runtime constraints — bThreads block invalid actions before they execute, providing symbolic guardrails for neural generation
  • Natural reward signals — Story pass/fail + accessibility checks = clear training signal

This architecture enables the World Agent—a neuro-symbolic system where a neural policy proposes actions and behavioral constraints ensure correctness.

Package Exports

The vertical integration is reflected in the package structure:

Export Description
plaited Core behavioral programming — useBehavioral, useSignal, useWorker
plaited/ui UI framework — templates, bElement, createStyles
plaited/utils Utility functions — type guards, helpers
plaited/testing Test utilities — story factory, Playwright integration
plaited/workshop Discovery utilities — template and story collection
plaited/agent Agent utilities — world agent, tool definitions
import { useBehavioral, useSignal } from 'plaited'
import { bElement, createStyles } from 'plaited/ui'
import { story } from 'plaited/testing'

CLI (requires Bun):

  • bun plaited dev — Start dev server with story browser
  • bun plaited test — Run story-based tests with Playwright
Workshop Plugin Features

The Workshop plugin teaches your AI coding agent how to build with Plaited:

What it enables:

  • Generate templates, styles, and stories from descriptions
  • Scaffold design tokens and behavioral elements
  • Run tests with visual feedback (screenshots, videos)
  • Validate accessibility automatically
  • Train custom UI generation agents

How it works:

  • Skills auto-activate based on what you're doing
  • AI learns your project's patterns from existing code
  • Type verification catches errors before you run

Commands:

  • /validate-skill — Validate skill directories
  • /create-web-patterns-skill — Extract patterns from articles
  • /create-design-system-skill — Document your design system
Requirements

For full development (CLI, workshop, testing):

  • Bun >= v1.2.9

For core package only:

  • Node.js >= v22.6.0 (with --experimental-strip-types)
  • Or Bun >= v1.2.9

Getting Help

License

ISC


See CONTRIBUTING.md for contribution guidelines.