Build design systems that AI can generate from
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.
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.
bun install plaitedClaude Code:
/plugin marketplace add plaited/plaited
Other AI coding agents:
curl -fsSL https://raw.githubusercontent.com/plaited/plaited/main/scripts/install-workshop.sh | bashThe 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 │
└─────────────┴──────────────────┴─────────────────────────────────────┘
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 testPlaited 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
- Questions & Discussions: Plaited Discussions
- Bug Reports: GitHub Issues
ISC
See CONTRIBUTING.md for contribution guidelines.