onsystem

概要

• onsystemは、AIコーディングエージェントが学習データ由来のUIではなく、プロジェクト固有のコンポーネントやトークンに基づいてReactコードを書くためのチェックツールです。
• ソースコードからコンポーネント、props、バリエーション、デザイントークンを読み取り、エージェントにデザインシステムの情報を提供します。
• Claude Code、Cursor、VS Code、Codexなどの開発環境に対応し、MCPサーバーや各種プラグインとして導入できます。

主な機能と検証結果

• ファイル編集直後やプルリクエスト時に、色、要素、APIの不整合を検出し、問題の修正方法まで示します。
• MCPサーバー、Claude Codeプラグイン、ESLintプラグイン、GitHub Actionを組み合わせ、開発中からCIまで同じルールで検査できます。
• 6モデル・1,200回のベンチマークでは、独自チェックでデザインシステム関連エラーが1回あたり0.85件から0件に減少し、外部リンターでも検出数が4.97件から2.64件になりました。

こんな人におすすめ

• AIエージェントを使ったUI開発で、独自コンポーネントやデザイントークンが無視される問題を減らしたいチームに適しています。
• Reactプロジェクトのコードレビューやプルリクエストで、デザインシステム違反を自動的に検出したい開発者に向いています。
• 既存の開発環境やCIにMCP、ESLint、GitHub Actionを組み込み、MITライセンスのオープンソースツールを試したい人に便利です。