#What is onsystem?

onsystem is an open-source design system linting tool and MCP server designed to prevent AI coding agents from generating inconsistent React interfaces. Created by Diogo Esteves, it analyzes existing design system components, TypeScript definitions, design tokens, and supported variants to identify errors in AI-generated UI code. Instead of allowing coding assistants to introduce arbitrary Tailwind colors, incorrect component APIs, or unsupported properties, onsystem checks the generated code against the project's actual design system and suggests appropriate corrections. It works with TypeScript, React, Tailwind CSS, shadcn/ui, Claude Code, and Cursor, making it particularly useful for frontend developers, design system maintainers, engineering teams, and organizations using AI-assisted development.

#Features ⚡

• Design System Validation: Checks generated UI code against existing design system components and conventions.

• AI Agent Guardrails: Helps coding agents avoid inventing components, properties, and design variants.

• MCP Server Integration: Provides design system context and validation capabilities to compatible AI coding agents.

• Component Validation: Identifies unknown components, incorrect component parts, and invalid references.

• Prop and Variant Checking: Flags unsupported properties and variant values.

• Design Token Enforcement: Detects hardcoded colors and encourages the use of approved design tokens.

• Spacing and Radius Validation: Identifies arbitrary spacing and border-radius values that conflict with established design scales.

• Accessibility Checks: Flags icon-only buttons without accessible names.

• Actionable Fix Suggestions: Reports problems with rule identifiers, source locations, and recommended corrections.

• GitHub Actions Integration: Automatically checks pull requests for design system violations.

• CLI Support: Run design system checks locally or as part of automated development workflows.

• Source Code Analysis: Uses TypeScript to understand actual exported components and supported APIs.

• Monorepo Support: Allows design system rules to be shared across multiple applications.

• Interactive Playground: Test UI code and review validation results through the project's website.

#Pro and cons

Pro ✅:

• Free and open-source under the MIT license.

• Helps maintain consistent UI across AI-generated code.

• Reduces manual reviews of design system violations.

• Integrates into AI-assisted development workflows.

• Supports React, TypeScript, Tailwind CSS, and shadcn/ui.

• Detects issues that ordinary TypeScript checks may miss.

• Provides actionable suggestions rather than generic warnings.

• Supports local development and CI/CD pipelines.

• Particularly useful for teams maintaining shared design systems.

Cons ⚠️:

• Primarily focused on React and JSX-based development.

• Requires an existing design system to deliver its full value.

• May generate false positives for intentionally customized styling.

• Does not replace visual design reviews or accessibility testing.

• Some configuration may be necessary for complex design system packages.

• Not a UI component library or visual website builder.

#Included Components/Templates

onsystem is a developer tool rather than a traditional UI component library. It provides linting rules, AI integrations, configuration utilities, and automation tools.

• Design System Linter: Validates React components, props, variants, tokens, and styling conventions.

• MCP Server: Exposes design system information and validation tools to AI coding assistants.

• Claude Code Plugin: Includes an MCP server, agent skill, and automatic validation hook.

• Cursor Integration: Connects AI-assisted coding workflows to design system validation.

• VS Code Integration: Supports development workflows through MCP configuration.

• Codex Plugin: Provides design system checks for agent-generated code changes.

• GitHub Action: Checks pull requests for new design system violations.

• ESLint Plugin: Integrates onsystem's rules into existing linting workflows.

• CLI Utilities: Includes inspect, check, init, and export capabilities.

• Design Token Export: Supports stylesheet tokens, DTCG token files, and DESIGN.md documentation.

• Interactive Playground: Browser-based environment for testing code against design system rules.

• Documentation and Examples: Includes setup guides, rule references, configuration examples, and benchmark results.

#Pricing 💸

• Free: onsystem is available as an open-source developer tool.

• MIT License: Allows commercial use, modification, and redistribution under the license conditions.

• CLI and MCP Server: Available through the public npm package without a subscription.

• GitHub Action: Publicly available for integration into CI workflows; normal GitHub Actions usage charges may apply.

• No Confirmed Pro Tier: No paid Pro, Team, or Enterprise subscription was identified in the official documentation.

• Local Execution: Core validation runs locally without requiring paid AI model API calls.

#Integrations 🧰

• React: Analyzes JSX and TSX component usage.

• TypeScript: Reads component definitions and validates component APIs.

• Tailwind CSS: Checks colors, spacing, and styling conventions across Tailwind v3 and v4.

• shadcn/ui: Supports shadcn-based component systems and applications.

• Claude Code: MCP, skills, and automatic validation hooks.

• Cursor: MCP-based development integration.

• VS Code: AI-assisted development through supported MCP workflows.

• OpenAI Codex: Plugin and agent-based validation support.

• GitHub Copilot CLI: Compatible AI agent integration.

• GitHub Actions: Automated validation during pull requests.

• ESLint: Linting integration for established development workflows.

• Model Context Protocol (MCP): Connects design system validation to compatible AI agents.

• class-variance-authority and tailwind-variants: Analyzes component variant definitions.

• DTCG Design Tokens: Supports standardized design token files.