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 plaitedInstall skills for your AI coding agent:
curl -fsSL https://raw.githubusercontent.com/plaited/skills-installer/main/install.sh | bash -s -- --agent claude --project development-skillsSupported agents:
| Agent | Directory | Features |
|---|---|---|
| claude | .claude/ |
skills, commands |
| cursor | .claude/ |
skills |
| copilot | .github/ |
skills |
| opencode | .opencode/ |
skills, commands |
| amp | .agents/ |
skills, commands |
| goose | .claude/ |
skills |
| factory | .factory/ |
skills |
Replace claude with your agent name. Skills include TypeScript LSP tools, documentation helpers, and development rules scaffolding.
Describe what you want to build. The skills teach your AI agent how to work with Plaited—discovering stories, starting the dev server, running tests, and iterating with visual feedback.
Manual CLI
# 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 browserbun plaited test— Run story-based tests with Playwright
Development Skills
Skills from @plaited/development-skills teach 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
- Validate accessibility automatically
- Type verification via TypeScript LSP integration
How it works:
- Skills auto-activate based on what you're doing
- AI learns your project's patterns from existing code
- LSP tools catch type errors before you run
Available commands:
/lsp-hover— Get type information at a position/lsp-find— Search for symbols across workspace/lsp-refs— Find all references to a symbol/lsp-analyze— Batch analysis of a file/validate-skill— Validate skill directories/scaffold-rules— Scaffold development rules for AI agents
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.