UX Workbench

CLI workbench for refining captured UI into atomic design patterns.

Use

npx ux-workbench init
npm run workbench

Commands

ux-workbench dev
ux-workbench build
ux-workbench init

User Space

The project owns:

AGENTS.md
patterns/
imports/
tokens/
docs/
workbench.config.ts

Pattern discovery is folder-driven. Add React pattern files as patterns/<level>/<...>/<name>/index.tsx; valid root levels are atoms, molecules, organisms, templates, and pages. The workbench infers the level, category, display name, and route id from the folder path and component export. Optional examples and pattern.dependencies exports can add sample props and dependency links.

The workbench engine runs from the package.

ux-workbench init prepopulates starter tokens, docs, imports folders, and sample atomic patterns across atoms, molecules, organisms, templates, and pages.

Agentation is bundled into capture routes so users can annotate rendered components and sync notes through the local Agentation MCP server. Disable it with agentation: false in workbench.config.ts. Agentation is a third-party dependency and keeps its own package license.

Release

First publish:

npm login
npm run build
npm pack --dry-run
npm publish
git push

Next releases:

npm run build
npm pack --dry-run
npm version patch
npm publish
git push --follow-tags

After publish, users can run:

npx ux-workbench@latest init my-workbench
cd my-workbench
npm install
npm run workbench

License: MIT.