style-system

What it does

style-system is a local stdio server from the AI Code Toolkit monorepo by AgiFlow. It reads the design system in a frontend workspace so a coding agent writes styles and markup from what the project already has. It lists the themes the project defines, pulls the colour, spacing, typography and effect classes out of the theme CSS, finds shared and app-specific components through their Storybook stories, and renders a component story to a screenshot so the agent can look at the result.

Each app is set up in its own project.json, under a style-system key: the style type (tailwind or shadcn), the theme provider, and optionally the theme CSS path, extra CSS files, a wrapper component for previews and the Storybook tags that mark shared components. Workspace defaults and custom services go in toolkit.yaml. Teams with their own CSS setup or bundler can extend BaseCSSClassesService or BaseBundlerService and point toolkit.yaml at that file.

From the tool code at 0.2.1: get_component_visual takes componentName and appPath, renders the "Playground" story unless storyName is given, renders in dark mode by default (darkMode), and crops to #root unless a selector is passed. It saves the screenshot as an image file and returns that file's path with review instructions, not the image inline.

What it needs

Node.js 22.12 or newer, run with npx. A frontend workspace with a project.json carrying a style-system block (type and themeProvider are required) and components with Storybook stories. get_component_visual also needs Google Chrome installed, or Playwright browsers (npx playwright install chromium).

Limits

Speaks stdio only; there is no HTTP transport. Only tailwind and shadcn style types are built in; other setups need a custom service written in TypeScript. The repository's compatibility notes say published 0.2.0 ignored some list_themes and list_shared_components filter arguments, with the fix only in source at that time. The --dev flag writes startup messages to standard output, so its makers advise against it when running as an MCP server.

Who it suits

Suits teams with a Tailwind or shadcn frontend and Storybook stories who want an agent to reuse existing tokens and components instead of inventing new ones. It needs per-app configuration before it is useful, so a project without a design system or without stories gains little. It is local and mostly read-only, but rendering previews runs the workspace's own code in a browser, so pick it for repositories you trust. It is a community project, not from Tailwind, shadcn or Storybook.